SIerエンジョイ勢の雑記

日々の業務で学んだプログラミング知識や、Androidアプリ開発について書く予定です

Adobe XDで和柄を制作する方法

目次

Adobe XDで和柄を制作してみました

Adobe XDは無料で使える「デザイン」「ワイヤーフレーム」ツールですが、 デザイン面でいうとやはり有料のAdobe illustratorのほうが主流で高性能です。

私はデザインが本職ではないので、無料でできるAdobe XDInkscapeを活用しています。
今回Adobe XDで作成した和柄は以下の通りです。(色は鬼滅の刃を一部参考にしました。)

市松模様(緑と黒)麻の葉(ピンク地に黒)矢絣(白黒)七宝(白黒)
和柄(左から 市松模様、麻の葉、矢絣、七宝)

作り方

麻の葉の作り方を紹介します。

 ■手順
  ①プラグインの"Polygons"で"Hexagon"(六角形)を生成
  ②角度を30°傾け、塗り:透明、線:黒に設定
  ③各頂点から線を引き、連続パターンの元を作成
  ④リピートグリッドを使用して、全面に広げる

手順① 六角形を生成

f:id:apsejoy:20201101193145p:plain
六角形の生成
プラグインの"Polygons"で"Hexagon"(六角形)を生成します。 プラグインも無料なので、追加していない人は「プラグインを見つける」から探してみて下さい。

手順② 角度、色、大きさの調整

f:id:apsejoy:20201101193431p:plain
六角形の角度、色の調整
頂点が上にある状態にしたいので、30°傾かせます。
塗りは透明、線は黒色を指定します。

手順③ 連続パターン元の作成

f:id:apsejoy:20201101193610p:plainf:id:apsejoy:20201101193612p:plainf:id:apsejoy:20201101193616p:plainf:id:apsejoy:20201101193623p:plainf:id:apsejoy:20201101193632p:plain
連続パターン元の生成
生成した六角形に対して、対角線を引きます。
ずれやすいので拡大しながら線の位置を調整します。
赤い線は後程削除する補助線なので、実際に作成する際は色を付ける必要はありません。

図形を「ctrl+A」「ctrl+G」を実行してグループ化しておきます。

手順④ リピートグリッドで広げる

f:id:apsejoy:20201101193816p:plain
図形の配置
③で作成した図形を上記画像のようにコピー+配置します。
配置後に図形を選択し、「リピートグリッド」を実行します。

f:id:apsejoy:20201101193815p:plainf:id:apsejoy:20201101193817p:plain
横方向に図形を連続させる

横向きに連続パターンを拡張し、余白のピンク部分を選択しちょうど図形が重なるように調整します。

f:id:apsejoy:20201101193821p:plain
縦方向に図形を連続させる
縦方向も同様に連続パターンを拡張し、余白のピンク部分を図形が重なるように調整します。

f:id:apsejoy:20201101193829p:plainf:id:apsejoy:20201101193835p:plain
完成形
連続パターンを作り終わった後が上記の通りです。
色を付ける場合は「ctrl+A」を実行後に塗りで色を選択してみてください。

以上で麻の葉の作り方説明を終了します。
他の和柄も同じような手順で作れるので、興味のある人はやってみてください。