前回はパスをカット機能を利用して、必要な位置で線画を簡単に切断する方法をご紹介しました。
今回は線画のネオンライト風アレンジを作る方法を解説します。
目次
- 1 Inkscapeで作るネオンライト風アレンジの基本手順
- 2 Inkscapeでネオンライト風イラストを作成する方法
- 3 ぼかしを設定したイラストをエクスポートする場合の注意
- 4 なぜ「複製＋ぼかし」を使うのか
- 5 Inkscapeにおけるアレンジの基本
- 6 まとめ
- 7 使用した素材のご紹介
- 8 動画のスクリーンショットギャラリー
ネオンライト風イラストってレトロポップで可愛い印象がありますよね。
自分で作ってみたいけど難しそうだなと思ったことはありませんか？
Inkscapeを使えば、イラストや文字も手軽にネオンサイン風に加工できます。
方法はとても簡単で、大まかに説明すると以下の手順で作れます。
Inkscapeで作るネオンライト風アレンジの基本手順
準備
- 蛍光色のカラーパレットを準備する。
- イラストの線画を用意する。
手順
- 線画を蛍光色で色分けする。
- 線画を複製して複製線画1と2を作成する。
- 複製線画2のストロークの色を白に変更して線の幅を細くする。
- 複製線画1に「ぼかし」を設定する。
仕上げと補足
- 色が見えるように重なり順とストロークの幅を調整する。
- 背景が必要な場合は暗い色の四角形を作成し最背面に配置する。
ネオンっぽく見せるポイント
- 中心が強く光って白飛びしているような細線
- 蛍光色のぼかし
- 蛍光色の中細線
- 暗い色の背景
この組み合わせを作ることでネオンライトのような見た目になります。
光の輝きの強さや、光の明るさ・光の広がり方を変更したい場合は以下の設定を変更することでお好みに調整できます。
- 線の色
- ストロークの幅
- ぼかしの数値
- オブジェクトの不透明度
- オブジェクトの重なり順
Inkscapeでネオンライト風イラストを作成する方法
ネオンライト風イラストの作り方が知りたい方はこの先も読んでみてください。
この工程は動画でも解説しておりますので、お時間がありましたらご覧ください。
準備1：カラーパレットを準備する
今回はHTMLカラーコード: WEB色見本 原色大辞典さんのビビットカラーの配色を利用します。
原色大辞典さんのFAQページからACOパレット（Photoshop向けのカラーパレット）がzipファイルでまとめてダウンロードできます。
ACOパレットからGIMPやInkscapeやKritaで使えるGPLパレットに変換する方法は以前の記事でご紹介しています。
いずれかの方法でGPLパレットを作成してInkscapeに読み込ませてください。
こちらのサイトからもネオンカラーのパレットをダウンロードして利用できます。
画面下までスクロールすると［スォッチファイルのダウンロード］＞［無料スウォッチのダウンロード］ボタンがあるのでそこからzipファイルを入手できます。
解凍すると各パレットのASEファイルが展開されます。
ASEファイルはInkscapeのユーザーパレットフォルダに配置するだけでそのまま利用できます。
4色の配色が一つのパレットになっているので、使用したいASEファイルをコピーして以下のフォルダ内に貼り付けます。
%APPDATA%\inkscape\palettes上記のパスをコピーして、ファイルエクスプローラーのアドレス欄に貼り付けてEnterキーを押すとフォルダを開けます。
詳しい説明は以下の記事でもご紹介しています。
準備2：線画を用意する
今回の例では「Inkscapeで手描きのイラストを仕上げよう」シリーズで解説しているこのイラストの線画を引き続き使用します。
線画部分だけを取り出す
線画部分を選択する
今回の例では、あらかじめ線画の部分には「線画」という単語を含めたラベルを付けて管理していたので、Inkscapeの［検索/置換］機能で「線画」という言葉でプロパティを対象に検索するだけで一気に選択できます。
この方法は以下の記事でも解説しています。
オブジェクトをラベル分けしていない場合は1つ1つキャンバス上でShift＋クリック（選択範囲に追加）で選択したり、［レイヤーとオブジェクト］ダイアログから探してCtrl＋クリックで複数選択したりと、選択するだけで時間がかかって大変なのでラベルは作業中の適切なタイミングで、自分がわかりやすい名前に変更しておくことをおすすめします。
線画をコピーして別のファイルに貼り付けする
線画の部分のみ選択できたら、［編集＞コピー］してクリップボード（一時的な保存領域）にコピーします。
コピーのショートカットキーのCtrl＋Cを使用すると、直前に［検索/置換］機能を使っていた場合、検索欄にカーソルが当たった状態でそちらの文字をコピーしてしまうのでご注意ください。
［ファイル＞新規］から新しいファイルを作成します。この新しいファイルにネオンライト風のアレンジイラストを作っていきます。
コピーした内容を［編集＞貼り付け＞同じ場所に］（Ctrl＋Alt＋V）で新しいファイルに貼り付けます。
線画の不要部分を削除する
塗り部分のパーツで隠れて見えない背面部分のパーツも作っていたため、線画だけを取り出すと不要な線が含まれています。
このような場合でも［パスをカット］という機能を使って簡単に必要な部分の線画を残す方法をこちらの記事でご紹介しています。
［パスをカット］機能を利用して、線画として見せたい線だけが残るようにカットと削除を繰り返します。
手順1：線画を色分けする
同じ色・線の幅にしたい部分をすべて選択して、複合パスにまとめます。
パスをグループ化して管理していた場合はグループを解除する前に、グループ自体を選択して［パス＞結合］すると、パスが散らばらず範囲がわかりやすいです。複合パスにまとめたら、グループ解除します。
複合パスとは？
複合パスというのは［パス＞結合］で複数のパスを一つにまとめたものです。
フィル（塗り）ありのパスを［結合］で複合パスにまとめる場合は、以下の点について注意が必要です。
フィルありのパスを結合時の注意点
- すべてのオブジェクトが同じ色・スタイルに統一される
- オブジェクト同士が重なった部分に穴が開く（設定で変更可能）
今回は塗りなしで線のみ・ストロークのスタイル（幅や線種）も共通の線画なので複合パスが適しています。
複合パスについてはこちらの説明がわかりやすいです。
線の色はビビッドカラー系の明るくて鮮やかな色なら、暗い背景色と合わせるとネオンライトのように見えます。
カラーパレットから好みの色をShift＋クリックして、ストロークの色に設定します。
ストロークの角や端を丸める
ネオンライトのような見た目にするために、線のスタイルを以下のように変更します。
ストロークのスタイル
- 角：丸結合
- 端：丸
角を丸結合に変更することによって線の折れ曲がった部分が丸くなります。
端を丸に変更することによって線の端（オープンパスの始点と終点）の部分が丸くなります。
手順2：グループ化して2回複製する
色分け・線種が同じパスを複合パスにまとめたら、パスをすべて選択して［グループ化］します。
このグループ化したパスにアレンジを加えるために2回複製します。
複製は同じ位置にぴったり重なって最前面に作成されるので、2回複製した時点で以下のような重なり順になっています。
- 複製線画2
- 複製線画1
- 線画
手順3：最前面のグループの線の色を白にする
複製線画2を選択ツールで選択して［フィル/ストローク］ダイアログから［ストロークの塗り］の色を白に変更します。
［ストロークのスタイル］タブに切り替えて線の［幅］を元の幅の3分の1くらいの太さに変更します。幅の数値はお好みで調整してください。
線の色を白に変更し、元の線より細くすることで、強く発光して白飛びしているような（ハイライトが入っているような）見た目になります。
手順4：前面から二番目のグループにぼかしを設定する
複製線画1を選択ツールで選択して［フィル/ストローク］ダイアログ下部の［ぼかし］のスライダーか入力欄で数値を変更します。
- ぼかし：20%
線の色をぼかすことで、光の広がりを表現します。
数値が低すぎても高すぎても発光している感じが出ないので、大体10%から20%の間で調整するといいです。
仕上げ：色が見えるように重なり順とストロークの幅を調整する
現在は以下のような重なり順になっていますが、お好みで重なり順を変えてみてください。
- 複製線画2（白い線でハイライト）
- 複製線画1（ぼかしで光の広がり）
- 線画（蛍光色のネオン管）
白い線（ハイライト）とぼかし（光の広がり）の重なり順は逆にすると発光感が弱くなります。
不透明度を変更すると光の強さや明るさを調整できます。
補足：背景が必要な場合は暗い色の四角形を作成し最背面に配置する
背景色が白だと色の相性や発光感の確認がしにくいので［矩形ツール］で四角形を描いて最背面に配置します。
黒（#000000）よりも紺色にすると光の色が映えるのでおすすめです。
Web用の画像素材作成時など、背景色とイラスト本体を別々に分けておきたい場合でも、あらかじめ想定した背景色と合わせて色を確認・調整しておくと綺麗に仕上がります。
ぼかしを設定したイラストをエクスポートする場合の注意
［ぼかし］を設定すると範囲が元のイラストよりも大きくなっています。
エクスポートしたいイラストをすべて選択した状態で、［編集＞ページサイズを選択オブジェクトに合わせる］を実行すると、［ぼかし］の範囲を含んだ状態でページサイズが変更されます。
余白が必要な場合は、［編集＞ドキュメントのプロパティ］から［幅］と［高さ］に余白分を元の数値にプラスして入力します。
ページサイズの変更後は基準（左上）に寄った状態になっているので、イラスト全体を選択して、［オブジェクト＞整列と配置］から［整列］を開いて［ページ］を基準に上下左右にセンタリングをかけると、ページの中央に配置できます。
なぜ「複製＋ぼかし」を使うのか
今回のネオンライト風アレンジには、線画を複製してストロークの太さやぼかし加減を変えながら重ねる方法を使っています。
この方法のメリットは、編集しながら見た目を調整しやすいことです。
線ごとに太さや色を直接変更できるため、「もう少し光を強くしたい」、「色を差し替えたい」といった調整が直感的に行えます。
パスが多いと選択や調整が大変に感じるかも知れませんが、スウォッチや「同じストローク色を選択」機能を使えば、同じ色の線を一括で変更できるのも便利なポイントです。
Inkscapeにおけるアレンジの基本
なぜオブジェクトを複製するのか？
InkscapeにはAdobe IllustratorやAffinity Designerのように一つのオブジェクトに複数の線や塗りを設定する機能が現状では実装されていません。
そのため、一つのオブジェクトに対してアレンジを加えたい場合は「複製」または「クローン」を作成し、「重なり順」や「パスエフェクト」などで見た目を調整する必要があります。
テキストのアレンジをする時はクローンを使うと便利な場合があります。
今回のネオンライト風アレンジ例では線の幅を個別に調整する必要があり、「クローン」だと実現できないので「複製」を使用しています。
InkscapeはSVG標準に準拠するという設計思想
SVG標準仕様では一つのパスは以下のようなプロパティを持ちます。
fill="#FFFFFF"
stroke="#000000"
これは一つのパスに対して
- フィル：1色
- ストローク：1色
それぞれのプロパティにつき一つの値しか持てないという仕様なのです。
IllustratorやAffinityの複数ストロークは、アプリケーション内部の拡張仕様であるため、SVGとしてエクスポート時には内部的に変換して書き出されます。
まとめ
Inkscapeで線画をネオンライト風に加工する方法
Inkscapeで線画をネオンライト風に加工する時のポイント
- ベースの色は蛍光色を選ぶ
- 中心に白いハイライトを入れる
- 光の広がりをぼかしで表現する
- 背景色は黒より紺がおすすめ
方法さえ分かればとても簡単にネオンライト風アレンジイラストが作れます。
昭和レトロ回帰ブームでネオンライト風のイラストやロゴを見る機会も増えましたね。
ニューレトロやシティポップ系のイラストとも相性が良いので、ぜひ取り入れて表現の幅を広げてみてください。
次回はInkscapeでイラストのカラーバリエーションを作る方法について解説します。
使用した素材のご紹介
動画のサムネイル兼記事のアイキャッチ画像の背景にこちらをアレンジして使用しました。
まとめ画像の背景ですがこちらを使用しました。
動画のスクリーンショットギャラリー
コメント