どのようにこのPSDをHTMLに近づけますか？

Question

PSDをHTML/CSSに変換する練習を始めました。しかし時にはPSDを見ているだけで、htmlやcssを使って工作するのは不可能に思えます。

ここ1と同様：

http://i.stack.imgur.com/rx0dl.jpg

あなたの頭の中のブロックにそれを分割、HTMLに任意の他のPSDに近づくだろうと

Answer 1

たくさんのおかげで、あなたがこの近づくべき方法は同じです上から開始します。 Photoshopで

http://i.imgur.com/glZJ5.jpg

Answer 2

使用グリッド線は別のセクションであなたのイメージを分割し、そこからスライスを作成するには：

は、ここで私はあなたがこれを分けることができる方法の非常に大まかな例を作りました。あなたはそれをやったことがhtmlにエクスポートすることもできます、それはまた必要なCSSスタイルを作成します。

あなたがここに方法を説明するビデオを見つけることができます。 http://www.youtube.com/watch?v=DVfxe4pqvo8

Answer 3

まあを、基本から始め：

• 中央コンテンツコンテナ。残念なことに、画像には特定の画面解像度のレイアウトしか記述されていませんが、設計者が固定された中心の要素（おそらく960px）を必要としているように見えます。
• このコンテナには、2つのヘッダーがあります。 border-radius CSSプロパティを使用して枠線を丸くすることができますが、一部のアイコンにはbackgroundの画像が必要になることがあります。
• これまでの例では、unstyledというテキストを追加します。
• フロント画像を追加します。おそらくPhotoshopでそれを切り抜くことができます。