はじめまして！2024年に新卒で入社いたしました、UIデザイナーのNと申します。
ベース素材を作ろう！
まずIllustratorでカラーモードをRGBの新規ドキュメントを作成し、直線を一本描画します。（直線であれば角度は問いません）
その後、オブジェクト → 変形 → 個別に変形を選択します。表示されたパレットで、下添付画像のように「移動」と「角度」の数値を設定します。（適当な数値でOKです）
「ランダム」にもチェックを入れておきます。
コピーを選択し、続けて Ctrl（⌘）＋ Dを繰り返し押して線を増やしていきます。（下添付画像のようになればOKです）
線がたくさんになりましたね！
次に、下添付画像のように正方形を作成し、パターンにしたい箇所を切り取ります。
正方形の位置を決めたら線と正方形をすべて選択し、パスファインダー → 分割を選択します。分割をすることにより線で区切られ、独立したオブジェクトとして分割されます。
そして、正方形からはみ出ている不要なオブジェクトを消去していきます。
正方形からはみ出ている不要なオブジェクトを全て削除したら、ベースの素材の用意は完璧です！
着色しよう！
次に作成したベース素材に着色していきます。
オブジェクトがグループ化されている場合は、オブジェクト → グループ解除で解除します。
線に色が設定されている場合は、色を消して塗りだけの状態にしてください。
レイヤーの最前面と最背面のオブジェクトにそれぞれ好きな色を着色します。それ以外のオブジェクトは、最前面か最背面に配色した色と同じ色にしておきましょう。（色はあとから編集可能です）
その後、すべてのオブジェクトを選択し、編集 → カラーを編集 → 前後をブレンドを選択します。するとカラーが再配色されます、私は下添付画像のようになりました。
このままでは色の配置に偏りがあるため、修正していきます。選択ツールでオブジェクトをすべて選択した状態で下添付画像のアイコンをクリックし、「オブジェクトの再配色」の詳細パネルを開きます。
丸いカラーパレットの右上にある「カラー配置をランダムに変更」のアイコンを何度かクリックし、好みの配色になるまで調整します。
さらに色を細かく調節したい場合は、丸いカラーパレットで好きな色に変更できます。
バーの先端の丸い箇所をドラッグして移動させると色が変化します。
私はこのように色を調節しました。
綺麗ですっ！
パターンを設定しよう！
最後にPhotoshopに移動し、素材をパターンとして登録します。
配色が完了したらすべてを選択し、Ctrl（⌘）＋ Cでコピーしておきます。
Photoshopで新規データを作成します、今回は600pxの正方形のデータにしました。
先ほどIllustratorでコピーした素材をペーストします。
この際、ペースト形式はレイヤーまたはスマートオブジェクトでペーストしておくと、後から色の変更等が簡単にできるためおすすめです。
余白がないようにオブジェクトを配置したら、編集 → パターンを定義 でパターンを作成します。
終わりに
- 宝石を描きたいとき
- 単色だけではのっぺりと見えて物足りないとき
- デザインを少しリッチに見せたいとき
キラキラで可愛いです～！
