投稿日：2009年12月18日　　　レベル：初心者　　　　ソフトウェア：

---

このチュートリアルでは、Photoshopでカレンダーアイコンを作る方法を紹介します。

• Step1 ： アイコンの基礎を作る
• Step2 ： 見出しバーを作る
• Step3 ： 月と年を書く
• Step4 ： 日付のボックスを作る
• Step5 ： 完成

シンプルなステップでアイコンの基礎を作ります。
ドロップシャドウや基礎の設定については次の通りです。

次に、月と年を入れるバーを作ります。
ここでは次のように「#ff5400」を使いました。
同じようにしたい場合は、使ってみてください。

レイヤーを複製して上に重ね、色を「#ffc000」にします。

65ピクセル程度の消しゴムツールで、上にあるレイヤー画像のバーの下半分を消します。
2,3ピクセルほどレイヤーを下に移動させると、次のようになります。

新規レイヤーを作成したら、上にあるレイヤーの一番上へ、1ピクセルの鉛筆ツールで線を引きます。

レイヤースタイルでブレンドオプションを次のように設定します。

テキストツールで表示させたい月と年を書きます。
ここでは「Arial Narrow」のフォントを12ポイントで使いました。
次のようになりました。

テキストにレイヤースタイルを設定します。
ブレンドオプションとドロップシャドウの設定を変更します。

日付を入れるエリアが地味なので、深みを加えます。
「#e3e3e3」で背景色を入れると次のようになります。

185ピクセル程度の消しゴムツールを使って、日付のエリアの上側を消します。

日付のボックスを作りますが、まだ正確な数にする必要はなく、見た目をオフィシャルな感じにして、あとから数を合わせます。
カレンダー内に1ピクセルの境界線でカラムを作ります。
カラムの色を「#e8e8e8」に、境界線の色を「#c0bbbb」にします。

長方形選択ツールを使って長方形から小さい四角形の箱を切り出します。

背景を白にしてレイヤーを4回複製します。
最初に作ったものと合わせて、6カラムになります。

もう少し見た目を良くするために、箱の一つにオレンジ色のカバーを入れて、外の線を赤っぽいオレンジ色にします。
ここでは背景色に「#ffab6c」、境界線に「#ff6200」を使ってみました。

基本的にはこれで完了です。
サイズを小さくして、見た目がどのくらい変わるかを試してもよいでしょう。
私の場合は、次のようになりました。

引用:Web Design Library　著者:www.pstut.info/　翻訳：菊池

スポンサードリンク