スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

Homeフォトショップ講座 > Photoshopで黒板を作る方法

Photoshopで黒板を作る方法

投稿日:2011年11月01日   レベル:初心者    ソフトウェア:PhotoShop

このチュートリアルではPhotoshopで黒板を作る方法を紹介します。

Step1.はじめに

今回は、下の図のような黒板の画像の作り方を紹介します。
黒板、縁にある板、チョークで書かれた文字を作成します。

完成図



Step2.黒板の作成

大きさは400px×300pxで、透明な背景の新しいドキュメントを作成します。

ツールボックスから塗りつぶしツール塗りつぶしツールを選び、深緑(#375646)で画面を塗りつぶします。
その後、新しくレイヤーを作ります。

塗りつぶしツールで色を塗る

背景色を#375646に、前景色を#486c59に設定します。
すると、下の図のようになります。

色を設定する

この状態で「フィルター」−「描画」−「雲模様」を選択します。

雲模様フィルターを適用する



Step3.黒板の質感を上げる

「フィルター」−「シャープ」−「シャープ」と選択して、雲をよりするどくします。
レイヤーの描画モードを「オーバーレイ」にし、不透明度を33%に下げます。

シャープフィルターを適用する

フィルターを適用すると、下の画像のようになります。

雲模様フィルターを適用する

新しいレイヤーを作り、白(#ffffff)か黒(#000000)で塗りつぶします。
「フィルター」−「ノイズ」−「ノイズを加える」を選択します。
量は177%に、分布方法は「均等に分布」に設定し、グレースケールノイズにチェックを入れます。
その後、このレイヤーの描画モードをオーバーレイにし、不透明度を3%にします。

雲模様フィルターを適用する



Step4.黒板の縁の作成

次に黒板の縁を作成します。
新しいレイヤーを作り、#b5a085で塗りつぶします。
その後、レイヤーの「塗り」を0%にします。

「レイヤー」−「レイヤースタイル」−「境界線」を選択します。
色を#b5a085、サイズを8px、位置を内側に設定します。

新しいレイヤーを縁のレイヤーの上に作ります。
「ビュー」−「ズームイン」を選び、1pxを選択できる程度まで拡大します。
長方形選択ツール長方形選択ツールを選択し、縁のある部分だけを選択していきます。
「Shift」キーを押しながらだと、前の選択範囲を残したまま新しい選択範囲を追加できます。

縁を選択し終えたら、選択範囲の上で右クリックをし、「境界線を描く」を選びます。
サイズを1、色を#8f6f54、位置を外側にして、残りはデフォルトのままにします。

「境界線を描く」を選ぶ



Step5.縁の質感の調整

縁が木材に見えるように、もう少し深みを加えます。

新しいレイヤーを作り、白で塗りつぶします。
レイヤーの「塗り」を0%にします。
「レイヤー」−「レイヤースタイル」−「レイヤー効果」を選択します。

光彩(内側)の設定

光彩(内側)の設定をする

シャドウ(内側)の設定

シャドウ(内側)の設定をする



Step6.テキストの追加

次はテキストとチョーク汚れを追加します。

チョークフォントで黒板に好きな文字を書きます。
文字ツール文字ツールの設定は、サイズは48で、アンチエイリアスはシャープにします。



Step7.チョーク汚れの追加

テキストレイヤーを複製し、「レイヤー」−「ラスタライズ」−「テキスト」を選んでラスタライズします。
「フィルター」−「ぼかし」−「ぼかし(移動)」を選択します。
角度を69、距離を67にしてOKをクリックします。
「フィルター」−「ぼかし」−「ぼかし(移動)」をもう一度選択します。
角度を13、距離を97にしてOKをクリックします。

このレイヤーの不透明度を65%程度にします。
また、黒板消しで消したように、消しゴムツール消しゴムツールを使って消します。

黒板消しで消したような雰囲気を消しゴムで再現する



Step8.影をつける

ブラシツールを選択し、ブラシツールブラシツールの形状リストから、大きさが27pxのソフトブラシを選択します。
色を黒(#000000)にし、黒板に影をつけるように、左上や下側の隅を塗っていきます。



Step9.完成

これで完成です。

完成



引用:Web Design Library 著者:avivadirectory.com 翻訳:なかけん



スポンサードリンク

コメント

ランダム記事5件

2012年4月の人気記事ランキング