creatersnest39

難しいこと一切なし!簡単にプロ級のアイコンを作る方法まとめ


ウェブ制作には、アイコンやボタン、背景用のテクスチャなどあれこれとパーツが必要です。クォリティの高いものが無料でダウンロード出来る今日この頃ですが、プロ級のアイコンをさりげなく配置することでサイトのイメージアップをはかれたら良いと思いませんか。
プロ級のアイコンを作成するためのチュートリアルを探してみましたので参考にしてくださいね。

Photoshopで3DのTwitterアイコンを作成する方法

ps_21727_08
Photoshopで3DのTwitterアイコンを作成する方法

まずは3Dのツイッターアイコンの作成です。日本語訳されたチュートリアルなのでわかりやすいと思います。吹き出し部分が出来てしまえば、マークの部分を置き換えて使いまわせますね。

Design a Stylish Mail Icon in Photoshop

final-result-small
Design a Stylish Mail Icon in Photoshop

光沢のあるメールアイコンを作成する方法です。難しそうに見えますが、シェイプをひとつひとつ重ねて色をのせていくだけなので地道に作り上げるつもりで取り組むと良いと思います。封筒の中身はカスタムシェイプを加工して作っています。

Create an Adobe Box Icon in Photoshop Supercolortuts

Adobe_Box_Icon_Preview
Create an Adobe Box Icon in Photoshop Supercolortuts

アドビのボックス型の3Dアイコンです。サンプルはIllustratorのボックスになっていますがPhotoshopで作成しています。ブラシ、ぼかし、レイヤーマスクとブレンドモードを駆使していますのでこれ一つ作成するだけでかなり勉強になります。

拡大してもキレイなドット絵を作成する Photoshop養成ギプス

no490_00
拡大してもキレイなドット絵を作成する Photoshop養成ギプス

懐かしのゲームキャラクターを題材にした「拡大してもキレイなドット絵」の描き方です。特定の倍率以外で拡大しても形が崩れない描き方を動画も交えて説明してくれているチュートリアルです。

AHiL’s Varied Glass

AHiL's Varied Glass
AHiL’s Varied Glass

アイコン作成のチュートリアルではないのですが、アイコン作成に一役買ってくれそうな美しい半透明のパネルをダウンロードできるサイトのご紹介です。お好みの画像やテキストと重ねて使えば素敵なアイコンになりそうです。

Transparent Glass

Transparent Glass
Transparent Glass

こちらも同様に透明ガラスのパネルです。aslファイルとpsdファイルでダウンロードされるので、aslファイルの方はスタイルパネルに読み込んでしまえば簡単にアイコンの背景が作成できます。

Stylish Metallic Button in Photoshop

metallic-button-tut
Stylish Metallic Button in Photoshop

スタイリッシュでメタリックなボタンアイコンを作成するチュートリアルです。一見難しそうですが単純な形にレイヤースタイルで効果を与えていくだけなので書いてある通りに設定できればいつの間にかできてしまいます。

Create a High-Gloss Graduation Hat Icon Design

Conclusion
Create a High-Gloss Graduation Hat Icon Design

大学生が卒業式に被る角帽子の形のアイコンです。光沢を与えてオシャレな感じに仕上げています。工程は多いですが地道に進めていきましょう。英語のチュートリアルですがスクリーンショットが多いので理解しやすいと思います。

Adobe Photoshop CS3 Style Icons

Adobe Photoshop CS3 Style Icons
Adobe Photoshop CS3 Style Icons

基本的なグラデーションとレイヤースタイルの設定でベーシックなアイコンを作成するチュートリアルです。丁寧に説明されているのでアイコンの作成に慣れていない場合でもチャレンジしてみてはいかがでしょうか。

Safety Icon Design – Photoshop Graphic Design Tutorial 6

Safety Icon Design – Photoshop Graphic Design Tutorial 6
Safety Icon Design – Photoshop Graphic Design Tutorial 6

交通安全の標識のアイコンを作成するチュートリアルです。レイヤースタイルを設定していくことで作りこんでいきますが、アイコンの背景部分の作成方法なので中に収めるアイコンの図柄はカスタムシェイプなどを利用しましょう。

GunMetal Metallic Interface – Photoshop Graphic Design Tutorial 19

GunMetal Metallic Interface – Photoshop Graphic Design Tutorial 19
GunMetal Metallic Interface – Photoshop Graphic Design Tutorial 19

ガンメタルのメタリックなインターフェイスを作成するチュートリアルです。ガンメタルとは、銅と錫の合金でかつては大砲の砲身にも使われていたそうで、重厚感のある渋い雰囲気がいい感じですね。工程はそれほど多くないのでぜひチャレンジしてみましょう。

Photoshopでノートアプリのアイコンを作成する方法

Photoshopでノートアプリのアイコンを作成する方法
Photoshopでノートアプリのアイコンを作成する方法

ノートアプリのアイコンを作成するチュートリアルです。日本語訳してくれているので楽に取り組めると思います。紙のダメージ加工には2種類のブラシを使っています。紙の重なりやステッチの部分などディティールも参考になりますね。

Create a Custom Mac OSX Style Ring Binder Address Book Icon

Create a Custom Mac OSX Style Ring Binder Address Book Icon
Create a Custom Mac OSX Style Ring Binder Address Book Icon

オシャレなMac OS X 風のアドレスブックアイコンです。角丸四角形の角度を決めたらレイヤースタイル6種を設定します。光源についての軽い説明から入っていくだけあって凝っていますね。さすが見栄えが違います。

How to Create Stylish Flat Space Icons in Adobe Photoshop

How to Create Stylish Flat Space Icons in Adobe Photoshop
How to Create Stylish Flat Space Icons in Adobe Photoshop

ロングシャドウを用いたトレンディなフラットスタイルのスペースアイコンです。単純なシェイプをパス操作で変形していきます。丸っこい形や色の組み合わせによってレトロな効果を表現していて宇宙という最新技術との対比が面白いですね。

Draw a Compass Icon With a Long Shadow in Adobe Photoshop

Draw a Compass Icon With a Long Shadow in Adobe Photoshop
Draw a Compass Icon With a Long Shadow in Adobe Photoshop

ロングシャドウを用いたコンパスのアイコンを作成するチュートリアルです。ペンツールやシェイプツールを用いた単純な形を結合することで複雑な形状を作成しています。最後にロングシャドウを追加して完成です。チャレンジしてみましょう。

まとめ

いかがでしたか。サイト作成の際にはダウンロードで入手するアイコンで時間短縮することも多いと思いますが、時には自作の素敵なアイコンでサイトを飾ってみるのも良いかもしれません。プロ級の仕上がりも単純作業の積み重ねですから、チュートリアルを見ながら地道に作成してみてくださいね。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next Articleスマホサイトを簡単に作成してくれるサービス10選