- ベストアンサー
photoshop&illustrator/ｈｔｍｌの質問
webデザインの勉強をしている初心者です。photshopを使ってリンクボタンのデザインを作ったんですがこれをどうやったらリンク出来るんでしょうか？ 作業手順→とりあえずphotoshopボタンを３つ作りました。→ファイル・web用に保存→プリセット部分の上段左[gif]保存(合っているでしょうか？)→ファイル名・○○.html/ファイル形式[htmlと画像]→保存→テキストエディタで見るとこの様な言語が出ます。 <html> <head> <title>名称未設定 1</title> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- ImageReady Slices (名称未設定 1) --> <img src="images/sono.gif" width="800" height="600" alt=""> <a href="sono.gif"> <!-- End ImageReady Slices --> </body> </html> この言語の中にphotoshopでボタンを作った部分はどの言語になるんでしょうか？ またその言語(ボタンデザイン)をリンクさせるにはどうしたらいいんでしょうか？当然ながらボタン３つ作っているのでhtmlファイルを後２枚作らなければいけないのですが・・・。 エディタから言語を打ってのリンクの仕方は分かるのですがイラレやフォトショでのHPの作り方が分かりません。説明の仕方が悪いかもしれませんがこの質問に理解できる方、お答えの方、宜しくお願いします
- グラフィックソフト
- 回答数5
- ありがとう数2
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
<!-- ImageReady Slices (名称未設定 1) --> ～ <!-- End ImageReady Slices --> の間がPhotoshopが吐き出したHTMLの画像部分になります、がwidth="800" height="600"ということなのでスライスを切っていない一枚の画像ということになります。 ImageReadyに移動しなくともver6以降のものならPhotoshop上でスライスが切れるので、ボタン部分などを部品として切ってください。作業時にガイドを引いておくとガイドに沿ってスナップしていくのできれいな作業が出来ると思います。 スライス選択ツールに移動して、スライス上をダブルクリックすることで【スライスオプション】上でリンク先の設定、target設定、画像のalt設定などが可能です。 ただ細かい修正が必要な場合もありますので、Web作成ソフトに読み込ませて仕上げていくケースもあります。 逆にソフトによっては崩れを発生させる場合もあるので注意が必要です（滅多にないと思いますけれど…）
その他の回答 (4)
- hopehope
- ベストアンサー率17% (94/528)
イラレやフォトショって何？ 質問する時に勝手に略しちゃうと正確な回答が得られなくなりますよ。 PhotoshopやIllustlaterでhtmlは作れません。 htmlエディタタや専用のソフトなどを使ってください。 <a href="ボタンをクリックしたら飛ぶ（開く）リンク先"><img src="画像のある場所/ボタンの名前"></a> がhtmlになります、先のhtml文は画像（ボタン）を表示するだけで、ボタンをクリックしても何の変化もありません（どこにも飛んだり開いたりしません）
お礼
お返事遅くなってすみません。何せまったくと言って いい程ド素人な者でして(汗） いろいろとご指摘ありがとうございました。
＃１です。＃２さんに同感です。
- koma1000nin
- ベストアンサー率30% (342/1133)
なれないことに時間をかけるよりも、「エディタから言語を打ってのリンクの仕方は分かる」とおっしゃいますから、photshopはボタンデザインにとどめ、別途エディタを使ってリンク表現されることをお奨めします。 そのほうが回答側として答えやすいのですが。
ボタンは <img src="images/sono.gif" width="800" height="600" alt=""> です。 >当然ながらボタン３つ作っているのでhtmlファイルを後２枚作らなければいけないのですが・・・。 かなり勘違いがあるようですが、リンクボタンが３つでもHTMLは一つでいいですよ。 ちなみに下記で勉強されることをお薦めします。 http://www.tohoho-web.com/www.htm
補足
すみません。リンクではなくページを作りたいのです。相対パスですね。
関連するQ&A
- 「Photoshop6.0」の「ImageReady」のロールオーバーについて
「Photoshop6.0」を使っているのですが、「ImageReady」のロールオーバー機能を使って、IEでプレビューをすると、正常に機能するのですが、保存してから、保存したファイルをIEでプレビューすると、全く機能しません。リンクは正常に機能しています。 どなたかわかる方、教えてください。お願いします。
- ベストアンサー
- グラフィックソフト
- Photoshop EPSファイルが、illustratorでプレビューできない・・・
たびたびお世話になります。 普段仕事でデザインに携わっている者です。 先日までOS 9.2の環境でデザインの業務を行っていたのですが OS 10.4の導入により使用環境が大きく変わりました。 業務の上ではPhotoshopとillustratorを使用しているのですが 以前illustratorにてPhotoshop EPSファイルを配置する際 当たり前ですが、画像はリンクされ配置されていたのですが 下記の使用環境にて配置をすると、画像はリンクはされますが プレビューされません。（画像が見えません・・・） リンクのチェックをはずすと埋め込まれて表示されます。 作業の中でときには表示されるファイルもあるのですが 保存する際に何かしなければならないのでしょうか？？？ 使用環境は、iMac G5でintelの前のモデルでTiger10.4.5です。 ソフトはPhotoshop 7.0とillustrator 10.0です。 よろしくお願いいたしますm(_ _)m
- ベストアンサー
- Mac
- PhotoShop CS3 のアニメーションについて
初めて質問させて頂きます。よろしくお願い致します。 以前まで、当方はPhotoShop7.0を利用していましたが、 今回CS3を初めて利用しております。 7.0では、アニメーションGIFを作成する際に、 ImageReadyを利用し作成しておりました。 CS3になって、ImageReadyがCS3自体に取り込まれたような 形になっていると、WEB上で確認致しました。 現在、以下のような作業を行っております。 1. CS3の「ウィンドウ」タブより「アニメーション」を選択 2. フレーム等用いて、アニメーションを作成する 3. 完成したアニメーションに対し、「Webおよびデバイス用に保存」を選択する。 4. ファイル形式を「GIF」にし保存する 上記工程より、アニメーションGIFを作成しております。 ここで、容量の問題が発生してしまいました。 7.0の際はなかったのですが、 JPEGで27Kbyteの画像がアニメーションGIFにすると283Kbyteに なってしまいます。 複雑なアニメーションではなく、フレームも4個くらいと少な目で 作成しております。 CS3になってGIFアニメーションの作成には、何か特別な 設定が必要になったのでしょうか？ ご教授頂ければ幸いです。 よろしくお願い致します。
- ベストアンサー
- グラフィックソフト
- ImageReadyで作成したHTMLについて
ウェブサイトで使用する画像（写真と文字が 混在している画像）をキレイに表示させるために ImageReadyのスライス機能でjpegとgif混在の ファイルを作成しました。jpegとgif混在のファイルは HTMLで保存することになるとおもうのですが、 HP作成エディタで、このHTMLファイルを 表示させるにはどのようにしたら良いのでしょうか？ 画像はファイルを選んで挿入すれば表示されますが、 HTMLファイルを表示させることは可能なのでしょうか？ なんか、とても的外れな質問をしている気がして 不安なのですが、みなさんよろしくお願いいたします。 HTML作成に関しては、本を見ながら試行錯誤している 程度で、イラストレーター・フォトショップに関しても、 そこまで詳しくありません。 HP作成エディタは、FrontPage2000とDreamWeberを 使っています。 上記で質問の方法に限らず、写真と文字が混在している 画像をキレイにできるだけ早く表示させるための方法が あったら教えてください。 よろしくお願いいたします！
- ベストアンサー
- グラフィックソフト
- Photoshop,ImageReadyでjpegの容量を軽くする方法
200×200pxのjpegを作成しているのですが、ファイル容量どうしても5K以内に収まりません。 容量を落とすには「Web用に保存」で「画質」を落とすしか方法がないのでしょうか？「画質」を落とすと画像がきたなくなり、あまり見れたものではなくなってしまいます。 Photoshop,ImageReadyを使って他に容量を落とす方法、裏技がありましたら、教えてください。また他のソフトで落とせるものがありましたら、よろしくお願いします。ちなみにMacユーザー、Photoshop6.0、ImageReady3.0を使用しています。
- ベストアンサー
- グラフィックソフト
- photoshopについて
photoshopで作った画像を保存する時、保存先や形式を設定する画面がでますよね？ その時に保存形式が必ずＰＳＤという形式になっています。 画像を何枚も作成してgifで保存するのですが、そこから一々gifを選択して名前と打ち込む作業がとても煩わしいです。 はじめから形式をgifに固定したりファイル名を001 002 003 などの連番で保存する方法はありませんか？
- 締切済み
- 画像・動画・音楽編集
- PhotoShop CS3でスライスツールを使用するとテーブルレイアウトになってしまう
PhotoShop CS3とDreamweaver CS3でwebデザインの勉強をしています。PhotoShop CS3でスライスツールを使用し、ボタンや背景を切り分けてリンクを設定してweb用に保存します。保存でできたhtmlファイルを開くとテーブルレイアウトになっているのですが、これをcssレイアウトにするにはどうしたらいいのでしょうか？ スライスツールで切り分けたのをDreamweaverで組み立てるのでしょうか？アドバイス宜しくお願いします。
- ベストアンサー
- グラフィックソフト
- Illustrator10でのgifファイル保存
今回Illustrator8.0からIllustrator10にバージョンアップしたのですが、gifファイルの保存方法で困っています。 今までは、Illustrator8.0で作成したaiファイルをpsdファイルで保存し、Photoshop5.0でgifファイルに変換する際に透明部分を指定していました。 ですが、Illustrator10で作成したaiファイルをpsdファイルデ保存したものは、Photoshop5.0ではgifファイルに保存できません。 よって、Illustrator10でgifファイルに変換しようとしたところ(Web用ファイルで保存)、透明部分が白色で塗りつぶされてしまいました。 どうしたら、透明部分が壊れずにgifファイルで保存することができるのでしょうか? なにせIllustrator8.0の時も自己流で使用していたので、今までの方法も正しいとは思えないのですが、今回はIllustrator10でのgifファイルの保存方法を教えて下さい。宜しくお願いします。
- ベストアンサー
- グラフィックソフト
- perl/cgi でPhotoshopは走らせられるのか？
ウインドウズのマシンにPhotoshopがインストールされています。 Photoshopを開く ptr = 0; while(そのディレクトリ内の.psdファイルを全て選び終わっていない) ptrが指し示す.psdファイルをPhotoshop内で開く ファイル→別名で保存→ファイル形式を.gifにする→名前を.psdのところを.gifにして保存する; 保存形式を決めて実行する ptrが指し示す.psdファイルを閉じる ptr++; Photoshopを閉じる というcgiなりperlなりのスクリプトを実行できればしたいのですが・・・ Photoshopを開くのは、ただ.exeを実行すればいいのですが。 その中で特定のアプリケーションの特定のコマンドを実行できるかどうかが分かりません。 出来なければおかしいかなとは思うのですが、そもそも出来るでしょうか？ 実行可能ならば、その足がかりだけでもつかませて頂ければ幸いです。 ご教授お願いします。 ありがとうございました！
- ベストアンサー
- Perl
- Photoshop Elements3でgif形式の画像の加工も保存も出来なくなってしまいました。。
Photoshop Elements3を、Macで使っています。 初心者です。 何日かぶりに、Photoshopを使って、背景が透明の画像を作ろうとしましたら、 「web用に保存」が選べなくなっている（字が薄くなっている）し、 「別名で保存」を選択して、次にファイル形式を選ぶ選択肢の中から、 「gif形式」がきれいさっぱり無くなっていました。 （たしかもともと選べるものですよね） また、photoshopで前に作って保存してあったgif画像も、photoshop上で開けなくなっています。 （photoshopの「ファイルブラウザ」にgif画像のデータが表示されないのです。） （「ファイルを開く」からむりやり開こうとしたら、「要求された操作を完了出来ません。有効なPhotoshopドキュメントではありません」とメッセージが出て開けません。） 一体どうしちゃったのでしょうか、、 何か変なところをいじってしまったのでしょうか。 色々なところで調べてみましたが分かりません。 分かる方いらっしゃいましたら、教えてください。 よろしくお願いします。
- 締切済み
- グラフィックソフト
お礼
ありがとうございます。まだやり始めなのでボヤ～としか分かりませんがボタンはボタン用に作ってHTMLで<img src=#####">って貼り付ける感じですかね？ 大まかに言うと。大きな勘違いをしてました。 がんばります。