Illustratorかphotoshopを使ってナビゲーションボタンを作りたいのですが。

質問

下記のホームページのボタンのように、透明で、しかも立体感のあるボタンを作りたいのですが、どちらのソフトでどのように作ったらいいのでしょうか？

http://www.imgt.jp/about/index.html

回答No.5

koichan55 · ベストアンサー

こんにちは。
これはPhotoshopのほうです。

半透明に見えているのはHP制作時のプログラムによるものでなく、
もともと透明も含めて、画像というものです。
（しかしHP制作時のプログラムによるもので半透明にしている時もあります。）

Photoshopはレイヤーを扱いますが、
レイヤーは透明のセル画と考えてください。

一番下のセル画（レイヤー）に鳥の画像があって、
その上のセル画（レイヤー）に半透明のグラデーションなどがあって、
その上のセル画（レイヤー）にボタンのフチだけの画像があって、
一番上のセル画（レイヤー）に文字を書くと、
　　↓
４枚を合わせたときにこのような画像が出来上がります。

後はそのセル画（レイヤー）を１枚に「統合」して
（ここで４枚のレイヤーが１枚になる）
それでボタンの部分だけ選んで切り抜いて、
JPEGやGIFにして画像化するとできます。

ちなみにマウスオーバーでボタンの画像が変わるのは、
HP制作の際にロールオーバーイメージの指定をしているからです。

この場合はつまりマウスオーバー前と
マウスオーバー時の、両方の画像を作っているということです。

この文章は難しいと思いますが、Photoshopの基本が分かれば
必ず理解できる内容になっていると思います。
ぜひ参考になりましたら幸いです。

お礼

やはりphotoshopのほうが作りやすそうですね。
やってみます。ありがとうございました。

回答No.4

ryo2501

こちらのサイトでは数々の良質なボタン作成方法が掲載されています。貴方が仰ってるいる表現は[glass]の質感だとおもわれますが、意外にメタルな表現であったりと数々のTipsが投稿されています。

参考URL：

http://www.tutorialized.com/search.php?id=1&s=button

お礼

とてもおもしろいサイトですね！
さっそくいろいろつくってみました！
ありがとうございました！

回答No.3

valvalval

「会社概要」のように背景画像が透けて見えるボタンでしたら、
photoshopで作ります。
立体感は下の人が回答しているように、グラデーションで作ります。
透けて見えるのは、重なる部分の背景をボタンに合成することで、そのように見せています。
http://www.imgt.jp/about/images/a_r2_c1_.jpg

お礼

なるほど、半透明のボタンを作って、htmlやcssでレイアウトするときに重ねているのかとおもっていました。
最初から鳥の部分もボタンで作るのですね。
そういえば、スタイルシートを適用させないで表示したら、そうなっていました。
ありがとうございました。

回答No.2

papuatama

「ご挨拶」「企業理念」のボタンでしょうか？
それとも「サービス概要」「料金比較」？
どちらも単純なグラデーションで作れる画像です。
特別なテクニックは必要ないので、どちらのソフトでも同じように作れますよ。
むしろ、作り手のデッサン力がものをいうかもしれません。

回答No.1

Gizensha

ベクタ画像でなさそうなのでPhotoShopの方が向いていそう。