Adobe Ai/Psで簡単にネオン文字制作

メインビジュアル画像・アイキャッチ画像にネオン文字を入れられたら、読者を視覚的に印象付けることが出来ます。

プロの現場とは違った変則技ですが、簡単に作ることができるので、ぜひ試してみてください!

画像はすでにリサイズしてあるアイキャッチ画像を教材としています。メインビジュアル画像も同じ方法なので迷うことは無いでしょう。
画像をタップリ使用して説明して行きます。ではスタート。

   手順 1. Photoshop CCを使ったネオン文字
      2. 西暦もネオンを変えて入れてみます。
      3. Illustrator CCを使った簡単ネオン文字
      4. 「アピアランス」を使わない、誰でも出来る簡単な方法
       終わりに

Photoshop CCを使ったネオン文字

STEP 1 レイヤースタイルを使います。

①すでにリサイズしてあるアイキャッチ画像をPhotoshop CCで呼び込みます。

教材_01.jpg

②見本のテキストは「Happy New Year!」です。フォントは好みのフォントを使って下さい。
 サイズを調整し「塗り」は白です。配置すると

text.png

文字.png

 レイヤーパレットに新しいレイヤーが増えていきます。

レイヤー_1.png

ネオン作成に「境界線」機能を使います。

STEP 2 「境界線」を使います。

③黄色い印をダブルクリックします。

Happy New Tesr_01.png

④テキストがピンクの縁取りになったと思います。

 次に光彩(外側)をクイック、すると

Happy New Tesr_02.png

 ネオン調になりましたね。見本の画像の数値は実際のものです。

 見辛いかな?。

 1. 境界線サイズ:2px、不透明度:100%、
 2. 描画モード:スクリーン、不透明度100%、ノイズ:0%、テクニック:さらにソフトに
  スプレッド:11%、サイズ:18px、範囲:50%、適用度:0%

西暦もネオンを変えて入れてみます。

STEP 3 西暦もネオン化 

⑤新たに「2024」の年号をテキストしますが、レイヤーパレットの「Happy New Year!」をレイヤーを複製でコピーしましょう。新規名称は「2024」を記入します。同じ位置にコピーされたら、レイヤー「Happy New Year!」を一時非表示にして「2024」を移動させます。

 コピーした「2024」はテキストツールでドラッグ「2024」に変えます。サイズも変更しましょう。

⑥②~④の作業を「2024」に適用させます。

2024_04-2.png

⑦新たにグラデーションオーバーレイとシャドウ(内側)を適用しますが、以下の画像を参考にして下さい。

2024_06-2.png

 グラデーションオーバーレイはちょっと難しいかな、下の画像を参考に試してみて下さい。 

2024_09.png

2024_08.png

光彩.png

さあ、出来上がりです。

 後はレイヤーを結合して「別名」で保存して終了です。
 保存形式は「PNG」テキスト主体なので容量は増えますが「PNG」形式が綺麗でしょう。

Happy New Year.jpg

思ったより簡単でしたか?。

次にはスウォッチや適用の数値を変えたりして、自分の感性と戦ってみましょう。

Adobe CC 体験版

Creative Cloud、Photoshop、InDesign、Illustrator、Acrobat Proをはじ…

1週間あるのでちょと練習してみましょう。使い倒したら削除して下さいね。購入を催促されるので鬱陶しいでしょう。

Illustratorも使ってみて、気に入ったら
Pasted Graphic 1.tiff
Adobe(アドビ)マスター講座
オンラインスクールでは、Adobe社の正規版ですと72,336円ですが、オンラインスクールですと39,980円。32,356円も安く手に入ります。39.980円でAdobe Creative Cloudが1年利用できます。さらに講座で学べるので、よりお得ですよね!

こちらから申し込みして頂けると嬉しい限りです。

Illustrator CCを使った簡単ネオン文字

Illustratorでネオン文字を制作する方法は通常「アピアランス」を使うのですが、Illustratorに慣れていても結構作業に知識と手間が掛かります。

そこで、初心者にも簡単に制作出来る方法を説明して行きます。

「アピアランス」を使わない、誰でも出来る簡単な方法

STEP 1 アウトライン化したテキストを塗りと線で装飾

①Illustrator新規→作成ドキュメント→A4縦ページ

②すでにリサイズしてあるアイキャッチ画像をIllustratorに呼び込みます。
 配置でもドラッグでもOK。

 ※保存後は(リンクなので階層は同じ階層にして置きましょう)

③呼び込んだ画像はオブジェクト→ロック して置きます。
④作業しやすいように、空いている下段にテキスト見本では「Happy New Year!」です。を打ち込みます。フォントは好みのフォントを使って下さい。

 サイズを調整し「塗り」はピンクです。後で変更します。

スクリーンショット 2023-12-09 12.41.35.png

⑤テキストを書式→アウトラインを作成で、アウトライン化します。

123のコピー.png
124のコピー.png

⑥テキストを選択  ツールでダブルクリック→垂直26mmか、option+shiftで下段にコピーします。同じ動作でもう一つコピーします。

⑦3つのテキストが並びます。
 一番上が最下位
 二番目が中間位
 三番目が最上位になります。

 三枚のテキストを使ってネオン化して行きます。

のアウトライン化してあるテキストから加工して行きます。アクティブにします。
 塗り〼 線色:水色 線幅3mm
 次に効果→ぼかし

効果_1.png
効果_2.png

Ai_06.png

スクリーンショット 2023-12-09 10.08.08.png

のアウトライン化してあるテキスト→アクティブにして、
 塗り■ 線色:白 線幅2mm
 ②の塗りを黒にしてあるのは見えなくなってしまう為です。なしでもOK

のアウトライン化してあるテキスト→アクティブにして、
 塗り 線色:水色 線幅0.5mm

STEP 2 文字を合体
⑪①②③のアイテムを合体させて行きます。
 ①②③のアイテムをアクティブにして、整列→オブジェクトの整列を選択します。

 Ai_07.png

スクリーンショット 2023-12-09 13.34.25.png

⑫合体されたらオブジェクト→グループ化します。

スクリーンショット 2023-12-09 13.37.41.png

⑬配置の位置を決めたらOKですね。

STEP 3 西暦も同じ作業

⑭「2024」テキストは同じ手順で制作します。
 塗りやぼかし(ガウス)の数値を変えて練習して下さい。

イラレ ネオン.png

STEP 4 Photoshop用に「書き出し」

⑮次に保存して行くわけですが、先ずファイル→書き出し→書き出し形式→書き出し「PNG」で書き出しします。これは最終的にPhotoshopで呼び込み確認・編集する為です。
 これがアイキャッチ画像になります。Photoshopでサイズは確認して下さい。

 保存形式は「PNG」テキスト主体なので容量は増えますが「PNG」形式が綺麗でしょう。

書き出し.png

保存.png

⑯書き出しが終わったら、Illustratorでの作業は終わりです。「名前をつけて」保存しましょう
 保存形式は「ai」です。これは次回の編集用に保管します。

「アピアランス」を使わないIllustratorでのネオン作成作業でしたが、簡単すぎましたか。文字装飾に使う方法でしたが、二、三度作業してみると短縮で出来るようになるでしょう。

「アピアランス」と比べても遜色ないと思うのですが。試行錯誤してもっと良い作品を作って下さい。

Illustratorで文字の装飾を簡単に作成する。

こちらです

Illustrator 文字の装飾 WordPressでアイキャッチ画像は最初に目にする表題ですので、メッセージを視覚的にアピールしたいものです。濃淡のある写真の上に重ねたテキストの可読性も考慮しながら文字を読みやすくしなければなりません[…]

Adobe 三種の神器、ブログで使うとオシャレに大活躍

こちらです

広告業界に無くてはならないソフトですね。類似のソフトは他にもあるのにと疑問に思う人も多いと思います。 今回はWordPress記事投稿で役立ちそうな、高品種な装飾画像の作り方を説明して行きます。全てAdobe CCに組み込まれ[…]

終わりに

WordPressなどブログやSNS、X(Twitter) などを始めてPhotoshopやIllustratorに興味を持った方も多いと思います。普段パソコンをいじっていても必要になるソフトではありませんものね。

Photoshop、Illustrator共に多機能ゆえにプロの現場で使うものと言う先入観が難しくしているのかも知れません。何でもそうですが人気のある道具は便利さが理由です。包丁一つにしてもなぜ料理人は高級な包丁を使うのか、それも大事な理由がありますね。

Adobe製品も多機能ゆえ「あれもこれも」と迷ってしまうと難しくなります。本当は簡単な操作なのですが。ツールも機能も必要な時に使えるよう、余暇を使って一つ一つ覚えて行きましょう。

Pasted Graphic 1.tiff
Adobe(アドビ)マスター講座
今日もありがとうございました。是非練習してみて下さい。

お役に立てたでしょうか。

最新情報をチェックしよう!