ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

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月の人気記事ランキング