Unlimited PS Actions, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Design & Illustration
  2. Summer

イラストレーターで作る夏のアイコンパック

by
Difficulty:IntermediateLength:LongLanguages:

Japanese (日本語) translation by Naoko Takeda (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

夏がやってきましたね。暑中見舞いにこの素晴らしいチュートリアルをお届けします。夏をテーマにした4種類のアイコンをイラストレーターを使って作成したいと思います。 これらのアイテムは、日常的に使っているベーシックな図形とツールによって簡単に作ることができます。

あなたはいつでもそのセットをEnvato Marketで展開することができます。Envato Marketには、美しく作り込まれたアイコンパックが山ほどあります。

では、早速やってみましょう。

1.新規ドキュメントを用意します

どの新しいプロジェクトでも、まず最初に適切な設定をしましょう。

ファイル > 新規 または Ctrl+N で新規ドキュメントを開き、以下の設定を行います。

  • アートボードの数:1
  • :800px
  • 高さ:600px
  • 単位:ピクセル

それから詳細設定

  • カラーモード:RGB
  • ラスタライズ効果:スクリーン(72ppi)
  • 「新規オブジェクトをピクセルグリッドに整合」にチェックを入れる
setting up a new documentsetting up a new documentsetting up a new document

ヒント:これらの設定はWebのドキュメントプロファイルの元にすることができます。ただし、サイズだけは自動的にセットせずにその都度選択する必要があります。

2.カスタムグリッドの設定

illustratorには強力なグリッドシステムが用意されていますので、最小値を設定しておきます。そうすることで確実にピクセルグリッドにスナップすることができます。

その設定画面は、編集 > 環境設定 > ガイド・グリッドにあります。以下のように設定してください。

  • グリッド:1px
  • 分割数:1
setting up a custom gridsetting up a custom gridsetting up a custom grid

ヒント:グリッドについてもっと知りたいなら、この記事をオススメします。→「how Illustrator's Grid System works(どのようにイラストレーターのグリッドシステムが作動するか)

カスタムグリッドを設定したら、はっきりとした見た目にするために、表示メニューの中にある「グリッドにスナップ」機能を忘れずに有効にしておきましょう。ピクセルプレビューモードで、ピクセルにスナップされるのが分かります。

1pxの狂いもなくアイコンを作るために、私はあなたに「how to pixcel-perfect artwork(1ピクセルの狂いもないアートワークの作り方)」のチュートリアルを読んでいただくことを強くお勧めします。それはあなたの技術スキルをひろげてくれるでしょう。

3.レイヤーの設定

新しいプロジェクトファイルを作成したら、アイコンパックをレイヤー分けしておきます。安定したワークフローを作っておくと1つのアイコンに集中できます。

それから、レイヤーパネルを表示して全部で5つのレイヤーを作成します。また、それぞれを簡単に識別できるようなキーワードでレイヤー名をつけます。

  • レイヤー1 > 参照グリッド
  • レイヤー2 > モヒート
  • レイヤー3 > アイスクリーム
  • レイヤー4 >サーフボード
  • レイヤー5 > 砂のバケツ
setting up the layerssetting up the layerssetting up the layers

ヒント:今回の使おうとしているレイヤーは本当に単純なものです。 まず、今作業しているレイヤー以外がロックされているか確認します。ロックするには目のアイコンの隣にあるエリアをクリックします。

作業中にアイコンを作り終えたらすぐにそのレイヤーをロックして、次のものにとりかかります。全ての作業を終えるまで、この作業を繰り返します。

4.参照グリッドの作成

参照グリッド(またはベースグリッド)は外観の正確な範囲を示します。その範囲の中でアイコンを作成します。

一般的に、グリッドのサイズを決めるということは、実際のアイコンサイズが決めるということです。それは新しいプロジェクトでのあなたの最初の決断になります。あなたは常に可能な限り最小のサイズからはじめて、その上に構築したいと思うので。

今回のケースでは、128 x 128 px以上の大きさの1サイズのみでアイコンパックを作っていきます。

Step 1

参考グリッド以外のレイヤーをロックし、長方形ツールを選択して128 x 128 pxの赤(#FF6B57)色の四角を作ります。アイコンのサイズのベースとなります。

creating the main shape for the reference gridscreating the main shape for the reference gridscreating the main shape for the reference grids

Step2

それから116 x 116 px (#F2F2F2)の小さいサイズの四角を先ほどの四角に重ねて追加し、6pxの余白設けておきます。

creating the main shape for the active drawing areacreating the main shape for the active drawing areacreating the main shape for the active drawing area

Step3

2つの四角を同時に選択し、Ctrl+Gでグルーピングします。グルーピングしたものを40px間隔で3つコピーします。またそれらをアートボードにセンタリングしておきます。

creating and positioning all four reference gridscreating and positioning all four reference gridscreating and positioning all four reference grids

参照グリッドができたら、無意識のうちに動かさないようそのレイヤーはロックしておきます。またそのレイヤーはこれから作成するアイコンレイヤーの下に移動しておきます。

5.初期"ブランク"アイコンの作成

我々がかつて行ってきた他のアイコンチュートリアルと比べて、今回のものはとても簡単です。というのも、各アイコンは同じ背景を使用するためです。

つまり、ベースとなるブランクのアイコンを作ることができるということです。各アイコンを作る際にはブランクアイコンにそれぞれの要素を追加するところから始めればよいのです。制作プロセスを簡単にすることができます。

Step1

最初の参照グリッドの上に配置し、作業エリアがよりよく見えるよう拡大してください。

それから楕円形ツール(L)を使って、88 x 88 px#34D5EAで塗りつぶした円を作ります。それを真ん中より下、枠よりも4px離して配置します。

creating the main shape for the default backgroundcreating the main shape for the default backgroundcreating the main shape for the default background

ヒント: ここではピクセルプレビューモードを使用することをお勧めします (ビュー > ピクセル プレビューまたは Alt+Ctrl+Y)より簡単に基礎のピクセルグリッドと図形を配置することができます。

example of using the pixel preview modeexample of using the pixel preview modeexample of using the pixel preview mode

Step 2

オブジェクト > パス > パスのオフセット で表示されるポップアップウィンドウでオフセットの値に4pxと入力し、そのシェイプにアウトラインを追加します。また同時に色を少し暗めの (#493E3E)に変更しておきます。

creating the outline for the default backgrounds main shapecreating the outline for the default backgrounds main shapecreating the outline for the default backgrounds main shape

ヒント:もしこれまでアウトラインを作成する時に、オフセットパスツールを使ったことがないなら、この次のチュートリアル(the two main methods for creating line icons)を読んでください。この制作過程がよく分かります。

Step3

メインの図形とそのアウトラインができたら、次に、背景に素敵でポップな印象を与える、リングのようなハイライトを追加する必要があります。

まずは青い円を選択し、コピーをします。(Ctrl+C > Ctrl+F)そして-4pxのオフセットを追加します。 そしてそのコピーとオフセットの両方を選択し、パスファインダー前面オブジェクトで型抜きを使って、切り抜きます。

creating the default backgrounds ring highlightcreating the default backgrounds ring highlightcreating the default backgrounds ring highlight

Step 4

そうしてできた新しい図形について、色を白 (#FFFFFF) に変更して、また不透明度80%に下げ、ブレンドモードソフトライトにして、調整する必要があります。

adjusting the blending mode for the default backgrounds highlightadjusting the blending mode for the default backgrounds highlightadjusting the blending mode for the default backgrounds highlight

次に、背景にいくつか詳細を追加します。砂のビーチから始めましょう。

Step5

ペン ツール (P) を選んで、上に向かって素敵な曲線を持つ四角形を描きます。メインカラーは金黄色にし (#EDBC32) 、青色の円の下のセクションに図形を配置してください。

creating the main shape for the beach sandcreating the main shape for the beach sandcreating the main shape for the beach sand

ヒント: 幅 96px 、高さ 50 pxという値を見てみることで砂を作る図形のサイズのアイデアを得ることができる。

Step6

砂のところにパスのオフセットを使って4pxの厚みのあるアウトラインを追加します。色は暗めの(#493E3E)に変更しておきましょう。

adding an outline to the beach sand shapeadding an outline to the beach sand shapeadding an outline to the beach sand shape

Step7

砂にテクスチャーを追加します。2 x 2 pxの円形(#D19A20)を両サイドに数か所追加します。そしてそれらをCtrl+Gでグループ化しておきましょう。

adding some texture to the beach sandadding some texture to the beach sandadding some texture to the beach sand

ヒント:見て分かるように、砂の特定のエリアのみを(正確言うなら左側と右側)を小さい円形を使ってカバーしました。というのは、全てのアイコンで、真ん中には同じ幅のキーオブジェクトがくるからです。

あなたのケースでは、好きなようにスペースを埋めていただいて構いません。キーオブジェクトを追加してから円の数を調整してください。

Step8

ここでは、ビーチの砂をマスキングする必要があるので、最初のセレクションと、すべての図形(塗りシェイプ、アウトライン、砂のテクスチャ)のグループ化 (Ctrl+G) をします。

そして、青色の図形をコピーして一番上に配置します。クリッピングマスクとして使用します。右クリッククリッピングマスクを作成します。

using a clipping mask to hide the outer sections of the beach sandusing a clipping mask to hide the outer sections of the beach sandusing a clipping mask to hide the outer sections of the beach sand

 ヒント: もしこれまでクリッピングマスクを使ったことがないなら、次のチュートリアルをお読みください:「the advantages of using the Clipping Mask over Pathfinder’s Shape Modes (パスファインダーの図形にクリッピングマスクをする利点)

ご覧のようにビーチの砂が完全にマスクされましたが、アイコンスタイルを統一するために、対となるハイライトが必要です。

beach sand masked using clipping maskbeach sand masked using clipping maskbeach sand masked using clipping mask

Step 9

円形のハイライトを砂のビーチエリアに追加しましょう。青い円で使ったものをコピー(Ctrl+C)して、マスキンググループの中に貼り付け(Ctrl+F)ます。 それから、マスク用に黄色の図形を使います。境界線にかぶらないようにします。

adding the ring highlight to the beach sand sectionadding the ring highlight to the beach sand sectionadding the ring highlight to the beach sand section

 ヒント: 対象をダブルクリックすることで、クリッピングマスクまたはグループ化されたオブジェクトのセットの編集モードにすることができます。 なお、編集モードを抜けるにはシンプルにエスケープキーを押せばOKです。

Step 10

砂のビーチの上の部分にハイライトを追加します。80 x 80 px の円を使用してマスクして、ハイライトが重ならないようにしましょう。

adding a highlight to the upper section of the beach sandadding a highlight to the upper section of the beach sandadding a highlight to the upper section of the beach sand

Step11

雲のセットを作りましょう。まずは16 x 8px の大きさの角丸長方形を作成します。角の半径は4pxで、 色は白 (#FFFFFF) (1) にしておきます。 次に接続部分の要素を作成します。まずは6×2pxの四角形(2)を描ましょう。その両端に2×2pxの円(3)を追加し、切り抜きます(4)。

12×4 pxの角丸長方形(半径2px)を、コネクター部分の下側に追加して (5) 、最初の雲のセットが完成です。

creating the first set of cloudscreating the first set of cloudscreating the first set of clouds

Step 12

Ctrl+Gを使って雲の要素すべてをグループ化し、アイコンの左上隅に配置します。またブレンドモード比較(明)に設定し、不透明度を50%に下げます。

positioning the first set of clouds onto the backgroundpositioning the first set of clouds onto the backgroundpositioning the first set of clouds onto the background

Step 13

青い円の右側に対となる雲を作成し、グループ化 (Ctrl+G)して、それらのすべてをビーチの砂のクリッピングマスク内に配置します。

これから作成する各アイコン用にコピーして使うので、これまで作成してきた図形をすべて選択し、グループ化します。

finishing off the default backgroundfinishing off the default backgroundfinishing off the default background

Step 14

各アイコン用として、初期背景にそのコピーを3つ作成する必要があります。参照グリッドの上に配置し、利用可能なレイヤーにペーストしたか確認してください。

positioning the blank icon copies onto the remaining reference gridspositioning the blank icon copies onto the remaining reference gridspositioning the blank icon copies onto the remaining reference grids

これでデフォルトの「空白」アイコンが完成しました。次からはいよいよ、4つのアイコンにそれぞれキーオブジェクトを追加していきます。

6. モヒートアイコンの作成

最初に作るアイコンはジャーモヒート(モヒートの瓶)です。 すでに適切なレイヤーがあるので、ロックしたり他のレイヤーのロックを解除したりすることなく、直接作業を始めることができます。

Step 1

長方形ツール (M) を使って、 48 × 50 ピクセルの図形を作成します。色は#9FBA7Dにし、砂のビーチの下の方に配置します。整列パネルを使って、水平中央にしておきます。

creating the main lower shape for the mojito jarcreating the main lower shape for the mojito jarcreating the main lower shape for the mojito jar

Step 2

次に今作成した図形の上、16pxのところに、28 x 4 px 四角形 (#9FBA7D) を追加します。

adding the upper section of the mojito jaradding the upper section of the mojito jaradding the upper section of the mojito jar

Step 3

ペン ツール (P) を使って、2 つの図形をつなぎ、それぞれの起点から8pxのところで交差するようにハンドルをドラッグして、ネック部分の曲線を描画します。

creating the neck section of the mojito jarcreating the neck section of the mojito jarcreating the neck section of the mojito jar

Step 4

モヒートジャー(瓶)を作る3つの図形を選択し、パスファインダー形状モードで使って1つのオブジェクトにします。

combining the mojito jars main shapes using pathfinders unite shape modecombining the mojito jars main shapes using pathfinders unite shape modecombining the mojito jars main shapes using pathfinders unite shape mode

Step 5

ジャー(瓶)のメイン図形ができたので、パスのオフセット4 pxの太い輪郭 (#493E3E)を追加します。 (オブジェクトから > パス > パスのオフセット を選択し、オフセット値フィールドに4pxと入力しします。)

adding the outline to the mojito jaradding the outline to the mojito jaradding the outline to the mojito jar

Step 6

次に36 x 2 pxの角丸長方形を作って首のふちを追加しましょう。角の径は1pxにし、色は#CCC8BEにします。 4 px の境界線(#493E3E) を追加し、ジャー(瓶)の上部と境界線が交差するように配置します。

adding the first ridge segment to the jars neckadding the first ridge segment to the jars neckadding the first ridge segment to the jars neck

Step 7

先ほど作成した2つの図形を選択して、Alt キー(コピー作成)とShiftキー(まっすぐにドラッグ)を押しながら、上にドラッグし、新たに別の図形を追加します。

adding the second ridge segment to the jaradding the second ridge segment to the jaradding the second ridge segment to the jar

Step8

ジャー(瓶)の細かな表現を追加しましょう。両サイドに-2pxのオフセットを使ってハイライトを作ります。上と下と真ん中は取り除きます。 そうしてできた図形の色を白 (#FFFFFF) にします。またブレンドモードソフトライトにし、不透明度80%に設定して、透明度を調整します。

adding the side highlights to the mojito jaradding the side highlights to the mojito jaradding the side highlights to the mojito jar

Step 9

長方形ツール (M) を使用して、2 x 70 pxと作成し、さらに少し大き目の 4 x 70pxの長方形を右側に2px離して配置します。それからグループ化し(Ctrl+G)、透明度を調整します。値は両サイドのハイライトに使用したものと同じ値を使用します。

それらができたらジャー(瓶)上に右側数ピクセル開けて配置しましょう。

adding the two vertical highlights to the mojito jaradding the two vertical highlights to the mojito jaradding the two vertical highlights to the mojito jar

Step 10

28 x 4 px の(#000000) 長方形を、最初に作ったリッジの下に追加します。そして不透明度40%下げて、シャドウに変えましょう。

adding a subtle shadow to the jars neck sectionadding a subtle shadow to the jars neck sectionadding a subtle shadow to the jars neck section

Step 11

次に、楕円ツール (L) を使って2 x 2 px の円 (#493E3E) を、2px間隔で2行分描いてグループ化(Ctrl+G)しておきます。それらはジャー(瓶)にセンタリングし、最初のリッジから約 20px離して設置します。

adding the decorative circles to the mojito jaradding the decorative circles to the mojito jaradding the decorative circles to the mojito jar

Step 12

角丸長方形ツールを選択し、角径が12px24×42 pxの図形を作ります。色は#EDDAC0にしましょう。また4 pxのアウトライン(#493E3E)を追加します。それらをジャー(瓶)の真ん中に配置し、縦位置は先ほど追加した点々から8px離れたところにします。

adding the main shapes for the jars labeladding the main shapes for the jars labeladding the main shapes for the jars label

Step 13

ジャー(瓶)のボディに行なったように、同様にハイライトを2つを追加し、ツヤ感を出します。

adding highlights to the jars labeladding highlights to the jars labeladding highlights to the jars label

Step 14

円、長方形、角丸四角形などのいくつかの単純な図形を用いて、ラベルの要素をいくつか追加します。 それができたら、それを構成するすべての図形を選択し、ショートカットCtrl+Gを使用してグループ化しておきます。

adding details to the jars labeladding details to the jars labeladding details to the jars label

Step 15

次にジャー(瓶)の上部に移動して、2つのリッジにハイライトを追加します。メインの色は白 (#FFFFFF) とし、ブレンドモードソフトライトにし、不透明度80%に設定します。

できたら、ショートカットCtrl+Gを使用して、各リッジの要素をグループ化します。

adding highlights to the jars two ridge sectionsadding highlights to the jars two ridge sectionsadding highlights to the jars two ridge sections

クイック ヒント: 100% ズーム レベルではいくつかの詳細を瞬時に表示できない場合がありますので、それらを持っていることをお勧めします。別のプロジェクト用のアセットの拡大版が必要になると知らないならなおさらです。

Step 16

ストローを作り始めましょう。まず4 x 22pxの長方形を作成し、色は#EDDAC0にします。また4pxのアウトライン (#493E3E) を追加し、ジャー(瓶)の最上部エリアの右側に寄せて配置します。

creating and positioning the main shapes for the jars strawcreating and positioning the main shapes for the jars strawcreating and positioning the main shapes for the jars straw

Step 17

続いて4 x 2 px の長方形 (#FFFFFF) ストローの上部にハイライトになるよう設置します。ブレンドモードソフトライトにし、不透明度90%にします。

4 x 4 pxの黒の(#000000) 正方形をその下部に追加し、不透明度40%にして影にします。

Step 18

ペンツール (P)を使って2つの斜線を追加し、ストローを仕上げます。色は#493E3E を使用します。 完了したら、ストローの構成要素をすべて選択して、Ctrl+Gでグループ化しておきます。

adding finishing touches to the jars strawadding finishing touches to the jars strawadding finishing touches to the jars straw

Step 19

ミントの葉を作りましょう。14 x 14 px の円(#809B54)(1)を作ります。この図形の上部のアンカーを選択して、8px分上に引き上げます。(2) そけから、4pxのアウトライン(#493E3E)(3)と、内側のハイライト(:白、ブレンドモード:ソフトライト、不透明度:80%)(4)を追加します。そして、葉全体を45度傾けます(5)。最後に葉の下部にシャドウ(:黒、不透明度:40%)を追加します(6)。

creating the mint leaf for the mojito jarcreating the mint leaf for the mojito jarcreating the mint leaf for the mojito jar

Step 20

Ctrl+G のキーボード ショートカットを使用し全ての要素をグループ化し、ストローの左側に葉を置きます。

adding the mint leaf to the mojito jaradding the mint leaf to the mojito jaradding the mint leaf to the mojito jar

この時点でモヒートジャー(瓶)がほぼできたので、すべての要素を選択してCtrl+Gでグルーピングし、間違えて置き換えられてしまうこととのないようにしましょう。

Step 21

最初のアイコンを完成させるために、ジャー(瓶)の下部をマスクしなければなりません。そうして背景の曲線に添わせます。

これをするため、単に青い円をコピーし(Ctrl+C)、ジャー(瓶)の上位にペースト(Ctrl+F)します。

creating a copy of the blue circle to use as a clipping maskcreating a copy of the blue circle to use as a clipping maskcreating a copy of the blue circle to use as a clipping mask

Step 22

ジャー(瓶)を背景の表面の外に置くためのマスク用の円の調整を行います。円の上部のアンカーポイントを削除して、ペンツール(M)を使って新しいパスを描きます。上部の描画エリアまでカバーするようにしてください。

adjusting the shape of the blue circle before using it as a clipping maskadjusting the shape of the blue circle before using it as a clipping maskadjusting the shape of the blue circle before using it as a clipping mask

Step 23

調整した円と、モヒートジャー(瓶)を両方選択肢、右クリックしからクリッピングマスクを作成を行います。 マスクしたジャー(瓶)と背景を選択して、Ctrl+Gでグループ化しておきます。

mojito jar icon finishedmojito jar icon finishedmojito jar icon finished

最初のアイコンを作り終えたので、そのレイヤーをロックし、次に作成するアイスクリームアイコンの作業レイヤーに移動します。

7.アイスクリームアイコンの作成

すでに 2 番目の参照グリッド上にズームしていると仮定して、2番目のアイコンにとりかかりましょう。

Step 1

角丸長方形ツールを選択して、48 x 92 pxの図形 (#E25439) を作成します。角の半径は6pxにします。また、変形パネルを使って上部の角径を 24px に変更します。 いつもの4 pxのアウトライン(#493E3E) を追加し、2 つの図形を描画エリアの一番上に配置します。

creating the main shapes for the ice creams upper sectioncreating the main shapes for the ice creams upper sectioncreating the main shapes for the ice creams upper section

Step 2

上位レイヤーにハイライトを追加してアイコンにツヤ感を追加しましょう。ハイライトは塗りつぶしカラーとして白色(#FFFFFF)を、ブレンドモードソフトライトに、不透明度 を80%に設定して使います。

adding highlights to the upper section of the ice creamadding highlights to the upper section of the ice creamadding highlights to the upper section of the ice cream

できたら、構成する要素をすべて選択して、Ctrl+Gでグループ化しておきます。

Step 3

アイスクリームの棒にとりかかりましょう。12x12pxの正方形を描きます。色は#D3B276にし、4 pxのアウトライン(#493E3E)も追加します。それら2つを前のステップで作った図形の下に置きます。

creating the main shapes for the ice creams stickcreating the main shapes for the ice creams stickcreating the main shapes for the ice creams stick

Step 4

長方形ツール (M) を使って、2 x 12 pxの図形 (#FFFFFF)を2つ作成し、アイスクリームの棒の両サイドに配置します。また、ブレンドモードソフトライトに、不透明度80%にして調整します。

adding two side highlights to the ice creams stickadding two side highlights to the ice creams stickadding two side highlights to the ice creams stick

Step 5

棒にテクスチャを追加しましょう。メインカラーに#B2915Dを使用し 、2 px 幅の角丸四角形を2、3個描きます。

adding a subtle line texture to the ice creams stickadding a subtle line texture to the ice creams stickadding a subtle line texture to the ice creams stick

Step 6

あらたに12 x 4 px の黒い (#000000) 長方形を作成し、棒の一番上に配置します。不透明度40%にして、シャドウにします。

adding a subtle shadow to the ice creams stickadding a subtle shadow to the ice creams stickadding a subtle shadow to the ice creams stick

シャドウが追加できたら、棒の要素をすべて選択してグループ化(Ctrl+G)します。間違って置き換えないようにします。

Step 7

アイスクリームの構成要素すべてをCtrl+Gでグループ化し、最初のアイコンの時におこなったようにそれらをマスクします。

ice cream icon finishedice cream icon finishedice cream icon finished

これで2番目のアイコンが完成したので、そのレイヤーをロックし、3番目のアイコンのレイヤーに移動します。

8. サーフボードアイコンの作成

3 番目のアイコンのサーフボードまでやってきました。アイスクリームアイコンのように、簡単に作成できるでしょう。

Step 1

楕円形ツール (L) を使用して、48 x 164 pxの図形を作成します。その際、色は#D3B276 にします。 そして、いつもの4pxのアウトライン(#493E3E)を追加します。両方の図形を3つ目の背景の上に置き、描画エリアの上に配置します。

creating the main shapes for the surfboard iconcreating the main shapes for the surfboard iconcreating the main shapes for the surfboard icon

Step 2

サーフボードにリングのようなハイライトを追加します。メインの塗りつぶしカラーとして白(#FFFFFF)を使い、ブレンドモードソフトライトに、不透明度80%にします。

adding a ring highlight to the surfboards main bodyadding a ring highlight to the surfboards main bodyadding a ring highlight to the surfboards main body

Step 3

2px幅の角丸の長方形(#B2915D)を色んな間隔で配置してテクスチャを追加します。そしてマスクをして外にはみ出さないようにしましょう。

adding the subtle line texture to the surfboards main bodyadding the subtle line texture to the surfboards main bodyadding the subtle line texture to the surfboards main body

Step 4

さらにハイライト(:白、ブレンドモード:ソフトライト、不透明度:80%)を垂直方向に2本追加します。ボードの右寄りに配置し、リング状のハイライトに重ならないよう、マスクをしましょう。

adding the two vertical highlights to the surfboard iconadding the two vertical highlights to the surfboard iconadding the two vertical highlights to the surfboard icon

Step 5

続いてサーフボードに詳細を追加していきます。18 x 32 pxの楕円を作成し、色は#EDDAC0にします。 4pxのアウトライン(#493E3E)を追加し、それらをサーフボードの横中央、縦は上から82pxのところに配置します。

creating and positioning the center piece for the surfboard iconcreating and positioning the center piece for the surfboard iconcreating and positioning the center piece for the surfboard icon

Step 6

今作った楕円の図形にいつものようにハイライトを追加します。そして、仕上げに2 x 84 pxの長方形(#493E3E)を中央に追加し、楕円形の先端から降りてくるようにします。

adding finishing touches to the surfboardadding finishing touches to the surfboardadding finishing touches to the surfboard

Step 7

サーフボードを構成する要素すべてを選択して、Ctrl+Gを使ってグループ化しておきます。これで他のアイコンに行なってきたようにクリッピングマスクができます。

終わったら、マスクされたボードと背景を選択して同様にそれらをグループ化します。

surfboard icon finishedsurfboard icon finishedsurfboard icon finished

9. 砂バケツアイコンの作成

あともう一息ですよ! 残りは4 番目の最後のアイコンを作成するのみです。

すでに砂バケツのレイヤーに移動したという前提で、その参照グリッド上にズームして、完成させましょう。

Step 1

長方形ツール (M) を使用して、40 x 28 pxの図形を作ります。色はダークグレー (#AAA79F)にし、描画エリアの横中央に、また縦位置はビーチの砂の底辺に合わせます。

creating the main shape for the sand buckets lower sectioncreating the main shape for the sand buckets lower sectioncreating the main shape for the sand buckets lower section

Step 2

ダイレクト選択ツール (A) で底辺のアンカーポイント選択し、それぞれ内側に2pxずつ移動させ、図形を調整します。それでできた図形にパスのオフセット4pxのアウトライン (#493E3E)を追加します。

adjusting the main shape of the sand buckets lower sectionadjusting the main shape of the sand buckets lower sectionadjusting the main shape of the sand buckets lower section

Step 3

オブジェクトの見た目がポップになるよう、いつものハイライトと影を追加します。 ハイライトには、ソフトライト不透明度80%の白 (#FFFFFF) を用い、シャドウは、不透明度40%の黒 (#000000) にします。

adding highlights and shadows to the lower section of the sand bucketadding highlights and shadows to the lower section of the sand bucketadding highlights and shadows to the lower section of the sand bucket

Step 4

ラベルを追加します。角径が8px16 x 20 px の角丸長方形を作ります。色は#EDDAC0を使用します。 4 px のアウトライン (#493E3E) を追加しましょう。そして両方の図形をバケツの横中央と上から10 px のところに慎重に配置します。

creating the main shapes for the sand buckets labelcreating the main shapes for the sand buckets labelcreating the main shapes for the sand buckets label

Step 5

ラベルにいくつかのハイライトを与え、そして、小さな長方形(#493E3E)を2つ追加します。魅力的な見栄えにするためのダミーテキストです。

adding details to the sand buckets labeladding details to the sand buckets labeladding details to the sand buckets label

それができたら、バケツの構成要素をすべて選択し、Ctrl+Gを使ってグループ化しておきます。

Step 6

長方形ツール (M) を使用して、色が#CCC8BE48 × 10 pxの図形を作成します。 4 px のアウトライン (#493E3E) を追加し、先ほど作成したバケツの上にアウトラインと重なるよう配置します。

creating the upper section of the sand bucketcreating the upper section of the sand bucketcreating the upper section of the sand bucket

Step 7

新しい形にいくつかのハイライトを与えます。色は白 (#FFFFFF) を使って、ブレンドモードソフトライトを設定し、不透明度80%に下げるて、透明度を調整します。

adding highlights to the upper section of the sand bucketadding highlights to the upper section of the sand bucketadding highlights to the upper section of the sand bucket

Step 8

次に、2 x 2 pxの円 (#493E3E) を3つで1セットとし、2セット追加します。バケツの上のそれぞれのサイドから、水平方向と垂直方向両方2px間隔で配置します。

adding the two circle segments to the upper section of the sand bucketadding the two circle segments to the upper section of the sand bucketadding the two circle segments to the upper section of the sand bucket

Step 9

バケツの上部のセクションの仕上げとして、22 x 2 px の角丸長方形(#493E3E) を追加します。角径は1 px とし、中心に配置します。 それからすべての構成要素を選択して、Ctrl+Gでグループ化します。

adding the last detail to the upper section of the sand bucketadding the last detail to the upper section of the sand bucketadding the last detail to the upper section of the sand bucket

Step 10

小さなシャベルにとりかかりましょう。8 x 46 pxの長方形を作ります。色は#E25439にしておきましょう。 いつものように 4 px のアウトライン (#493E3E) を追加し、できた2つの図形を砂のバケツの上に配置します。アウトラインが重なっているかどうかを確かめてください。

creating the main shapes for the shovels lower sectioncreating the main shapes for the shovels lower sectioncreating the main shapes for the shovels lower section

Step 11

両サイドに  2 x 44 px の長方形 (#FFFFFF) 2つ追加します。ブレンドモードソフトライトを設定し、不透明度80%に下げることによってハイライトにします。

adding two vertical highlights to the shovels main bodyadding two vertical highlights to the shovels main bodyadding two vertical highlights to the shovels main body

Step 12

長方形ツール (M) を使用して、さらに小さい8 x 4 pxの図形を作ります。色は黒 (#000000) にして、不透明度40%にすることでシャドウにします。シャベルの本体の底に置きましょう。

adding the bottom shadow to the shovels main bodyadding the bottom shadow to the shovels main bodyadding the bottom shadow to the shovels main body

Step 13

次に、シャベルの現在のセクションにいくつかの細かいラインを追加します。2 x 14 px の長方形を作成し、続いて、別に小さな 2 x 2 pxの図形を2px離して配置します。 両方の図形の色#493E3E とし、赤い図形の真ん中に整列させます。その際、縦位置は先ほど作ったシャドウから数px上に配置しましょう。

adding detail lines to the main body of the shoveladding detail lines to the main body of the shoveladding detail lines to the main body of the shovel

Step 14

シャベルのハンドルを作成しましょう。28 x 20 pxの大きさで角径4pxの角丸長方形を描きます (1)。 その図形からパスファインダーの全面オブジェクトで型抜きを使って、20 × 12 px の長方形で切り抜きます (2)    できた図形に4px のアウトライン(#493E3E)を追加します。 そしてそれを下のレイヤーに移動させてください。(右クリック >重ね順> 最背面へ) (4)。 それから 角径が 2px 6 x 4 pxの角丸長方形(#493E3E)をアウトラインの下のところに追加します (5)。ハンドルの仕上げにいくつかのハイライトを追加します(6)。

creating the shovels handlecreating the shovels handlecreating the shovels handle

Step 15

すべての砂バケツの要素をCtrl+Gを使ったグループ化し、これまでと同じように、それらをマスクします。

sand bucket icon finishedsand bucket icon finishedsand bucket icon finished

これでおしまい!

夏の雰囲気をキックオフする準備ができた4 つのかわいいアイコンをあなたは手にしました。 あなたがチュートリアルの各ステップに従ってなんとかやりとげ、何か新しく役立つものを習得されたことを願っています。

all icons finishedall icons finishedall icons finished
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.