BLOG株式会社ラクーンホールディングスのエンジニア/デザイナーから技術情報をはじめ、世の中のためになることや社内のことなどを発信してます。by一緒にラクーンのサービスをつくりませんか?採用情報カジュアル面談2022.2.28デザイン完成後も編集できる!ネオンサインの作成方法【Illustrator】デザインHowtoIllustratorデザイン戦略部のスエノです。最近作成したネオンサインオブジェクトが編集できて便利だったので、作成方法をご紹介します。今回作成するネオンサインの特長です。Photoshopや他ツールを使用しない)テキストの色・フォント・線幅などを完成後も編集できるグラフィックスタイルに登録できるそれでは作成方法を見ていきましょう。黒背景の上に白地の素材を用意します。今回は「線のみ」「塗りのみ」どちらも使用した素材にしました。サイズは大体ヨコ400px×タテ400pxくらいのオブジェクトです。下記情報を適用します。描画モード:スクリーンカラー:光らせたい色(ここではスウォッチの「RGBマゼンタ」)不透明度:100%ぼかし:10px適用すると指定カラーでうっすら光ります。アピアランスパネルを表示します。先程適用した「光彩(外側)」レイヤーがあるので、それを選択したまま、パネル右下の「+」を押してコピーします。2枚になった「光彩(外側)」レイヤーの、上のレイヤーの情報を下記に変更します。元の不透明度100%光彩が下に来るよう配置します。するとこんな感じになります。明るくなってきました。線を追加ネオン管のリアリティが少しでも欲しいので、アピアランスに線を追加します。アピアランスパネルを表示し、パネル右上のメニューから「新規線を追加」。追加した線レイヤーは、既存の白線レイヤーの下に配置します。線幅は白線レイヤーの幅から大体倍にすると安定します。同じやりかたで白線レイヤーを新規追加し、アピアランス最上部に配置しましょう。※この線追加で既存の白線がつぶれる場合は、追加せずでOKです。線を追加した状態がこちら。若干外枠に滲みが出て、ネオン管の光り方になりました。グラフィックスタイルに登録・反映ここまで作成したデータをグラフィックスタイルに登録し、ワンクリックで呼び出せるようにします。対象を選択したまま、パネル右下の「+」を押せば新規登録できます。※「線のみ」と「塗りのみ」でデータが違うので、両方作成した場合は2種登録しましょう。(違いは白線レイヤーの有無のみです。)これでどこにでもワンクリックで反映できるネオンサインデータが出来ました。あとは「対象を選択⇒グラフィックスタイルをクリック」で未反映の部分にもグラフィックスタイルを適用し、すべてのオブジェクトが光るようにします。アピアランスパネルから文字や線+光彩の色を変えれば色変更もできるのでやってみましょう。光彩を調整このままだと光が強すぎるので、光彩数値を調整していきます。オブジェクトやフォントのサイズによって適切な光彩数値が変化するので、サイズに合わせて適宜調整が必要です。調整するのは光彩の「不透明度〇%」「ぼかし〇px」の数値です。比率を大体保ったまま変化させて、好みの光り方に調整しましょう。「塗りのみ」「線のみ」で光り方も変わるので、色々動かしてみてください。今回は下記の数値で調整しました。完成こちらで完成です。テキスト・線を保持しているので完成後も編集できます。以上、Illustratorで編集できるネオンサインの作り方でした。編集機能が失われるのでここまで。簡単な演出の場合は使用できるかと思いますので、ぜひ使ってみてください。