XDでそれっぽいパターンを作る方法(ドット背景)
XDでモックを作ってみるとき、背景がなくなんとなくイメージできない時がありました。 Illustratorの要領でXDでもパターンを作ることができるのでスクリーンショットでメモ。
①線なし2020の正方形を準備 ②線なし1010の正円を準備しセンターに ③グループ化(⌘G) ④リピートグリット(⌘R) ⑤リピートグリットで余白を0に
⑥リピートグリットを横幅いっぱいに伸ばす
⑦⌘Dで複製
⑧複製した物を横に10ずらし、右のリピートグリットを伸ばす
⑨2列を余白の状態でリピートグリット化
⑩完成
なお、パターンをそのままにするとXDが重くなるので、一旦書き出しして画像にしてから背景として使うのもあり。 近くで見たら余白が白く見えていますが、モックなので許してください(気になるようなら下の背景を同色にする)
パターンの色を変えたい時
パターンの色を変えることを想定する場合、先ほどの工程の前にブロックをコンポーネント化する必要があります。 パターンを作ってから画像化したら色は変えられないので注意。
①正方形をコンポーネント化 ②パターンを作る(⌘R→⌘D) ③最初にコンポーネント化した正方形を選択し、塗りの色を選択 ④変えたい色を選択して完成
リピートグリットとコンポーネントを活用することでXDの使い道は広がりそうです!