NOMA MEMO

なんとなく日々の気になったこと。

noma memo

XDでそれっぽいパターンを作る方法(ドット背景)

XDでモックを作ってみるとき、背景がなくなんとなくイメージできない時がありました。 Illustratorの要領でXDでもパターンを作ることができるのでスクリーンショットでメモ。

①線なし2020の正方形を準備 f:id:Haribooooom11:20200731082222p:plain ②線なし1010の正円を準備しセンターに f:id:Haribooooom11:20200731082225p:plain ③グループ化(⌘G) f:id:Haribooooom11:20200731082228p:plain ④リピートグリット(⌘R) f:id:Haribooooom11:20200731082231p:plain ⑤リピートグリットで余白を0に f:id:Haribooooom11:20200731082238p:plain

⑥リピートグリットを横幅いっぱいに伸ばす f:id:Haribooooom11:20200731082241p:plain

⑦⌘Dで複製 f:id:Haribooooom11:20200731082245p:plain

⑧複製した物を横に10ずらし、右のリピートグリットを伸ばす f:id:Haribooooom11:20200731082409p:plain

⑨2列を余白の状態でリピートグリット化 f:id:Haribooooom11:20200731082414p:plain

⑩完成 f:id:Haribooooom11:20200731082419p:plain

なお、パターンをそのままにするとXDが重くなるので、一旦書き出しして画像にしてから背景として使うのもあり。 近くで見たら余白が白く見えていますが、モックなので許してください(気になるようなら下の背景を同色にする)

パターンの色を変えたい時

パターンの色を変えることを想定する場合、先ほどの工程の前にブロックをコンポーネント化する必要があります。 パターンを作ってから画像化したら色は変えられないので注意。

①正方形をコンポーネントf:id:Haribooooom11:20200731083212p:plain ②パターンを作る(⌘R→⌘D) f:id:Haribooooom11:20200731083215p:plain ③最初にコンポーネント化した正方形を選択し、塗りの色を選択 f:id:Haribooooom11:20200731083220p:plain ④変えたい色を選択して完成 f:id:Haribooooom11:20200731083225p:plain

リピートグリットとコンポーネントを活用することでXDの使い道は広がりそうです!