ファビコンを４分で作る手順と画像処理ソフト「PIXLR EDITOR」の使い方のメモ

IT

アドレスバーに表示されるファビコンを作ってみました。

ファビコン

画像の処理はいつもホームページビルダーに付属している「ウェブアートディレクター」を使っています。とんでもなく使いやすいので、Windows7にアップした時にそれまでのバージョンが使えなくなったので、ウェブアートディレクターの新しいバージョンがほしくて、使いもしないホームページビルダーを購入したくらいですが、いつまでも使えるか分からないので、代替となるアプリケーションをいろいろ試した結果、PIXLR EDITORが使いやすいので、使い方も合せての記録です。

PIXLR EDITORでアイコンを作成する

「PIXLR EDITOR」のウェブ版を使います。
サイトはこちら → PIXLR EDITOR

PIXLR EDITOR

アイコンを作るので「新しい画像を作成」をクリックします。

新しい画像のサイズを設定します。
ファビコンなので正方形にしておく方が無難です。

ここでは（200×200）として「透明」にチェックを入れ［OK］を押します。
タイトルを決めておいてもいいですが、とりあえず「無題」のままで進めます。

PIXLR EDITOR2

描画ツールを使って角丸の正方形を作ります。
描画ツールで作れる図形は

  • 長方形ツール
  • 角丸長方形ツール
  • 楕円形ツール

の３種類ありますが、ここでは角丸長方形ツールを選択します。
200×200の正方形を作りますが、右にナビゲーションウィンドウがあるので、サイズの確認をしながら作ります。

PIXLR EDITOR3

塗りつぶしの色を設定します。
色が決まったら、ペイントバケツツールで一気に塗りつぶします。

PIXLR EDITOR4

アイコンのベース画像ができたので、この上に文字を重ねます。
文字は新しいレイヤに作ります。

PIXLR EDITOR5

文字はタイプツールを使います。
「W」と入力し、色を白、サイズを決めて［OK］を押します。

PIXLR EDITOR6

ここまででアイコンが出来たので、［png］形式で保存します。

次に作った画像をファビコンに変換します。

ファビコンは［.ico］の拡張子がつくファイル形式ですが、[.jpg]や[.png]では表示されないブラウザもありますので、［.ico］に変換する必要があります。

JPEG/PNG/GIFからアイコンを作成する「アイコン コンバータ」にアクセスし、作った画像データをアップロードし変換ボタンを押すとファビコンが出来上がります。

ファビコンはサイズによって数種類ありますので、必要なサイズのファイルをダウンロードします。

一般的にファビコンのサイズは［64×64］が使われています。

ファビコンファイルはルートディレクトリにアップロードして、HTML各ページの［head］内に以下のコードを追加します。

<link rel="shortcut icon" type="image/x-icon" href="./favicon.ico">

WordPressの場合は、「header.php」に追記し、アップロードします。

ここまでの作業でアドレスバーにファビコンが表示されるようになります。要した時間は４分でした。

PIXLR EDITOR7

PIXLR EDITORの使い方

ツールパレットにはたくさんのツールがあります。
それぞれの使い方をまとめました。

オブジェクトの切断や移動のツール
  • 切り抜きツール
    画像の一部を切り抜いて新たな画像データを作る
  • 移動ツール
    選択したオブジェクトを移動する
  • 一列選択ツール
    複数あるオブジェクトをまとめて選択する
  • 投げ縄ツール
    一列選択よりも細かな選択をする
  • 選択ツール
    単一のオブジェクトを選択する
イラストや写真の上に描画するツール
  • ペンシルツール
    鉛筆で書いたような線を描く
  • ブラシツール
    筆で書いたような線を描く
  • 消しゴムツール
    描いたオブジェクトの一部を消す
  • ペイントバケツツール
    選択した領域を指定した色で塗りつぶす
  • グラデーションツール
    グラデーションパターンを設定しマウスドラッグでオブジェクトにグラデーションをつける
  • クローンスタンプツール
    オブジェクトの一部を他のオブジェクトの一部と同じ用に変える
    写真であれば空に浮かんでいる飛行機を雲で消したり
  • 色置き換えツール
    オブジェクトの一部や選択した部分の色を変える
  • 描画ツール
    長方形・角丸長方形・楕円形の図形を描く
写真加工のツール
  • ぼかしツール
    ぼかしツールをクリックしてから指先ツールでドラッグするとドラッグした部分をぼかせる
  • シャープ化ツール
    ぼかしツールと同じく使うとドラッグした部分がシャープに
  • 指先ツール
    ドラッグして加工するツール
  • スポンジツール
    指先ツールでドラッグするとスポンジでこすったようになる
  • 覆い焼きツール
    ドラッグした部分がくすむ
  • 焼きこみツール
    ドラッグした部分が濃くなる
  • 赤目低減ツール
    赤目を修正する
  • スポット修復ツール
    シミや汚れなどを修正する
  • 膨張ツール
    クリックした部分が膨張する
  • つまみツール
    クリックした部分が縮む
便利ツール
  • カラーピッカーツール
    写真や画像の特定の色をコピーする
  • タイプツール
    文字を入力する
  • ハンドツール
    画面を移動する
  • 拡大ツール
    画面を拡大する

以上がツールパレットですが、メニューバーにある「編集・画像・調整・フィルター」でもっといろんな加工ができます。

機能としては「Photoshop」とほとんど変わらないと、画像処理を自在にできる無料のクラウドソフト「PIXLR EDITOR」の紹介でした。