誰も見ていない時間

ゲーム、読書、マンガ、ライフハックなどの雑記

LED風のロゴデザインの作例。パターンの作り方がポイント

 LED風のロゴデザインの作例を紹介します。パターン用の画像を作成して、それに色やレイヤースタイルを設定していくタイプの作り方になります。

f:id:kitahana_tarosuke:20171007124832j:plain

ロゴデザインの作例も今回で6回目になります。前回はネオン風の作例を紹介しました。

www.daremomiteinai.com

このネオン風のロゴは、光り方などを変更して第二弾をアップする予定です。これはこれで綺麗だと思うのですが、現実のネオンとはちょっと異なってしまっているので。

 

レイヤースタイル用のパターンの作成

最初にレイヤースタイル用のパターンを作成します。

f:id:kitahana_tarosuke:20171007143539p:plain

 

実際のサイズはこれくらいなのですが、分かりにくいと思いますので、拡大した画面で説明します。

f:id:kitahana_tarosuke:20171007143646p:plain

拡大するとこんな感じです。

 

f:id:kitahana_tarosuke:20171007143954p:plain

レイヤースタイルのベベルとエンボスを適用します。

設定はテキトーで構いません。最終的にはLEDのドットとして使用するので、それっぽく見えればOKです。

 

f:id:kitahana_tarosuke:20171007144223p:plain

レイヤースタイルのグラデーションを適用します。

 

グラデーションの設定画像を載せておきます。スタイルを円形に設定し、グラデーションを白から黒ではなくグレーから黒に設定しています。

f:id:kitahana_tarosuke:20171007144400p:plain

 

あとは編集→パターンを定義でレイヤースタイルのパターンとして使えるように設定しておきます。

 

LEDの文字部分の作成

LEDの文字部分を作成していきます。

フォントは今回はImpactを使用しました。そのままだと文字が縦長過ぎるのでヘイタイをかけます。

 

f:id:kitahana_tarosuke:20171007145000j:plain

「ヘイタイ」とは文字を水平比率を伸ばして横長にすることです。印刷業界で使われる言葉ですね。私が紙の業界に居るときに「ヘイタイ」や「チョウタイ」といった言葉をよく使いました。

ちなみにゲーム業界では聞いたことがありません。元々は写植に関する用語じゃないかなー。

 

f:id:kitahana_tarosuke:20171007145347j:plain

文字をレイヤーマスク用に白黒に変換します。単純に文字を白、背景を黒にして塗りつぶし、新しいレイヤーのマスクとして割り当てれば大丈夫です。

 

f:id:kitahana_tarosuke:20171007145715j:plain

レイヤーマスクを設定したレイヤーにパターンを適用します。レイヤーは塗りつぶしておく必要がありますが、色は表示しないのでどんな色でも構いません。

 

f:id:kitahana_tarosuke:20171007150237p:plain

レイヤースタイルのパターンオーバーレイの設定画面です。

最初に作成したパターンを割り当てているのですが、少し大きかったので、比率75%に設定しています。

「レイヤーにリンク」はデフォルトではチェックがついていますが、チェックは外しておきます。

 

f:id:kitahana_tarosuke:20171007150835j:plain

文字を拡大した画像です。少し不自然な感じがするのがわかりますでしょうか。

LED用に作成したドットが切れているからですね。これを調整していきます。

 

f:id:kitahana_tarosuke:20171007151109j:plain

調整後の画像がこちらです。

やり方はそれほど難しくはなく、レイヤーマスクの文字の部分(白い部分)の幅を広くしたり狭くしたりしてドットに合わせるだけです。文字レイヤーをそのまま使用せず、レイヤーマスクにしたのはここで調整するためです。

 

f:id:kitahana_tarosuke:20171007152050j:plain

ロゴ部分をトーンカーブを利用して黄色に変換します。トーンカーブでの色のつけ方は、Photoshopで画像をイラスト風にする記事と同じ方法で設定しました。

www.daremomiteinai.com

 

ちょっと色をつけすぎたかなー。

ま、気にしないことにします^^;

 

背景用LEDの作成とロゴとの合成

背景用のLEDを作成していきます。

 

f:id:kitahana_tarosuke:20171007152611j:plain

レイヤーを追加してフィルタ→描画→雲模様1を適用します。

塗りの不透明度は16%くらいです。これはLEDの光り方のムラを出したかったので追加していますが、特になくてもいいかもしれません。

 

f:id:kitahana_tarosuke:20171007152624j:plain

レイヤースタイルのパターンオーバーレイを適用します。設定は文字に適用したものとまったく同じです。逆にここで違う設定をしてしまうと、ドットが揃わなくなるので注意が必要です。

 

f:id:kitahana_tarosuke:20171007152847j:plain

ロゴのレイヤーを覆い焼きカラーにして重ねてみました。

うーん。ここで計算では綺麗なLEDになる予定だったのですが、失敗していますね。黄色に光るLEDを作成したかったのですが・・・軌道修正します。

 

f:id:kitahana_tarosuke:20171007153137j:plain

フィルタ→ぼかし→ぼかし(ボックス)を適用します。

 

f:id:kitahana_tarosuke:20171007153243j:plain

色相・彩度の調整レイヤーを追加して、色味を青色に変更します。

そう、LEDといえば青色が定番!

と自分に言い聞かせつつ作業を進めます。

 

f:id:kitahana_tarosuke:20171007153646p:plain

レイヤースタイルで質感を強調していきます。まずは光彩(外側)で文字の外側にも光の影響が広がっている感じを出します。

 

f:id:kitahana_tarosuke:20171007154006p:plain

次にシャドウ(内側)で文字の中に光っている質感を作成します。輪郭のトーンカーブを逆にすることで内側を光らせることができます。

 

f:id:kitahana_tarosuke:20171007154131p:plain

最後にサテンで文字の中のドットの間にも青を入れます。

 

まとめ ー 完成したけどリベンジもするぞ!

これでひとまず完成です。

f:id:kitahana_tarosuke:20171007124832j:plain

当初は野球場の電光掲示板のようなオレンジ色に光るLEDを作りたかったのですが、作業しているうちに軌道修正をしてしまいました^^;

 

また別の記事でオレンジに光るLED風のロゴデザインに挑戦します!