背景が透過のFavicon(ファビコン)を「EDGE」で簡単に作る方法

screenshot_41

前回の「Favicon(ファビコン)を作成するならドット絵ツール「EDGE」が圧倒的に便利」の記事でEDGEを利用した簡単なファビコン作成方法を紹介しましたが、今回は少し発展して背景を透明にしたファビコン作成方法を紹介していきます。

透過を利用したファビコンは「Yahoo!」や「Twitter」などでも使用されており非常にお洒落な印象を与えてくれのでおすすめの手法です。非常に簡単な方法なので覚えて損はないと思います。

背景の透過処理が必要となる場面

EDGEでこのように懐かしのマリオのドット絵を書いてみたとします。screenshot_26

結構気合を入れて作成しましたが、これをそのまま保存してサイトのファビコンに使用しても下の画像のようになってしまい、残念さが凄いことになってしまいます。
screenshot_29

これは背景に透過処理を施してないから起こってしまう問題です。このまま背景が緑のまま使うのも一つの道ですが、透過処理をした方が断然お洒落で格好良いので、次の項から緑部分を透明にする方法を解説していきます。

「EDGE」を使用した背景透過処理の方法

まず「EDGE」を利用したファビコン作成方法がわからない方は前回の記事で紹介しているので、まずそちらを御覧ください。

Favicon(ファビコン)を作成するならドット絵ツール「EDGE」が圧倒的に便利

透明にしたい色を背景色として登録する

※今回は例として緑背景を透明にする方法を紹介していきますが実際は何色でも特に問題無いです。ただし背景は一色に統一するようにしましょう。

まず「EDGE」のカラーパレットを開きます。screenshot_26

カラーパレットで背景にしている色(この記事では緑)を「右クリック」で選択します。こうすることでEDGE内で緑を背景色として登録することができます。

背景色として設定した色は一番右下の欄に表示されるので確認しましょう。因みに左は描画する色が表示されます。
screenshot_31

背景色を透過処理して保存

「ファイル」→「エクスポート」から「PNG形式で保存」をクリックします。screenshot_32

 「透過色設定」内の「背景色を透過させる」を選択して「保存」をクリックします。これで先ほど設定した背景色が透明になります。screenshot_33

この画面で適当な名前を入力して「保存」を押したら終了です。実際に透過処理が施されているか確認してみましょう。screenshot_34

無事に緑だった部分が無くなり、マリオのみの表示となりました。screenshot_35

実際にファビコンに設定するとこうなりました。やはりこちらのほうが断然いいですね。

screenshot_38

透過処理をした後

screenshot_29

透過処理をする前

まとめ

いかがでしたでしょうか。方法は言ってしまえば「色を右クリックして保存する」というだけなので非常に簡単です。当サイトのファビコンはこうした透過処理は使用していませんが、その内試してみたいですね。こうしてみるとEDGEは本当に簡単かつ多機能で面白いツールだと実感するばかりです。

SNSでもご購読できます。