初心者でも簡単！iPhoneアプリアイコン風のブログロゴをKeynoteとSkitchでサクッと作る方法

@3_waです。この週末でブログのタイトルを変更しました。

それに合わせてロゴも作ったのですが、誰でも簡単に作ることができるのでその方法をご紹介します。

ブログのロゴを作る方針

まずブログのロゴですが、もしアイデアがないようであれば正方形のロゴを作ることをおススメします。

FacebookやTwitterのプロフィール写真も正方形ですし、ファビコンも正方形です。iPhoneにブログのショートカットを作ってもアイコンは正方形なので、悩んだら正方形にしましょう。

今回は上の画像のようなiPhoneアプリアイコン風のロゴを作りますが、必要なものはMacアプリのKeynoteとSkitchです。画像編集と正確な切り取りができれば他のアプリでも問題ありません。

では、５分でできるロゴの作り方のご紹介です！

Keynoteでロゴをデザインする

Keynoteでロゴのデザインしましょう。まず、512×512pxの正方形を作ることがポイントです。

次に、角が丸い四角（日本語あってます？）を重ねます。これはアプリ風アイコンに加工した時の枠を作っているわけですが、枠が不要であれば必要ありません。次に進んで下さい。

いよいよロゴ作り本番です・・・とは言っても、あまり力まぬように。ロゴはシンプルな方が覚えやすいですし、分かりやすいですから、サッとデザインしてしましょう。

私はEdu-Dev.netのEとDを組み合わせてカギのマークを作りました。この程度で十分ではないかと思います。

これでロゴのデザインは完了です。

Skitchで切り取ってicon makerへ！

写真の切り取り加工アプリSkitchの登場です。先ほど作った512pxの正方形を綺麗に切り抜きましょう。

なお、スクリーンショットを取ってトリミングしても同じですが、1px単位で正確に切り抜きできるSkitchの方が断然楽です。

ここまで来れば後は流れ作業です。iPhone-like icon makerというページにアクセスしましょう。

するとアップロードする箇所があるので、そこへ先ほど切り抜いた512px正方形をアップします。※512pxの正方形でないとアップできないので気をつけてください！

あとは「Upload」のボタンを押すだけで完成です。完成するとiPhoneアプリ風のアイコンが２つ作成されます。

２つもPNGデータとしてダウンロードできますから、いろんなところで活用できるのではないかと思います。

（＋α）マウスオーバー用のアイコンを！

これで完成ですが、何か物足りなさを感じる方はもう１つマウスオーバー用のアイコンを作る、というのはいかがでしょうか？

先ほどと同じ要領でまったく同じアイコンの色違いを作成します。

私は大好きなバングラデシュカラーの緑と赤バージョンのロゴを作ってみました。

このロゴをもとに、後はタイトルをデザインすればよいだけですが、ここでも私はKeynoteとSkitchを使います。

前回もそうでしたが、フォントは出来る限りデフォルト以外のフォントを使うようにしています。今回は、以前ブログで紹介した「やさしさゴシック」というフリーフォントを使いましたが、他にもいろんなフリーフォントがあるので、ぜひ自分の気に入ったフォントを使いましょう。

後はタイトルロゴをアップして、htmlとcssを編集するだけです。参考までに私のブログで使用している、マウスオーバーするためのhtmlとcssのをご紹介します。

header.phpファイルの編集

header.phpの＜/body＞の後に以下のコードを挿入します。

細かな実装については、@shintarowfreshさんの（frasm）ブログブランディングの企画が非常になります。ロゴの作り方のヒントにもなると思いますので、ご覧になったことのない方はぜひ一度チェックを！

[html] <div id="header">
<h1><a href="<?php echo home_url(); ?>"><img src="<?php bloginfo(‘template_url’); ?>/image/title01.jpg（←アップロードした画像のURLを！）" alt="みんなの扉を開くカギ（←自分のブログ名を。）" title="みんなの扉を開くカギ（←自分のブログ名を。）" height="60（←自分の好みで。）" /></a></h1>
</div>
[/html]

style.cssファイルの編集

次にcssの編集です。２枚目の写真を背景表示させて、マウスオーバーすると１枚目の写真が隠れる、という仕組みです。

[html] div#header h1 {
　　 float:left;
margin: 10px 0px 10px 20px}

div#header h1 a {
display:block;
width:459px;
height:60px;}
div#header h1 a:hover { background:url(image/title02.jpg)（←アップロードした画像のURLを！）;}
div#header h1 a:hover img { visibility:hidden;}
[/html]

javascriptでもマウスオーバーで画像を切り替えることは可能ですが、データの読み込みが遅いと切り替わる間のブランクが長かったため、cssで編集しました。

この辺りはお好みだと思いますので、自分の好きな方法を選んで下さい！