- 締切済み
PhotoShopでデザインしたものをHPに
http://www.webdesignlibrary.jp/2009/06/professional-dark-header.php ここを見てフォトショップでホームページデザインができることがわかりました。 ですが、ここでデザインしたものをどうHPに反映させるのかがわかりません。 前にジオシティーズでHPを作ろうとしたときは、無知ながらJIF形式の画像を用意して、HTMLでリンク範囲を指示して…という具合に作っていたのですが(割と強引な手法でしょうか)別のPCで見たときにサイズが合わず、画像データの足りない部分が白く表示されてしまっていたりと、完全にHPの作り方が間違っていたのだなと痛感しました。 フォトショップでヘッダー等を作っても、このパターンと同じようにサイズの届かない部分が白いスペースで表示されてしまうのではないか？リンクのボタン等はどう機能させればいいのか？など、いまいち概念がわかりません。 簡単にでも教えてもらえると助かります。 又は参考になるようなHPを教えていただければと思います。 よろしくお願いします
- その他(ソフトウェア)
- 回答数4
- ありがとう数0
- みんなの回答 （4）
- 専門家の回答
みんなの回答
- Hoyat
- ベストアンサー率52% (4897/9300)
＃１です。 まずですね、aproseさんが「強引に」と仰る方法が本来の正解なんです。それが「強引に」なってしまうのはhtml記述が正確ではないからだけの話なんです。 だから「基本から」になってしまうんです。 Photoshopで制作した物をホームページとしてブラウザ上で表示させる為にはhtml記述で「画像を何処に表示させるのか」「ボタンをどう機能させるのか」指示する必要があるんです（それがテーブルなのかcssなのかjavascriptなのかも基本的にhtml記述上での話です）。 Photoshopで作成できるのは、画像のみ（後は画像分割のスライス、ボタンの変化にレイヤー分けする程度）です。ご質問のリンク先もあくまでも「画像」を制作する手順しか解説されていません。 それを「Webおよびデバイス用に保存」又は「Web画像として保存」すると、ホームページに表示できるような「画像」と「html文書」が生成されるだけなんです。そこから実際のホームページのパーツとして表示する為の作業はhtml記述で行うだけの話（実際に制作して「Webおよびデバイス用に保存」又は「Web画像として保存」で書き出してみてください）。 なので「html文書の書き方が解らないから上手くいかないだけです」と言うのです。 連携というほどの事は行われていません。 CS～CS2でのGoliveやCS3～のDeamweaverではある程度の連携は取れますが（単にアプリ間の移動が出来るだけですけど）、基本的には上記の通りの事を行っているだけに過ぎません。
- fab76
- ベストアンサー率59% (327/548)
これが正解だとは限らないですが…。 >サイズの届かない部分が白いスペースで表示されてしまうのではないか？ この例なら 作成したヘッダ画像の端から1px幅（数値は適当に）でスライス、またはコピーした（ボタンなどがない）画像を加工して1*215pxの背景画像を作成。 ヘッダの収まるブロックの背景としてbackground-repeat-x（横方向のみ）とCSSで指定。 これにより訪問者の解像度、表示しているブラウザの幅に関係なくヘッダは広がります。（ただコンテンツ部の幅を考えないと逆におかしなことに） 必要に合わせてブラウザ標準の余白を<body style="margin:0px">として取っておきます。 >リンクのボタン等はどう機能させればいいのか？ 基本的にはボタン部分をスライスしてひとつの画像として含む形でヘッダ画像全体を"Webまたはデバイス用に～"で出力します。 （ハイライト表示などはレイヤー上で作成しOnMouse用のボタンとして別に作成します） 組み込みはJavaScriptでもCSSでも可能なのでサイトの状況に合わせていきます。この辺は "javascript ロールオーバー" "CSS ロールオーバー" "スワップイメージ SwapImage" などで探してください。 作成ソフトが持つ機能を使ってもかまいません。 フォームエリアはposition:absolute;でTextエリアを作ると思うんですが…、これは自信がありません（私やらないんで）
モニタのサイズとかがそれぞれ違うわけですから、前のでは画像サイズが足りなかったのですね。 HTMLタグを理解しているのなら簡単に出来ると思いますが。。。 参考になさったサイトでは1000ピクセル×215ピクセルで作っていますが、どうしても空白が出るのが嫌なら、テーブルの中にその画像を入れてテーブルの背景をその画像と同じものにしてみては？そのときテーブルの幅を100％に指定しておけばどの環境で見ても空白は出ないはずです。 単色でしたら背景画像作らなくてもテーブルの色で隠してもいいですし。 ＞リンクのボタン等はどう機能させればいいのか？ 現在フォトショップが起動できない環境(一応あるけど古いバージョンなので今のパソコンでは…)なので確認は取れませんが、リンク指定する(イメージマップ)機能ありませんでしたっけ？ そういった指定をしてからHTML出力が出来たはずですが。。。 無かったらHTML「イメージマップタグ」で直接指定するしかありません。 イメージマップタグはこちらが分かりやすいと思います。 http://www.tagindex.com/html_tag/img/img_map.html
- Hoyat
- ベストアンサー率52% (4897/9300)
Photoshopがどうの以前に「ホームページの作り方」の勉強をお奨めします。html文書の書き方が解らないから上手くいかないだけです。 まず基本から学んでください。 http://homepage2.nifty.com/shokyusha/ http://www2.netwave.or.jp/~nontan7/ ご質問のリンク先の作業はその次の段階の話。 作ったものは「Webおよびデバイス用に保存」又は「Web画像として保存」（これはバージョンによって表記が違います）すればhtml文書と共にスライスされた画像が書き出されます。それを反映させる為にもhtml文書が解らなければ「余白が出たり」「リンクボタンの機能が上手くいかなかったり」になってしまいます。 蛇足ながらJIFなんて画像形式はありません。GIF又はJPEGでしょ？ まず基本から学びましょう・・・。
関連するQ&A
- デザイン的なHP制作
こんばんわ。 ひとつ質問させてください。 現在HP制作で行き詰っています。 それはデザイン的で、本格的なHP制作がしたいのです。 そして、このようなHPを作りたいという目標HPがあります。 では具体的なデザインといいますと、ずばり、芸能人の方々がお持ちのHPですが、本人の名前を挙げてもよいのかどうか…。 歌姫H.Aさんのような、フレームが縦に３つわかれていて、その真ん中のフレームに縦型に伸びたデザインで、リンクのボタンなどもデザインされているようなものです。 たとえばその日本の歌姫H.AさんのHPの「骨組み」などは、どのソフトで作られているのでしょうか… 画像などは、イラストレーターやフォトショップで加工し、動く絵はフラッシュだろうという予測はついているのですが…。 ちなみに、HP制作はビルダー6.5とタグ打ち（メモ帳）などは知っていて、基本的な骨組みも出来ます。CSSも少し分かります。 デザイン的なHＰの骨組みを作るソフト名などを教えてください。 お願いします！ 現在仕えるソフト イラストレーター フォトショップ ビルダー 直接のタグ打ち フラッシュ（リンクを飛ばすなどの基本的なアクションスクリプトは分かります） どうかお願いします。 ソフトが分かればあとは、自分で本を買って勉強しますので。 手助けをしていただけないでしょうか。
- ベストアンサー
- ホームページ作成ソフト
- HPデザインのコーディング方法
デザインのコーディング方法について こんばんは。いつもお世話になっております。 HPのデザインについて質問です。 画像のようなデザインのコーディング方法はどう組んでいけばよいでしょうか？ 画像のようにピンク色の部分（コンテンツ）の後ろにも横の背景を配置して、全体をbackgroundの画像で配置する方法しかないでしょうか？ うまく配置するのは可能でしょうか・・・？ また、星や丸の部分、背景の部分は素材でPNGデータを使っているものが多いのですが、上記の全体をbackgroundの画像で配置する方法にすると、容量が重過ぎるみたいです。 ・PNGデータでなくて、JPGやPSDデータの方がいいのか？ ・フォトショップでなくて、イラストレータで書き出した方がいいのか？ 何かいい方法があれば、教えてください！ よろしくお願いします。
- ベストアンサー
- CSS
- ＨＰ上のキレイなグラフや図はどうやって作成するのか？
表題の通りなのですが、 ＨＰ上のキレイなグラフは図はどうやって作成しているのでしょうか？ フォトショップで作るのでしょうか？ エクセルで作った図ではないですよね。。。 私の認識では、なんらかのソフトでJPEGやJIF等に落としてＨＰ上で使用していると思っているのですが。 ＨＰを作りたいのですがグラフや図はどうやって作るのかわからないのです。
- ベストアンサー
- グラフィックソフト
- HP上に写真を投稿するには
ジオシティーズでHPを作成しました。 仲間がHP上から写真をテーマ別に投稿できるようなページを無料で作りたいのですが、良い方法はありませんか。 以前、「http://cgi-design.net/」様のサイトにあるcgiが最適だと思い使おうとしたのですが、ジオシティーズでは使えませんでした。 現在のジオシティーズHPからリンクして、「http://cgi-design.net/」様のようなテーマ別の写真アルバムを作れるサイト等（無料で）を教えてください。
- 締切済み
- フリーウェア・フリーソフト
- WEBデザインの際の画像作成について
WEBデザイナーとして働き始めたばかりの初心者です。 普段、イラストレーターでWEBサイト全体のデザイン→スライス→コーディングという流れで仕事をしています。 イラストレーター上でデザインをしているときに、写真画像などを配置するときがあります。 そのとき、フォトショップを使い、色調補正などをしてからイラレに配置して全体のデザインをしていくのですが、その配置する画像について質問です。 この画像は フォトショップ上で実際に使うサイズにしてからイラレに配置 ↓ イラレでスライス が良いのか、 フォトショップでは補正などのみで、サイズは触らず、イラレ上で配置 ↓ イラレ上で実際に使うサイズ調整 ↓ スライス のどちらが良いのでしょうか？ スライスで書き出された画像は後述の方が綺麗に感じたのですが、 皆さんはどのように画像を作成されていますか？ また、 イラレ上のオブジェクトをスライスして書き出し もしくは イラレ上のオブジェクトを一旦フォトショップにコピーしてから書き出し とどちらのほうが画像が綺麗に書き出されるでしょうか？ こちらも後述の方が綺麗に書き出されるような気がするのですが・・・。 皆さんはデザイン→スライスの際はどのような手順でされているでしょうか？ よろしくお願いします。
- 締切済み
- グラフィックソフト
- photoshop・画像色を指定色に近づけるには
こんにちは。 デザインの仕事をしていますが、 「イメージ画像の一番濃い部分を、指定色（C100M80 ）にしてくれ」との指示がありました。画像自体は全体的に指定色に近い（紺っぽい）感じにはなっていますが、要は、その画像の一番濃い部分をポイントしたときに、C100M80 になるようにしたいらしいのですが・・・。 どなたかフォトショップでそのように画像を調整できる方法をご存知ないでしょうか。フォトショップのバージョンは4.0です。 説明がわかりにくくてすみません。 よろしくお願いします。
- ベストアンサー
- デザイナー・クリエイティブ職
- フォトショップ＋イラレの画像をドリームウェーバでHPページに。
フォトショップとイラストレーターで作った画像をフォトショップでweb用に保存にし、その画像をそのまま背景にしそれからドリームウェーバーで加工しHPのトップページにしたいんです。 最終的に出来上がった際のサイズはA4くらいの横長にしたいのですが....いつの段階で表示のサイズを設定したらよいのでしょうか？web初心者ですので、どなたか教えて下さい。
- ベストアンサー
- グラフィックソフト
- 画像リンクのデザイン
HP製作で悩んでいます。 ページ全体のデザインをcssファイルに記述し、その中にa要素のデザインも記述しました。 そのcssを外部参照しているので勿論全ページのa要素にそのデザインが反映されます。 画像でリンクしてる部分もあるんですが、そこにまで反映されていて困っています。 画像でリンクしている部分のa要素だけを別のデザインにしたいですが可能でしょうか？
- ベストアンサー
- HTML
- Photoshopのようなフリーソフト
win vistaを使っています。 フォトショップにある、サイズを指定して画像の切り抜きできる機能があるフリーソフトで、おすすめがあれば教えてください。 そのほか、選択した部分をぼかせる機能があるといいです。 会社でフォトショップに使い慣れているのですが、高価で購入できないので、おすすめがあれば教えてください。
- ベストアンサー
- フリーウェア・フリーソフト
- twitterのヘッダー画像のサイズについて
いつもお世話になっております。 twitterのヘッダーに使いたい画像があるのですが、推奨サイズ1500×500ピクセルでなければ画像って綺麗に表示されないでしょうか？ 使いたい画像はそのままではなくて一部分を切り取って（Windowsフォトビューアーのペイントの機能を使用）サイズを変更して使おうと思っているのですが、1500×500ピクセルにすると画像がおかしくなってしまいます。 1500×263ピクセルだと綺麗に表示されるので、出来ればこれで使いたいです。 このサイズでもヘッダーに綺麗に表示されますか？
- ベストアンサー
- 画像・動画・音楽編集
補足
htmlのみであればそれなりに使えます ただ、それのみなので、HPの枠というか、元自体は問題なく作れはするのですが… それだけですと、どうしてもデザイン性の薄いものになってしまいます ロゴを作ったりですとか、フォトショップに関しても単体では若干は使えるのですが、一般のHPのように、綺麗なものができないのです なので、コンテンツメニューを貼り付けた画像を単純に用意してそれのリンク範囲をHTMLで指定して…のように強引にやってはみたのですが、やはり最初からサイズが決まってしまっているので余白ができてしまうという結果になってしまいました Web画像として保存というのは確かにありました。でも先ほど私が貼ったリンクを見ると、コンテンツメニューなども特にそれ用のツールを使って作成しているようには見えなかったので… リンクボタンのつもりで作成していてもそれをリンクとしてどう活かすのか？というのが疑問でした なのでHTMLではなく、フォトショップとの連携を知りたいのです 申し訳ありませんが、私も確かにHTMLも完璧に全てを把握しているわけではありませんので、他の方から見たら、まず基本を学んでからにした方がと思われてしまうこともあるかもしれませんが、一応HTMLは使えるという前提でお願いしてもいいでしょうか？ JIFは間違いでしたね 無意識に混ぜて打っていたみたいです。