pixyzehn blog

iPhone App, Mac App, Programming, Web service, Tool, Evernote, etc

Photoshopを使ったことのないエンジニアのためのiosアプリのようなアイコンの作り方

f:id:inagex:20140202133642p:plain


こちらが完成図です。


いざiPhoneアプリを作ってもアイコン作成やデザインには悩まされるのでその手助けになればと思います。


用いているPhotoshopが英語版CS5ですので、適宜自分の環境に合わせてご利用ください。


f:id:inagex:20140202133906p:plain


まずFile>Newから新規作成します。


f:id:inagex:20140202134213p:plain


名前は任意の名前を入力し、widthとheightは1024x1024を指定します。


Background ContentsはBackground Colorを選択します。


f:id:inagex:20140202134643p:plain


Backgroud Colorを黒にしておきます。


f:id:inagex:20140202134734p:plain


左側のツールバーのRounded Rectagle Toolを押します。


f:id:inagex:20140202134922p:plain


ここでRadiusは175pxにしておきます。


f:id:inagex:20140202135241p:plain


左下の色を白に設定します。


次に先ほどクリックしたRounded Rectagleをshiftを押しながら描きます。


f:id:inagex:20140202135421p:plain


レイヤーはこのようになっていることを確認します。


f:id:inagex:20140202135451p:plain


右下のfxのボタンをクリックします。


f:id:inagex:20140202135649p:plain


Gradient Overlayを選択します。


f:id:inagex:20140202135855p:plain


Gradient Overlayをチェックして四角い赤線のGradientをクリックします。


f:id:inagex:20140202140040p:plain


新たなウィンドウが出てくるので矢印の箇所をダブルクリックして色を設定します。


f:id:inagex:20140202140233p:plain


反対側も色を設定していい感じのグラデーションにします。


これでアイコンの土台は完成しました。


あとは画像を埋め込んだり、アイテムを入れればそれなりのアイコンになるでしょう。


f:id:inagex:20140202140318p:plain


ここではCustom Shape Toolを用いて電球のアイコンを入れてみました。


この豆電球アイコンを中央に持っていきたいと思います。


右側のレイヤーが表示されている箇所をみてください。


f:id:inagex:20140202140646p:plain


アイコンの背景のレイヤーと豆電球のレイヤーをふたつ選択し、右クリックを押してLink Layersを押します。


そして動かす軸となるレイヤー(動かしたくないレイヤー)を選択して


f:id:inagex:20140202140847p:plain


Layer>Align>Vertical Centers

Layer>Align>Horizontal Centers


を選択すると先ほどの豆電球を垂直方向と平行方向において中央にもってくることができました。


f:id:inagex:20140202141108p:plain


iPhoneアプリのようなアイコンになりましたね。


自分はぜんぜんPhotoshopを使いこなしていないのでこれを機に学んでいこうと思います。


ちなみにTaskeyも上記の方法でアイコンを作成しました。


意外としっくりくるようなアイコンが作れるのでおすすめです!


f:id:inagex:20140202141555p:plain


※当方Photoshop初心者なのでこうしたほうがいいやこの方法は正しくないなどがありましたら、ご指摘ください。


こちらを参考にしました。