ロゴ画像引用元:Adobe
こんにちは、LiDoです。
ブログやツイッターなどの画像は、どのツールで制作していますか?
私はアイコンもヘッダーもAdobeXDで制作しています。
実はこのAdobeXDはAdobeアカウントがあれば、無料で使用できます。
今回は、XDの特徴と使い方を簡単に解説していきます。
無料版AdobeXDを使おう
AdobeXDはUIデザインやwebデザインをするためのソフトです。
XDの特徴として、非デザイナとデザイナー間での共同作業ができるように設計されています。
つまり、デザインの確認をするために非デザイナーにも使えるように無料版があります。
画像制作くらいならアカウントがあれば、無料で使用可能ということです。
全然難しくない!便利なXD
XDは最低限の機能しか搭載されていないので、非デザイナーでもとても使いやすい。
あるベンチャー起業は、営業職の人が積極的に利用しているそうです。
使われてる場面は以下の通り。
- 資料制作
- スライド制作
- サムネイルなどの画像制作
- webデザインやUIデザインなど
いろんな場面で使用できるとがわかります。
簡単にXDのメリットとデメリット紹介
・完全無料
・無駄な機能がないので使いやすい
・サクサク動き軽い
・RGBで紙媒体のデザインができない
・文字のグラデーションができない
・立体的なデザインが不可能
Web上で使用する画像を作るだけなら、基本的に問題はないかと思います。
XDインストール方法をささっと紹介します
下記のURLからAdobeアカウント取得を行います。
https://www.adobe.com/jp/products/xd.html
手順は簡単で以下の通り
・Adobeアカウントがない人は情報を入れてください
・アンケートがある場合は答えてください
・インストール中となり、ポップアップが出た場合はOKを選択
「有料版を購入した人への2つの注意点」
①Adobeは買い切りではなく、ライセンス契約になります。
ライセンスとは簡単に説明すると「購入した期間の間は使用できる」ということです。
②クレジット決済で購入した場合は、ライセンスが自動更新になります。
困る場合は、自動更新を変更してください。
Adobeアカウントにログイン>プランを管理>プラン情報で変更
*せっかく無料版があるので、無料版を使用しましょう!
Adobe XDの使い方を紹介します
今回は下記のツイッターのヘッダーを作成します。
画像の大きさは「ツイッター ヘッダー 大きさ」で検索

Web上ではpx=ピクセル単位を使用するワン!
赤い枠で囲ってある、カスタムに大きさの数値を入力。
twetterのヘッダーの大きさは1500×500です。

「w= width / 幅 」「h=height / 高さ」だワン!
商用利用可能な画像をダウンロードしたものをコピぺします。
(画像はダウンロードフォルダを開いていますが、コピペできればどこからでも大丈夫です。)
画像の枠が青いと選択された状態です。
薄くなっている部分はアートボート外です。
アートボートに対して画像の位置を決めます。
画像をぼかしたいので、オブジェクトのぼかしを選択します。
下矢印をクリックして、①から②に変更してください。
画像のぼかし度を調整します。
次に文字を入れていきます。
左側のツールバーからTのアイコンを選択し、クリックすると入力できます。
右側の赤い枠内で「フォント種類」「サイズ」「行揃え」などが設定できます。
入力した文字は位置を調整できます。(枠が青くなると選択された状態)
赤い枠内で色の変更が可能です。
画像では、「塗りを白」「境界線(文字の縁)なし」「シャドウあり」です。
少し手を加えて文字色の変更と正方形ツールで長細い線を置きました。
(左側の四角アイコンが正方形ツール)
これで完成とします。
最後は画像の書き出しです。書き出しは画像の通りに進めてください。
書き出しの設定になります。
「名前」は画像の名称を指します。
アートボートの名前になるので、好きな様に変更してOKです。
「場所」は保存場所を指します。
既存のままだと「Creative Cloud Files」に保存されるので、変更した方が良いです。
慣れないうちは、保存先をデスクトップにすると迷子にならないのでおすすめです。
「フォーマット」は保存形式を指します。
jpgかpngで保存してださい。これで完成です。
AdobeXDの制作と解説
今回はXDの特徴と使い方を簡単に解説しました。
XDは使い道が多種多様です。使いこなせば力作が作れる様になります。
是非、制作してみてください!
もう少しAdobeを勉強したい人向けに、半額で手に入る方法を解説しました。
コメント