スポンサーサイト

--年--月--日
拍手する
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

iPhone風アイコンを作ってみよう

2009年03月22日
拍手する
start_icon.pngiPhone風アイコンを作ってみましょう。
手軽に使えるAdobe Photoshop Elements 6.0 日本語版 乗換え・アップグレード版(実売8000円くらい)を使ってiPhone風アイコンを作る方法を解説します。


*乗換え・アップグレード対象は、下記ソフトウェアがインストールされていれば対象になります。Macの場合はiPhotoがデフォルトで入っているのでお得です。
**Photoshop Album、Adobe Photoshop Elements、Photoshop LE、Adobe PhotoDeluxe、Paint Shopシリーズ、CorelDraw/Painter、Microsoft Digital Image Products、Paintgraphic、Photoimpact、ACDSee、蔵衛門シリーズ、デジカメ de!!シリーズ、デジカメの達人、iPhoto、および、他社デジタル画像編集ソフトウェア製品。
では順番に説明していきます。
ピクチャ 1
新規にファイルを作成します。適当な大きさで作ってください。(ちなみにiPhone上のアイコンサイズは57X57です)


ピクチャ 2
PhotoshopElementsのサイドバーから角丸長方形ツールを選びます。


ピクチャ 3
Shiftを押しながら描画すれば正四角形が描画できます。


ピクチャ 4
レイヤーパレットで、シェイプのレイヤーサムネールを、Cmdキー(WinではCtrl?)を押しながらクリックします。これでシェイプの形状をした選択範囲を指定することができます。


次に上部にあるメニューバーから選択範囲を選び、その中の項目にある「選択範囲を保存」を選びます。
ピクチャ 5

「選択範囲を保存」する画面では、適当な名前を付けて(ここではiphone_icon)「新しい選択範囲」(矢印のところ)を指定し、[OK]をクリックします。
ピクチャ 6

ピクチャ 7
レイヤーを1個追加します。レイヤー名称はデフォルトのままでかまいません。(ここではレイヤー1)あとで分かりやすくするための名称をつけておくと便利です。


ピクチャ 8
次にサイドバーからグラデーションツールを選びます。上部メニューバーに項目が表示されます。
矢印のところにある「反射形グラデーション」をクリックしてから編集をクリックしてください。

グラデーションエディタが開きます。
左下にある矢印部分をクリックしてから、「カラー」をクリックすると、色の編集画面が開きます。右下にある矢印部分に[0066cc]と入力して[OK]をクリックしてください。
ピクチャ 9

同じようにして、今度は右側のカラーを指定します。矢印部分には[66ffff]と入力して[OK]をクリックしてください。これで色の準備は終了です。
ピクチャ 10

ピクチャ 11
描画したアイコン中心部位から上(または下)に向かってドラッグしてグラデーションを描きます。選択範囲を少しオーバーするくらいのところで止めるとちょうどいいです。


ピクチャ 12
できた画像の上に適当な画像をのせます。


ピクチャ 13
もう1個レイヤーを追加します。(上記で画像を追加しているのでレイヤー数は3個目になります)


ピクチャ 14
サイドバーから楕円形選択ツールを選びます。


ピクチャ 15
中央部にかかるように上の方から選択範囲を囲みます。


メニューバーから「選択範囲」を選び「選択範囲を読み込む...」を選択します。
ピクチャ 16

選択範囲に、最初に作った[iphone_icon](最初の選択範囲を保存で作ったときに付けた名称)を指定し、処理方法に矢印のところにある「現在の選択範囲との共通範囲」を選び[OK] をクリックします。
ピクチャ 17

ピクチャ 18
こんな感じで選択範囲が決定されます。


[選択範囲]メニューの[選択範囲を変更]から[縮小...]を選択します。 
ピクチャ 19

下記画面が表示されますので、縮小量[1]にして[OK]をクリックします。(これを指定しないとアイコン外まで選択ラインの太さ分が指定されてしまいます)
ピクチャ 20

ピクチャ 21描画色を白色にしてからサイドバーにあるグラデーションツールを選択します。

上部メニューバーに表示されている部分にある「線形グラデーション」(右矢印の部分)を指定して、グラデーションに「描画色から透明に」 (左矢印部分)を指定します。

ピクチャ 22
Shiftキーを押しながら選択範囲の上から下に向かってドラッグし、グラデーションを描き
ます。 選択範囲の少し外側から実行した方がそれっぽいグラデーションになります。


ピクチャ 23
最後に選択範囲をCmd+Dキー(もしくはesc Winの場合はCtrl+D?)で解除し、「レイヤー3」の不透明度を80%程度にして完成!。

できましたか?ベースアイコンを作っておけば後は上にのせる画像や、色を変化させるだけで簡単にアイコンが作れるようになります。試してみてください。
Comment

管理者のみに表示

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。