私は現在、フォトショップで働いている人によってデザインされたサイトを取得していて、サイトのPSDを提供してくれます-かなりの数のレイヤーなど...
これをHTML/CSSに変換する方法はありますか、それとも手動で行う必要がありますか?
一部のサイトはサービスを提供しているようですが、PSDをセクションに分割して、HTML/CSSではなく画像として表示するだけなのかどうかはわかりません。
たぶん、完全な変換は不可能です。
考え?どうも
最善の方法は、これを手動で行うか、誰かにお金を払ってHTMLで書くことです。PSDを切り取ったばかりのウェブサイトは、多くの場合、悪い、時には単純な無効なHTMLを生成します。
主にスライスされた画像ではないレイアウトを使用すると、より良い結果(より高速なページの読み込み、より優れたSEO、より優れたセマンティクスなど)が得られる可能性があります。
手動で行う必要があります。
変換を行うことができる自動ツール(1、2 )がありますが、出力コードは単純にひどいものです。後で、コードを簡単に保守できると期待しないでください。
あなたのためにそれをコーディングできるサイトもあります。彼らはそれをうまくやる方法についての通常のヒントとコツに従うべきです。いくつかは大丈夫です、いくつかはそうではありません。
またはあなたはそれをすることを学ぶことができます。手でコーディングするだけです。難しいことではありませんが、HTML、CSSの基本的な知識が必要です。
デザイン/レイアウト/ボックスなどの各ブロックを見て、それがどの要素を持っているか、そしてHTML/CSSを使用してそれらをどのように再作成できるかを確認します。答えがない場合。
それについてのチュートリアル(3)、ガイド(4)、ビデオ(5)もあります。これに関する情報はかなり殺到しています。
(1)Adobe Muse:http ://www.adobe.com/products/muse.html
(2)SideGrinder 3:http ://www.medialab.com/
(3)Google:http ://www.google.com/search?q=convert+psd+tutorial
(4)Artmov:http ://artmov.com/ebooks/how-to-convert-psd-to-html-css
(5)YouTube:http ://www.youtube.com/results?search_query=convert+psd&oq=convert+psd
Photoshopは、レイアウトを番号付きのIDとクラスを持つひどい修正レイアウトに変換できます。それは悪夢なので、あなたはそれを望んでいません。最善かつ唯一の方法は、実際には、レイアウトをスライスし、スライスに適切な名前を付けてからエクスポートすることです。次に、html/cssを手動でコーディングします。これは誰もが行うことなので、問題はありません。もちろん、あなたのhtml / cssは良い仕事をするために良い必要がありますが、それが私たちが報酬を得る理由です。
ところで。レイアウトで多くの画像を使用したり、テキストを含む画像を使用したりすることは非常に悪い習慣です。おそらくカスタムマーケティング資料を除いて、これに対する言い訳は今のところほとんどありません。必要なフォントがある場合は、これにCufonを使用できます。多くの場合、cssを使用して角を丸くすることができます。最近のレイアウトの中には、合計で5〜10kbの画像しか使用していないものもあります。
明らかに、初心者としてそれを行うことを期待することはできませんが、それはあなたが目指すべきものです。
多くのサイトは、指定したとおりに実行します。
PSD to HTML / CSSサービスプロバイダーのレビューを検索し、レート/所要時間/品質を比較します。
http://csshat.comのような、大いに役立つ新しいツールを使用することもできます。