• ベストアンサー

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

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

noname#52036
noname#52036

質問者が選んだベストアンサー

  • ベストアンサー
  • hiroleta
  • ベストアンサー率64% (1114/1719)
回答No.3

イラストレーターだけでも出来ます。 例として。 水面に写った様なロゴ←画面に100mm角の黒四角を長方形ツールで描く(塗り黒・線なし)>オブジェクト>ロック>楕円ツールで、H60mmW30mmの楕円を黒四角の中央に描きます(塗り薄いブルー・線なし)>ペンツールで、楕円の上下の中央に幅よりも長い水平線を描きます>楕円と水平線を選択>パスファインダの分割をクリック>右クリック>グループ解除>楕円の上だけを選択>効果>スタイライズ>光彩(内側)>スクリーン・不透明度90%・ぼかし9mm・中央揃え>OK>楕円の下だけを選択>塗りを少し濃い青にする>効果>スタイライズ>光彩(内側)>スクリーン・不透明度90%・ぼかし9mm・中央揃え>OK>回転ツールで楕円の一番下中央のアンカーをAltを押したままでクリック>角度180度>コピー>編集>コピー>編集>前面へペースト>アピアランスパレットの光彩(内側)の文字をクリック>その下の右、ゴミ箱のアイコンをクリック>スオッチパレットのブラック&ホワイトのグラデーションをクリック>グラデーションパレットの種類は線形・角度90度>楕円の下側だけを黒矢印(選択ツール)でクリック&ドラッグで選択(コピー前の下側とグラデーションの下側の二つを選択)>透明パレットの右上の三角をクリック>不透明マスクを作成>パレット内のマスクを反転をクリック>その左の白黒グラデーションをクリック>不透明度80%。 記事中のピンクのロゴ←画面に文字ツールで文字を書く>黒矢印を」クリック>文字(書式)>アウトラインを作成>塗りピンク>リフレクトツールをダブルクリック>水平をクリック>コピー>キーボードの↓を文字が離れるまで押す>編集>コピー>編集>前面へペースト>スオッチパレットのブラック&ホワイトのグラデーションをクリック>グラデーションパレットの種類は線形・角度90度>黒矢印(選択ツール)でクリック&ドラッグで選択(コピー前の下側とグラデーションの下側の二つを選択)>透明パレットの右上の三角をクリック>不透明マスクを作成>パレット内のマスクを反転をクリック>その左の白黒グラデーションをクリック>不透明度80%>グラデーションパレットのカラーバーの上の小さなひし形を右に移動(80%の位置)。 メニューの緑の立体的なボタンになります。←長方形ツールでH20mmW60mmの四角を描きます>塗りC60M20Y60K0・線なし>ペンツールで、四角の上から1/4下に幅よりも長い水平線を描きます>四角と水平線を選択>パスファインダの分割をクリック>右クリック>グループ解除>下の四角を選択>グラデーションパレットのグラデーションをクリック・種類は線形・角度90度>その下のカラーバーの右下の四角をクリック>色をC80M40Y100K0>カラーバーの左下の四角をクリック>色をC40M0Y60K0>カラーバーの上の小さなひし形を左に移動(20%の位置)。 こんな感じでしょうか・・・?

noname#52036
質問者

お礼

とても詳しい回答本当にありがとうございます! あとで手順どおり作成してみます! とても楽しみです・・・ 本当にありがとうございました!

その他の回答 (3)

  • sandenn
  • ベストアンサー率67% (311/459)
回答No.4

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

noname#52036
質問者

お礼

ありがとうございます! 上のURLは紫色になってましたが、下は青色でした! はじめて見させていただきましたが、いろいろ勉強になりそうです! ただ、英語なのが・・・ 本当にありがとうございました! あ!参考サイトを見て、また新たな質問が出てきてしまいました。。。

  • ddg67
  • ベストアンサー率22% (1211/5475)
回答No.2

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

noname#52036
質問者

お礼

ありがとうございます! 2.についてできれば詳しく教えていただけると助かります・・・ また、ddg6様のお勧めの市販の本などはございますでしょうか? どうか宜しくお願いいたします。

  • p-ink
  • ベストアンサー率30% (55/183)
回答No.1

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

参考URL:
http://flap.vis.ne.jp/pxb/site/site_a/tips/sozai/aquabt/aquabt.html
noname#52036
質問者

お礼

ありがとうございます。 参考URLも是非見させていただきます! 本当にありがとうございました!

関連するQ&A

  • 立体感のあるロゴの作成方法

    Photoshopで下記サイトの左上にあるITというロゴの作成方法を教えて下さい。 ※但し、ITは英語ですが、私が作るロゴの文字は日本語です。作成方法は同じ要領だと思いますが。宜しくお願いします。ロゴの立体感の出し方など、フォント以外のデザイン要素だけ作成方法がわかればOKです。 ( 記 ) http://it.nikkei.co.jp/it/

  • ビー球みたいな立体感のある、透明ボタンの作成方法

    色のついたビー球みたいなボタンは、ホームページビルダーのテンプレートにあるものです。 私がしたいのは、色のある文字をこのボタンの中に、重ねたいので、色がない透明(多少、白く濁ってもよい)のボタンを作成したいのです。 ところが、ホームページビルダーのテンプレートには色のついたボタンのファイルしかありません。自分で作る必要があります。 <質問内容> このようなビー球みたいな立体感のある、透明ボタンの作成方法について、photoshopでの作成方法か、もしくは無料でダウンロードできる素材集のサイトを教えて下さい。

  • photoshopで斜線を引く方法(斜線のスタイルを作る)を教えてください。

    はじめまして。 現在、photoshop勉強中のものなのですが、以下のサイトに所どころに見られる斜線をphotoshopで作成したいと考えています。 http://www.e-yamatoya.com/ このようなデザインをかなり多く見かけるのですが、おそらくphotoshopのスタイルのような感じで、ボタン一つで作成する方法がありそうなのですが、まだまだ勉強中のためわからずじまいです。 イラストレーターで斜線の画像を作れば小さなボタンなどは、大丈夫なのですが、背景や長いバーなどはスタイルのようなものでないととても大変のような気がします。 どなたか、これらの解決方法を教えていただけないでしょうか?

  • ホームページ用ボタン作成の方法

    はじめまして。 現在、photoshop勉強中のものです。 以下の参考サイトのような一部丸みがかったボタンはどのようにして作成すればいいのでしょうか? http://www.hanshintigers.jp/ http://www.bookoff.co.jp/ 想像するに、イラストレーターでまとめてボタンのイラストを作成し、photoshopで分割していくのでしょうか? また、よく見かけるボタンとボタンの間の区切り線のようなものはどのように作成すればいいのでしょうか? 複数の質問になってしまい申し訳ございませんが、どうかよろしくお願い申し上げます。 ボタン作成について参考サイトのようなものがあればうれしいです。 どうかよろしくお願い申し上げます。

  • イラストラーター9で立体的なロゴを作りたい

    イラストレーター9を使っています。 ドラクエのロゴのような立体的で奥行きのあるロゴを作りたいと思います。 http://www.dq-card.com/ ↑こんな感じです。 何か方法はありますか? 立体的にするだけならフレンドを使えば良いと思うのですが、奥行き(?)のある感じにする方法が分かりません。 分かる方がいらっしゃいましたら教えていただきたいと思います。 よろしくお願い致します。

  • ロゴの作成方法

    皆様、お世話になります。Win版PhotoShop CSやIllustrator CSでかっこいいロゴを作りたいのですが 初心者でもわかりやすく作成方法を説明されている ホームページなどがあれば教えていただきたいと思います 宜しくお願いします

  • 写真内の文字を立体的に見せる方法を教えてください。

    今、ロゴを作るために紙に字を書いてスキャナで取り込んで、 PC内で文字を立体的(はじめ人間ギャートルズのオープニング風)にしたいと思っています。 インターネットで検索すると、PCで入力した文字を立体化する方法なら見つかりましたが、 スキャニングした物を立体的に見せる方法は見つけられませんでした。 ソフトはillustratorとphotoshopを持っています。 どなたかわかる方教えてください。

  • 水面に映ったように

    http://www.hereticanthem.com/ ここのロゴマークみたいに水面に映ったような加工がしたいのですが 加工方法を教えて下さい。ちなみにイラストレーター10.0です。

  • イラストレーターで立体的なボタン

    イラストレーター10を使用しています。 下記のサイトの右の「全講座の一覧へ」「資料請求」のような ボタンを作るにはどうすれば良いでしょうか? 立体的なボタンの作り方が載っているサイトを 教えていただければ助かります。 よろしくお願いします。 http://www.u-can.co.jp/index.html

  • illustratorの別ドキュメントで作成したロゴを

    illustratorの別ドキュメントで作成したロゴを新しく作成するドキュメントでも配置したいのです。 前作は、業者の人に作成してもらったものです。 データをCDR保存してありました。 私は、只今勉強中です。ロゴとかを今作成している自分のドキュメントの中に配置できないかと、考えています。 これから、共通して出てくるロゴや住所やキャッチなど、別ドキュメントで使うのには、どうしたらよいのでしょうか。