Photoshop – 簡単なiPhone風のアイコンを作ってみたよ！

スマートフォンサイト制作、そんなときに使うかもしれない、iPhone風のアイコンを作ってみたよ！何かの役に立つといいねぇ！www フォトショップを開いて、今回は新規ファイルを100px × 100pxで作成します。背景色は白で作業します。 次に角丸長方形ツール(U)で、丸み5pxの70px × 70pxの長方形を描きます。 描いた長方形に「レイヤー」→「レイヤースタイル」→「レイヤー効果」を設定します。

レイヤースタイルを適用した、土台のシェイプのベクトルマスクを、Ctrlキーを押しながらクリックすると、土台のサイズの選択範囲が選択されます。 「選択範囲」-「選択範囲を変更」-「縮小」を選択して2px縮小します。 新規レイヤーを作成して、描画色を白色にしてからグラデーションツールを選択して、ツールオプショバーで、グラデーションに「描画色(#ffffff)から透明に」、線形グラデーションを指定します。Shiftキーを押しながら、選択範囲内の上から下へグラデーションを描きます。

選択範囲はそのまま、楕円形選択ツールを選択して、Altキーを押しながら画像の上から半分くらいのところで選択すると、楕円の選択範囲分、最初の選択範囲から消去されます。その選択範囲の部分を、先ほど描いたグラデーションから消去します。

あとは、イラストやテキストをできた土台にのせて、完成です。

簡単なアイコンを作成したので、クオリティは微妙ですが！許してくださ～い。いろいろイラスト、テキスト、土台の色などを、アレンジすれば別のアイコンが簡単につくれますねぇ！