個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

Photoshopを使ってメタリック/クロームなシェイプを作成する方法:海外チュートリアル翻訳01

海外のサイトにはPhotoshopやIllustratorをはじめとした代表的なソフトを使ったチュートリアルが非常にたくさんあります。
これがどれもこれも、とっても勉強になるものばかりでして。
しかも出来上がりのクオリティがすごいものが多い。
勉強になるだけでなく、楽しくもあります。
そこで当ブログでは、海外のチュートリアルのなかから、初心者の方でも実践できそうなチュートリアルをランダムにピックアップして、少しずつご紹介していきたいと思います。
といいながら、自分の復習&スキルアップも兼ねています。
英語の翻訳間違いなどもあるかと思いますが、そのあたりは優しくご指摘いただければ幸いです。
第1回目となる今回は、Photoshopを使ってメタルちっくなシェイプをつくる方法です。

背景レイヤー

ファイルサイズは今回、800px×800pxにしました。
カラー設定は以下のとおりにして、「ツールパレット」から「グラデーションツール」を選択して(設定は円形グラデーション)塗りつぶします。
描画色 – #93cc1a
背景色 – #7eb704
tut2014042801

エッジにシャドウを入れる

エッジにシャドウを入れます。
「新規レイヤー」を作成し、描画色をブラックに。
「ブラシツール」の「ソフトブラシ」を選択して、エッジに影をつけていきます。
(ブラシの大きさ、流量などはお好みで)
tut2014042802
塗り終わったら、レイヤーの不透明度を10〜30%にします。
tut2014042814

ぼかしを入れてさらに自然に

先ほど作成したレイヤーを選択し、「フィルター」>「ぼかし」>「ぼかし(ガウス)」を選択します。
半径は20pxぐらいにしましょう。
これで、グラデーションツールだけでは出せない、自然なタッチを表現できます。
tut2014042803

背景に模様を入れる

背景に少しだけ装飾を施します。
なんでもいいのですが、ツールパレットから文字ツールを選択し「S」を入力します。
塗りは #cecfd0 とします。
大きく拡大し(「編集」>「変形・拡大」などを使って)配置します。
tut2014042804
続いて文字を描いたレイヤーを選択して「乗算」にします。
Sを複製して、画像のように配置します。
tut2014042805

エンブレムを描く

エンブレムを描きます。
ツールパレットから「シェイプツール」>「カスタムシェイプツール」を選択します。
tut2014042806
上部メニューパレットの「シェイプ」から「エンブレム」を選択。
tut2014042807
描画色は #cecfd0 にして、シェイプを描きます。
tut2014042808

レイヤースタイルでドロップシャドウ、境界線を施す

作成したカスタムシェイプに、レイヤースタイルを施します。
カスタムシェイプが描かれたレイヤーを選択し、「新規レイヤースタイル」>「ドロップシャドウ」を選びます。
tut2014042809
ドロップシャドウのポイントはなんといっても、「かすか」に施すこと。
強すぎるドロップシャドウはクールな印象を損ないます。
ここでは下記のような設定にしていますが、お好みで調整を。
tut2014042810
続いては「境界線」を選択し、図のように設定します。
「塗りつぶしタイプ」は円形グラデーションで、うすいグレー〜グレー〜うすいグレーというグラデにします。
tut2014042811

さらに、グラデーションオーバレイを施す

さらに「グラデーションオーバレイ」を追加します。
ここでのグラデーションは、さきほど境界線で作成したグラデーションとおなじ形です。
tut2014042812

ベベルとエンボスを加える

続いて、立体感を持たせるために「ベベルとエンボス」を加えます。
メタリッククロームのような印象を持たせるには、構造のサイズを大きくすることによって得られます。
「陰影」は「ローリングスロープ」に。
さらに、輪郭にチェックを入れて、調整します。
それぞれのサイズは自分の感覚で「ここだ」という数値になるまで調整します。
tut2014042813

全体の様子を見て再調整して完成!

最後に、全体の様子を確認し、レイヤースタイルの値を調整して見栄えを良くしていきます。
お疲れ様でした。完成です。
Metallic-Styles-in-Photoshop

Photoshopをマスターするのに必須な書籍

Photoshopに慣れるのだったら、いきなりWEBで公開されているチュートリアルをガンガン実践していくだけでもいいのですが、やはり最初は全体を知る上でも、数冊の書籍を読んで練習なされることをおすすめします。
現段階で役立つPhotoshop本は次のような感じです。
また、こうした本を読んで実践してから、海外のチュートリアルを見ると、理解するスピードが格段に変わってきます。

Adobe Photoshop CS6 パーフェクトマスター


掲載されている例があまりよろしくないのですが、Photoshopの全体像を把握するには、やっぱりこれでしょう。
辞書的な意味合いで利用しています。

amazonの場合
Adobe Photoshop CS6 パーフェクトマスター―Adobe Photoshop CS6/Extended/CS5/CS4/CS3対応 Windows/Mac OS X対応

楽天ショップの場合
Adobe Photoshop CS6パーフェクトマスター

Photoshopデザインメソッド


個人的に井上本が好きなもので。
なぜ好きかというと、素材の作り方がとっても参考になるからです。
なかには、周りくどい作り方のものもありますが、そのへんは各自でアレンジしてつくるということで。

amazonの場合
Photoshopデザインメソッド

楽天ショップの場合
Photoshopデザインメソッド

Photoshopデザインラボ-プロに学ぶ、一生枯れない永久不滅テクニック-[改訂第二版]


つくってみたい! トライしてみたい!と思える例ばかり。
技術的なこともハイレベルで、とっても参考になります。

amazonの場合
Photoshopデザインラボ -プロに学ぶ、一生枯れない永久不滅テクニック-[改訂第二版]

楽天ショップの場合
Photoshopデザインラボ改訂第2版

Photoshop 10年使える逆引き手帖


基本的なテクニックを学ぶのに最適な一冊。
例もキレイで、好感が持てます。

amazonの場合
Photoshop 10年使える逆引き手帖 【CS4/CS3/CS2/CS/7.0対応】

楽天ショップの場合
Photoshop 10年使える逆引き手帖

神速Photoshop


ある程度、Photoshopに慣れてきたと思った頃に読むと、とっても役立ちます。
「こんなやり方があったの!」と思えるような出合いがたくさん待っていますよ。
姉妹本に「神速Photoshop [Webデザイン編]」もあります。

amazonの場合
神速Photoshop [グラフィックデザイン編]

楽天ショップの場合
神速Photoshop(グラフィックデザイン編)]

ここまでは「Metallic Styles in Photoshop」をもとに作成ました。

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 0
  • 3

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

参考にしたい! 世界のコーヒーカンパニーが展開するブランディング例19

参考にしたい! コーヒーのブランディング例19

コーヒーのブランディング例をご紹介します。 最近では大企業にとどまらず、小さな会社や個人事業主でも

記事を読む

FIFAワールドカップ1934〜2014年大会までのFIFAワールドカップロゴデザイン

FIFAワールドカップ1934〜2014年大会までのFIFAワールドカップロゴデザイン

またまた旬なネタで。 必ず盛り上がるワールドカップ。 そのワールドカップを象徴するのがロゴデザイ

記事を読む

日本のマンホールはデザイン的に素晴らしい!マンホール画像をコレクションした「Manhole covers」

普段気にも留めないものの、雨が降ったときだけ自転車での走行に注意するマンホール。 そんな地面に這い

記事を読む

UIのインスピレーションに最適な「UXPorn」

UIデザインのインスピレーションで溢れてる「UXPorn」

サイトやWEBサービスをつくるときにどのようなUIデザインにするかは悩むところですよね。 UIをつ

記事を読む

レジご担当者も思わずニヤリ!おしゃれすぎるデザインされたバーコードたち56

ふだん見かける味気ないバーコード。 バーコードってこんなもの、という先入観から、何の疑問ももつこと

記事を読む

お得すぎる!商用利用できる無料の背景用ベクター素材500

フリー素材を紹介しているFreepikは、よく無料の素材をまとめて配布してくれています。 そのFr

記事を読む

無料で使える宇宙画像の素材コレクションサイト「PEEKSPACE」

無料で自由に使える宇宙画像の素材コレクションサイトをご紹介します。 宇宙関連の画像はさまざまありま

記事を読む

宇宙をテーマにした無料のフリーテクスチャ/画像

宇宙・地球・月・惑星の無料写真/画像55

宇宙・星空・惑星・地球・月をテーマにした無料のフリーテクスチャ/画像をピックアップしてみました。

記事を読む

商用利用可能なハイクオリティ写真のまとめサイト「Pexels」

商用利用可能なハイクオリティ写真のまとめサイト「Pexels」

商用利用可能なのに、ハイクオリティ写真をコレクションしているサイトが次々と公開されていますね。 利

記事を読む

和の雰囲気にピッタリ!筆・絵筆のIllustrator用無料フリーブラシセット(総数)

和の雰囲気にピッタリ!筆・絵筆のIllustrator用無料フリーブラシセット(総数500以上)

Illustratorで和風の雰囲気を出したいときに便利なのが、筆や絵筆のブラシです。 今回は、そ

記事を読む