ウェブ学のすすめ

Study of Web Design & Programing

アップルのiCloudアイコンをPhotoshopで描くチュートリアル

PhotoshopでアップルのiCloudアイコンを作ってみました。

↓参考にしたサイト
How to Draw Apple iCloud Icon – Photoshop Tutorial

使用したソフトPhotoshop CS6(windows版)

ステップ 1 アイコンのベース

↓幅512px、高さ512pxのサイズで新規作成。

↓角丸長方形ツールを選択

↓半径75px、大きさは任意で(今回は480×480pxに設定)

↓カラーを「#5d5d5d」に変更

↓「レイヤー」>「レイヤースタイル」>「グラデーションオーバーレイ」

↓不透明度を「76%」に指定

ステップ 2 アイコンのベース(内側)

ステップ 1で作成したシェイプレイヤーを「Ctrl+J」で複製。

↓自由変形「Ctrl+T」で幅、高さを98%にする

↓シャドウ(内側)。不透明度を40%、距離・サイズを2pxにする

↓グラデーションオーバーレイ。描画モード「ハードモード」、スタイル「角度」

↓グラデーションエディターを開き、グラデーションを指定

※グラデーション一例

  • 0%:#8e8e8e
  • 5%:#d8d8d8
  • 10%:#8e8e8e
  • 15%:#d8d8d8
  • 20%:#8e8e8e
  • 25%:#8e8e8e
  • 30%:#a5a4a4
  • 35%:#8e8e8e
  • 40%:#8e8e8e
  • 45%:#d8d8d8
  • 50%:#8e8e8e
  • 55%:#8e8e8e
  • 65%:#d8d8d8
  • 70%:#8e8e8e
  • 75%:#8e8e8e
  • 80%:#a5a4a4
  • 85%:#d8d8d8
  • 90%:#8e8e8e
  • 95%:#d8d8d8
  • 100%:#8e8e8e

ステップ 3 グラデーション

↓新規レイヤーを作り、グラデーション「黒、白」、スタイル「円形」

↓グラデーションツールでグラデーションをかける位置を調整

↓ステップ 2で作ったレイヤー(base inner)を「Ctrl+alt」で現在のレイヤー(lights up)にドラッグ&ドロップ

↓ブレンドモードを「スクリーン」に変更

ステップ 4 大きい雲

↓「半径75px」の角丸長方形を作成。カラーは「#2a2a2a

↓楕円形ツールで小さい円を描く

↓楕円形ツールで大きめの円を描く

↓パスを選択

↓シェイプを結合

↓シャドウ(内側)。

  • 不透明度:61%
  • 距離:8px
  • サイズ:8px

↓べベルとエンボス

  • 方向:下へ
  • サイズ:3px
  • 不透明度(ハイライト):100%
  • 不透明度(シャドウ):37%

↓境界線

  • サイズ:2px
  • 位置:内側

ステップ 5 小さい雲

↓ステップ 4で作った雲レイヤーを「Ctrl+J」で複製し、レイヤースタイルを削除。「Ctrl+T」で89%に変形

↓カラーを「#5d5d5d」に変更し、シェイプの位置を調整する

↓ドロップシャドウ

  • 距離:8px
  • サイズ:8px

↓べベルとエンボス

  • サイズ:3px

↓グラデーションオーバーレイ。ステップ 2と同様に

ステップ 6 金属感を出す

↓新規レイヤーを作り、「編集」>「塗りつぶし」でブラックに塗りつぶす

↓「フィルター」>「ノイズ」>「ノイズを加える」

↓量「30%」、分布方法「均等に分布」、グレースケールノイズにチェックする

↓「フィルター」>「ぼかし」>「ぼかし(放射状)」

↓量「75%」、方法「回転」、画質「高い」

ステップ 7 金属感を出す(続き)

↓「イメージ」>「色調補正」>「レベル補正」

↓出力レベルを「27」からに設定

↓ステップ 1で作ったレイヤー(base)を「Ctrl+alt」で現在のレイヤーにドラッグ&ドロップ

↓パス選択ツールを選び、ステップ 4で作った雲のパスを選択。「Ctrl+C」でコピーし、ベクトルマスクに「Ctrl+V」でペースト。さらに「前面シェイプを削除」する。

↓ステップ 5で作った小さい雲もコピー&ペーストし、「シェイプを結合

↓ブレンドモードを「スクリーン」に変更

ステップ 8 シャドウ

↓新規レイヤーを作り、すべてのレイヤーの一番後ろに配置。楕円形ツールでアイコンの下に楕円形を作成。ブラックで塗りつぶす。

↓「フィルター」>「ぼかし」>「ぼかし(ガウス)」

↓半径を「5.9」pixelに

↓「Ctrl+J」で複製し、今度は半径を「10」pixelのぼかしを加える

完成!!

↓文字を入れたりして独自のアイコンを作ることもできます。