スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

Homeフォトショップ講座 > Photoshopで簡単なマルチタグのアイコンを作る

Photoshopで簡単なマルチタグのアイコンを作る

投稿日:2008年12月05日   レベル:中級者    ソフトウェア:PhotoShop
このチュートリアルでは、Photoshopで簡単なマルチタグのアイコンを作ってみたいと思います。


Step1:はじめに

任意のサイズと背景で新規ドキュメントを作成し、角丸長方形ツール角丸長方形ツールを選択して半径を10ピクセルにします。

角丸長方形ツール

任意の色で細長い長方形を描いてから、「編集」−「変形」−「回転」を選択して、少しだけ回転させます。
回転させたらレイヤースタイルを設定して不透明度を85%にします。

レイヤースタイル

レイヤースタイル

レイヤースタイル

すると次のようになります。

レイヤー


Step2:レイヤーマスクを加える

新規レイヤーを作成し、「Ctrl」キーを押しながら青いタグのレイヤーのシェイプをクリックします。
レイヤーの不透明度を12%にしてレイヤーマスクを加えます。
「Ctrl」キーを押しながら作成したレイヤーマスクをクリックします。

マスクの部分が範囲選択されていることを確認し、楕円形選択ツール楕円形選択ツールを選択して「Alt」キーを押しながら範囲選択をします。

選択範囲

次に「選択範囲」−「選択範囲を反転」をクリックし、下から上に向けてリニアグラデーションをドラッグします。

リニアグラデーション

もう一度楕円形選択ツール楕円形選択ツールを選択してタグの上部左に円を作成します。

円を作成する


Step3:グラデーションオーバーレイを加える

円にグラデーションオーバーレイを加えます。

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

次の画像のように最初のタグを作ります。

タグ


Step4:新たにレイヤーを作りタグを増やす

最初のタグの下にさらに長方形を作成します。
それぞれのタグに次のレイヤースタイルを使います。
それぞれの長方形をわずかに回転させる際には、最初に作った円を中心点にしましょう。

レイヤースタイル

レイヤースタイル

レイヤースタイル

すると次のようになります。


Step5:完成

それぞれ異なるタグを作りますが、ここではテキストとPhotoshopのアイコンとHV-Designsのロゴを使ってみました。

完成

完成



引用:Web Design Library 著者:hv-designs.co.uk 翻訳:菊池



スポンサードリンク

コメント

ランダム記事5件

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