【Webデザイン】(ブロガー) Adobe XDで90秒! 簡単アイキャッチ制作!

記事
ビジネス・マーケティング
日本が世界で2番目に使われていると言われているAdobe製のソフトウェアXD。

非デザイナーでも直感的に操作でき、デザイナーでPhotoshopやillustratorになれている方ならあっとういう間にマスターできる優れもの☆

UIデザインはもちろん、画像や資料まで作成できてしまう。

それでいて無料版でも十分なプロトタイピングや画像制作が可能ですから文句なしですよね♪

他のクリエイティブツールと併用でさらにクオリティアップや効率化も!

スマホアプリ版もあり、マルチデバイス対応です。
💡こんな方にオススメ!
✔︎アイキャッチ画像を作りたいけど、Photoshopやillustratorはハードルが高く、月額費用を払いたくないブロガーさん。
✔︎Canvaで良いテンプレートが見つかっても有料で断念する。✔︎Webデザイナーになりたい方(XDは実務で必須)

1.XDの概要とできること

picture_pc_c2a9cb4befed782c4e7fc308f34d76fe.png
✔︎正式版リリース→2017年10月18日

✔︎ソフト自体が軽い!

✔︎操作が直感的で初心者や非Webデザイナーでも簡単!

✔︎作業効率を上げる機能がたくさん!

✔︎UIデザイン(デザインカンプ)→サイトやアプリを制作する前の設計図

✔︎プロトタイプ→デザインカンプからどのページがどのページに遷移するのかを視覚的に表したもの。

✔︎共有→XDをインストールしていない方でもURLさえ生成すれば誰でも見ることができ、ピンを差してコメントも記入できるので、クライアント様とXD内だけでディレクションが完結できる。

ファイルを更新した時も1タップでOK。

✔︎アイキャッチ画像制作

✔︎バナー制作

✔︎SNSヘッダー制作

✔︎ロゴ制作

✔︎名刺制作

UIが大好評のFashionista×Webのプロトタイプがありますので、気になる方はどんな感じなのか以下の動画をぜひご覧ください!

2.XDでアイキャッチ画像制作

1.画像の大きさと同じアートボードを作成

2.アートボードに画像を当てはめる

3.長方形ツールで全体を覆うように長方形を作成

4.塗りを黒にする

5.アピアランスで透明度を下げる

6.長方形ツールで帯のようなものを作成

7.アピアランスで透明度を下げる

8.テキストツールで文字入力

9.文字の大きさや改行を整える

10.フォントを選ぶ

11.テキストを画像の真ん中に合わせる

12.文字色を塗りで白くする

13.完成!

3.完成したアイキャッチ画像をダウンロードする方法

picture_pc_c2a9cb4befed782c4e7fc308f34d76fe.png
1.XDメニューバー左上の「ファイル」を選択

2.書き出し(書き出す前にダウンロードしたいアートボードを選択しておく)

3.選択したオブジェクト

4.保存先のフォルダを選択

5.フォーマットを選択(この動画ではPNG)

6書き出し

まとめ

いかがでしたでしょうか?

XDは体験版でも有料版とほとんど変わらない機能で使うことができます。

ツールが多く複雑、かつ有料でないと良い画像が作れないPhotoshopや、実務で使えずテンプレートも有料にしないと幅が狭まるcanvaのいいとこ取りをしたのがXDです!

まだまだ随時アップデートしてますし、ユーザーの声を大量に集めて進化を繰り返してるXDですので、使い倒してXDマスターを目指しちゃってください!

また、WordPressの学習や制作で行き詰まった時、どんな質問も承っております☆
ログインURL変更や国外IPアドレス制限、迷惑メール・コメント制限、スマートフォンアプリでログインなど、セキュリティ対策を可能な限り施したWebサイト・HP制作をします♪

サービス数40万件のスキルマーケット、あなたにぴったりのサービスを探す