ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

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

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

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

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

Rank Tracker

テクニック

Homeフォトショップ講座 > Photoshopでエンブレムスタイルのロゴを作る方法

Photoshopでエンブレムスタイルのロゴを作る方法

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

このチュートリアルでは、Photoshopでエンブレムスタイルのロゴを作る方法を紹介します。

Step1.はじめに

このチュートリアルでは、このロゴを作ります。

完成図

ロゴの作り方を中心に話していくので、背景の作り方については深入りしません。
適当な青色(ここでは、#00b8d4)で塗りつぶし、斜線パターンをその上にかぶせます。
すると、綺麗なストライプ柄になります。



Step2.円を描く

まず、500px×500pxの大きさの新しいドキュメントを作成します。
次に、楕円形選択ツール楕円形選択ツールを使って、ページの中央に正円を描きます。
そして、選択範囲内をグレー(ここでは、#373737)で塗りつぶします。

より良い見栄えにするため、[レイヤー] − [レイヤースタイル] − [境界線]から、#292929の色で5pxの境界線をつけます。

円に境界線をつける



Step3.パターンを作成し、適用する

エンブレムの背景に使うために、新しいパターンを作成しましょう。
10px×10pxの新しいドキュメントを作ります。
そして、1pxの鉛筆ツール鉛筆ツールを使って、下のような図形を描きます。

パターンを作成する

このように描けたら、新しいパターンとして定義します。
「編集」−「パターンを定義」を選択して名前をつけます。

エンブレムロゴを作っていたドキュメントに戻りましょう。
円を描いたレイヤーの、レイヤーウィンドウ内の縮小表示用の小窓を、Ctrlキーを押しながらクリックします。
すると、レイヤーの中身がハイライトされます。
円の輪郭がハイライトされたら新しいレイヤーを作り、「編集」−「塗りつぶし」を選択します。
そして、先ほど作成したパターンを選択して塗りつぶします。
パターンで塗りつぶしたレイヤーの不透明度を25%にして、Ctrl + Eで下にあるエンブレムのレイヤーと結合します。

パターンで塗りつぶす



Step4.文字を作成する

エンブレムの「Lee Grant」の部分を作っていきます。
ここでは、「Bebas Neue」というフォントを使います。
色は #ffffff、サイズを40pxにして、「Lee Grant」と書きます。
テキストに深みを加えるため、[レイヤー] − [レイヤースタイル] − [ドロップシャドウ]を選択し、次のように設定します。

ドロップシャドウの設定をする

「ライン」という名前の新しいレイヤーを作り、長方形選択ツール長方形選択ツールを選んで、ロゴを水平に横切る1ピクセルの高さの線をひきます。
線の長さは文字全体の幅と同じになるようにします。
その後、「編集」−「塗りつぶし」を選択し、選択範囲をフォントと同じ色で塗りつぶします。

ラインを引く

次は、「Caviar Dreams」というフォントを使います。
このフォントを使って、「WEB DESIGNER」と書きます。

色は #ffffff、サイズは19.3pxにします。

テキストを入力する



Step5.星を描く

少しの間だけ、ロゴレイヤーを見えないようにし、背景だけが見えるようにします。
ペンツールペンツールを選択し、下のような星の形を描きます。
前景色を白に変えて、星を右クリックし、「パスの塗りつぶし」を行います。
すると、パスが前景色で塗りつぶされます。

星を描く

次に「編集」−「自由変形」を選んで大きさを調整し、4つに複製します。
作成した星は上部に2つ、下部に2つ配置します。

星を配置する



Step6.影をつける

ステッカーのように薄っぺらく見えているため、影をつけてロゴらしく仕上げましょう。
影という名前のレイヤーを作り、楕円形選択ツール楕円形選択ツールと塗りつぶしを使って、楕円形の影を追加します。
「フィルタ」−「ぼかし」−「ぼかし(ガウス)」を選択し、半径を5pxにして、影をぼかします。

影をつける



Step7.完成

完成です。

完成



引用:Web Design Library 著者:Hv-Designs.co.uk 翻訳:なかけん



スポンサードリンク

コメント

ランダム記事5件

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