ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

Homeフォトショップ講座 > Photoshopでカレンダーアイコンを作る方法

Photoshopでカレンダーアイコンを作る方法

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

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

Step1:アイコンの基礎を作る

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

アイコンの基礎

ドロップシャドウ



Step2:見出しバーを作る

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

見出しバー

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

見出しバー

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

見出しバー

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

見出しバー

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

レイヤー効果

見出しバー





Step3:月と年を書く

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

月と年を書く

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

ドロップシャドウ

レイヤー効果

月と年を書く

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

月と年を書く

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

月と年を書く



Step4:日付のボックスを作る

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

月と年を書く

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

月と年を書く

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

月と年を書く

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

月と年を書く



Step5:完成

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

完成



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



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング