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