ブログのデザインがテーマだった東京ブロガーズミートアップ#7。
その時にふと思い出したのが「そういえばブログのロゴ画像を作りたかったんだっけ・・・」ということ。
引越し前の旧ブログの時代から何年も思いつつ、まぁいいやと手を付けずにいて、その思いすら忘れかけていたわけです。
しかし東京ブロガーズミートアップの後は気持ちが高まることもあり、ついに作ったのがこの拡声器のロゴ画像です。
←動くよ！
Sponsored Link
ロゴ画像欲しいね
ロゴ画像欲しいな・・・作りたいな・・・作ればいいじゃん・・・作ろう！！！となった発端は、むねさだブログさんのプレゼンでした。
デザインとか方法が優れているのはもちろんですが、結局は試行錯誤して今の形になっていること。
「とにかく作って、段々変えていけばいいじゃん！」と思ったわけです。
ビジュアルを作るのは苦手なので、なんとなく心の奥で避けてたんですね、きっと。
取り敢えずでいいから作ればいいんじゃん
ということで、何も考えずにいきなりロゴジェネレータサイトを幾つか探して作ってみました。
使ったサイトはLogo Maker, Logo Design – GraphicSprings – 100% Free!。
拡声器をマークに選んだのは大きな理由はないのですが、「ism」を主張してる感が表せるかなー？と。
サイトの性能なのか、自分の操作のせいか分からないのですが、後から見ると画像がちょっと荒れた感じですね。
いくらでも作り直せばいいのだ！とすでに気持ちが切り替わっているので、近々作りなおしてみます。
ロゴ画像のお陰で動きのあるデザインに！
これまでkira-ismには縦横の鉛直方向にしかデザイン上のラインがありませんでしたが、斜めのラインを入れたことで動きのあるデザインになった気がします。
でも、これだけだとあまり面白くないので動くようにしました。
CSS3でマウスオーバーすると画像が少し回転するようにしています。
.tilt {
-webkit-transition: all 0.05s linear;
-moz-transition: all 0.05s linear;
-o-transition: all 0.05s linear;
-ms-transition: all 0.05s linear;
transition: all 0.05s linear;
}
.tilt:hover {
-webkit-transform: rotate(-6deg);
-webkit-transform-origin: 15% 67%;
-moz-transform: rotate(-6deg);
-moz-transform-origin: 15% 67%;
-o-transform: rotate(-6deg);
-o-transform-origin: 15% 67%;
-ms-transform: rotate(-6deg);
-ms-transform-origin: 15% 67%;
transform: rotate(-6deg);
transform-origin: 15% 67%;
}表示の位置もCSSで調整しました(当たり前か)。
なんとか自分の気に入ったデザインになりました。
進化しているロゴジェネレータサイト
今回の作業で思ったのは、ロゴジェネレータサイトってものすごく進化してるんだなということ。
実は昔にロゴジェネレータサイトを使ったことはありました。
しかし、ろくなデザインはないし使いにくいしで、これならトップロゴなんて使わないでテキストリンクの方がいいや！と、そこでやめてしまったことを思い出しました。
透過PNGで出力できなくていらついたサイトもあったっけ。
でもGraphicSprings以外のサイトも含めて、今回見つけたサイトは皆素敵なデザインがあり、使いやすくて素晴らしいと思いました。
もう少しじっくりとデザインを選んだり加工すれば、僕でももっといいものが作れそうです。
ブログタイトルをデフォルトのテキストリンクで済ませている方は、こんな感じで取り敢えずロゴ画像を作ってみたらどうでしょうか。
参考リンク
第7回目の東京ブロガーミートアップのテーマはブログのデザインについて！ビジュアルだけじゃないんだよ、デザインは！ #tbmu | kira-ism
Sponsored Link
