ウェブデザインPSD to html - >より直接的な方法？

Question

職場ではPhotoshop/Fireworksでサイトを設計している同僚がいますが、別の人がこのデータを取得してスライスし、Dreamweaverを使用して同じものを最初から再構築しています。

まあまあまあまあです！

私は、PhotoshopがテーブルベースのHTMLを出力できることを知っています.Fireworksは絶対配置でdivを作成します。どちらも非常に役に立つとは思われません。

確かに、私はプログラマーになってから（DW/FW）（CS4/CS3）の多くを試していないので、新しいバージョンがこのワークフローの問題に対処しているかどうかはわかりませんが、物事？

我々はレイアウトメタデータのいくつかの並べ替えを添付することができます（これはロールオーバーボタンで、これはSWFになり、これはテキストになり、このロゴは「XYZ」<H1>テキストなどを非表示になります）を支援するためにスライスにレイアウトの生成？いくつかあります秘密のツールこの変換プロセスを支援する？または、私たちはまだに手をかけてに限定されていますか？

スマートテンプレート/ワードプレス/ジェネリックCMSに合うように、手作りのページを再加工する必要があるときには、にもう一度という不満が続きます。

私はデザイナーが何を行うことができるようにシステムを自由にする必要がありますが、ほとんどの従来のサイトが持っていることを認め

：複数のリンク

とナビゲーション

と

• ヘッダサイドバーメインコンテンツ一部
• 多分別のサイドバー
• フッター

多くのコンポーネントの類似性を考えれば、は、スライスされたデザインから機能的なHTMLへのより体系的なアプローチはありませんか？

また、私はものを単純化していますか？

-edit- Mmmmm ....私は答えを受け入れると思うが、実際には私が探していたものではなかった。

DOMを設計するのはちょっとした聖杯です（「これはモデルだけです！」）、HTMLやJavascriptで行うことができる「グルーヴィー」なものがあれば、それは大変な作業ですしかし、一連の制約（960のものは興味深いように見えます）、いくつかのよくデザインされたリセットスタイルシートと少し...妖精のほこり？私たちはワークフローを改善できるはずです。

Photoshopのテーブル自体はほとんど役に立たないと私は同意しますが、確かにこのデータを取得し、セルのグループを選択して、 "これはテキストdiv、オーバーフロー：自動"または "これらのセル選択された領域と同じ高さ/幅でスタイルします。確かにここの仕事では、部屋には管理職に正式な紹介をする必要のある他の象がいるが、デザイン>ページワークフローのいくつかの部分は無邪気であるようだ。

Answer 1

私には、手で行うのが有利です。あなたは正しい一度それを得るために持っている唯一の、そしてあなたが視覚的な魅力のために特別つもりなら、あなたはおそらく先にあなたはそれがクロスブラウザに優しい作りの作業の多くを持っている...

は、他の聞くのが大好きです答え。これは視覚的に魅力的なサイトよりもデータ駆動型のものを作っているからです。

Answer 2

オメガはそれに触れましたが、最大の問題はブラウザ間の互換性です。これらのブラウザの癖がすべて存在しない場合（coughInternetExplorercough）、提案した内容はずっと簡単になります。しかし、すべてのブラウザでピクセル完全に見えるようにするには、多くの場合、手作業でコーディングする必要があります。

もう1つのことは細かい制御です。確かに、PSDテンプレートをDreamweaverやその他のものにポップするだけで、動作するウェブサイトを持つことができますが、テーブルのようなハックや醜いものを使って動作させることになります。それでも、それはあなたが望むように完全には機能しないでしょう。アクセシビリティやSEOなどのことも覚えておかなければなりません.Dreamweaverではそのことを伝えることはできません。

Answer 3

、それは素敵なパイ・イン・ザ・スカイみかん夢だが、私がいる限り、ウェブサイトは、一日の終わりに、（X）HTML/CSSで記述されているとして、あなたは常にいくつかをしなければならないと思いますほとんどまたはすべての作業を手動で行うことができます。

いくつかのショッピングソフトウェアとダイナミック、変更、拡張し、コンテンツに焦点を当てた、テキストベースのサイトでは、静的なピクセルの間だけで基本的な亀裂があります。そのギャップを埋める最良のツールは、まだ人間のプロです。 iWebの（完全にWYSIWYG）またはDW /花火のような

ツール（真ん中のどこか）のみ、これまであなたを取得または重大な制限があります。 iWebの場合は、事前に作成されたテンプレートのみを取得します.DW/Fireworksの場合は、あまり最適ではないコードです。どのような制限を守るか、手動で行うのが最善であるかどうかを判断する必要があります。

Answer 4

今日、多くの人が（X）HTML/CSSを使用してブラウザにまっすぐ設計しています。その問題は、Photoshopを使用していて、クライアントが静的設計。

よくお読みになるのは、Andy ClarkeのWalls Come Tumbling Downです。

Answer 5

Sitegrinderのようないくつかのツールがあります。

は、Adobe自身がLabsのプロジェクトは、あなたがフラッシュのために説明し、より多くの何がCatalystと呼ばれています：

これはPhotoshopでスライスを取り、あなたはそれらのプロパティを変更し、作業Flashファイルにエクスポートすることができます。

ビデオを見ると（あなたはすばらしいはずです）、ウェブサイトが間もなく始まると思うことに惑わされることになりますこのように構築されています。彼らはフラッシュのために何を触媒に似たクロスプラットフォームのHTMLを出力し、このようなツールに向かっていたよう

のZimbraは、ヤフーに買収された前

は、それが見えました。もういや。しかし、ヤフーの震災では、そのようなソフトウェアはまだジンブラの灰から上昇するかもしれない。

Answer 6

必要であれば、私の意見では、サイトには、部品は実際の現場で使用するために切り取られていると、Photoshopでアップ嘲笑する必要がありますが、Photoshopで完全にサイトを設計するために、それはウェブ上で動作させるために必要ですそれを逆にするだけです。本当に2つは並行して実行する必要があります。短い、グラフィックデザイナーデザインウェブサイトの見た目で

、しかし、あなたはプログラムそれにプログラマを必要としています。

Answer 7

Photoshopを完全にスキップして、デザイナーにビューHTMLを真似してもらうだけです。複雑で厄介なプロセスを取り除くだけでなく、100％はHTML/CSSで可能なものに基づいており、Photoshopでは可能ではありません。

もっと読み：

• Why We Skip Photoshop (37signals)
• Walls Come Tumbling Down (Andy Clarke)
• Web Designers Should Do Their Own HTML/CSS (37signals)（Paul Souders' answer経由）（Jason Berry's answer経由）

Answer 8

私の意見はHTML/CSSが十分に単純であるということである有能なウェブデザイナーは適度に流暢でなければなりません。 Photoshopはすばやいルック・アンド・フィールの実験の場を提供していますが、私はこれが重要なステップであると考えています。

個人的には、私は今、HTMLで直接的に設計しプロトタイプを作成してきました。これは、CSSによって提供されるコンテンツとレイアウトのクリーンな分離が本当に輝く場所です。構造化されていないdivを使用してページを地域に編成すると、概念的にページを整理することができます（つまり、関連するアイテムをコードの近くに置くこと）。これは、かなり徹底したサイトインベントリを作成するという副作用があります。

次は、私は喜んでも、ワイヤーフレームを作成するdivタグ、レイアウトするためにCSSを使用します

最後のステップは、視覚的な要素を適用している（レビューと紙プロトタイピングのための有用な。）：色、テキストスタイル、グラフィックスを。私はきれいなものを調理するために必要なグラフィックプログラムを使用します。

この方法に固有の直交性に注意してください：コンセプトを開発し、次にレイアウトし、次にルックアンドフィール。これは、ハードな思考（概念モデル）を前面に出し、最後に最も揺るぎない考え（色/スタイル）を最後に置きます。アートディレクターがカラーパレットを変更すると、1つのCSSファイルを編集するだけで済みます。また、概念モデルを変更する必要がある場合は、レイアウトやルック・アンド・フィールの多くを再利用できる可能性があります。

この方法でトラクションが必要な場合は、960（http://960.gs/）のような標準CSSグリッドを使用できます。それは、レイアウトをそのような雑用にする多くの算術および浮動ビジネスを処理します。 I上記ラーフルのリンクに加えて

もお勧め：http://www.37signals.com/svn/posts/1066-web-designers-should-do-their-own-htmlcss

Answer 9

をあなたはおそらくのために行くべきことは、設計者が自分のサイトのデザインのために十分に確立グリッドシステム内で動作するように訓練しています。彼らがグリッド/ブロックシステムとしてレイアウトを理解することができれば、それらの制約内で多くの面白いデザインを達成することができます。しかし、それはPSDからHTMLへの直接的な変換ではありません。なぜなら、それはビジュアルデータを表現する2つの全く異なる方法だからです。

CSSの作業を容易にするフレームワークがたくさんあります。一つは、フォトショップ内グリッドシステムを表現するためにそこにテンプレートがたくさんある青写真CSS

http://www.blueprintcss.org/

です。

http://konigi.com/tools/photoshop-template-blueprint-css-comps

視覚的な制約層としてグリッドを考え、そしてデザインはPhotoshopのCOMPと特定のHTML/CSSの実装の間でマッピングすることができます。ビジュアル要素は、クリーンなグリッドボックス内にバインドする必要があります。グリッド内のSOme要素またはユニットは、背景画像にマッピングすることができます。その他のコンテンツを保持するdivコンテナを持つソリッドカラーまたはホワイトスペース。

よく理解され、グリッドフレームワークでは、ピクセルの完全なレイアウトにかなり近づくことができます。

また、優れた設計者は、デザインモックアップでホワイトスペースを効果的に使用する方法を理解しています。ビジュアルデザインに交差する線やクロスオーバー要素がたくさんある場合は、実装に大きな課題があります。視覚的に想像できるのは、HTMLとCSSの仕組みにある種のトレードオフを行わずに、ブラウザで実装するのは簡単ではないということだけではないということです。グリッドシステムを制約とし、レイアウト要件を判断する有効な方法と考えてください。

Answer 10

私は個人的に、境界線と背景色を使用してhtml/cssでデザインします。私はその後、PSDを取って背景画像やHTML画像として画像を挿入します。それはかなり速いです、コードはあなたのものですので、各CSSルールが何を意味するのかを知っているので、開発プロセスをスピードアップします（PSの厄介なスライスされたイメージ名とCSSセレクタ名と対照的）