デザインブログ、SOKOLABOのソコラボのソコです！
今日は丸いドットパターンの作り方についてお伝えします！
以前四角いパターンの作り方の記事でも書きましたが、こちらもWEB制作でもグラフィック制作でも汎用性があり重宝できるテクニックなのでぜひ使ってみてください。
丸いドットパターンの素を作る
ではいってみましょう！！
まずは新規ファイル作成。
ここでは「幅400×400px」で作ります。
次に塗りを黒（#000000）にしてから楕円ツール(M)で四角を作ります。
サイズは200×200PX。
次に丸をキャンバスの中央に配置。
移動ツール（V）にしてからctrl+Aでキャンバスを全選択、そして上部の整列ツールを使うと簡単に中央配置ができます。
そしてctrl+Jで丸レイヤーを複製後、丸のオブジェクトを上隅から100px（半径分）はみだして配置します。
オブジェクトの移動はプロパティパネルに数値を入力すると簡単に移動させて配置する事ができます。
数値をしっかり入力する事が綺麗に作るコツだよん
同様に他の角にも丸を半径分はみださせて配置します。
さらに一番下にあるベタ塗の背景レイヤーのロックを解除して削除します。
これでパターンの素は完成です😊
ドットパターンを登録（定義）する
さて、次は作ったパターンを使いまわせるようにします！
上部メニュー「編集」からパターンを定義を選択。
名前をつけます。わかりやすい名前を付けましょう。
上部メニュー「ウィンドウ」から「パターン」を呼び出します。
ウィンドウ内に先ほど作ったパターンが定義（登録）されていればOK。
これで使いまわせるようになりました。
パターンオーバーレイで使う
定義したパターンを使ってみましょう！
使い方は色々ありますが、ここではレイヤースタイルのパターンオーバーレイで適用させてみますね。
新規で白紙のファイルを作成、背景レイヤーをダブルクリックしてレイヤーに変換します。
そしてレイヤーをまたダブルクリック、レイヤースタイルが表示されるので、「パターンオーバーレイ」を選択します。すると白紙のレイヤーに先ほど定義したパターンで模様がつきます。
比率を変えると模様の大きさを変えたりできます。
他にも
写真にブロックの色や不透明度を変えたパターンオーバーレイを適用する事で雰囲気をつけたり応用もいい感じに出来ます！
いかがでしたでしょうか。
ブロックパターンはシンプルながら使い方次第で色々な表現が可能なのでとても便利ですよね😊
自分なりの表現方法を見つける事でグラフィック制作のレベルは格段に上がると思います！
サイト制作の際、CSS上でも再現しやすいのも強みです。
ぜひ色々試してみてくださいね！
それでは★
