こんにちは、コンスキです。
今回はイラスト以外の方法で、物足りない部分に工夫をしてみようと思います。
後ろから模様をのぞかせる
この部分↓です。シンプルで物足りないので、ちょっとした工夫を試してみます。
![](https://konsuki.com/wp-content/uploads/2021/07/image-133-1024x652.png)
その工夫は、模様を後ろからのぞかせるというものです。
今回はその模様を作る作業を「Inkscape」という無料のベクター画像編集ソフトでやります。
円ツールで円を描きます。
![](https://konsuki.com/wp-content/uploads/2021/07/image-134.png)
フィルの設定からパターンを選びます。
![](https://konsuki.com/wp-content/uploads/2021/07/image-136-1024x601.png)
模様はたくさんの種類から選べますが、今回は「ストライプ1:1」というやつにします。
![](https://konsuki.com/wp-content/uploads/2021/07/image-137.png)
ストライプの幅をもうちょっと狭くしたいので、円ツールのまま円をクリックします。
すると、キャンバスの右上あたりに3つのマークが出てきます。
![](https://konsuki.com/wp-content/uploads/2021/07/image-138-1024x647.png)
その中から四角いマークをドラッグすると模様の大きさを変えることができます。
ストライプの場合はストライプの幅が変わります。
![](https://konsuki.com/wp-content/uploads/2021/07/image-140.png)
回転させて斜めの線にします。
先ほどは四角いマークでしたが、今度は丸いマークをドラッグします。
![](https://konsuki.com/wp-content/uploads/2021/07/image-144-1024x705.png)
回転させた後にストライプの幅もちょっと調節しました。
![](https://konsuki.com/wp-content/uploads/2021/07/image-145-1024x599.png)
ストローク(枠線)をなくします。
![](https://konsuki.com/wp-content/uploads/2021/07/image-146-1024x601.png)
色を変えます。
まず色が黒色のまま「ファイル > 名前をつけて保存」からSVGファイルとして保存します。
次にそのファイルをコードエディターで開きます(下にあるのはVSCodeで開いた画面です)
![](https://konsuki.com/wp-content/uploads/2021/07/image-147.png)
コードの中から、「<pattern></pattern>」という感じで書かれているパターン要素を探します。
![](https://konsuki.com/wp-content/uploads/2021/07/image-148.png)
その中にある「fill: 〜〜」と書かれている部分探して、「fill: 塗り替えたい色の色コード」のようにして書き換えます。
![](https://konsuki.com/wp-content/uploads/2021/07/image-150.png)
コードを保存して、Inkspaceで開き直すと次のように色が変わっています。
![](https://konsuki.com/wp-content/uploads/2021/07/image-152-1024x602.png)
![](https://konsuki.com/wp-content/uploads/2021/07/image-151-1024x425.png)
あとは「ファイル > PNG画像にエクスポート」を選択すれば模様は完成です。
完成形
作った模様を配置してみました。
![](https://konsuki.com/wp-content/uploads/2021/07/image-153.png)
コメント