写真からアイコン画像を作ってみよう

2022.1.10 更新

前回のブログで触れました、アイコンの重要性

自分が何者であるかを知ってもらうには、やはり写真を使うのが一番!なのですが..
自分の顔写真をさらすのには抵抗がある、という方も多いと思うのです。私もそんな一人。

そこで、フォトショップとイラストレーターを使って写真からスタンプ風のアイコンを作ってみようと思います。

こちらのサイトからフリー画像を拝借致しました。使用ソフトはCS3です。

目次

  1. photoshopで写真加工
  2. illustratorで画像加工
  3. ライブペイントで着彩
  4. web&デバイス用に保存

1. photoshopで写真加工

写真をフォトショップで開いたら、レイヤーの複製をしておきます。
Pic0

複製したレイヤーを、彩度を-100にして白黒写真にします。
Pic1

ここでハッキリ線を出したい部分等ありましたら
焼き込みツールでなぞって濃度を濃くしておくと良いと思います。

次にレベル補正で、白黒の濃淡をハッキリさせます。
Pic2

これを、web&デバイス用に保存します。JPEGでもPNGでもGIFでも何でもOKです。

2.illustratorで画像加工

先ほど作成したファイルをイラストレーターで開きます。
(ドキュメントサイズは作りたいアイコンのサイズにしておきます。)

レイヤーを複製して、複製した方を加工します。

まず、オブジェクトを選択したら、ライブトレースをします。
Pic5

ライブトレースにはいろいろな種類がありますので、いろいろ試しながら一番しっくりくるまでカスタマイズしてみて下さい。
(この時フォトショップで白黒をハッキリさせておく程、楽です。)

その後、拡張してベクター画像にします。
ベクター画像なので縮小・拡大しても画像が荒れません。

要らない線等をダイレクト選択ツールで選んで消去します。
ペンツール等を使って、線の微調整をします。

3.ライブペイントで着彩

新規レイヤーで背景用の四角のオブジェクトを作り、好きな色で塗りつぶします。
Pict8

画像の下にこのレイヤーを配置します。レイヤーの配置はこんな感じ。
Pic7

選択ツールでオブジェクトを選択したら、ライブペイントで色をつけます。
Pic6

背景色との色の組み合わせでかなりイメージが変わります。
コントラストが強いと強い感じ、薄いと柔らかい感じなど、
自分のなりたいイメージを思い浮かべて色の組み合わせを考えるのもまた楽しいです。
(今回は黒がしっくりきたので、ペイントはしませんでした。)

4.web&デバイス用に保存

新規レイヤーで作りたいアイコンの大きさの四角い枠を作って一番上に置き、
下に置いてある画像の大きさや位置を調整します。
Pic9

スライスを作ってweb&デバイス用に保存したら出来上がり!
web&デバイス用に保存

慣れれば簡単です。

この感じなら顔出しに抵抗感がある方でも使えそうじゃないですか?

写真からスタンプ風アイコン、ぜひ皆さんも作ってみてくださいね♪

コメントを残す