07

05月2008年

すこしズルしてリアルなアイコンを作る方法

toyama 17:00 PM

  • はてなブックマークに登録
  • livedoorクリップに登録
  • Yahoo!ブックマークに登録
  • deliciousに追加

イメージ

猫も杓子も Web 2.0 的な表現がもてはやされた頃、
ツヤツヤでリアルなアイコンの作成を迫られて嫌な汗をかきました。
質のよいイラストを描くことが要求される上、小さく細かい作業がてんこ盛り。
時間もスキルも足りない!

[1]
080507_toyama_01.jpg
まずフリー写真を探します。
アイコン作るのに何故写真が必要なの?とお思いかもしれませんが何故ならすこしズルいからです。
今回はこの本の写真を、アイコンっぽくしてみます。

[2]
080507_toyama_02.gif
必要なサイズにぎゅっと縮小し、背景を切り落とします。
[フィルタ]→[カラー調節]→[トーンカーブ]で、強めに調節します。
さらに[フィルタ]→[カラー調節]→[明るさ・コントラスト]でかなり思い切ってコントラストを上げます。
写真が縮小された上、強く補正をかけたことで、イラストに近いテイストになってきました。

[3]
080507_toyama_03.gif

ここまでくればあとは簡単。
輪郭線を書き足したり、グラデーションを上から重ねたりしていくとなんだかアイコン風に!

[4]
080507_toyama_04.gif
ドロップシャドウや映り込みを配置すれば、それっぽいアイコンになります。
大幅な作業時間の短縮が可能です。
…イラスト描けるようになりたいなー。

バシャログスタッフによるWebサイト制作サービス

トラックバック

このエントリーのトラックバックURL
http://c-brains.jp/cgi-bin/mt/###/1531
###はmt-tb.cgiに変更してください。

日々、ウェブデザインとネットニュースとゲームとか。 - 手書きのウェブサイトの紹介。他

日々、ウェブデザインとネットニュースとゲームとか。

手書きのウェブサイトの紹介。他
すこしズルしてリアルなアイコンを作る方法 | バシャログ。 レトロチックなデザインのフリーフォント集 | コリス [CSS]よく使用す...
トラックバック時刻
2008年05月08日 23:53

エンジニアの低脳っぷりを晒す戦記 - すこしズルしてリアルなアイコンを作る方法を実際にためしてみた

エンジニアの低脳っぷりを晒す戦記

すこしズルしてリアルなアイコンを作る方法を実際にためしてみた
すこしズルしてリアルなアイコンを作る方法 | バシャログ。 http://c-brains.jp/blog/wsg/08/05/07-170000.ph...
トラックバック時刻
2008年05月09日 01:00

Tools&Toolz - 【GIMPチュートリアル】第四回 簡単にWeb2.0風の画像を作る

Tools&Toolz

【GIMPチュートリアル】第四回 簡単にWeb2.0風の画像を作る
ちょっと乗り遅れたかもしれないけど 三日前にホットエントリになった すこしズルしてリアルなアイコンを作る方法 | バシャログ。 をGIMPでやってみよう...
トラックバック時刻
2008年05月10日 16:50

コメント

金糸雀と聞いて飛んで来ますた

楽してズルしていただくつもりはなかったんですが、
連載再開はとてもめでたいですね!

はじめまして。
ソーシャルブックマークからきました。
これは相当使えます!
早速使わせていただきます!

> プルタブさん
コメントありがとうございます!
お役に立てそうでうれしい限りです。
これからもバシャログをよろしくお願いします。

コメントを投稿

ページの先頭へ

POPULAR TAGS
  • バシャログスタッフによるWebサイト制作サービス

ARCHIVE

RECENT COMMENTS

sakai on 2009年振り返り&2010年展望
川本真琴情報局さん、コメントありがとうございます。 NEWア
川本真琴情報局 on 2009年振り返り&2010年展望
こんにちは。 川本真琴さんの新アルバム、発売されますね!超楽
nakamura on タダって最高!フリーのグループウェア色々
>ちゃお。さん コメントありがとうございます。サイボウズにも
ちゃお。 on タダって最高!フリーのグループウェア色々
おろ、サイボウズLiveが入ってないっすね。
ichikawa on [EC-CUBE カスタマイズ日誌] 第 8 回 商品名・検索ワード以外の項目でも検索可能にする
> MJさん コメントありがとうございます。 返信が遅くな