締切済み

PhotoShopでデザインしたものをHPに

2009/09/08 11:44

http://www.webdesignlibrary.jp/2009/06/professional-dark-header.php ここを見てフォトショップでホームページデザインができることがわかりました。ですが、ここでデザインしたものをどうHPに反映させるのかがわかりません。前にジオシティーズでHPを作ろうとしたときは、無知ながらJIF形式の画像を用意して、HTMLでリンク範囲を指示して…という具合に作っていたのですが(割と強引な手法でしょうか)別のPCで見たときにサイズが合わず、画像データの足りない部分が白く表示されてしまっていたりと、完全にHPの作り方が間違っていたのだなと痛感しました。フォトショップでヘッダー等を作っても、このパターンと同じようにサイズの届かない部分が白いスペースで表示されてしまうのではないか？リンクのボタン等はどう機能させればいいのか？など、いまいち概念がわかりません。簡単にでも教えてもらえると助かります。又は参考になるようなHPを教えていただければと思います。よろしくお願いします

noname#136096

その他(ソフトウェア)
回答数4
ありがとう数0

みんなの回答 （4）
専門家の回答

みんなの回答

Hoyat
ベストアンサー率52% (4897/9300)

2009/09/08 21:13 回答No.4

＃１です。まずですね、aproseさんが「強引に」と仰る方法が本来の正解なんです。それが「強引に」なってしまうのはhtml記述が正確ではないからだけの話なんです。だから「基本から」になってしまうんです。 Photoshopで制作した物をホームページとしてブラウザ上で表示させる為にはhtml記述で「画像を何処に表示させるのか」「ボタンをどう機能させるのか」指示する必要があるんです（それがテーブルなのかcssなのかjavascriptなのかも基本的にhtml記述上での話です）。 Photoshopで作成できるのは、画像のみ（後は画像分割のスライス、ボタンの変化にレイヤー分けする程度）です。ご質問のリンク先もあくまでも「画像」を制作する手順しか解説されていません。それを「Webおよびデバイス用に保存」又は「Web画像として保存」すると、ホームページに表示できるような「画像」と「html文書」が生成されるだけなんです。そこから実際のホームページのパーツとして表示する為の作業はhtml記述で行うだけの話（実際に制作して「Webおよびデバイス用に保存」又は「Web画像として保存」で書き出してみてください）。なので「html文書の書き方が解らないから上手くいかないだけです」と言うのです。連携というほどの事は行われていません。 CS～CS2でのGoliveやCS3～のDeamweaverではある程度の連携は取れますが（単にアプリ間の移動が出来るだけですけど）、基本的には上記の通りの事を行っているだけに過ぎません。

fab76
ベストアンサー率59% (327/548)

2009/09/08 14:31 回答No.3

これが正解だとは限らないですが…。 >サイズの届かない部分が白いスペースで表示されてしまうのではないか？この例なら作成したヘッダ画像の端から1px幅（数値は適当に）でスライス、またはコピーした（ボタンなどがない）画像を加工して1*215pxの背景画像を作成。ヘッダの収まるブロックの背景としてbackground-repeat-x（横方向のみ）とCSSで指定。これにより訪問者の解像度、表示しているブラウザの幅に関係なくヘッダは広がります。（ただコンテンツ部の幅を考えないと逆におかしなことに）必要に合わせてブラウザ標準の余白を<body style="margin:0px">として取っておきます。 >リンクのボタン等はどう機能させればいいのか？基本的にはボタン部分をスライスしてひとつの画像として含む形でヘッダ画像全体を"Webまたはデバイス用に～"で出力します。（ハイライト表示などはレイヤー上で作成しOnMouse用のボタンとして別に作成します）組み込みはJavaScriptでもCSSでも可能なのでサイトの状況に合わせていきます。この辺は "javascript ロールオーバー" "CSS ロールオーバー" "スワップイメージ　SwapImage" などで探してください。作成ソフトが持つ機能を使ってもかまいません。フォームエリアはposition:absolute;でTextエリアを作ると思うんですが…、これは自信がありません（私やらないんで）

noname#105334

2009/09/08 12:53 回答No.2

モニタのサイズとかがそれぞれ違うわけですから、前のでは画像サイズが足りなかったのですね。 HTMLタグを理解しているのなら簡単に出来ると思いますが。。。参考になさったサイトでは1000ピクセル×215ピクセルで作っていますが、どうしても空白が出るのが嫌なら、テーブルの中にその画像を入れてテーブルの背景をその画像と同じものにしてみては？そのときテーブルの幅を100％に指定しておけばどの環境で見ても空白は出ないはずです。単色でしたら背景画像作らなくてもテーブルの色で隠してもいいですし。＞リンクのボタン等はどう機能させればいいのか？現在フォトショップが起動できない環境(一応あるけど古いバージョンなので今のパソコンでは…)なので確認は取れませんが、リンク指定する(イメージマップ)機能ありませんでしたっけ？そういった指定をしてからHTML出力が出来たはずですが。。。無かったらHTML「イメージマップタグ」で直接指定するしかありません。イメージマップタグはこちらが分かりやすいと思います。 http://www.tagindex.com/html_tag/img/img_map.html

Hoyat
ベストアンサー率52% (4897/9300)

2009/09/08 12:31 回答No.1

Photoshopがどうの以前に「ホームページの作り方」の勉強をお奨めします。html文書の書き方が解らないから上手くいかないだけです。まず基本から学んでください。 http://homepage2.nifty.com/shokyusha/ http://www2.netwave.or.jp/~nontan7/ ご質問のリンク先の作業はその次の段階の話。作ったものは「Webおよびデバイス用に保存」又は「Web画像として保存」（これはバージョンによって表記が違います）すればhtml文書と共にスライスされた画像が書き出されます。それを反映させる為にもhtml文書が解らなければ「余白が出たり」「リンクボタンの機能が上手くいかなかったり」になってしまいます。蛇足ながらJIFなんて画像形式はありません。GIF又はJPEGでしょ？まず基本から学びましょう・・・。

質問者

補足 2009/09/08 12:42

htmlのみであればそれなりに使えますただ、それのみなので、HPの枠というか、元自体は問題なく作れはするのですが… それだけですと、どうしてもデザイン性の薄いものになってしまいますロゴを作ったりですとか、フォトショップに関しても単体では若干は使えるのですが、一般のHPのように、綺麗なものができないのですなので、コンテンツメニューを貼り付けた画像を単純に用意してそれのリンク範囲をHTMLで指定して…のように強引にやってはみたのですが、やはり最初からサイズが決まってしまっているので余白ができてしまうという結果になってしまいました Web画像として保存というのは確かにありました。でも先ほど私が貼ったリンクを見ると、コンテンツメニューなども特にそれ用のツールを使って作成しているようには見えなかったので… リンクボタンのつもりで作成していてもそれをリンクとしてどう活かすのか？というのが疑問でしたなのでHTMLではなく、フォトショップとの連携を知りたいのです申し訳ありませんが、私も確かにHTMLも完璧に全てを把握しているわけではありませんので、他の方から見たら、まず基本を学んでからにした方がと思われてしまうこともあるかもしれませんが、一応HTMLは使えるという前提でお願いしてもいいでしょうか？ JIFは間違いでしたね無意識に混ぜて打っていたみたいです。