最近仕事でAdobeXDを触る機会があって、
これがまた便利なので共有させていただきます。
XDについての紹介は、参考になる記事を下部に載せておきます。
この記事では簡単にバナーを作れちゃう!
ということをご紹介できたらと思います。
まずXDを開きカスタムサイズを選択します。
![](https://kinukog.com/wp-content/uploads/2018/12/23ee32c7e3ec8a08558ddda65c0c8ea9-e1543737905473-1024x554.png)
そして適当にアートボードを作成します。
![](https://kinukog.com/wp-content/uploads/2018/12/b2aec1efd5ee6d4154b25fb11cadc49e-1024x688.png)
バナーに使いたい画像を追加します。
![](https://kinukog.com/wp-content/uploads/2018/12/e2d35c1f9f60e83e2f2d95825ec3a033-1024x681.png)
そしてバナーサイズの長方形を作成します。
今回は3倍のサイズで作ります(300*250 の3倍)
![](https://kinukog.com/wp-content/uploads/2018/12/568049e870dd825a28e805037202ab24-1024x622.png)
右のロックボタンを押すと、縦横比固定でサイズ変更ができます。
バナーの枠組みに画像素材を当てはめたら、『T』マークをクリックしてテキストを入力します。
![](https://kinukog.com/wp-content/uploads/2018/12/0fc262181bd60335f3fdb410e0669222-1024x598.png)
右のリストからフォントや文字サイズ、色などを変更できます。
強調したいところを大きく、ひらがなは小さく、とかやってみます。
![](https://kinukog.com/wp-content/uploads/2018/12/e596cad57948fc8c4e0a5934774ed784-1024x620.png)
できたテキストを複製して、背面にある方の色を変更すると
よくある立体的な見た目になります。
(左のリストはレイヤーの状況を表示しています。)
![](https://kinukog.com/wp-content/uploads/2018/12/166974229044067594b14ec6ef53c413-1024x616.png)
画像サイズが合っていないので、長方形に合わせて画像を切り取ります。
画像より前面に長方形を持ってきて、長方形いっぱいに画像が入るように調整します。
![](https://kinukog.com/wp-content/uploads/2018/12/0200ece2a30ee507cef724423bb34d17-1024x623.png)
先ほどの長方形と画像を同時に選択し(コマンド押しながら)
オブジェクトから「シェイプでマスク」を押します。
![](https://kinukog.com/wp-content/uploads/2018/12/2e5798e87622bfdf3391f64dd8a0bb18-1024x700.png)
すると長方形のサイズに画像が切り取られます。
![](https://kinukog.com/wp-content/uploads/2018/12/a74098e761753d9d30d1bec352752e3e-1024x625.png)
実際に文字を重ねてみました。ちょっと見にくいので修正していきましょう。
続きはこちら
参考になる記事
- そもそもXDとは?
- AdobeXDでWebサイト制作
https://liginc.co.jp/284436
- UI/UXとは?
https://ferret-plus.com/655
コメントを残す