Adobe XDからアセットをエクスポートしてWordPressウェブサイトを構築する方法

Adobe XDは、ウェブサイトをデザインするためのかなり素晴らしいプログラムであり、その古い前身であるAdobe Photoshopをはるかに凌駕しています。ブライトベッセルではブライトヴェッセルでは、クライアントのユーザー体験を構築するために、このAdobe XDを使用しています。

ここでは、Adobe XDでWordPressウェブサイトを構築する際のアセットのエクスポート方法を説明します。

1.まず、adobe XDファイルを開きます。

2.ファイルを開いたら、正しくエクスポートできるようにファイルをプロビジョニングしてください。

正確である必要があり、すべての要素はグループ化され、それぞれのセクションに分けられる必要がある。

この画像では、デザイナーが複数の異なるレイヤーに要素を追加したため、すべてのレイヤーがグループ化されました。要素が適切にトリミングされていません。これは簡単に修正できます。要素のひとつをダブルクリックする。要素が別の行ににじまないようにドラッグする。

これは簡単な修正です。要素のひとつをダブルクリックする。要素が別の行ににじまないようにドラッグする。

3.ネーミングスキームは非常に重要です。画像に名前をつけるのは、識別しやすくするためだけでなく、SEO対策にもなります。ヘッダーにはHDRを使い、背景にはBGを使います。

こうすることで、どのタイプの要素画像なのかがわかりやすくなり、背景であればセクションの名前、タイポグラフィやボタンなどであれば要素の名前になります。レイヤーエリアでは、グループ画像と単一画像に名前をつけます。小文字を使い、各単語の間にはダッシュを入れます。

4.すべての要素を修正したら、必要な画像をエクスポートできるようにグループ化してエクスポートするのが一番簡単な方法です。たいていの場合、HTMLや使用しているビルダーでは不可能なアセットを集めることになります。

ファイル > エクスポート > 選択

レイヤーに名前をつけたので、入力する必要はない。これで、背景、タイポグラフィ、ボタンなど、どのような要素の画像なのかがわかりました。画像に名前をつけるのは、識別しやすくするためだけでなく、SEO対策にもなります。ヘッダーにはHDRを使い、背景にはBGを使います。

エクスポートが完了したら、希望するタイプの画像ファイルのエレメント・グループができるはずです。