スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

Homeフォトショップ講座 > Photoshop CS6でアイコンを作るチュートリアル

Photoshop CS6でアイコンを作るチュートリアル

投稿日:2015年11月20日   ソフトウェア:Photoshop

このチュートリアルではPhotoshop CS6でアイコンの作り方をご紹介します。

Step1:はじめに

今回のPhotoshop CS6チュートリアルでは、Photoshopアプリのアイコンを作成していきます。以前、別のページで写真に効果を加えるチュートリアルを作成しましたが、今回はアイコンを作るという、また別の内容です。記事の最後で、PSDファイル(Photoshop形式)をダウンロードすることができます。

新しいPhotosop CS6はダークなテーマが印象的ですが、それが好きでない人はインターフェイスを変えることもできます。このテーマが追加されたのは、今回が初めてだと思います。

Photoshop CS6でアイコンを作るチュートリアル

このチュートリアルは、古いバージョンのPhotoshopでも使えます。しかし、今回のアイコンを作るなら、Photoshop CS3ではなく、新しいダークなインターフェイスの方が良いでしょう。Photoshop CS3からアップグレードしていない方は、この機にぜひアップグレードしましょう。

チュートリアルの推奨環境
対象:初心者
ソフトウェア:Photoshop CS6かCS3
所要時間:20分

最終形

はじめに



Step2:背景を作成

ファイル⇒新規とするか、Ctrl+Nにより、600px四方の新しいファイルを作成します(解像度は72)。背景は、#343434にします。

ミニチュア風加工





Step3:ベースレイヤーを作成

アイコンの基礎を作ります。角丸長方形ツールで、256px四方の図形を作ります。色は自由です。レイヤーには、「ベース」という名前をつけましょう。

完成

ベースレイヤーにレイヤースタイルを追加します。シンプルなグラデーションオーバーレイ効果を加えます。設定は、下のスクリーンショットをご覧ください。角度は0度、スタイルは反射、「シェイプ内で作成」にチェックを入れます。

完成

完成

ベースレイヤーのプレビュー

完成



Step4:プライマリーベースレイヤーを作成

ベースレイヤーを複製し、ALTキーと上矢印キーを押して上に移動させます。グラデーションオーバーレイと3pxから5pxの境界線を追加します。レイヤーの名前を「プライマリーベース」とします。

完成

グラデーションオーバーレイの設定は、スタイルを反射、角度を90度にします。また、「シェイプ内で作成」にチェックを入れます。グラデーションのスライダーも変更します。

プライマリーベースレイヤーのプレビュー

完成



Step5:ステージレイヤーを作成

ボタンの作成が終わったので、アイコンを置くためのステージを用意しましょう。プライマリーベースレイヤーを複製し、角丸長方形を小さくしましょう。

Ctrl+Tで自由変形西、Shift+Altキーを押しながら、図形を小さくします。プライマリーベースレイヤーと同じ形の角丸長方形ができます。このレイヤーに「ステージ」という名前をつけましょう。

完成

完成

完成

完成

ここでは、新しいPhotoshop CS6のアイコンと同じ色を設定しましたが、少し違いはあるかもしれません。上ではステージレイヤーに、べベルとエンボス、シャドウ(内側)、カラーオーバーレイを適用しました。

ステージレイヤーのプレビュー

完成



Step6:フォントを作成

アイコンにテキストを追加します。ここでは、Helveticaフォントを使いましたが、フリーのHelvetica代替フォントを使ってもいいでしょう。必要に応じて太字にします。テキストの色は#9fcefaにします。

完成

2分もかからずに完成です。



Step7:完成

このステップは任意ですが、ステージレイヤーの下に新しいレイヤーを追加し、グラデーションを設定することにより、他のアイコンとの違いをつけることができます。このPSDファイルをダウンロードすることができます。

完成

2分もかからずに完成です。



引用:Web Design Library 著者:animhut 翻訳:なかけん



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング