2017-03-23 4 views
0

私はHTML/CSS/JSにPSDファイルを変換する必要があります...ここでHTML/CSS/JS翻訳 - 私のプロジェクトではこのグリッドですか?そうでない場合 - 私はこのプロジェクトをコードするために1つ必要ですか?

がこのプロジェクトです:

https://s15.postimg.org/s421pj5mj/PSD.jpg

https://s24.postimg.org/8xq87z3v9/PSD_2.jpg

QUESTION 1.verticalと2ものは何ですか。水平な空色の線と、このPSDをHTML/CSS/JSに変換する誰かの助けになると思いますか?彼らは少し混沌と思われますか?

答えて

0

あなたの例では青色にもかかわらず、これらは「レッドライン」と呼ばれています。これらの行は、要素の整列、サイズ変更、および間隔の表示に役立ちます。

たとえば、真ん中に1つの中心線があります。 「パーソナルサービス」テキスト、「レスポンシブウェブ」セクション、「最新プロジェクト」セクションのように、「Creative Digital Solutons」テキストが中央に表示されていることを確認することができます。

また、2番目の画像の最下部には、各列の特定のテキストが他の列の特定の部分と並んでいることがわかります。私はあなたがアイコンがすべて同じ幅であることを見ることができます追加の赤線で

enter image description here

、左側:

通常は、特定の要素または要素のグループのようなを見つけるだろうアイコンは「最新の投稿」の左側に合わせる必要があります。

時には、これらの朱書きは、特定の測定(フォント:14ptの、マージン:10pxの、など)を含むが、これにはないので、あなたはちょうどあなたが

を視覚化するためにラインを使用する必要があり、それは混沌としていますしかし、それはときどきどうなるのですか?

+0

グリッドは何ですか(グリッドはありません)。グリッドが提供されていない場合、どうすればいいですか?このプロジェクトをhtml/css/jsに翻訳するにはグリッドが必要ですか?グリッドなしでもできますか? –

+0

これらの線はあなたのグリッドです。あなたはそれが助けになると思うならば、あなたは上にグリッドを任意に重ねることができますが、それは不要です。これらの青い線はあなたの最終的な出力にあるべきではありません。いくつかのグリッドを並べるのではなく、提供しているラインを並べる – Llewey

+0

私は非常に多くのPSDプロジェクトを見てきましたが、そこには "レッドライン"があり、他にはガードがあります(https: /woocommerce.com/wp-content/themes/woo/images/storefront/feature-2.jpg) PSDをhtml/css/jsに変換する限り、改行とグリッドの違いは分かりません。 ... –

関連する問題