PhotoshopのデザインをXNUMX分以内にCSSコードに変換する方法

CSS-フォトショップ

CS6バージョンの登場以来、AdobeはPhotoshopに、Webデザインのレイアウトと開発に非常に便利なオプションを実装しました。 操作は 非常に簡単 そして特に 速い。 このアプリケーションを介して、形状とテキストレイヤーを参照としてカスケードスタイルシートを生成できます。 手順は、モックアップを開発し、要素のコードバージョンをコピーして、シートに貼り付けるだけです。

これは、デザインの進化を視覚的にリアルタイムで確認できるため、非常に優れたオプションです。 このオプションを使用して取得するためのヒントを次に示します。 最大のパフォーマンス:

正確にしよう

専門的な結果を得るには、サイトの測定値と比率を考慮することをお勧めします。 設計しているテンプレートの幅と高さの値を設定し、それらをモックアップに適用します。 CSSコードをコピーすると、各要素とキャンバスのエッジの間のピクセル単位の距離を参照として各要素が配置されます。 また、ユーザーに最大限の読みやすさを提供するために、各要素の配置や各要素間の間隔など、デザインに含めるサイズと階層的な理由も考慮に入れてください。

ガイドとインターフェースのルールを使用すると、すべての要素が完全に整列した、すっきりとしたクリーンなテンプレートを作成できます。

ウェブフォトショップ

各要素のすべての特性を構成します

CSSコードをコピーするオプションにより、シェイプレイヤーとテキストレイヤーを使用してサイトを非常に正確にデザインすることができます。 各レイヤーのコンテンツがクリップボードにコピーされ、スタイルシートにすばやく貼り付けることができます。 シェイプレイヤーから、次の設定の値をキャプチャします:

  • サイズ
  • 位置
  • ストロークカラー
  • 塗りつぶしの色(グラデーションを含む)
  • 影を落とす

テキストレイヤーから、次の値をキャプチャできます。

  • フォントファミリー
  • フォントサイズ
  • フォントの太さ
  • 行の高さ
  • 下線付き
  • 取り消し線
  • 上付き文字
  • 添字
  • テキストの配置

それを覚えて、あなたが探しているスタイルを提供するためにこれらの値のそれぞれを設定してください。

レイヤーグループを操作する

この関数は、XNUMXつのタイプのクラス(図形またはテキストのレイヤーをまとめるグループごとにXNUMXつ)と、これらのタイプのXNUMXつのレイヤーごとにクラスで編成された作業を変換します。 各グループクラスは、各グループに挿入されたレイヤーに対応する子div要素を含む親div要素を表します。 このように、子コンテナの上部と左側の値は、親コンテナを参照して設定されます。 このオプションはスマートオブジェクトでは使用できず、グループ化されていない限り、複数のレイヤーに同時に適用できないことに注意する必要があります。

変換する手順

モックアップを作成し、各要素をカスタマイズし、それらをグループごとにグループ化したら、次の手順に従うだけで済みます。

 

  • レイヤーパネルに移動し、次のXNUMXつのオプションのいずれかを選択します。
    • 図形またはテキストレイヤーまたはレイヤーのグループを右クリックして、 CSSをコピーする コンテキストメニュー。
    • 図形またはテキストレイヤーまたはレイヤーのグループを選択してから、オプションを選択します CSSをコピーする レイヤーパネルメニューで。
  • コードをスタイルシートドキュメントに貼り付け、html5を介してページに適用します。

    CSS-Photoshop1

    CSS-Photoshop2


記事の内容は、次の原則に準拠しています。 編集倫理。 エラーを報告するには、 ここで.

コメントを最初に

コメントを残す

あなたのメールアドレスが公開されることはありません。

*

*

  1. データの責任者:MiguelÁngelGatón
  2. データの目的:SPAMの制御、コメント管理。
  3. 正当化:あなたの同意
  4. データの伝達:法的義務がある場合を除き、データが第三者に伝達されることはありません。
  5. データストレージ:Occentus Networks(EU)がホストするデータベース
  6. 権利:いつでも情報を制限、回復、削除できます。