スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

Homeフォトショップ講座 > Photoshopでノートアプリのアイコンを作成する方法

Photoshopでノートアプリのアイコンを作成する方法

投稿日:2012年11月6日   レベル:初心者    ソフトウェア:Photoshop

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



Step1:はじめに

下記の設定で新規ドキュメントを作成します。

ps_21998_01.jpg

背景レイヤーをダブルクリックしてロックを解除してください。
次に、描画オプションを開いて、背景に下記の設定をしてください。

ps_21998_02.jpg

ps_21998_03.jpg


Step2:長方形の描画

角丸長方形ツール(U)を選択して半径を30pxに設定します。(正方形にするために)
シフトキーを押しながら、白色でノートアプリのメインとなるシェイプを描いてください。そのシェイプレイヤーをダブルクリックしてレイヤー効果を開き、下記のとおり設定します。

ps_21998_04.jpg

ps_21998_05.jpg

ps_21998_06.jpg

そのシェイプのレイヤーを「新規レイヤーを作成」ボタンにドラッグしてコピーしてください。
コピーしたレイヤー上でCtrl+Tを押して自由変形ツールを立ち上げ、下の真ん中のポイントを少しだけ上に引っ張ってください。
紙が重なっているように見えるように、この作業を何度か繰り返します。

ps_21998_07.jpg





Step3:紙のダメージ加工

Ctrlキーを押しながら一番上の白い四角のレイヤーのサムネイル(下記の丸で囲った部分)をクリックして選択範囲を作成します。

ps_21998_08.jpg

ps_21998_09.jpg

シェイプがアクティブになったまま新規レイヤーを2つ作成してください。
その内の一つのレイヤー上で、紙のテクスチャブラシのどれかを選んで、明るいグレーを使って一度クリックします。
次に、コーヒーのシミブラシを選んで、もう一方のレイヤー上の2か所にシミをつけます。

ps_21998_10.jpg

白い正方形レイヤーの一番上のものを複製して、作成した2つのレイヤーの上にドラッグしてください。
ダブルクリックしてレイヤー効果を開き、グラデーションオーバーレイと境界線のオプションを削除してドロップシャドウのオプションを下記のとおり設定します。
次に、「油彩(中)-輪郭のにじみ」ブラシを使って、紙を千切った効果を付けます。

ps_21998_11.jpg

ps_21998_12.jpg


Step4:ディティールの追加

ステップ7を繰り返して紙を千切った効果のレイヤーをもう一つ作成します。

ps_21998_13.jpg

ここでノートの結合部分を作成します。
ステップ5を繰り返して選択範囲をアクティブにします。
長方形選択ツールを選んで、コントロールキーを押しながら下の方の部分をクリックして、下記のようなシェイプが残るようにしてください。

ps_21998_14.jpg

新規レイヤーを作成し、先ほど残ったシェイプを白に塗って、そのレイヤーをコピーしてください。
最初のレイヤーのレイヤー効果を開き、下記のとおり設定してください。

ps_21998_15.jpg

ps_21998_16.jpg

2番目のレイヤー上で描画モードを乗算にして、レイヤー効果を開いて、シャドウ(内側)とパターンオーバーレイを設定して、繊細な効果を付けます。

ps_21998_17.jpg

ps_21998_18.jpg

ラインツール(1px)を使って、下記の色で罫線を引いてください。
シフトキーを押しながら引くと、直線を引くことが出来ます。

ps_21998_19.jpg

結合部分に切り取り線を配置するため、テキストツール(T)を使って下記の設定で「-(マイナス)」の文字を端から端までたくさん書いてください。
仕上げにダブルクリックしてレイヤー効果を開いて、ドロップシャドウの効果を加えます。

ps_21998_20.jpg

ps_21998_21.jpg


Step5:完成

最後に、ノートアイコンに何か文字を書きます。
ダブルクリックしてレイヤー効果を開いてドロップシャドウとシャドウ(内側)を設定して効果を追加してください。

ps_21998_22.jpg

ps_21998_23.jpg

ps_21998_24.jpg

ps_21998_25.jpg

最終作品

ps_21998_26.jpg


引用:Web Design Library 著者:designrfix 翻訳:幕澤



スポンサードリンク

コメント

ランダム記事5件

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