デザイン経験ゼロだけどGimpでアイコンをつくったので手順を抽象化して応用できるようにする


今回作ったのはこれ。レイヤー10枚くらい重ねた。
おれ用メモなので一読でわかったら天才。詳細知りたければ参考サイトをどうぞ。

参考にしたサイト

AppleのiCloudアイコンの作り方。リアルな立体感や金属の光沢を表現する。

よく使う技

1.レイヤーの非透明部分の選択
2.モーションぼかし

手順

1.基本の図形をつくる

これは適当でいい。
この図でいうと、楕円+真円+小さい円の単純な組み合わせ

2.図形の外側と内側のレイヤーを作成して溝を表現する

非透明部分の選択をつかい基本図形を選択した状態にしてから、別レイヤーを作成し、選択の拡大をして選択図形よりも外側の領域を選択したレイヤーをつくる。

3.アイコンの外側にも同様に溝を表現する

グラデーションをする

4.ガウスぼかしのもやを下に入れる

レイヤー追加していれる

5.溝に影をいれる

2の外側の図に対して選択の反転をして別レイヤーを追加して溝の影をつくる

6.2の内側にベベルを重ねて追加する

2の基本図の内側にベベルを重ねる

7.6に基づいてベベルに基づいて放射状の光源のレイヤーをいれる

新しくレイヤを追加する
オーバーレイで不透明度60

8.特殊効果を入れる

ブレンドで変な図を重ねてモーションぼかしを回転して入れる。

金属光沢は、円錐形のピカピカのグラデーションを回転モーションぼかし。
ひっかき傷は、RGBノイズを回転モーションぼかし。

まとめ

1-7は基本。
8はgimpに入ってるフィルタとかブレンドの機能を舐めていきつつ色んなアイコンを見ていったら色々アイディアが浮かびそう。