この記事ではこれからXDの勉強を始めるにあたっての導入部分の説明をしていきます。
XDを使用する際に知っておくべきスキルのまとめはこちら
1.作業環境を作成する
1.1左上タブから新規を選択する。
1.2表示された項目からweb1920を選択する
1.3下記にあるXDファイル「XD導入」より、カラーパレットをコピーして新規作成したファイルに貼り付ける
※XDの練習作業ではここでコピーした色のみを使用します。
1.4カラーパレットにあるカラーを登録する
1.3で貼り付けたカラーパレットをアセットカラーとして登録を行います。
2.模写用ファイルの作成
2.1Google ChromeにFireShotをインストールする
※Googleで”FireShot”と検索してください。
2.2以下のサイトより練習用に模写をするサイトを選択する
SANKOU！
2.3選択したサイトでFireShotを使用し、スクリーンショットを保存する
※FireShotを使用する場合は必ずページ下端で使用すること（ページの画像が正しく取得できない場合がある）。
2.4保存したスクリーンショットをドラッグし、XD上に貼り付ける
※カラーパレット上ではなく、web1920上に貼り付けること
2.5貼り付けたスクリーンショットが収まるように1920webのサイズを変更する
2.6貼り付けたスクリーンショットをガイドを元に上端中央に配置し、不透明度を変更してロックする
マウスで画像を動かすとガイドが表示されます。
2.7不透明度を変更してロックする
※ロックをかけることで画像の移動、不透明度変更が出来なくなります。配置、不透明度を変更したい場合はロックを解除してください。
3.トップページの作成
3.1模写画像の上に長方形ツールで長方形要素を生成する
3.2生成した長方形を模写画像と同じサイズになるように調整し、枠線のチェックを外して不透明度を変更する
3.3生成した長方形の上に文字要素を生成する
3.4生成した文字要素のフォントや色を変更して、模写画像の文字に近づける
3.5生成した長方形内の文字の摸写がすべて完了したら、グループ化して名前を変更する
※グループ化のショートカットキーは（Ctrl+G）です
以上の工程を模写画像のすべてのエリアで行うこと