XDのリピートグリッドを利用した、簡単で早い背景パターンの作り方

Voiced by Amazon Polly

Adobe XDで、素早く背景パターンを作る方法です。大急ぎの時に、ぜひ試してみてください!

目次

ストライプの作り方

  1. 長方形を一つ作って、それにリピートグリッドを適用します。
  2. マージンを適宜調整します。

ここでのサンプルは縦ストライプですが、横でも同じ要領です。

斜めストライプの作り方

  1. 長方形を一つ作ってを斜めにし、リピートグリッドを適用します。
  2. マージンをマイナスに調整し、斜線の縦横をピッタリ合わせます。

※斜めストライプの場合は、コーディングの際のbackground-repeatするため画像を、ピッタリ合うように注意して書き出してくださいね。

ドット(水玉)パターンの作り方

水平垂直のドットパターン

  1. 正円を一つ作り、リピートグリッドを適用します。
  2. マージンを適宜調整します。

斜めのドットパターン

  1. 正円を一つ作り、その直径と縦横同じ距離だけ離れた正円をもう一つ作ります。
  2. それらをグループ化し、リピートグリッドを適用します。
  3. 縦横のマージンも正円の直径と同じ距離にします。

ギンガムチェックパターンの作り方

  1. 横:縦が1:2となる長方形を作ります。
  2. それをコピーして90度回転させます。
  3. 2つの長方形同士、左上をピッタリ合わせます。
  4. 2つの長方形の不透明度を調整し(ここでは50%)リピートグリッドを適用します。マージンは右も下も0にしてピッタリ合わせます。

ひとこと

リピートグリッドって本当に便利ですね!

よかったらシェアしてね!

この記事を書いた人

岡山市の友野印刷(株)で働くウェブデザイナーです。
毎朝NHKの朝ドラを見ています。

目次
閉じる