webデザイン・コーディングに役立つ情報、WordPressカスタムに使えるHTML・CSSコピペ用コード、Canva無料テンプレートなどをご紹介します♩

chiweblogちいウェブログ

デザインのアクセントに♪【Photoshop】でネオン風のキラキラ文字

ネオン風効果のかけ方
この記事を書いている人
Marie

Marie

  • フリーランスwebデザイナー&講師
  • 2児ママ
  • 制作会社・インハウスデザイナーを経験し独立
  • オンラインwebデザイン教室ちいウェブ運営
  • 仕事の合間の息抜きに植物を育てています♡
  • スプラ・DIY・将棋がすき

こんにちは。webデザイナーのMarieです。
今回は、photoshopキラキラ光るネオン文字を作ってみます♡

ネオンみたいに光る文字ですが、レイヤースタイルの、光彩(外側)と光彩(内側)の2点を使って簡単に作成できます。

文字を書く

まず、いつも通り文字ツールで好きな文字を書いてみてください。

カラーは白(#fff)で好きなフォントで文字を書いてみてください。

そして、この文字レイヤーに、「レイヤースタイル」を適用していきます。

レイヤースタイルで光彩をかける

レイヤーパネルの、文字レイヤーの右端をダブルクリックしてください。

ダブルクリックすると、レイヤースタイルが出てきます。

光彩(外側)を設定

光彩(外側)参考画像
光彩(外側)参考画像

文字の外側を光らせる為に、光彩(外側)にチェックを入れ、描画モードを「スクリーン」にします。

カラーは好きなカラーを選択し、以下の項目は自由に調整してみてください。

  • 不透明度
  • スプレッド
  • サイズ

光彩(外側)参考画像のように、文字と、レイヤースタイルパネルの両方が確認できるように配置し、見ながら調整すると便利です。

光彩(内側)を設定

光彩(内側)参考画像
光彩(内側)参考画像

文字の内側にも光を入れていきます。

光彩(内側)にチェックを入れ、今度は「描画モード」は「乗算」を選んでみてください。

そして、色は、光彩(外側)で選択した色の、少し薄い色を選んでみてください。ざっくりでOKです。好きな色を指定して、どうなるかプレビューを見てみてください♪

以下の項目は自由に調整してください。

  • 不透明度
  • サイズ

どのスタイルを適用する時もそうですが、参考画像のように、スタイルをかける文字やシェイプを確認しながら調整していきましょう!

ぜひ試してみてくださいね♡

いいなと思ったら
TAPしてね♡↓

コメントする

CAPTCHA


コメントは承認後に表示されます。

Home Webデザイン デザイン Photoshop デザインのアクセントに♪【Photoshop】でネオン風のキラキラ文字

関連記事

更新通知を受け取る

不定期更新の為、更新お知らせを受け取りたい方は
ご登録ください^^

更新通知以外のメールは
お送りしませんのでご安心ください。