- ベストアンサー
プロのWeb製作者さんよろしくお願いします。
現在、個人ホームページをPhotoshopで制作しています。 制作物を作りWeb用に保存の機能を使いHTMLと画像を選ぶと Photoshopで制作したデザインが全てHTMLと画像になってし まいます。テキストはテキストとして保存されません。 これをテキストはテキストとして保存して、HTMLと画像、テ キストを別々に保存する事は出来ないのでしょうか？ PSDファイルの保存でテキストをホームページ制作ソフトで 編集が出来るように保存したいと思っています。 よくあるホームページのテンプレート（PSD)を調べてみました が、サンプルとしてHTMLファイルがあり、同様の場所にテキス トとして表示されておりホームページ制作ソフトで編集も可能 なのですが、どうしてもPSDファイルからは、テキストを表示さ せるようにしてWeb用に保存を行う事が出来ません。 そこで、ホームページ制作ソフトで、PSDファイルからHTMLと画 像だけを保存しテキストをCSSで指定してみたのですが、デザイ ンが崩れ台無しでした。あげくに2度手間となります。 検索などで調べて見ましたがどうしても解決策が見つからず 投稿しています。 よろしければPhotoshopでHTMLと画像、テキストをうまく表示 しPSDファイルからのみでWebを制作する事は出来ないでしょ うか。 詳しく参考となる親切な方のみ希望しております。 プロのWeb製作者さんよろしくお願いします。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (3)
- fx48616
- ベストアンサー率0% (0/1)
- tsucu
- ベストアンサー率62% (71/113)
＞通常では、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さん、度々ありがとうございます。 ＞だってPhotoshopで書き出せばいいだけじゃないですか？ 上記が個人的には一番の理想のように思えます。同じような ソフトの構成で手間がかり能率を考えるとあまり頂けないよ うに感じました。ソフトが簡単になると物足らなさを感じて しまいがちですが、個人的には、プロのように時間は取れません。 PSDファイルそのものからテキスト、画像、HTMLを書き出す ソフトはないのでしょうか。 仕事の流れをお伝え頂きましたがデザインが台無しになれば 優れたグラフィックソフトで制作しても趣旨が外れてしまい ます。せっかく優れたソフトのデザインも台無しです。 Photoshopは、javascriptなどで制御する事が出来るようです がWeb用に保存の機能に何らかのプログラムで保存できるよう にする事は出来ないのでしょうか。 Web用に保存という機能を使いかっての良いものにしたいと考 えているのですが。
- tsucu
- ベストアンサー率62% (71/113)
＞PSDファイルの保存でテキストをホームページ制作ソフトで ＞編集が出来るように保存したいと思っています。 直接的な回答をすると、PhotoshopでスライスをCtrl+ダブルクリックして スライスの種類のプルダウンメニューで画像なしを選び、テキストを入力します。 これでHTMLでテキスト編集可能な状態で書き出せると思います。 しかし、これでは根本的な解決にならないと思います。 なぜなら、フォントの種類や大きさを定義できないからです。 ＞ホームページ制作ソフトで、PSDファイルからHTMLと画像だけを保存しテキストをCSSで でk_berryさんが行っていることと、たいして変わらないと思います。 結局フォント定義をCSS等で行わないといけないからです。 PhotoshopはWeb製作の万能ツールではありません。 すべてをPhotoshopでやることには無理があります。 通常、プロはPhotohopのみで完結するような作り方をしません。 PhotohopのHTMLの書き出しはオマケだと考えてます。 完全にテーブル組みをするパーツでは使えますが、 テキストなどの変動要素（閲覧ユーザがフォントの大きさを変更したりできる）を中に入れることはしません。デザインが崩れるのは当然です。 ボックス要素にバックグランドで画像を使い、テキストをのせる方がまだマシでしょう。それでも、当然テキストのフォントサイズを大きくするとバックグランドからはみ出したりするのはWEBの宿命です。 そういった変動要素をどのように処理するかは、その時々のノウハウになり、一概に説明しきれないと思います。もっとピンポイントで具体的な題材を示してくれる方が答えやすいと思います。 最後に、一番無難なのはテキストを画像にすることだと思います。
補足
tsucu さん回答ありがとうございます。 下記について ＞ボックス要素にバックグランドで画像を使い、テキストをのせる方が ＞まだマシでしょう。それでも、当然テキストのフォントサイズを大き ＞くするとバックグランドからはみ出したりするのはWEBの宿命です。 確かにテンプレートのPSDファイルを見てみるとバックグラウン ドで画像を指定し、その上にテキストが表示されています。 しかし、CSSで表示されています。確かにサイズ変更を行うとデ ザインが崩れます。通常では、CSSを使うと文字サイズや位置が 指定できデザインが崩れるような事はないように思いますが、こ れは、上記のボックス要素をPhotoshopで指定できるという事で しょうか。 その場合、ボックス要素とはどのように指定すればよろしいでし ょうか。 また、どのようにお伝え致していいか難しいのですが、PSDでWe bを制作している方は、そこまで時間が掛かる設定を行っている のでしょうか。テンプレートのPSDファイルとHTMLを見るとCSSで テキストを指定していました。 多数のものを見てみましたがPSDテンプレートのデザインとテキ ストは同じ位置に配置されています。どのようにやっているの でしょうか。 上記のような場合、PSDファイルそのものでテキストや画像を別 々にひとつのHTMLとして保存できるようにする事が出来るのでし ょうか。 例えばPSDファイルの画像であれば画像として、テキストはCSS やHTMLタグのDivなど。 多数のPSDテンプレートを見ていると何らかの同一方法でHTML化 しているように思えてならないのですが。
お礼
今までのPSDのホームページテンプレートは、何だったんだろうと 思いました。制作ページ数が進んでいたもので。 伺い方がまずかったのでしょうか。検索で調べてみるとFireewoeks の拡張機能であれば近い物が見つかりました。 作業能率で簡単な方法がありましたらまた、よろしくお願いします。 ありがとうございました。