WAN Will Way > 素材集TOP > パーツ素材作成講座 > 

写真で作るアイコン

Adobe® Photoshop®Elementsを使って、お花をガラスの中に閉じ込めたようなアイコン作りに挑戦しましょう。

今回作る作品はこれ!
サンプル
( )の中の記述は、ショートカットキーになっています。

STEP 1 作業の準備

[ファイル(F)−開く(O)](Ctrl+O)で、使用したい画像を開きます。
ファイルブラウザから画像の保存場所を選択し、目的の画像をドラッグ&ドロップしてもOKです。


元画像

[レイヤー(L)−レイヤーを複製(D)]で複製レイヤーを作ります。
レイヤーを[新規レイヤーを作成]マークまでドラッグ&ドロップしても簡単に複製が作れます。


レイヤーの複製 レイヤー複製後


STEP 2 正方形に選択

STEP1で作った複製レイヤーに効果を加えていきます。
矩形選択ツール()で、写真の使いたい部分を囲むように選択します。
この時正方形にしたいので、Shiftキーを押しながら画面左上からドラッグしてください。同時にSpaceキーを押すと、選択範囲の位置調整ができます。


正方形選択

STEP 3 効果を加える

[フィルタ(T)−変形]から[極座標]を選んで、開いたダイヤログボックスで、[極座標を直交座標に(P)]にチェックを入れてOKします。


極座標1 極座標2

[イメージ(I)−回転(E)]から[180°]を選びます。


回転1 回転2

再び[フィルタ(T)−変形]から[極座標]を選んで開いたダイヤログボックスで、今度は[直交座標を極座標に(R)]にチェックを入れてOKします。


極座標3 極座標4

STEP 4 画面の調整

[選択範囲(S)−選択を解除(D)](Ctrl+D)で選択を解除します。
楕円形選択ツール()に切り替え、左上からShiftキーを押しながらドラッグして、丸いアイコンの形に選択範囲を作ります。


円選択

消しゴムツール()を選択し、好みの画質になるように上側のレイヤーを消していきます。
この時のポイントは、不透明度の設定です。今回は「26」%にしましたが、このように値を下げて何度も上から消すほうが、一気に「100」%で消すよりも微妙な調整ができます。


消しゴムツール レイヤー画面

STEP 5 アイコンの形に成型1

[レイヤー(L)−下のレイヤーと結合](Ctrl+E)で、画像をひとつにまとめます。
[イメージ(I)−切り抜き(P)]でまわりの余分な部分を削除します。
[選択範囲(S)−選択範囲を反転(I)](Shift+Ctrl+I)で選択範囲を反転して、マジック消しゴムツール()に切り替えて部分をクリックし、まわりの部分を透明にします。


マジック消しゴムツール  →  マジック消しゴムツール・アフター


STEP 6 大きさの調整

再び、[選択範囲(S)−選択範囲を反転(I)](Shift+Ctrl+I)で、選択範囲を反転します。
移動ツール(V)()に切り替え、バウンティングボックスの角を(部分)クリックすると、ツールバーに数値を入力するボックスが現れますので、幅(W)高さ(H)とも「90」%と入力して○をクリックします。


縮小

STEP 7 レイヤースタイルの設定

レイヤースタイルからドロップシャドウを選び、低(部分)をクリックします。


ドロップシャドウ

STEP 8 アイコンの形に成型2

[イメージ(I)−サイズ変更(R)]から画像解像度(I)を選び、ダイヤログボックスの幅(W)高さ(H)に「100」pixelと入れてOKをクリックします。
*この数値が出来上がるアイコンの大きさになりますので、好みの数字を入れてくださいね。


サイズ変更1
サイズ変更2

STEP 9 明るさの調整

ほぼ完成なのですが、写真を縮小する関係でどうしても暗くなってしまいがちです。
元の写真にもよるので、ここからはお好みで調整してください。
今回は、[画質調整(N)−明るさ・コントラスト]から明るさ・コントラスト(C)を選び、ダイヤログボックスの明るさの値を「+30」に設定しました。


明るさの調整1
明るさの調整2 サンプル2 サンプル1


STEP 10  完成

[ファイル(F)−Web用に保存(W)](Alt+Shift+Ctrl+S)を選び、マットを使いたい背景色に合わせ(今回は白にしました)透明部分にチェックを入れて、GIF形式で保存してください。



 

by kokoro 

 

素材集TOP