デザイナーの皆さんは、バナーやSNS用のコンテンツをデザインする機会が多いと思います。大体はIllustratorやPhotoshopで制作している方が多いのではないでしょうか。
私も、サイズ違いのアートボードをいくつも作り、IllustratorやPhotoshopでちまちまバナーを作っていました。修正なんか入ったら、それはもうバナーを一つ一つ修正しなくちゃいけなくて大変でした。
でも、そのちまちました作業が簡単に効率良く、出来たらいいと思いませんか？
実はそれ CCライブラリーを使って、AdobeXDで出来ちゃいます。今回は、同じ要素やデザインを使い回して、 XDでサイズ違いのバナーを量産する方法をご紹介します。
因みに、私は英語版のAdobe製品を使っているので、アプリケーション内の言語表記が英語になっている点だけ、ご了承くださいね。
XDの得意・不得意とは
XDはUI/UXデザイン用のアプリケーションなので、プロットコル用のデザインを制作するのに向いていますので、細かなデザイン・画像編集をすることには向いていません。
テキスト機能もありますが、パスの上に文字を配置することや、凝ったタイポグラフィーデザインはできません。
レイヤー機能もありますが、上に重ねるぐらいの単純なものです。
しかし、XDはとにかくファイルが軽いので作業がサクサクできます。アートボードからはみ出たオブジェクトの心配する必要は無く、勝手にトリミング表示されます。パーツさえ揃っていれば、あとはそれをコンポーネント登録してしまえば、繰り返し使えて編集も簡単なので、効率よく制作できます。
制作手順
凝ったベクターイラストや写真加工はXDでは出来ませんので、それぞれIllustratorやPhotoshopで制作します。
今回は、Illustratorで制作しました。バナーデザインのレイアウトを大体決め、パーツをCCライブラリーに登録します。
STEP1 パーツが多い場合は、フォルダーを作ってそこに登録した方が、分かりやすくて使いやすいです。ドラッグ&ドロップで簡単に登録できます。
STEP2 次にXDを起動します。XD内のライブラリーに、先ほどIllustratorで登録したアセットが入っているのが確認できます。
STEP3 初めに背景色を決めてから、アートボードにアセットをドラッグ&ドロップして、どんどん配置していきましょう。
STEP4 アセットを配置し終わったら、これを基本のデザインとして使いまわしていくので、コンポーネントとして登録します。
STEP5 メインコンポーネントして登録されたものは、選択するとこのようにダイヤのマークが塗りつぶして表示されます。
STEP6 このメインコンポーネントをアートボードごと複製して（Mac: option+ドラッグ、Win: alt+ドラッグ）、サイズ違いのバナーを作っていきます。メインコンポーネントを元に複製されたものをインスタンスと言います。
簡単に言うと、メインコンポーネントが親で、インスタンスは子供です。見分け方は、インスタンスは選択するとダイヤのマークが白抜きで表示されます。
STEP7 メインコンポーネントをそのまま複製しているので、バナーのサイズによって、パーツの大きさや配置の調整を行います。選択したいパーツをダブルクリックすると、選択できます。
メインコンポーネントを元に、サイズ違いのバナーをいくつか制作してみました。次にメインコンポーネントを編集して、一括編集を行います。
STEP8 では、背景色と靴下の色の変更をしてみます。初めにメインコンポーネントの背景をダブルクリックして、塗りつぶしを選択して、色の変更をします。
STEP9 次に靴下はCCライブラリーから引っ張ってきているので、Christmasのフォルダー内にある靴下を選択します。ダブルクリックすると、オリジナルファイルを編集できます。
STEP10 オリジナルファイルはIllustratorなので、自動的に靴下だけのファイルが起動されます。編集をして保存すると、CCライブラリーもアップデートされます。
XDに戻ってみると、全てのバナー内容がアップデートされているのが分かります。
まとめ
このように、CCライブラリーとXDのコンポーネントを組み合わせて使えば、効率よく簡単にサイズ違いのバナーを量産することができます。XDが苦手なことは、別のアプリで解決して使い分けすれば良いと思います。
今まで、Illustrator・Photoshop単体でバナー製作をしていた方も、これを機にXDも一緒にアプリ同士クロスオーバーして使って、バナー製作の作業効率を更に上げてみてはいかがでしょうか。
XDはまだまだ進化中のアプリなので、機能がどんどんアップデートされて更に便利になっていくのではないかな、と期待しています。
Adobe基礎コース＋Adobe CCコンプリートプランが、68,800円
新しいスキルを学びたいけど、ソフトが高くて挑戦することを躊躇していませんか？
実はその問題を解決する方法があります。
それは、Adobe公認スクールの
アドバンスクールオンライン
のAdobe CCコンプリート付き通信講座で解決することが出来ます。
アドバンスクールオンラインのAdobe基礎コースには、Adobe CCのソフトウェア11種類の講座（動画）が含まれていますので、新しく使ってみたいソフトの講座を受けてスキルアップも出来てお得です。
この68,800円は通常購入版と使えるソフトや内容は一切変わらないAdobe CC１年分とオンライン講座の受講料、消費税までも含んでの値段です。社会人でもこの値段で受講することが出来ます。
毎年利用できるので、ゆっくり自分のペースで学べるのも良いですね。
これ重要です！Adobe CCの自動更新は、必ず「しない」を選択してください。
もし、自動更新にしてしまうと1年後に公式の価格で更新されてしまいます。自動更新をしなければ、またアドバンスクール経由で同じ価格で購入することができます。
新しいスキルを学びたいけど踏み出せていない方、ぜひこの機会に検討してみてはいかがでしょうか。
コメント