誰も見ていない時間

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

壁に打ち込まれたロゴ。置き換えとレイヤースタイルの重ねがけで表現

今回は壁に刻まれたロゴを作成します。

刻まれた、というよりは壁に打ち込まれた、という感じでしょうか。

f:id:kitahana_tarosuke:20171111110934j:plain

文字が壁にドーンとぶつかって、その壁にロゴとして残った、というイメージです。

作成するにあたっては、前回も使用したフィルタの「置き換え」を用いました。

 

スポンサーリンク

 

 

テクスチャの用意と外側の彫り込みの作成

f:id:kitahana_tarosuke:20171111111420j:plain

まずは壁のテクスチャを用意します。今回もロイヤリティフリーのサイトから調達しました。コントラストが弱かったのでトーンカーブで少し調整しています。

「置き換え」でこの画像をそのまま使用しますので、psd形式で保存しておきます。

 

f:id:kitahana_tarosuke:20171111111702j:plain

テキストレイヤーでロゴとなるテキストを打ちます。文字は例によって何でも良かったのですが、今回は「Wall」にしました。

 

f:id:kitahana_tarosuke:20171111111926j:plain

文字部分を自動選択ツールで選択し、選択範囲→選択範囲を変更→拡張、と選択して12pixを入力します。

その後、qキーを押してクイックマスクに変換します。qキーは選択範囲をクイックマスクに変換するショートカットです。クイックマスクにしておかないと変形フィルタが使用できないので注意が必要です。

 

f:id:kitahana_tarosuke:20171111112415p:plain

フィルタ→変形→置き換えを選択します。

上記は置き換えの設定画面です。比率を大きくすると、変形の効果が大きくなります。今回は水平比率も垂直比率も10に設定しました。

 

f:id:kitahana_tarosuke:20171111121014j:plain

置き換えを適用した後の画面です。

全体的に右肩上がりになっていますが、これは背景に使用したテクスチャの影響ですね。これはこれでおもしろい効果なので、このまま進めることにします。

 

f:id:kitahana_tarosuke:20171111121247j:plain

選択範囲を白で塗りつぶしました。後ほどレイヤースタイルのグラデーションを適用するので塗りつぶす色は何でもかまいません。

 

f:id:kitahana_tarosuke:20171111122741p:plain

ここからはレイヤースタイルの設定です。まずはグラデーションオーバーレイを適用します。グラデーションはオリジナルで作成しましたが、文字の裏に隠れる部分ですので、それほど設定に凝る必要はありません。明度が高い色だけを避けるようにしましょう。

 

f:id:kitahana_tarosuke:20171111123005p:plain

ベベルとエンボスの設定です。

深さは511%とかなり強めに設定し、テクスチャもここで一緒に適用しておきます。

 

f:id:kitahana_tarosuke:20171111123958p:plain

最後にシャドウ(内側)です。

壁に彫り込まれたという設定なので、少し大きめの数値を入力しています。

包括光源にチェックが入っていますが、これはレイヤースタイルで全て同じ光源を使用するときチェックします。

 

f:id:kitahana_tarosuke:20171111124242j:plain

3種類のレイヤースタイルを適用した後の画像です。

べべとエンボスのジゼルハードを使用すると、画像の文字跡の周りのような筋がたくさん表示されます。普段は使用しづらいのですが、今回のような作例だと、削った質感が表現できるので重宝しています。

スポンサーリンク

 

 

レイヤースタイルでのロゴ部分の作成

f:id:kitahana_tarosuke:20171111124532j:plain

先ほど作成した文字の周りの部分はいったん非表示にして、ロゴ部分を作成していきます。文字周りの部分が右肩上がりになっていたので、文字の位置を少し調整しました。テキストレイヤーのまま、文字パレットでベースラインシフトを変更しています。

 

f:id:kitahana_tarosuke:20171111125111j:plain

レイヤースタイルのパターンオーバーレイで石のようなテクスチャを選択します。文字の周りの部分はベベルとエンボスでテクスチャを使用しましたが、文字部分はここからグラデーションオーバーレイとカラーオーバーレイも使用するので、パターンオーバーレイでテクスチャを割り当てておきます。

 

f:id:kitahana_tarosuke:20171111125343j:plain

グラデーションオーバーレイを使用します。カラフルなグラデーションですが、この上からカラーオーバーレイをかけるのでここでは記にする必要はありません。

 

f:id:kitahana_tarosuke:20171111125543p:plain

グラデーションオーバーレイの設定画面です。先に設定したパターンオーバーレイが見えるように描画モードをビビッドライトに設定しました。

 

f:id:kitahana_tarosuke:20171111125730j:plain

カラーオーバーレイを上から重ねます。

もちろんグラデーションオーバーレイで、最初から上記のようなグラデーションを作ってもまったく問題ありません。むしろそちらの方がレイヤースタイルの手順が少ないので、正しい方法かもしれません。

私がときどきグラデーションオーバーレイとカラーオーバーレイを重ねるのは、単にグラデーションの設定が面倒だから、です(^_^;

 

f:id:kitahana_tarosuke:20171111130120p:plain

ベベルとエンボスを使用します。方向は下向きで、深さはきつめに設定しておきます。

 

f:id:kitahana_tarosuke:20171111130324p:plain

光彩(内側)を設定します。ジャギった感じが出るようにノイズを入れておきます。光彩を使用するときにあまりノイズを使用しない方は多いと思いますが、使用すればおもしろい質感が得られるのでお薦めです。過去にこれをブラシのように使用する記事もアップしていますので、参考にしていただければ幸いです。

 

 

f:id:kitahana_tarosuke:20171111130632p:plain

最後に光彩(外側)です。これにも少しノイズを設定してあります。壁に刻まれた文字なので、外側のラインが綺麗過ぎると違和感が出てしまいます。

 

f:id:kitahana_tarosuke:20171111130745j:plain

レイヤースタイルを全て使用した状態です。これだけでも少し手を加えれば、別のデザインとして使用できそうですね。

 

f:id:kitahana_tarosuke:20171111110934j:plain先に作成しておいたロゴの周りの部分を表示させて完成です。

 

f:id:kitahana_tarosuke:20171111131227j:plain

完成です、と言いながら、調整した別バージョンを作成してみました。文字の周りの地紋が少し明るすぎたかと気になったので・・・。

うーん、こちらの方がいいかもしれません。

リライト後に作例が変わっていたらご容赦くださいませ(^_^;

 

まとめ ー レイヤースタイルは重ねて使用

レイヤースタイルの一つ一つは単純な効果しか得られることができません。

そのため、複数のレイヤースタイルを重ねて使用することが重要です。いくつも重ねることで、パッと見たくらいではどうやって作成したのか分からないくらいの質感を表現できます。

 

デザイナー同士でよくある会話なのですが、

「どうやって作ったのか分かるデザインは興ざめするよね」

というのがあります。

 

たとえば何かのエフェクト一つとっても、

「ああ、これはAfterEffectsのTrapcodeのStarglowのデフォルトだな」

というのが、分かる人にはすぐに分かります。

 

同業者が見ても、これはどうやって作ったのだろう、と唸らせるくらいの成果が理想ですね。

 

あ、私がそれを実現できているという訳ではありません(^_^;

あくまでも、それが理想ということで・・・