スポンサーサイト
--年--月--日
上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
新しい記事を書く事で広告が消せます。
iPhone風アイコンを作ってみよう
2009年03月22日
iPhone風アイコンを作ってみましょう。手軽に使える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、および、他社デジタル画像編集ソフトウェア製品。
では順番に説明していきます。
新規にファイルを作成します。適当な大きさで作ってください。（ちなみにiPhone上のアイコンサイズは57X57です）
PhotoshopElementsのサイドバーから角丸長方形ツールを選びます。
Shiftを押しながら描画すれば正四角形が描画できます。
レイヤーパレットで、シェイプのレイヤーサムネールを、Cmdキー（WinではCtrl?)を押しながらクリックします。これでシェイプの形状をした選択範囲を指定することができます。
次に上部にあるメニューバーから選択範囲を選び、その中の項目にある「選択範囲を保存」を選びます。
「選択範囲を保存」する画面では、適当な名前を付けて（ここではiphone_icon)「新しい選択範囲」（矢印のところ）を指定し、[OK]をクリックします。
レイヤーを１個追加します。レイヤー名称はデフォルトのままでかまいません。（ここではレイヤー１）あとで分かりやすくするための名称をつけておくと便利です。
次にサイドバーからグラデーションツールを選びます。上部メニューバーに項目が表示されます。
矢印のところにある「反射形グラデーション」をクリックしてから編集をクリックしてください。
グラデーションエディタが開きます。
左下にある矢印部分をクリックしてから、「カラー」をクリックすると、色の編集画面が開きます。右下にある矢印部分に[0066cc]と入力して[OK]をクリックしてください。
同じようにして、今度は右側のカラーを指定します。矢印部分には[66ffff]と入力して[OK]をクリックしてください。これで色の準備は終了です。
描画したアイコン中心部位から上（または下）に向かってドラッグしてグラデーションを描きます。選択範囲を少しオーバーするくらいのところで止めるとちょうどいいです。
できた画像の上に適当な画像をのせます。
もう１個レイヤーを追加します。（上記で画像を追加しているのでレイヤー数は３個目になります）
サイドバーから楕円形選択ツールを選びます。
中央部にかかるように上の方から選択範囲を囲みます。
メニューバーから「選択範囲」を選び「選択範囲を読み込む...」を選択します。
選択範囲に、最初に作った[iphone_icon]（最初の選択範囲を保存で作ったときに付けた名称）を指定し、処理方法に矢印のところにある「現在の選択範囲との共通範囲」を選び[OK] をクリックします。
こんな感じで選択範囲が決定されます。
［選択範囲］メニューの［選択範囲を変更］から［縮小...］を選択します。
下記画面が表示されますので、縮小量[１]にして[OK]をクリックします。（これを指定しないとアイコン外まで選択ラインの太さ分が指定されてしまいます）
描画色を白色にしてからサイドバーにあるグラデーションツールを選択します。
上部メニューバーに表示されている部分にある「線形グラデーション」（右矢印の部分）を指定して、グラデーションに「描画色から透明に」 （左矢印部分）を指定します。
Shiftキーを押しながら選択範囲の上から下に向かってドラッグし、グラデーションを描き
ます。 選択範囲の少し外側から実行した方がそれっぽいグラデーションになります。
最後に選択範囲をCmd+Dキー（もしくはesc Winの場合はCtrl+D?)で解除し、「レイヤー3」の不透明度を80％程度にして完成！。
できましたか？ベースアイコンを作っておけば後は上にのせる画像や、色を変化させるだけで簡単にアイコンが作れるようになります。試してみてください。
新規にファイルを作成します。適当な大きさで作ってください。（ちなみにiPhone上のアイコンサイズは57X57です）
PhotoshopElementsのサイドバーから角丸長方形ツールを選びます。
Shiftを押しながら描画すれば正四角形が描画できます。
レイヤーパレットで、シェイプのレイヤーサムネールを、Cmdキー（WinではCtrl?)を押しながらクリックします。これでシェイプの形状をした選択範囲を指定することができます。
次に上部にあるメニューバーから選択範囲を選び、その中の項目にある「選択範囲を保存」を選びます。
「選択範囲を保存」する画面では、適当な名前を付けて（ここではiphone_icon)「新しい選択範囲」（矢印のところ）を指定し、[OK]をクリックします。
レイヤーを１個追加します。レイヤー名称はデフォルトのままでかまいません。（ここではレイヤー１）あとで分かりやすくするための名称をつけておくと便利です。
次にサイドバーからグラデーションツールを選びます。上部メニューバーに項目が表示されます。
矢印のところにある「反射形グラデーション」をクリックしてから編集をクリックしてください。
グラデーションエディタが開きます。
左下にある矢印部分をクリックしてから、「カラー」をクリックすると、色の編集画面が開きます。右下にある矢印部分に[0066cc]と入力して[OK]をクリックしてください。
同じようにして、今度は右側のカラーを指定します。矢印部分には[66ffff]と入力して[OK]をクリックしてください。これで色の準備は終了です。
描画したアイコン中心部位から上（または下）に向かってドラッグしてグラデーションを描きます。選択範囲を少しオーバーするくらいのところで止めるとちょうどいいです。
できた画像の上に適当な画像をのせます。
もう１個レイヤーを追加します。（上記で画像を追加しているのでレイヤー数は３個目になります）
サイドバーから楕円形選択ツールを選びます。
中央部にかかるように上の方から選択範囲を囲みます。
メニューバーから「選択範囲」を選び「選択範囲を読み込む...」を選択します。
選択範囲に、最初に作った[iphone_icon]（最初の選択範囲を保存で作ったときに付けた名称）を指定し、処理方法に矢印のところにある「現在の選択範囲との共通範囲」を選び[OK] をクリックします。
こんな感じで選択範囲が決定されます。
［選択範囲］メニューの［選択範囲を変更］から［縮小...］を選択します。
下記画面が表示されますので、縮小量[１]にして[OK]をクリックします。（これを指定しないとアイコン外まで選択ラインの太さ分が指定されてしまいます）
描画色を白色にしてからサイドバーにあるグラデーションツールを選択します。上部メニューバーに表示されている部分にある「線形グラデーション」（右矢印の部分）を指定して、グラデーションに「描画色から透明に」 （左矢印部分）を指定します。
Shiftキーを押しながら選択範囲の上から下に向かってドラッグし、グラデーションを描き
ます。 選択範囲の少し外側から実行した方がそれっぽいグラデーションになります。
最後に選択範囲をCmd+Dキー（もしくはesc Winの場合はCtrl+D?)で解除し、「レイヤー3」の不透明度を80％程度にして完成！。
できましたか？ベースアイコンを作っておけば後は上にのせる画像や、色を変化させるだけで簡単にアイコンが作れるようになります。試してみてください。
Comment
