名前アイコンの作り方(図解入り)

ヤフーブログの名前アイコンにはＧＩＦアニメーション画像が使えます。

例えば、こんな名前アイコンを設定できます。

　　

　　　　　　　　　　

動く名前アイコンの作り方

１．まず土台を選んで文字入れしておく

土台配布サイトは終了しましたが、鉄道アイコンと無地アイコンのみ

こちらのサイトで配布しています↓

http://freesozaixtrain.web.fc2.com/train-icon.html

ペイントで縦17ピクセル、横60ピクセルのキャンバスを設定して

文字入れしておく方法が簡単です。

ペイントでの保存はPNG画像がきれいにできます。

２．動く画像作成サイトはこちらです↓

無料バナー作成工房さん

このトップページの下の方に文字入れツールのサイトがありますから

ここで文字入れしておいてもいいですが、ペイントの方が簡単だと思います。

ここで文字入れしたい人は下を参考に。

３．文字入り画像が2.3枚用意できたら「動く名前アイコン」作成作業に入ります

トップページの右側にある「ＧIFアニメ作成はこちら」をクリック

(動く画像はＧＩＦアニメーション画像といいます)

４．パソコンに保存した文字入り画像アイコンをアップする

1枚目から順に選んでいくとファイルサイズが表示されますので

合計が5120バイト以下になるように選んでアップロードして下さい。

５ＫＢ(キロバイト)は５１２０Ｂ(バイト)です。

ヤフーブログの名前アイコンは

60x17ピクセル以内の画像で５キロバイト以下という制限があります。

画面の下の点滅間隔(画像切り替えのタイミング)と

ループ設定(繰り返しするか、しないか)を

お好みに合わせて選択して下さい。

「ＧＩＦアニメを作成する」をクリックすると下の画面に切り替わります

５．完成したアイコンをパソコンに保存する

「ダウンロード」をクリックすると長い名前が表示されるので

iconやnamaeなどわかりやすい名前に書き換えて保存してください。

(そのままでも保存出来ます)

６．できたアイコンをブログに設置する

「ブログ設定」から「名前アイコン」の欄の「ファイルを選択」をクリックして

保存したアイコンを選び、開く

７．最後に右下の「ＯＫ」をクリック

アイコンはすぐには表示されませんが、どこかにコメントすると

新しいアイコンに切り替わります。(過去のアイコンも新しいのに変わります)

アイコンを設定していなかった人もコメント欄の名前がアイコンに変わります。

この他GiamなどのＧＩＦアニメーション画像作成ソフトを使っても動くアイコンは作れます。Giamは無料です。使い方は知りません。

私はホームページビルダーのウェブアニメーターを使っていますが、ホームページビルダーは元々ホームページを作るためのソフトですから、ＧＩＦアニメーション画像を作るために買うのは非常にもったいないです。

作成例

例えば下のように肉球が足跡のように現れて名前を表示するアイコンを作る場合を説明します

１．まず下の肉球アイコン4枚をパソコンに保存してください。

２．下の無地アイコンを保存して名前を書き入れておきます

ペイントで記入してください。

３．こちらのサイトで→http://www.bannerkoubou.com/

名前の土台とあわせて５枚の画像をアップして

切り替えタイミングを０．５秒にします

名前アイコンは同じ物を２枚アップすると名前の表示時間が１秒間になるので

よみやすくなります。

４．繰り返し設定を「する」にして作成すると下のようになります

※名前を１文字ずつ出したい場合は、下のように１文字ずつ増やした名前画像を３枚用意してください

　　　　

※合計ファイルサイズが大きくなってしまう人は、写真画像などの「色数が多い画像」を使っているからです。

イラスト画像のように「ベタ塗りで色数の少ない画像」を使用すると枚数が多くても５ＫＢ以内におさまります。

ちなみに見本の肉球アイコンは２ＫＢです。

これまで1000種類以上の動くアイコンを皆様に作成して参りましたが、目が悪くなってドット単位の画像処理に困難をきたすため、作成依頼は「初めて依頼する方」「ブログリンク登録した方」に限らせていただいています↓

★注文場所はこちら(ファン限定記事)

ランキング応援感謝です