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

SPONSORED LINK
ブログのロゴをつくる超簡単な方法

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

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

ブログのロゴを作る方針

ロゴ0

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

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

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

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

 

Keynoteでロゴをデザインする

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

ロゴ1

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

ロゴ2

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

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

ロゴ3

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

 

Skitchで切り取ってicon makerへ!

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

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

ロゴ4

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

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

ロゴ5

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

ロゴ6

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

 

(+α)マウスオーバー用のアイコンを!

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

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

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

ロゴ7

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

ロゴ8

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

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

header.phpファイルの編集

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

[email protected](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の編集です。2枚目の写真を背景表示させて、マウスオーバーすると1枚目の写真が隠れる、という仕組みです。

[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で編集しました。

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

今回のカギ

おまけが長くなりましたが、iPhoneアプリアイコン風のロゴを簡単に作る方法の紹介でした。いかがでしたか?

今回のカギは、

■KeynoteとSkitchがあればロゴ作成は簡単!
■icon makerは便利なのでぜひチェックを!
■余裕がある方はぜひマウスオーバーにも挑戦を!

の3つです。

アプリ風アイコンはブログのロゴ以外にもいろんな場面で使えると思うので、ぜひ一度試しにアイコンを作ってみて下さい。

@3_wa

 

参考情報

このKeynoteでアイコンを作る方法は、以前AppBank(旧Macbank)さんの記事で知り、アプリを自作したときに大活躍しました。Keynoteの使い方について詳しく紹介されていますのでぜひご確認ください。

Keynote: 画像作成もできてしまう最強プレゼンアプリ。インスペクタ・アルファ機能が神。村井の操作動画付き! : MacBank -Mac App Storeのおすすめアプリ-

Skitchについても以前使い方をまとめましたので、ぜひご確認ください。

Skitchでスクリーンショット内のメールアドレスや個人名など非公開にしたいワードを簡単に隠す(消す)方法 | みんなの扉を開くカギ
Skitchでスクショ内の個人情報などを簡単に隠す方法 Part2 | みんなの扉を開くカギ

 
Keynote 5.2(¥1,700)App
カテゴリ: 仕事効率化, ビジネス
販売元: Apple – iTunes K.K.(サイズ: 340.4 MB)

Skitch 1.0.12(無料)App
カテゴリ: 仕事効率化, グラフィック&デザイン
販売元: Skitch – Skitch Inc(サイズ: 6.1 MB)

SPONSORED LINK
logo_simle_making.jpg