【ブロガー】Adobe XDで90秒!簡単アイキャッチ制作!

adobe-xd-eye-catch
Miharu
Miharu

ブログの記事に使うアイキャッチって作るの難しそう・・・Photoshopも機能がいっぱいで「あー!!」ってなるし、Canvaは実務に繋がらないしでもっと手軽に作れるツールってないんですかね?

MiharuちゃんはこれからWebデザイナーになるんでしょ?当然Photoshopは使えてないとダメだけど、ブログ書くならアイキャッチにそんなに時間かけられないのはわかる。でもブロガーもやるなら自分で簡単に作れた方がいいよね!作ってくれる人を見つけるのも大変だしね。そこでMiharuちゃんも知ってるXDで作ることをオススメするよ!

Rui
Rui
Miharu
Miharu

そっか!XDはサイトやアプリの見た目を整えるものだけじゃないんですね!WebデザイナーならXDは誰でも知ってるけど、非Webデザイナーでもオススメだっていってるクリエイターさん多いですよね☆

そう!今回は、XDの特徴と実際にアイキャッチ制作してるところを見せるから、一緒に作っていこう!

Rui
Rui

XDとは?

2017年10月18日に正式版がリリースされて、日本が世界で2番目に使われていると言われているAdobe製のソフトウェアで、スマホアプリ版もあります。

【特徴】

  • ソフト自体が軽い!
  • 操作が直感的で初心者や非Webデザイナーでも簡単!
  • 作業効率を上げる機能がたくさん!

【XDでできること】

  • UIデザイン
  • プロトタイプ
  • 共有
  • アイキャッチ画像制作

UIデザインやプロトタイプは、サイトやアプリを制作する前の設計図みたいなもので、こういう見た目でどのページがどのページに遷移するのかを視覚的に表したものです。

共有はこれまた便利でして、なんとXDをインストールしていない方でもURLさえ生成すれば誰でも見ることができるという非常に優れた機能なんですね!

プロジェクトメンバー内にとどまらず、クライアント様とも気軽にやりとりがXD内でできてしまうという。

ピンを差してコメントも記入できますからね。

ファイルを更新した時も1タップでできるので、どこがどう変わったのか確認する手間もかかりません。

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

制作手順

Rui
Rui

どうかなMiharuちゃん♪XDの概要は復習できたかな?これから実際に手を動かしてアイキャッチ画像を作ってみよう!

楽しみです!まだXDをインストールしていない方はAdobeの公式HPからすぐにインストールできますからね☆

Miharu
Miharu
  1. 画像の大きさと同じアートボードを作成
  2. アートボードに画像を当てはめる
  3. 長方形ツールで全体を覆うように長方形を作成
  4. 塗りを黒にする
  5. アピアランスで透明度を下げる
  6. 長方形ツールで帯のようなものを作成
  7. アピアランスで透明度を下げる
  8. テキストツールで文字入力
  9. 文字の大きさや改行を整える
  10. フォントを選ぶ
  11. テキストを画像の真ん中に合わせる
  12. 文字色を塗りで白くする
  13. 完成!

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

  1. XDメニューバー左上の「ファイル」を選択
  2. 書き出し(書き出す前にダウンロードしたいアートボードを選択しておく)
  3. 選択したオブジェクト
  4. 保存先のフォルダを選択
  5. フォーマットを選択(この動画ではPNG)
  6. 書き出し

まとめ

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

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

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

まだまだ随時アップデートしてますし、ユーザーの声を大量に集めて進化を繰り返してるXDですので、XDに慣れておけばWebデザイナーやエンジニアになることも可能です。

XDを使い倒してXDマスターを目指しちゃってください!

関連記事

  1. meshi-designer

    【名刺】Webデザイナーに提案が伝わらない!具体的にって何?

  2. group_ eye_catch

    コミュ障認定されてない?webディレクションにも必須なコミュニケーションのポイント3選

  3. engineer-branding

    【駆け出しエンジニア】ブランディングが下手クソ!セルフブランディングのポイントはたったの3つ【経験をもとに解説】

  4. freelance_eye_catch

    【フリーランス】〇〇の人はWeb系のフリーランスになってはいけない

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


Profile

Rui

Rui

【About me】
アパレル店長→起業塾詐欺で1000万の負債・破産→Webコンテンツクリエイター

ファッションメディアFashionista×Web運営☆Web系コミュうえぶや&ぶんや統括|コンテンツライティング|SEO|アクセス解析|WordPress|HTML,CSS|JavaScript|jQuery|XD|Photoshop

【Favorite】
ファッション、スイーツ、Web・IT、スパ、森林浴、整体、歌、赤西仁、ジャニー喜多川、前澤友作

【Inscription】
キラキラするな!ギラギラしろ!

【Mission】
ファッションを軸としたライフスタイル型プラットフォームでWebサービス創出したい!


→詳細プロフィールはコチラ!←
  1. meshi-designer

    【名刺】Webデザイナーに提案が伝わらない!具体的にって何?

    2020.04.30

  2. engineer-branding

    【駆け出しエンジニア】ブランディングが下手クソ!セルフブランデ…

    2020.04.23

  3. web-writing-read

    ストレスを与えない文章の書き方10カ条【テンプレート】

    2020.04.21

  4. engineer-type

    あなたは詐欺師エンジニア?エンジニアの種類4選

    2020.04.16

  5. web-marketing

    【ワークあり】マーケティングという言葉に支配されるな!【概念と…

    2020.04.16

  1. meshi-designer

    【名刺】Webデザイナーに提案が伝わらない!具体的にって何?

    2020.04.30

  2. engineer-branding

    【駆け出しエンジニア】ブランディングが下手クソ!セルフブランデ…

    2020.04.23

  3. web-writing-read

    ストレスを与えない文章の書き方10カ条【テンプレート】

    2020.04.21

  4. web-marketing

    【ワークあり】マーケティングという言葉に支配されるな!【概念と…

    2020.04.16

  5. adobe-xd-eye-catch

    【ブロガー】Adobe XDで90秒!簡単アイキャッチ制作!

    2020.04.10