html - この PSD を HTML にどのようにアプローチしますか?

Question

PSD を HTML/CSS に変換する練習を始めたところです。しかし、PSD を目にすることがありますが、html と css を使用して作成するのは不可能に思えます。

ここのように：

どうもありがとう

score 4 · Accepted Answer

これにアプローチする方法は、他の PSD から HTML にアプローチするのと同じで、頭の中でブロックに分割し、上から始めます。

ここで、これを分割する方法の非常に大まかな例を作成しました。

score 0 · Accepted Answer

さて、基本から始めましょう：

中心的なコンテンツコンテナー。残念ながら、画像は 1 つの特定の画面解像度でのレイアウトのみを示していますが、デザイナーはおそらく 960px で固定された中央の要素を望んでいるようです。
そのコンテナには、2 つのヘッダーがあります。CSS プロパティを使用border-radiusして境界線を丸くすることができますが、backgroundアイコンによっては画像が必要になる場合があります。
これまでスタイル設定されていないサンプルテキストを追加します。
フロント画像追加。おそらくPhotoshopでトリミングできます。

score 0 · Accepted Answer

Photoshop でグリッド線を使用して、画像をさまざまなセクションに分割し、そこからスライスを作成します。それが完了したら、html にエクスポートすることもでき、必要な css スタイルも作成されます。

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

3 に答える 3