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

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

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

Creating repeatable backgrounds and textures is super simple using @AdobeXD. pic.twitter.com/L70Fqa4tFl

— Howard Pinsky (@Pinsky) August 20, 2018

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

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

Another quick repeatable texture using #AdobeXD, this time with negative padding. pic.twitter.com/LJEjbT9paM

— Howard Pinsky (@Pinsky) August 21, 2018

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

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

Based on @MarcEdwards‘ vector speed runs, quickly create a heart icon in @AdobeXD using the pen tool and a border. pic.twitter.com/IaaaBobyo1

— Howard Pinsky (@Pinsky) September 14, 2018

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

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

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

次回をお楽しみに！