グラフィックデザイン

アイコンの基本は抽象化!特徴を見つけて基本図形に落としこむ方法

作りたいアイコンやロゴがあるときに、なかなかアイデアが浮かばないということもあるかと思います。

そういうときはアイコンやロゴにしたい対象物をよく観察して、特徴となる部分を探してみるのが結構有効です。

対象物が近くにないときはフォトストックサービスなどの写真を参考にするというのもありですね。

特徴を見つけ出せたら、あとはシェイプ系のツールで形を作っていくだけなので、実は一番重要な部分でもあります。

今回はこの工程をinkscapeの操作と一緒にまとめていきます。

アイコンの元になる実物を観察しよう

今回は「時計」をアイコンにしてみます。

「時計くらい見なくても作れるよー」って言われそうですが、僕の場合は画力とか一切ないので実物の観察から始めます。

実際何も見ないで作るとこうなります。

clock_icon_00

「なんとなく時計?」って感じで、特徴を捉えきれて無いことがわかると思います。

我ながら下手くそです(笑)

そこで、実際の写真を見てからどんな特徴があるのかを確認します。

単純にGoogleの画像検索でもいいですし、写真素材の配布サイトとかでもいいと思います。

個人的に参考にしているのは、

の2つくらいですね。

画像として利用するわけではないので、著作権とかは基本気にしていません。

写真をトレースして利用するのであれば、ライセンスは確認した方がいいですね。

アイコン作成では「特徴=共通部分」

わかりやすいようにオーソドックスな目覚まし時計の画像を拾ってきました。

clock-650753_1920

実物の写真を見ると時計の特徴としては

  1. 円の形をしている
  2. 長針と短針がある
  3. 時刻を表す目盛りがある

このあたりが大事そうです。 あと、

  • 目覚まし時計か?
  • 壁掛け時計か?
  • 腕時計か?

の違いもありますね。

目覚まし時計ならベルと足が、腕時計なら手首に巻くベルト部分が大事そうです。

実際にはいろんな画像を見比べて、共通部分を取り出していく作業です。

この共通部分というのが、アイコンを「時計」として認識するための最低限の図形になります。

図形に落としこむ方法(inkscapeで作業しました)

時計の特徴をつかめたところで、基本図形に落とし込んでいきます。

はじめに、上で話した3つの特徴をそのままパーツとして作っていきます。

 

円形オブジェクトは円形ツールを使ってそのまま作ればOKです。

2016-09-19_18h01_18_%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%af%e6%8a%bd%e8%b1%a1%e5%8c%96%ef%bc%81%e7%89%b9%e5%be%b4%e3%82%92%e8%a6%8b%e3%81%a4%e3%81%91%e3%81%a6%e5%9f%ba

フィルを無くして、ストロークのみにします。

あとは正円にするために[Ctrl]キーを押しながら円を作るのがポイントです。

 

短針と長針は矩形ツールを使いましょう。

2016-09-19_18h17_05_%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%af%e6%8a%bd%e8%b1%a1%e5%8c%96%ef%bc%81%e7%89%b9%e5%be%b4%e3%82%92%e8%a6%8b%e3%81%a4%e3%81%91%e3%81%a6%e5%9f%ba

矩形と言っても、細長くすれば線を作ることができるので、これを利用します。

フィルだけを設定して矩形を作って、その後に大きさの調整をします。

幅は同じにして、高さを変化させれば短針と長針を作れますね。

 

目盛り部分は矩形ツール・タイルクローンを使って作ったものを多角形ツールで切り抜いて作ります。

2016-09-19_18h47_32_%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%af%e6%8a%bd%e8%b1%a1%e5%8c%96%ef%bc%81%e7%89%b9%e5%be%b4%e3%82%92%e8%a6%8b%e3%81%a4%e3%81%91%e3%81%a6%e5%9f%ba

まずは矩形からタイルクローンで集中線を作ります。

矩形の大きさは円の大きさに合わせておきます。

2016-09-19_18h33_07_%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%af%e6%8a%bd%e8%b1%a1%e5%8c%96%ef%bc%81%e7%89%b9%e5%be%b4%e3%82%92%e8%a6%8b%e3%81%a4%e3%81%91%e3%81%a6%e5%9f%ba

この矩形を回転させるようにタイルを作ります。

2016-09-19_18h53_38_%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%af%e6%8a%bd%e8%b1%a1%e5%8c%96%ef%bc%81%e7%89%b9%e5%be%b4%e3%82%92%e8%a6%8b%e3%81%a4%e3%81%91%e3%81%a6%e5%9f%ba

目盛りの線は12本が等間隔に並んでいるので、30度(360÷12)ずつ回転するように設定すればOKです。

2016-09-19_19h00_33_%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%af%e6%8a%bd%e8%b1%a1%e5%8c%96%ef%bc%81%e7%89%b9%e5%be%b4%e3%82%92%e8%a6%8b%e3%81%a4%e3%81%91%e3%81%a6%e5%9f%ba

最後に「行、列」の数を設定して、作成します。

2016-09-19_19h09_47_%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%af%e6%8a%bd%e8%b1%a1%e5%8c%96%ef%bc%81%e7%89%b9%e5%be%b4%e3%82%92%e8%a6%8b%e3%81%a4%e3%81%91%e3%81%a6%e5%9f%ba

出来上がったクローンをオリジナルから切り離して、全てを1つのパスに統合しておきます。

2016-09-19_19h13_52_%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%af%e6%8a%bd%e8%b1%a1%e5%8c%96%ef%bc%81%e7%89%b9%e5%be%b4%e3%82%92%e8%a6%8b%e3%81%a4%e3%81%91%e3%81%a6%e5%9f%ba

2016-09-20_09h36_13_%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%af%e6%8a%bd%e8%b1%a1%e5%8c%96%ef%bc%81%e7%89%b9%e5%be%b4%e3%82%92%e8%a6%8b%e3%81%a4%e3%81%91%e3%81%a6%e5%9f%ba

統合は切り抜きをするときに必要なので、ココで忘れずにやっておくといいと思います。

中心線の真ん中を切り取るための多角形を作ります。

2016-09-20_09h45_33_%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%af%e6%8a%bd%e8%b1%a1%e5%8c%96%ef%bc%81%e7%89%b9%e5%be%b4%e3%82%92%e8%a6%8b%e3%81%a4%e3%81%91%e3%81%a6%e5%9f%ba

Ctrlキーを押しながら多角形を作ると、角度がロックされて、ちょうど良い多角形が作れます。

大きさは選択ツールで変えることができます。

多角形をパスへ変換し、集中線と重ねてパスの差分をとると目盛り版の部分が作れます。

2016-09-20_09h53_10_%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%af%e6%8a%bd%e8%b1%a1%e5%8c%96%ef%bc%81%e7%89%b9%e5%be%b4%e3%82%92%e8%a6%8b%e3%81%a4%e3%81%91%e3%81%a6%e5%9f%ba

2016-09-20_09h56_00_%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%af%e6%8a%bd%e8%b1%a1%e5%8c%96%ef%bc%81%e7%89%b9%e5%be%b4%e3%82%92%e8%a6%8b%e3%81%a4%e3%81%91%e3%81%a6%e5%9f%ba

中心を揃えるところも忘れずにやっておきます。

アイコンの場合は対称性も重要だったりしますので。

 

これで全てのパーツが完成しました。

2016-09-20_10h00_59_%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%af%e6%8a%bd%e8%b1%a1%e5%8c%96%ef%bc%81%e7%89%b9%e5%be%b4%e3%82%92%e8%a6%8b%e3%81%a4%e3%81%91%e3%81%a6%e5%9f%ba

パーツを調整しながら組み合わせていくと、時計のアイコンになります。

2016-09-22_07h40_04_%e3%82%a2%e3%82%a4%e3%82%b3%e3%83%b3%e3%81%ae%e5%9f%ba%e6%9c%ac%e3%81%af%e6%8a%bd%e8%b1%a1%e5%8c%96%ef%bc%81%e7%89%b9%e5%be%b4%e3%82%92%e8%a6%8b%e3%81%a4%e3%81%91%e3%81%a6%e5%9f%ba

アイコンとしては線が細いのが気になりますが、はじめに作った適当なアイコンよりはよっぽど時計らしく出来上がりました。

長針・短針は選択ツールで回転させています。

針の長さも円のおおきに合わせて変更しました。

円と目盛り版の位置は「整列と配列」機能の「中心に合わせる」で調整しています。

あとがき

この方法なら、ネット上の画像をもとにアイコンを作成することができるので、現物が近くになくても問題ありません。

あとはソフトの練習にもなるので、いろいろなアイコンを作ってみるというのもいいと思います。

素材作成のスキルアップならこういう書籍も参考にしてみるといいと思います。

飾り枠とかロゴマークの学習ならこの書籍が一番参考になるかな?と思います。

事例も多いので、私は練習本として活用しています。

記事が気に入ったら
tipLog を "いいね!"
Facebookで更新情報をお届け。

tipLog

WordPressテーマ

WordPressテーマ「MAG(TCD036)」

スポンサードリンク

関連記事

  1. グラフィックデザイン

    GIMPでトリミング画像に影をつけてサクッと立体感を生み出すチュートリアル

    写真から切抜きした画像単体では、立体感がなく物足りないような印象を受け…

  2. ウェブコーディング

    PHPで配列と文字列の変換をデータベースに応用する方法

    データベース検索などを利用するときに、$_POSTや$_GETで受け取…

  3. リファレンス

    inkscape 矩形ツールの基本操作をマスターしよう【映像あり】

    inkscapeの基本操作をまとめてみました。今回は矩形ツールです。ま…

  4. リファレンス

    inkscape 円形ツールの基本操作をマスターしよう【映像あり】

    初めてinkscapeを使う方向けの、円形ツールを使ったシェイプの作り…

  5. グラフィックデザイン

    無料素材を集めてコラージュを作るチュートリアル

    デザインを独学で学ぶとき、何をすればいいかわからないということも多ので…

  6. トラブルシューティング

    アンインストールしたフォントがinkscapeで表示されているときの対処法

    メインで使用しているPCのフォントを整理した後のことです。Wind…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


スポンサードリンク

ピックアップ記事

おすすめの本

使用している素材

カテゴリー

 
  1. 素材

    無料でクオリティが高く、検索機能が利用できる画像素材サイト3選
  2. グラフィックデザイン

    レイアウトデザインに最適な無料ソフト「inkscape」(≒Illustrato…
  3. グラフィックデザイン

    自作?外注?その前にコレ!ブログのロゴデザインをするなら「Logaster」を使…
  4. ブログ収益化

    脱初心者しませんか?Amazon・楽天のアフィリエイトを上手に活用するための予備…
  5. タイポグラフィ

    読みやすい明朝体フリーフォント
PAGE TOP