プロのWeb製作者さんよろしくお願いします。

Question

現在、個人ホームページをPhotoshopで制作しています。

制作物を作りWeb用に保存の機能を使いHTMLと画像を選ぶと
Photoshopで制作したデザインが全てHTMLと画像になってし
まいます。テキストはテキストとして保存されません。

これをテキストはテキストとして保存して、HTMLと画像、テ
キストを別々に保存する事は出来ないのでしょうか？


PSDファイルの保存でテキストをホームページ制作ソフトで
編集が出来るように保存したいと思っています。


よくあるホームページのテンプレート（PSD)を調べてみました
が、サンプルとしてHTMLファイルがあり、同様の場所にテキス
トとして表示されておりホームページ制作ソフトで編集も可能
なのですが、どうしてもPSDファイルからは、テキストを表示さ
せるようにしてWeb用に保存を行う事が出来ません。

そこで、ホームページ制作ソフトで、PSDファイルからHTMLと画
像だけを保存しテキストをCSSで指定してみたのですが、デザイ
ンが崩れ台無しでした。あげくに2度手間となります。


検索などで調べて見ましたがどうしても解決策が見つからず
投稿しています。

よろしければPhotoshopでHTMLと画像、テキストをうまく表示
しPSDファイルからのみでWebを制作する事は出来ないでしょ
うか。

詳しく参考となる親切な方のみ希望しております。
プロのWeb製作者さんよろしくお願いします。

tsucu · Accepted Answer

#1#2です。

＞上記が個人的には一番の理想のように思えます。同じような
＞ソフトの構成で手間がかり能率を考えるとあまり頂けないよ
＞うに感じました。

言いたいことはとってもよくわかります。
私も最初はそう考えていた時期はありました。

しかし、WEBはテキストを含め非常に変動要素が多いため、グラフィックソフトのように完全にピクセルで固定されたもので作るのには限界があります。と言うかそんなもので作られたWebページはさまざまな問題を抱えており、プロのツールにはなりえないですね。

WEBはどちらかというとワープロ的ですよね。テキストや、パーツなどを入れればそれに伴ってそれ以降の要素が勝手に下にシフトしていきますよね。
グラフィックソフトでそんな動作をされたら使いにくくて仕方ないと思います。

それはワープロソフトが最初からテキストありきで作られているからで、グラフィックソフトではテキストはグラフィックの一部として扱われていることの違いだと思います。

餅は餅屋ではないですが、PhotoshopがWebにそこまで立ち入ることは賛否両論だと思いますよ。機能の詰め込みすぎでプログラムが肥大化して、ちょっとした写真データのリサイズを行いたいだけなのに、ソフトの起動から作業までトロトロするようになるのはゴメンですよね。

それにパーツやCSSの使いまわしなどの問題もありますし、変動要素に追従させるためのパターン化されたバックグランドイメージの問題もあります。

＞ソフトが簡単になると物足らなさを感じてしまいがちですが、

ワードとエクセルとパワポを一つのソフトにして！って感じ？違うか・・・(^^;)
たとえ、PhotoshopにWebに特化した機能が備わっても「簡単」にはならないと思いますよ。と言うかむしろ複雑怪奇なしろものになると思います。

あくまでもプロが使うことを想定したソフトなんで、テキストの定義自体を追加で厳密に指定してやらなくなると思います。ブラウザの種類、そのバージョン、モバイルユーザへの対応、Mac、Win、Unix、閲覧者のフォント環境、マウスアクションの定義、各ページへの定義の統一化・・・。

それに、Webデザインはそのページだけで完結しているものでもありません。
CSSやJavascriptも各ページで共有しますし。そんなことをグラフィックソフトで全部定義するのはかなりむちゃなことのように思えます。

コーディングは専用ソフトに任せた方が逆に効率いいと思います。

＞PSDファイルそのものからテキスト、画像、HTMLを書き出す
＞ソフトはないのでしょうか。

私は聞いたことがありません。たとえそれが出来たとしても、テキストの量やサイズが変わっただけでデザインが崩れるページになってしまいますよね。

＞仕事の流れをお伝え頂きましたがデザインが台無しになれば
＞優れたグラフィックソフトで制作しても趣旨が外れてしまい
＞ます。せっかく優れたソフトのデザインも台無しです。

Webデザインはそんなものです。フォント一つとっても、自由に使えません。
ユーザ環境に依存するからです。かっこいいフォントを使いたければ、画像にするかFlashなどを利用するしかないですからね。

＞Photoshopは、javascriptなどで制御する事が出来るようです
＞がWeb用に保存の機能に何らかのプログラムで保存できるよう
＞にする事は出来ないのでしょうか。

スクリプトやバッチ処理はあくまでもPhotoshopの機能を使って自動化するものです。Photoshopにない機能は操れないです。

fx48616 · Answer

こんにちは。

結論から申し上げますと
PSDファイルからのみでWebを制作する事は出来ません。

そもそも論になりますが、
PhotoshopもFireworksも画像加工・編集ソフトで
ホームページを作成するソフトではありません。

「Web用に保存」でHTMLと画像を書き出せるのは、
単純に1枚に統合した画像をブラウザでプレビューするためです。
※Web用に書き出した画像はデザイン時と若干画質が変わっていたり、
　アニメGIFなどはブラウザで見る必要があるため、その確認用です。

PhotoshopもFireworksはあくまでホームページを構成する素材としての画像を作るもので、
テキストを入れたり、リンクを貼ったりして最終的なHTMLを作るのは、
テキストエディタやWebオーサリングソフト（DreamweaverやIBMホームページビルダーなど）を使う必要があります。

※もちろん前述のように単に画像をプレビューするという意味のHTMLは、画像ソフトやFlashなどでも書き出せますが。

よって、tsucuさんもおっしゃってますが、Web制作の流れとしては、

１．PhotoshopやFireworksでページ全体をデザイン（この際、マウスオーバー画像など各種パーツも必要に応じて作成）
２．PhotoshopやFireworksで画像を書き出し
３．テキストエディタやDreamweaverでHTMLを作成（この際、CSS・javascript等も必要に応じて作成）
４．HTMLや画像、css、jsファイルなどWeb構成ファイルをサーバにアップ

以上になります。※すごく簡単ですが。

ものすごく簡単なもの（画像だけとかFlashだけとか）ならテキストエディタやDreamweaverでわざわざHTMLを組まなくても可能だと思いますが、
普通はそういうわけにはいきませんし、何しろプロのWeb制作者はそういう作り方はまずしません。

以上、ご参考いただければ幸いです。

tsucu · Answer

＞通常では、CSSを使うと文字サイズや位置が指定でき
＞デザインが崩れるような事はないように思いますが、

ブラウザーによりマチマチです。
CSSでフォントサイズをピクセルやポイントで定義するとIEでは
フォントサイズの変更は（原則として）出来ませんが、Firefoxや
Netscapeでは自由に変更できます。

＞これは、上記のボックス要素をPhotoshopで指定できるという事で
＞しょうか。

できません。Photoshopでできるのはスライスだけです。
（リンクやAlt属性なんかは定義できますが）
それに伴いHTMLではテーブルタグが生成されます。Photshop CSからは
DivにCSSでレイアウト情報を与えることができますが、
どちらにしても、どのように画像を切るか、それをどのように
並べてレイアウトするかをHTML（とCSS）として吐き出してくれるだけです。
Photoshop上でのテキスト情報のことは考えられていません。

＞また、どのようにお伝え致していいか難しいのですが、PSDでWe
＞bを制作している方は、そこまで時間が掛かる設定を行っている
＞のでしょうか。

Photoshopだけの話ではないと思います。グラフィックソフトは
画像データを編集するソフトだということです。

Photoshopではデザインの骨格を作成する。
スライス等でパーツを書き出す。
Webオーサリングソフト等でHTMLとCSSの設計を行う。
というのが流れになります。

＞多数のものを見てみましたがPSDテンプレートのデザインとテキ
＞ストは同じ位置に配置されています。どのようにやっているの
＞でしょうか。

CSSで位置調整です。残念ながら(^^;)
そして、よく見てください。1ピクセルぐらいずれてませんか？
（まぁ見ても分からないかもしれないけど）
それに結構ブラウザによって見え方は異なったりします。
どんな環境でも同じに見えるように作るのは、複雑なレイアウトの
ページでは、プロでもかなり骨の折れる作業になります。

＞多数のPSDテンプレートを見ていると何らかの同一方法でHTML化
＞しているように思えてならないのですが。

なんか納得いかないようですね(^^;)

Photoshop自体を作成しているAdobeに下記の商品があります。
CREATIVE SUITE 3 WEB EDITION
PhotoshopとDreamweaver等が入っているパッケージです。
Photoshopだけで出来るなら意味ないですよね？

そして、もし、Photoshopのみですべて出来てしまうのであれば、
わざわざ配布されているテンプレートにHTMLはつけないのでは
ないですか？
だってPhotoshopで書き出せばいいだけじゃないですか？

PSDのデータが着いてくるのはデザインのちょっとした変更を
行えるように。変更したところを部分的に書き出して、
テンプレートHTMLに反映して使ってね・・・ってことなんじゃ
ないでしょうか。

ちなみに同業者でPhotoshopのみならず、Fireworksなどの
WEB専用のグラフィックソフトでも、それだけでWeb製作を
行ってる人は皆無です。
たぶん素人さんでもほとんどいないのでは？

一応、仕事での流れ（作業のみ）を最後に書いておきます。
・Photoshop等のグラフィックソフトでデザインを上げる。
・クライアントにデザインの確認を。
・グラフィックソフトでデザインを元にパーツを切り出す。
・ここからがコーディングと呼ばれる作業になります。
　Webのオーサリングソフト、テキストエディター等で
　HTMLのベースを作成。テキスト情報を論理構造化する。
・サイト全体のことを考えてCSSの基本構造設計をする。
・各種ブラウザでデザインのチェックをしながらCSSで
　レイアウトを調整。
・各種ブラウザの見え方の違いをスクリプトやCSSハック等を
　使って潰していく。
・動的な仕掛けがあれば組み込む。
・テストサーバにアップしてクライアントに確認。
・納品

結構大変でしょ？

tsucu · Answer

＞PSDファイルの保存でテキストをホームページ制作ソフトで
＞編集が出来るように保存したいと思っています。

直接的な回答をすると、PhotoshopでスライスをCtrl+ダブルクリックして
スライスの種類のプルダウンメニューで画像なしを選び、テキストを入力します。
これでHTMLでテキスト編集可能な状態で書き出せると思います。

しかし、これでは根本的な解決にならないと思います。
なぜなら、フォントの種類や大きさを定義できないからです。

＞ホームページ制作ソフトで、PSDファイルからHTMLと画像だけを保存しテキストをCSSで
でk_berryさんが行っていることと、たいして変わらないと思います。
結局フォント定義をCSS等で行わないといけないからです。

PhotoshopはWeb製作の万能ツールではありません。
すべてをPhotoshopでやることには無理があります。

通常、プロはPhotohopのみで完結するような作り方をしません。
PhotohopのHTMLの書き出しはオマケだと考えてます。

完全にテーブル組みをするパーツでは使えますが、
テキストなどの変動要素（閲覧ユーザがフォントの大きさを変更したりできる）を中に入れることはしません。デザインが崩れるのは当然です。

ボックス要素にバックグランドで画像を使い、テキストをのせる方がまだマシでしょう。それでも、当然テキストのフォントサイズを大きくするとバックグランドからはみ出したりするのはWEBの宿命です。

そういった変動要素をどのように処理するかは、その時々のノウハウになり、一概に説明しきれないと思います。もっとピンポイントで具体的な題材を示してくれる方が答えやすいと思います。

最後に、一番無難なのはテキストを画像にすることだと思います。

プロのWeb製作者さんよろしくお願いします。

#1#2です。

こんにちは。

＞通常では、CSSを使うと文字サイズや位置が指定でき

この回答への補足

＞PSDファイルの保存でテキストをホームページ制作ソフトで

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング