デザインやったことない人がAdobeXDで簡単にバナーを作ってみる(1/2)

最近仕事でAdobeXDを触る機会があって、

これがまた便利なので共有させていただきます。

 

XDについての紹介は、参考になる記事を下部に載せておきます。

この記事では簡単にバナーを作れちゃう!

ということをご紹介できたらと思います。

 

まずXDを開きカスタムサイズを選択します。

 

そして適当にアートボードを作成します。

 

バナーに使いたい画像を追加します。

 

そしてバナーサイズの長方形を作成します。

今回は3倍のサイズで作ります(300*250 の3倍)

右のロックボタンを押すと、縦横比固定でサイズ変更ができます。

 

バナーの枠組みに画像素材を当てはめたら、『T』マークをクリックしてテキストを入力します。

 

右のリストからフォントや文字サイズ、色などを変更できます。

強調したいところを大きく、ひらがなは小さく、とかやってみます。

 

 

できたテキストを複製して、背面にある方の色を変更すると

よくある立体的な見た目になります。

(左のリストはレイヤーの状況を表示しています。)

 

画像サイズが合っていないので、長方形に合わせて画像を切り取ります。

画像より前面に長方形を持ってきて、長方形いっぱいに画像が入るように調整します。

 

先ほどの長方形と画像を同時に選択し(コマンド押しながら)

オブジェクトから「シェイプでマスク」を押します。

 

すると長方形のサイズに画像が切り取られます。

実際に文字を重ねてみました。ちょっと見にくいので修正していきましょう。

 

続きはこちら

デザインやったことない人がAdobeXDで簡単にバナーを作ってみる(2/2)

 

 

参考になる記事

  • そもそもXDとは?

Adobe XD入門 | XDでは何ができる?WEBデザイン特化ツール

  • AdobeXDでWebサイト制作

https://liginc.co.jp/284436

  • UI/UXとは?

https://ferret-plus.com/655

 



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です