アドレスバーに表示されるファビコンを作ってみました。
画像の処理はいつもホームページビルダーに付属している「ウェブアートディレクター」を使っています。とんでもなく使いやすいので、Windows7にアップした時にそれまでのバージョンが使えなくなったので、ウェブアートディレクターの新しいバージョンがほしくて、使いもしないホームページビルダーを購入したくらいですが、いつまでも使えるか分からないので、代替となるアプリケーションをいろいろ試した結果、PIXLR EDITORが使いやすいので、使い方も合せての記録です。
PIXLR EDITORでアイコンを作成する
「PIXLR EDITOR」のウェブ版を使います。
サイトはこちら → PIXLR EDITOR
アイコンを作るので「新しい画像を作成」をクリックします。
新しい画像のサイズを設定します。
ファビコンなので正方形にしておく方が無難です。
ここでは(200×200)として「透明」にチェックを入れ[OK]を押します。
タイトルを決めておいてもいいですが、とりあえず「無題」のままで進めます。
描画ツールを使って角丸の正方形を作ります。
描画ツールで作れる図形は
- 長方形ツール
- 角丸長方形ツール
- 楕円形ツール
の3種類ありますが、ここでは角丸長方形ツールを選択します。
200×200の正方形を作りますが、右にナビゲーションウィンドウがあるので、サイズの確認をしながら作ります。
塗りつぶしの色を設定します。
色が決まったら、ペイントバケツツールで一気に塗りつぶします。
アイコンのベース画像ができたので、この上に文字を重ねます。
文字は新しいレイヤに作ります。
文字はタイプツールを使います。
「W」と入力し、色を白、サイズを決めて[OK]を押します。
ここまででアイコンが出来たので、[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」に追記し、アップロードします。
ここまでの作業でアドレスバーにファビコンが表示されるようになります。要した時間は4分でした。
PIXLR EDITORの使い方
ツールパレットにはたくさんのツールがあります。
それぞれの使い方をまとめました。
- オブジェクトの切断や移動のツール
-
- 切り抜きツール
画像の一部を切り抜いて新たな画像データを作る - 移動ツール
選択したオブジェクトを移動する - 一列選択ツール
複数あるオブジェクトをまとめて選択する - 投げ縄ツール
一列選択よりも細かな選択をする - 選択ツール
単一のオブジェクトを選択する
- 切り抜きツール
- イラストや写真の上に描画するツール
-
- ペンシルツール
鉛筆で書いたような線を描く - ブラシツール
筆で書いたような線を描く - 消しゴムツール
描いたオブジェクトの一部を消す - ペイントバケツツール
選択した領域を指定した色で塗りつぶす - グラデーションツール
グラデーションパターンを設定しマウスドラッグでオブジェクトにグラデーションをつける - クローンスタンプツール
オブジェクトの一部を他のオブジェクトの一部と同じ用に変える
写真であれば空に浮かんでいる飛行機を雲で消したり - 色置き換えツール
オブジェクトの一部や選択した部分の色を変える - 描画ツール
長方形・角丸長方形・楕円形の図形を描く
- ペンシルツール
- 写真加工のツール
-
- ぼかしツール
ぼかしツールをクリックしてから指先ツールでドラッグするとドラッグした部分をぼかせる - シャープ化ツール
ぼかしツールと同じく使うとドラッグした部分がシャープに - 指先ツール
ドラッグして加工するツール - スポンジツール
指先ツールでドラッグするとスポンジでこすったようになる - 覆い焼きツール
ドラッグした部分がくすむ - 焼きこみツール
ドラッグした部分が濃くなる - 赤目低減ツール
赤目を修正する - スポット修復ツール
シミや汚れなどを修正する - 膨張ツール
クリックした部分が膨張する - つまみツール
クリックした部分が縮む
- ぼかしツール
- 便利ツール
-
- カラーピッカーツール
写真や画像の特定の色をコピーする - タイプツール
文字を入力する - ハンドツール
画面を移動する - 拡大ツール
画面を拡大する
- カラーピッカーツール
以上がツールパレットですが、メニューバーにある「編集・画像・調整・フィルター」でもっといろんな加工ができます。
機能としては「Photoshop」とほとんど変わらないと、画像処理を自在にできる無料のクラウドソフト「PIXLR EDITOR」の紹介でした。
コメント