こうして、最終的にアプリアイコンが見えるようになります。しかし、話はここまでにして、直接Adobe Illustratorで始めましょう...
ステップ1:基礎を作成する
Illustratorで作業する際、ますます最初に新しい作業スペースをファイル>新規から作成します。次のウィンドウで、70x70mmのフォーマットを選択して、OKでウィンドウを確認します。
四角形ツールをツールパレットから選択して、作業スペースのどこかをクリックします。すると、四角形のサイズを入力するダイアログボックスが表示されます。ここで、35x35mmのサイズを選択して、OKで確認します。これがアプリアイコンの基礎となります。
Appleのアプリアイコンは決して角ばっていないため、今から角を丸める必要があります。したがって、四角形を選択して、上部メニューバーでエフェクト>スタイライズフィルター>角を丸くする...に進みます。
次のウィンドウで、7mmの角半径を入力して、OKで確認します。
この効果を確認すると、角が丸まって表示されますが、パスはまだ角ばっています。これを変更するには、オブジェクト>表示を変換に移動します。これにより、効果がオブジェクトに変換されます(パスは丸い角に沿って直接走ります)。
次のステップでは、グラデーションパレットが必要です。まだ表示されていない場合は、ウィンドウ>グラデーションから開くことができます。
グラデーションパレットのグラデーションフィールドをクリックして、丸い四角形を標準の黒/白グラデーションで塗りつぶします(四角形に輪郭がある場合は、これを削除するためのタイミングです)。
グラデーションの角度設定では、上から下にきれいに表示されるように90°の値を入力します。
アイコンにブルーグラデーションを適用したい場合(もちろん独自の色を使用することもできます)、2つのRGB値をすでに用意しています。
• ダークブルー - 28/57/145
• ライトブルー - 84/244/255
これらの色値をグラデーションに割り当てるには、グラデーションパレットの色のフィールドをダブルクリックします。そうするとRGB値を入力できます。
(もし別の色モデルが選択されている場合は、グラデーションパレットの右上にある小さな矢印をクリックして適切な色モードを選択します)。
これを行ったら、おおよそ以下のように表示されるはずです(図11)。
グラデーションをさらに調整するために、エフェクト>スタイライズフィルター>内側に光に進みます。このフィルタのためのモードでは、重ね合わせを選択し、不透明度を75%、ぼかしを8.8mmに設定します。この効果を外側部分にのみ適用したいため、エッジで選択して、OKでウィンドウを確認します。
次に、影を追加してみましょう。これも同様にエフェクト>スタイライズフィルター>影で行います。このフィルタの設定は、図13のようにおおよそ選んでください。ただし、ここでは少し変化させても構いません。
次に、四角形をCommand+Cでコピーし、同じ場所にCommand+Fで再度挿入します(PCではStrg+CとStrg+Fで行います)。
四角形のコピーでは、前述の効果は不要なので、これらを削除する必要があります。Illustratorで適用したすべての効果やフィルタは、外観パネルにリストされます。もし外観パネルが表示されていない場合は、ウィンドウ>外観で再度表示できます。
今、影を削除します。これは、影を外観パネルでクリックして、パレットの右下にあるゴミ箱にドラッグするだけで簡単に行えます。
内部光は削除する必要はありませんが、少し調整する必要があります。その前に、四角形のコピーの塗りつぶし色を白色に変更しておいてください。
次に、外観パネルで内部光をクリックし、モードを通常に設定し、色を濃い黒に、不透明度を100%に、ぼかしには10mmの値を選択します(図17)。
このコピーを下にある青いグラデーションのオリジナルと組み合わせるために、不透明度を50%にして、塗りつぶしモードをソフトライトに設定します。これらの設定はすべて透明度パレットで行います(こちらのパレットはウィンドウ>透明度で表示できます)。
これにより、コントラストが向上し、Appアイコンが立体感を持つようになります。
ステップ2:放射状の輪を作成する
このステップでは、Appアイコン用の放射状の輪を作成する方法について説明します。まず、ステップ1で作成した2つの四角形を一時非表示にして、作業スペースを確保します。
線ツールをツールバーから選択し、ストロークカラーを黒色、ストロークの太さを0.5ptに設定します。
中央から上に向かって直線を描き、マウスボタンを押したままにしてください。直線を引き上げたら(マウスボタンを押したまま)、Ctrlキーと「< >」キーを押してください。
マウスボタンを押したままで円周を一回描いてください。このキー操作は、マウスカーソルの動きの速度に応じて異なる本数の線が生成されます。
円周を描き終えたら、図19のような形になります。これを何度か試してみてください(ここでも「継続は力なり」という諺が当てはまります)。
すべての線を選択し、Command+Gでグループ化します(PCではStrg+G
次に、ステップ1の四角形を再度表示してください。放射状の輪の中心がおおよそ四角形の中心に来るようにしてください。
今度は青いグラデーションと組み合わせた灰色の角丸四角形をコピーします。(Command+CまたはPC上で - Strg+C))
次に、放射状のグループをクリックして透明性パネルを確認します。ここで、Photoshopと同様にマスクを作成することができます。図23に示されている領域をダブルクリックしてクリックします。このダブルクリックにより、不透明度マスクが作成されます。
これを作成すると、マスク内にいる間、レイヤーパレットが変わったことに気づくでしょう。 Command+F(PC上ではStrg+F) を使って、先ほどコピーした四角形をマスクに挿入します。最後に、不透明度を50%から10%に減らすだけです。
次に、通常の表示に戻るためにマスクを解除する必要があります。これは、マスクシンボルの横の白い領域をクリックすることで行います(図25)。
ステップ3:ピクトグラムの基本を作成する
ほとんどの作業が完了し、アプリアイコンにピクトグラムやシンボルを挿入する準備が整いました。ただし、後で全体がより鮮明に見えるように、先にベースまたは小さなプラットフォームを作成する必要があります。
楕円ツールを選択し、およそ中央に楕円を描きます。 (図26を参照)
この楕円を濃い青で塗りつぶします。 使用した色値は次のとおりです。 RGB - 0/0/255.
不透明度を約70%に減らし、次にエフェクト>ぼかしフィルター>ガウスぼかし...に移動します。
ぼかしには、28ピクセルの半径を選択しました。 もちろん、この値は自由に変更できます。 OKで確定します。
ステップ4:ピクトグラムを挿入する
ベースができたので、いよいよです。 アプリアイコンにピクトグラムを挿入するだけです。少しの追加として、いくつかの異なるピクトグラムを作業ファイルに追加しました。 ただし、独自のものを使用してもかまいません。
上部メニューバーでファイル>配置に移動し、お好みのピクトグラムを選択します。 私の場合、それは作業ファイルのコンピューターです。
...完了です!...と言いたいところですが...
しかし、まだやらなければならないことが1、2あります。 1つはピクトグラムに影を追加することです。 そのために、エフェクト>スタイライズフィルター>ドロップシャドウに移動します。 この影の値には、図32を参考にしてください。
ステップ5:光沢を追加
最後のステップでは、全体を美しく整えるために光沢を追加します。 楕円ツールを選択し、図33に示すような白い楕円を描きます。
最後に、楕円の塗りつぶし方法をソフトライトに変更するだけです。 これであなたのアプリアイコンが完成です。
結び
楽しいチュートリアルを楽しんでいただけたら幸いです。そして、今後、素敵なアプリアイコンを作成できるようになりますように。添付されているファイルには、私のオリジナルの作業ファイルも含まれていますので、途中でわからないことがあればそちらを参照してください。
このトピックに関する質問があれば、コメントに書いてください。できるだけスピーディに回答します。
よろしく
Julianより