ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > Photoshopで温度計のアイコンを作る方法

Photoshopで温度計のアイコンを作る方法

投稿日:2011年10月25日   レベル:初心者    ソフトウェア:PhotoShop

このチュートリアルではPhotoshopで温度計のアイコンを作る方法を紹介します。

Step1.はじめに

今回は、Photoshopで温度計のアイコンを作ってみます。
下の図が完成予定図です。

完成予定図



Step2.温度計の形状を作る

600px×500pxの新規ドキュメントを作成します。

新規ドキュメントの作成

ツールパネルから楕円形ツール楕円形ツールを選択し、色を白(#ffffff)にしてから円を描きます。

白い円を描く

角丸長方形ツール角丸長方形ツールを選択し、色を白(#ffffff)に、半径を40%に設定してから角丸長方形を描きます。

白い角丸長方形を描く

長方形のレイヤーと円のレイヤーを、「Ctrl」キーを押しながら選択します。
「Ctrl」+「E」キーを押して結合します。

レイヤーを結合する



Step3.レイヤー効果を設定する

「レイヤー」−「レイヤースタイル」−「レイヤー効果」を選択し、以下のように設定します。

ドロップシャドウ

ドロップシャドウの設定

光彩(内側)

光彩(内側)の設定

グラデーションオーバーレイ

グラデーションオーバーレイの設定

境界線

境界線の設定

レイヤー効果を適用すると下の画像のようになります。

レイヤー効果適用後



Step4.温度計の中身の作成

再び楕円形ツール楕円形ツールを選択し、色を白(#ffffff)にしてから円を描きます。

白い円を描く

再び角丸長方形ツール角丸長方形ツールを選択し、色を白(#ffffff)に、半径を40%に設定してから角丸長方形を描きます。

白い角丸長方形を描く

長方形と円のレイヤーを結合し、レイヤーに「Red base」と名前をつけます。
「レイヤー」−「レイヤースタイル」−「レイヤー効果」を選択し、以下のように設定します。

光彩(内側)

光彩(内側)の設定

カラーオーバーレイ

カラーオーバーレイの設定

境界線

境界線の設定

レイヤー効果を適用するとこのようになります。

レイヤー効果適用後



Step5.ガラスの反射の作成

楕円形ツール楕円形ツールをもう一度選択し、色を白(#ffffff)にしてから円を描きます。
レイヤーに「crystal」と名前をつけます。

白い円を描く

「crystal」レイヤーを選び、「レイヤー」−「ラスタライズ」−「シェイプ」を選び、ラスタライズします。
ラスタライズしたら、ソフトブラシの消しゴムツール消しゴムツールを使って次の画像のように消します。

消しゴムツールを使って消す

「crystal」レイヤーの不透明度を60%に下げます。

レイヤーの不透明度を下げる

楕円形ツール楕円形ツールで色を白(#ffffff)にしてから、小さな円を描きます。

白い円を描く

小さい円のレイヤーをラスタライズし、消しゴムツール消しゴムツールを使って次の画像のようにします。

消しゴムツールを使って消す



Step6.目盛りの作成

長方形ツール長方形ツールで次のように白い線を描きます。

白い線を描く

線のレイヤーを4回複製して次のように配置します。

白い線を4回複製する

5番目の線は区切りの目盛りとなります。
複製した長方形を、「編集」−「変形」−「拡大・縮小」を選択して、他の線よりも少しだけ大きく作ります。

5番目の線だけ大きくする

5本の線のレイヤーを「Ctrl」キーを押しながらすべて選択し、「Ctrl」+「E」キーを押して結合します。
結合後のレイヤーに「lines」と名前をつけます。
「lines」レイヤーを5回複製し、次のように並べます。

5本1組の線を複製して並べる

すべての線のレイヤーを選択したら、「Ctrl」+「E」キーを押して結合し、レイヤーに「upper lines」と名前をつけます。
レイヤーを複製し、「編集」−「変形」−「垂直方向に反転」を選んだ後、次のように配置します。

複製した線を垂直方向に反転させる



Step7.温度計の中身の調整

「Red base」レイヤーを選択し、「レイヤー」−「レイヤースタイル」−「カラーオーバーレイ」を選びます。
以下の画像のように設定します。

カラーオーバーレイの設定



Step8.完成

これで完成です。

完成図



引用:Web Design Library 著者:tutorialchip.comm 翻訳:菊池



スポンサードリンク

コメント

ランダム記事5件

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