Photoshop によるデザイン

この課題は、Photoshop で レーヤー、描画色、背景色そして照明効果について練習するものです。同時にパレットやツールバー、ツールボックスの場所と内容についても覚えてください。

    以下は ”Web Designing” 2002.12. 「3Dグラフィック表現をロゴデザインに取り入れる」(中沢英明氏)を参考にしたものです。(手順は若干変えています)

”DESIGN”という文字を球の表面に貼り付けたように見えるロゴを作成します。

(注意)

操作のやり直しは Ctrl+Z、あるいは ヒストリーパレットで取り消したい操作を選択して、マウス右クリックで削除を選択 

範囲指定の取り消しは Ctrl+D

 

<完成立体ロゴ>

<作成手順>

1. Photoshopを起動し、 ファイル → 新規 で新しいカンバスを作る

ファイル名は何でもよい。サイズは任意で良いが、B5にした。モードはRGB、内容は「透明」

もし、縦長のB5だったら、 イメージ → カンバスの回転 → 90度回転

2. 背景になる「レイヤー」を作る

    レイヤー → 新規(W) → レイヤー(L)

  これを繰り返し、レイヤーを2つ作る

3. 画面右下のレイヤーパレット内の2つのレイヤーサムネイルのうち、下方のサムネイルをクリック反転(選択)する 

4. 下側のレイヤーを白の背景にする(ツールボックスの背景色を白にしておく)

  レイヤー → 新規(W) → レイヤーから背景へ(B)

5. 上側のレイヤーを選択(レイヤーパレットで上になっているほうのサムネイルをクリック)

    (このとき、下側のレイヤーの「目」の印をクリックし非表示にしておく)

6. 「赤い球」を描く

    カラーパレットで赤を選ぶ(ツールボックスの描画色が赤になる)

  ツールボックスの「T(文字ツール)」の下にあるボタンから「楕円選択ツール」を選ぶ

    shift キーを押しながらマウスをドラッグさせると内部が赤の円が描かれる

7. 文字を描く

    ツールパレットの文字ツール(T)をクリックする

    (描画色は白にしておく)

    書体(例:Century Gothic)、太さ(例: Bold)、フォントサイズ(例:92 pt)を指定

    円の中心から少しずらして文字を書く

    (このとき赤い円のレイヤーの上に自動的に新しいレイヤーが作られる)

         

8. レイヤーを結合する

    上のレイヤーパレットのように、文字と赤い円のレイヤーを表示状態にして(他のレイヤーの「目」をクリックして表示しないようにする)から、 

      レイヤー  → 表示レイヤーを結合

* 他の球、文字についても、その都度同様に結合する

9. 変形する

  選択範囲(S) → 選択範囲を読み込む(L) → OK

    フィルタ  →  変形  →  球面  →  OK 

    これで下図のように変形される

   

10. 照明効果を加える

    ツールボックス最上部左から楕円形選択ツールを選び、円周に沿って範囲を選択

    (範囲が多少ずれても、楕円形選択ツールの右にある移動ツールと、選択範囲  →  選択範囲を 変形  で修正できる) 

    フィルタ   →  描画  →  照明効果 

     楕円の軸をスライドさせ、照明の方向を調節する

   

11. 同様にして、新たにレイヤーを作り、他の色の円を描き、文字を載せ、変形し、照明効果を加える。

 

   

12. ハイライトを付加する 

    最上層にレイヤーを追加し、レイヤーパレットのレイヤーモードを「通常」から「スクリーン」に変える。

    ツールボックスの描画色を白、背景色を黒にする。

    ハイライトを付加する球の範囲を楕円形選択ツールで範囲指定し、その後、ツールボックス「T」の2つ上にあるグラデーションボタンを押し、画面上部のツールバーから「円形グラデーション」を選ぶ。

    範囲指定した球のハイライトをつけたい部分にポインターを当て「小さく」ドラッグする。

    これを全ての球について行う。

    別の角度からのハイライトをつけるには再度レイヤーを作成し、同様のプロセスを繰り返す。

13. 影をつける

    描画色を黒にし、それぞれの球のレイヤーの下にレーヤーを設け(球のレイヤーは非表示)楕円形ツールで影をイメージした黒い横長の楕円を描き     

        フィルタ  →  ぼかし  

    で影を作る。これを全ての球について行う。(下図では赤、青、緑の球を非表示にしてある)

  

 

14. 保存

    完成したら、Photoshop 形式のファイルと、Web用の保存をしておこう。

  Photoshop の psd 形式なら特に指定事項はないが、Web用については、画質、画像サイズ、などを設定すること。