: Application

ロゴのパス抜き面倒くさいからFireworksにがんばってもらう

ロゴのパス抜き面倒くさいからFireworksにがんばってもらう

ロゴの支給が画像のみ、その上背景色がついてて、なんだかスピードが求められてる。
そんな時、ロゴのパス抜きなんかやってると面倒くさい上に時間もかかる。さて、どうしたものか………ちょっと、制約はあるけどAdobe Fireworksさんに解決してもらいましょう。

ロゴはレギュレーションシートと.pngとか.aiとかで支給!!それが理想

しかし現実は………「現行のウェブサイトから引っ張ってきて下さい。」「.jpgしかありませんけどこれでいいですか?」「パワポで送りま〜す。」等々。いろんな感じです。ヘッダーの背景色の問題で、ロゴは透過して使いたいなぁ………パスで抜くかぁ………これなんのフォント??………はぁ、めんどい………。

Fireworksさんお願いします。

ロゴサンプルでは、このサンプル画像でやってみようと思います。
はい。じゃあその画像ををFireworksで開いて下さい。
それでは行きますよ。

手順1 : 同じ色のオブジェクトをコピペしてバラバラに

同じ色をした、オブジェクトを背景込みでいいのでざっくりとバラバラにして下さい。
サンプルだと、

  1. ロゴマークと「Image Alpha」って部分
  2. 「LogoType」って部分
  3. 「LogoType」のアンダーラインと「made by 」って部分

手順2 : フィルターを掛けていきましょう

フィルターを掛けていきましょうフィルターは、ヘッダーメニュから直接掛けてもいいとは思いますが、今回はプロパティウインドウから掛けるようにしましょう。

手順3 : 「カラーを調整 > 色相・彩度」で「彩度」を「-100」

「カラーを調整 > 色相・彩度」まずは、単純に彩度をなくしてグレースケールにします。

「彩度」を「-100」この手順は、必要ないかもしれませんが、色の組み合わせで以降の手順がうまく行かなかったりするので、おまじない程度に考えて下さい。

このフィルターをかけると、こんな感じになると思います。

手順4 : 「カラーを調整 > 自動レベル補正」

次は、「自動レベル補正」をかけます。

この手順で、画像のコントラストが上がって、白と黒にパッキリした画像になると思います。

このフィルターをかけると、こんな感じになると思います。

手順5 : 「カラーを調整 > 反転」

この手順は、画像のように地の色が黒の時にやりましょう。

このフィルターをかけると、こんな感じになると思います。

手順6 : 「その他 > アルファチャンネルに変換」

この手順で、地色の白が透過されます。後少し、ゴールが見えてきました。

このフィルターをかけると、こんな感じになると思います。

手順7 : 「カラーを調整 > カラーの塗り」

個々のロゴの色をスポイトとかで持ってきて、色を塗って下さい。

このフィルターをかけると、こんな感じになると思います。

手順8 : 「フィルター > カラー調整 > カーブ」

最後の手順は、3つのパーツをグループ化して、ヘッダーメニューから「カーブ」を掛けてビットマップ化しましょう。これは、ビットマップ化が目的なので、色が変わらなければなんでもいいと思います。

この手順は、やってもやらなくてもいいですが、座標が取り易くなったり、扱いが楽になるのでやりたい人はやって下さい。

完成!!

これで、完成です。透過されたロゴが出来上がったんじゃないかと思います。
文章化すると、以外に長くなりますね。実際は30秒掛からないと思います。

グラデーションに注意

とっても、簡単に透過できるこのやり方は、制約があります。

ロゴや地の色にグラデーションが使わているとうまくいきません。ちょっと、画像の明度やコントラストを上げれば消せる様ならいいですが、がっつりとグラデーション掛けられるとこのやり方ではお手上げです。

少しでも時間を節約

まぁ、制約はありますがこれで、時間が節約出来れば幸いです。