Adobe XDをもっと使いこなすヒント! 第11回 XDでつくるグラフィックパターン

Creative Cloud UI/UX & Web

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、XDでグラフィカルな表現をつくる方法に関連する3つのツイートを取り上げます。

Tip 1. リピートグリッドを使ったテクスチャ

リピートグリッドを使うと、図形の繰り返しパターンを簡単に作成できます。また、後からの調整が容易なため、いろいろと試しながら、プロトタイプ感覚でテクスチャをつくることができます。

上のビデオでは、濃いピンクと薄いピンクの2色の円を並べ、それをリピートグリッドに変換してから背景に広げて、最後に要素間の間隔を調整して仕上げています。

Tip 2. リピートグリッドでグラフィック要素を敷き詰める

リピートグリッドを使ったテクスチャの例をもうひとつ紹介します。

今度のパターンは、隙間無く立方体を敷き詰めたパターンです。上のビデオでは、最初の2つは普通に並べて配置していますが、それをリピートグリッドに変換して展開した後、グリッド間のパディングをマイナスにすることで隙間を埋め、背景をすべて立方体で埋め尽くしています。

Tip 3. パスを使ったハート型のアイコン

最後に、パスを使った簡単なアイコンの例をひとつご紹介します。XDの線の表現が増えたことで、パスの使い道も少しだけ広がりました。

上のビデオでは、ペンツールでV字型に線を引き、パスの両端を丸くした後、その線を太くすることでハートの基本形を形づくり、最後に直線を曲線に変えることで、ハート型のアイコンを仕上げる手順を紹介しています。ちょっと長めですがご覧ください。


いかがでしたか?
これは便利そうだ!という使い方はあったでしょうか?

次回をお楽しみに!

POSTED ON 2018.09.27

Products Featured

  • Adobe XD

Tags

タグはありません