Browsing in デザイン－Design

10月

【Photoshop】フォントのはなし

takahashi in デザイン－Design

こんばんは。
パソコンスクールISA渋谷校のtakahashiです。

今回はPhotoshopでゴールドな文字を作りたいと思いますv(≧∇≦)v イエイ！！

まずは、文字を書きましょう。
フォントの色は黒にしておきます。

次に文字レイヤーをコピーします。

コピーしたレイヤーに【レイヤー効果】の設定をします。

★一つ目　光彩(内側）★

★2つ目　ベベルとエンボス★

★3つ目　グラデーションオーバーレイ★
グラデーションについては#f6de90　から　#b0801e

★4つ目　境界線★
グラデーションについては#997225　から　#64491e

上記を設定するとこんな感じになりますね(￣∀￣)

プラスで、ちょっと左上にずらします。
（あれ？これってドロップシャドウで設定すればいいのでは・・・
と作り終えてから思ったのは秘密です・・・。）

これで完成(*´∀｀*)
金色的なものを作りたいときにお勧めです。

皆さんもお試しください(*￣∇￣)ノ

パソコンスクールISA渋谷校　takahashi

no comment

11月

デザインtips – 8．Illustratorのスポイトツール

oikawa in デザイン－Design

本日はIllustratorのスポイトツールで画面上のどの色でも
吸い取ることができる方法をご紹介します。
なおOS：Windows、バージョン：CS2で行なっています。

まず色を設定したいオブジェクトを選択しておいて
スポイトツールを選択します。

デスクトップのIllustratorアイコンのオレンジ色を吸い取ってみます。
Shiftキー＋マウス左ボタンを押したままドラッグをします。
ドラッグ開始地点はIllustratorのドキュメント上からです。

吸い取りたい色の上でマウス左ボタンを離すと下図のように
見事に色を適用することができました。

これなら拾いたい色のある画像を配置しなくても大丈夫ですね。
例えばインターネットで気に入った色があった時など便利じゃないでしょうか。

パソコンスクールISA渋谷校/INOUE

no comment

11月

デザインtips – 7．display: table-cellを使う

oikawa in デザイン－Design

こんにちは。

いきなりですが、例えば下図のような左右のカラムが固定で、

中央のカラムが可変というような3カラムのレイアウトを作りたい場合、通常CSSではfloatを使います。

ただしカラムレイアウトはdisplay: table-cellでも表現できます。
display: table-cellとは、テーブルの構造を表現できるCSSプロパティで
IE8から対応しています。今回はこの2つの方法を比較してみたいと思います。

まず最初にfloatで3カラムレイアウトを表現する場合、下記のようなHTMLとCSSになります。

【HTML】
<div id=”warrper”>
<div id=”l_navi”>ナビゲーション</div>
<div id=”content”>
<div id=”content_inner”>コンテンツ</div>
</div>
<div id=”r_side”>右サイドバー</div>
</div>

【CSS】
#l_navi {
float: left;
width: 200px;
margin-right: -200px;
background-color: #ff0000;
}

#content {
float: left;
width: 100%;
}

#content_inner {
margin: 0 200px;
background-color: #ffffff;
}

#r_side{
float: left;
width: 200px;
margin-left: -200px;
background-color: #009900;
}

上記のようにマイナスマージンを使ったり、真ん中のカラムをdiv要素で余分に囲ったりなど、
結構複雑な記述になります。floatを使っているので、clearも必要になります。
一方、display: table-cellで3カラムレイアウトを表現する場合、下記のようなHTMLとCSSになります。

【HTML】
<div id=”warrper”>
<div id=”l_navi”>ナビゲーション</div>
<div id=”content”>コンテンツ</div>
<div id=”sidebar”>右サイドバー</div>
</div>

【CSS】
#warrper {
width: 100%;
display: table;
}

#l_navi, #content, #sidebar {
display: table-cell;
}

#l_navi {
width: 200px;
background-color: #ff0000;
}

#content {
background-color: #ffffff;
}

#r_side {
width: 200px;
background-color: #009900;
}

CSSソースの長さ自体は大して変わりませんが、非常にシンプルな記述になります。
floatを使っている場合に必要だったclearも不要です。

いままではfloatを使って行っていたカラムレイアウトが、このdisplay: table-cellを
使うことによって、よりシンプルに表現できます。
その他、display: table-cellは文字通りtableですので、
カラム内での縦方向の位置vertical-alignも思った通りに作用してくれます。

しかし、残念なのはこのdisplay:table-cell、IE8からしか対応していません。
FirefoxやSafariなど、IE以外の主要なブラウザはこのdisplay: table-cellに
ちゃんと対応しているのですが、現在でもIE6を使っているユーザーが大半なので・・・惜しいですね。

パソコンスクールISA渋谷校/INOUE

4 comments

10月