見出し画像

CSSブレンドモードとSVGで創作っ子に似合う髪色を探してみよう

先日、研修でsvgを初めて使った。アニメーション、画像自体の色を変えるなど様々な使い方がある。先輩や同期がすごいアニメーションを作っていたこともあり、とても興味を持った。簡単なアニメーションから勉強してみようかとも考えたが、svgのことを調べていると商品の色を動的に変えられる記事を見つけた。キャラクターの創作にも使えるかもしれないと思い、そちらに先に手をつけてみることにした。

イラストを描いている人へ

創作活動、特に一次創作をしている人は誰しも思ったことがあるだろう。
「キャラクターの色合いが決まらない……」
「何色の服が似合うかわからない……」
そんな時、あなたならどうするだろうか。
おそらくクリップスタジオを使っている人は、

何となく色を塗ってみる→透明ピクセルをロック→別の色を選ぶ→(該当レイヤーで)線画の色を描画色に変更

これを納得がいくまで繰り返しているのではないだろうか(もっと簡単な方法あったら教えてください)。筆者はこの方法でよく色を変えているが、正直に言ってめんどくさい。
そのため、何秒かごとにランダムで色を変えてくれるツールがあれば、しっくりくるものが見つかるかもしれない?と思ったのが経緯だ。

準備について

HTML、CSS、JSが使えれば何でもいいのだが、研修で使っているNext.jsを選んだ。今回はsvgの色を変えるのでsvg-loaderをインストールしておく。
また、画像も用意しておく必要がある。色を変えたい部分は白にしておこう。

今回使った画像はこれ↓

スクリーンショット 2020-04-12 15.19.42

色を変えたい部分のsvgファイルを作成する

一番苦労した部分がここだ。illustratorはsvgファイルの書き出しができるようだが、クリスタでは対応していない。そのため、一度jpgかpngで保存し変換する必要がある。また普通に塗り潰してしまうとアウトラインがガタガタになり、svgのpathが長くなってしまうため、ベクターレイヤーで作成するのがおすすめだ。(ベクターレイヤーで囲った部分を塗り潰すツールがあるので便利。制御点を追加、移動して変形させよう。)
今回は髪の色を変えたかったので、髪の部分を塗り潰した。画像2

また、AnyConvでファイルをsvgへ変換した。
ここまできたらあとは髪の色を変えていくだけである。

CSSブレンドモードを使って元の画像と髪をあわせる

Nextとsvg-loarderを使っているので、svgファイルをimportし、return文の中に元の画像と髪の画像を入れておく。
HTML自体はこんな感じ↓

<img src="元の画像url" alt="" />
<Svg /> //髪のsvgファイル

CSSで画像と髪が重なるように制御する。

//髪のsvgのCSS
position: absolute;
left: 0;
mix-blend-mode: multiply;

mix-blend-mode: multiplyを使用することで色を線画の下に貼り付けられる。

スクリーンショット 2020-04-12 14.29.04

あとはJSで色を変え、カラーコードをSvgタグに持たせたあと、CSSのfillに適用させれば完成だ。今回は2.4秒ごとにランダムで色を変えるようにした。

const [color, setColor] = useState('');
setTimeout(() => {
   changeColor();
 }, 2400);
 const changeColor = () => {
   let rgbColor =
     'rgb(' +
     Math.floor(Math.random() * 256) +
     ',' +
     Math.floor(Math.random() * 256) +
     ',' +
     Math.floor(Math.random() * 256) +
     ')';
   setColor(rgbColor);
 };

完成​

(読み込みが若干遅いかも)

まとめ

率直に感想を言うと、色を変えるだけならイラストソフトを使ったほうが早い。色を変えたい部分のsvg作りがめんどくさすぎる。が、色変えに使えなくても他に使い道があるかもしれないと思い、備忘録として記事にまとめた。今回作ったものが何かの役に立ちますように。

ちなみに髪色については、自分は黒髪、友人は金髪が好みでした。それでは皆さま、良い創作ライフを!

追記
色が変わるだけじゃ何か味気ないと思い、CSSアニメーションでまばたきするようにしてみました。
記事はこちら

参考記事

https://goworkship.com/magazine/colors_css_svg/

この記事が気に入ったらサポートをしてみませんか?