水面に写ったようなロゴや立体的なボタンの作成方法を教えてください。

Question

はじめまして。
現在、photoshopを勉強中のものです。
illustratorはある程度使えるんですが、illustratorだけでは限界を感じ最近photoshopでいろいろなボタンやロゴを見て作り方を勉強しています。

そこで、皆様にお聞きしたいのが、以下のサイトにあるような２つのボタンやロゴの作成方法を教えていただけないでしょうか？

(1)水面に写った様なロゴ（ここのサイトのロゴや記事中のピンクのロゴ）
http://www.dezinerfolio.com/

(2)メニューの緑の立体的なボタンになります。
http://www.jahma.jp/

（２）についてはよく見かける立体的なボタンより少し複雑なつくりになっているような気がするんですが・・・
真ん中から上の部分によく見かける立体的なボタンを配置して、下に斜線のボタンを配置しているような・・・間違ってたらご指摘お願いいたします。

また、よく見かける斜線のデザインはphotoshopで作成されたものなのでしょうか？
illustratorを使用して作成することは簡単だと思うんですが・・・illustratorだと少し面倒でして・・・本当ならphotoshopのほうが向いている作業なんじゃないかと・・・

こちらもよく使われている作成方法などあれば教えていただけないでしょうか？

質問が多岐にわたってしまいましたがどうか宜しくお願いいたします。

hiroleta · Accepted Answer

イラストレーターだけでも出来ます。
例として。
水面に写った様なロゴ←画面に１００ｍｍ角の黒四角を長方形ツールで描く（塗り黒・線なし）＞オブジェクト＞ロック＞楕円ツールで、Ｈ６０ｍｍＷ３０ｍｍの楕円を黒四角の中央に描きます（塗り薄いブルー・線なし）＞ペンツールで、楕円の上下の中央に幅よりも長い水平線を描きます＞楕円と水平線を選択＞パスファインダの分割をクリック＞右クリック＞グループ解除＞楕円の上だけを選択＞効果＞スタイライズ＞光彩（内側）＞スクリーン・不透明度９０％・ぼかし９ｍｍ・中央揃え＞ＯＫ＞楕円の下だけを選択＞塗りを少し濃い青にする＞効果＞スタイライズ＞光彩（内側）＞スクリーン・不透明度９０％・ぼかし９ｍｍ・中央揃え＞ＯＫ＞回転ツールで楕円の一番下中央のアンカーをＡｌｔを押したままでクリック＞角度１８０度＞コピー＞編集＞コピー＞編集＞前面へペースト＞アピアランスパレットの光彩（内側）の文字をクリック＞その下の右、ゴミ箱のアイコンをクリック＞スオッチパレットのブラック＆ホワイトのグラデーションをクリック＞グラデーションパレットの種類は線形・角度９０度＞楕円の下側だけを黒矢印（選択ツール）でクリック＆ドラッグで選択（コピー前の下側とグラデーションの下側の二つを選択）＞透明パレットの右上の三角をクリック＞不透明マスクを作成＞パレット内のマスクを反転をクリック＞その左の白黒グラデーションをクリック＞不透明度８０％。

記事中のピンクのロゴ←画面に文字ツールで文字を書く＞黒矢印を」クリック＞文字（書式）＞アウトラインを作成＞塗りピンク＞リフレクトツールをダブルクリック＞水平をクリック＞コピー＞キーボードの↓を文字が離れるまで押す＞編集＞コピー＞編集＞前面へペースト＞スオッチパレットのブラック＆ホワイトのグラデーションをクリック＞グラデーションパレットの種類は線形・角度９０度＞黒矢印（選択ツール）でクリック＆ドラッグで選択（コピー前の下側とグラデーションの下側の二つを選択）＞透明パレットの右上の三角をクリック＞不透明マスクを作成＞パレット内のマスクを反転をクリック＞その左の白黒グラデーションをクリック＞不透明度８０％＞グラデーションパレットのカラーバーの上の小さなひし形を右に移動（８０％の位置）。

メニューの緑の立体的なボタンになります。←長方形ツールでＨ２０ｍｍＷ６０ｍｍの四角を描きます＞塗りＣ６０Ｍ２０Ｙ６０Ｋ０・線なし＞ペンツールで、四角の上から１/４下に幅よりも長い水平線を描きます＞四角と水平線を選択＞パスファインダの分割をクリック＞右クリック＞グループ解除＞下の四角を選択＞グラデーションパレットのグラデーションをクリック・種類は線形・角度９０度＞その下のカラーバーの右下の四角をクリック＞色をＣ８０Ｍ４０Ｙ１００Ｋ０＞カラーバーの左下の四角をクリック＞色をＣ４０Ｍ０Ｙ６０Ｋ０＞カラーバーの上の小さなひし形を左に移動（２０％の位置）。

こんな感じでしょうか・・・？

sandenn · Answer

DezinerFolioを知っているならこの辺も知っているかもしれませんが。
http://www.designwalker.com/2007/05/photoshop_gradient.html
http://www.drweb.de/weblog/weblog/?p=780

ddg67 · Answer

１．垂直に反転してぼかしたり、特にこれという手法ではないですね
２．グラデーションツール使ってるだけ、選択範囲を指定して上だけとか下だけ、とか、マスク使ってやってもいいし

と、子の程度であればPhotoshopのほーが楽ですね

すごーく単純な方法の組み合わせなんで市販の本とか見るといいですよ、文字での説明よりかは判りやすいですから(^_^;

p-ink · Answer

(1)のロゴは上の本体をまず書いてそのレイヤーを複製かコピペで同じレイヤーを作ってから上下反転
そのレイヤーの上にグラデーションツールで色はグレー下から上にグラデーションになるように書いてこのレイヤーの透明度を下げたのではないでしょうか。

(2)は参考URLのようにガラスっぽいボタンを作り
下のほうに透明度を調整した斜めのストライプのレイヤーを重ねたのかと思いますが。

参考URL：http://flap.vis.ne.jp/pxb/site/site_a/tips/sozai/aquabt/aquabt.html

水面に写ったようなロゴや立体的なボタンの作成方法を教えてください。

イラストレーターだけでも出来ます。

DezinerFolioを知っているならこの辺も知っているかもしれませんが。

１．垂直に反転してぼかしたり、特にこれという手法ではないですね

(1)のロゴは上の本体をまず書いてそのレイヤーを複製かコピペで同じレイヤーを作ってから上下反転

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング