記事の詳細

先日ふらっと背後に立ったY氏がさらりとこんなことをおっしゃいました。

「ロゴ燃やしたいんですけど……」

「あー、ありますなぁどうにもダッサいロゴってホント消滅すればいいのにって心の中で嘆くこと!」

「いやあの本当に燃やしたいんです」

やだな電子の世界をライターであぶるのは無理ですよ。あぶるのはエイヒレだけにしましょうか。

WEB上ではpngを中心にgif、最近はSVG等背景が透過された状態でのロゴが重宝されます。いちいち背景色に合わせてjpeg画像を作るのは骨がぽっきんこですからね。

チュートリアルだけみたい!って方は一番下に動画ぺっと貼っておきますね。

前提として覚えておくと応用が利くこと

ピクセルで構成されているPhotoshopデータはいかようにでも動かせる

テキストやシェイプ、Illustratorデータから持ってきたベクタースマートオブジェクト、Photoshop上で形成したスマートオブジェクトデータを、ピクセルの状態に落とし込むことをラスタライズといいます。

炊いた米(編集可能なテキストやシェイプ、スマートオブジェクト)を五目炊き込みご飯(ピクセル)にするような感じです。五目炊き込みご飯はあとは食べるだけでそれ以上の加工ができない(いやおにぎりにすることはできるでしょうがここはひとつできないってことにしてください)状態です。

ピクセルになったデータは油絵のキャンバスにのっている絵具と同じような扱いができます。上に重ね塗りしたり伸ばしたりすることが「自由に」できるんですね。

Photoshopのフィルター適応範囲

フィルターは基本的に「ピクセルデータ」の上にしかかかりません。透明な部分やテキストデータにはかけられないんですね。

最近はスマートオブジェクトにかけられる「スマートフィルター」というものがあり、あらゆる要素をスマートオブジェクト化しとけば何とかなったりします。今回はスマートフィルターではなくて通常のフィルターを使ってやっていきます。

ドロップシャドウでフィルターが適応される範囲を広げる

ドロップシャドウで枠を形成

フィルターがピクセルデータの上にしかかからない原理を利用して、とりあえずフィルターをかける場所を作成します。ドロップシャドウで文字の外側に、上へ立ち上る炎を想定した枠を作ります。

テキストとレイヤースタイルをラスタライズし、ピクセルデータにフィルターを適応する

フィルターをかける

作成したドロップシャドウのついたテキストデータをラスタライズ、さらにレイヤースタイルもラスタライズします。右クリックで項目が出ます。

作ったデータを90度傾け、フィルターから「風」を適応。

フィルターをかける

さらにガウスを適応。

この工程を2回ほど繰り返し、90度傾けたオブジェクトをもとに戻します。

指先ツールで動きをつけて炎を表現する

指先ツール

指先ツールで、強度を変更しながら適当に炎の動きを表現します。ペンタブでやってもいいとは思いますが、別にそこまでしなくても結構いい感じになります。

指先ツール

こんな感じで

2016-07-01_09h36_43

ハイこんな感じ。

レイヤースタイルで着色する

2016-07-01_09h37_00

光彩(内側)でグラデーションを選び、「エッジ」にチェックを入れてグラデーションをコントロールします。オレンジですが当然青い炎も作れます。

うおおおおおもえろおおおおお

こんがり上手に焼けましたー!

2016-07-01_09h37_54

背景に黒を置いていますが、ご覧のようにきちんと炎ともども自由に動けます。

場合によっては「ロゴを燃やすなんて不謹慎よー!」なんて言われてしまうこともありますので、TPOを把握したうえでのご使用をどうぞ。

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
久保田 里美

久保田 里美

価値あるコンテンツ制作部インクループ株式会社
デザイナー。コンセプト設立からデザインを理論立てて起こすことをポリシーに、WEB媒体から紙媒体まで幅広く手掛けていきたいデザイナー。日々勉強日々精進。

ほかの投稿も読んでみませんか?

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

特集

エクセルトラブルと解決策のまとめ アクセス数を増加させるための方法まとめ 初心者向けWordPressの設定方法まとめ

AD

お知らせ

平成28年度補正予算 小規模事業者持続化補助金
ページ上部へ戻る