直感と想像力でタイトルロゴを作ってみた

今回は少し長くなったのでまとめてみました



1.タイトルロゴ製作の苦悩


2.FC２ブログでのタイトルロゴ設定方法


3.タイトル画像の表示がおかしい場合は？


4.今回のロゴ製作の後書き

---

ロゴ製作の苦悩


あれ？ロゴ作るんだけど最初何すればいいんだ？


というわけでネットをひたすら探索
そうすると自分で３Dロゴを光の角度などのできるだけ細かくロゴを作れる
JAVAで簡単にできるサイトを発見しました

3Dロゴ製作サイト

このサイトでは立体的な３Dロゴと光の度合いや
豊富な色を使いさまざまなシンプルなロゴを作成することができます


このサイトに合うデザインを思考すること１時間・・・

一番メジャーな形式でいくと
このサイトのイメージカラーは青なので
青白形の”AIR”の光った感じのロゴみたいなのを作るのが理想的なんですが
イメージはこんな感じ↓（ついでに高画質なのでOPでもお楽しみください）



しかしそれではあまりにもデフォルト過ぎて面白くない！！！


というわけで管理人はさらにデザインを考えました・・・
そこでひとつのヒントを得たのです・・・

このブログのタイトルはSun Eternity・・・
つまり陽をイメージしています・・・

このブログ自体は夏というイメージと海というイメージを基盤にしています

そこで考えたのです
このブログのデザインに”第三の色合い”で太陽をイメージすることはできないだろうか？と・・・

もしこれが実現できればブログのタイトルにも一致しなおかつ第三の太陽という要素で
イメージが　”夏”　”海”　”太陽”　というもっともらしい非常にバランスの取れたアートが
実現可能なのでは？と考えました

そこでタイトルロゴを使い陽的な要素を作る作業に移りました
陽ということは一番最初に浮かぶイメージが暖色が赤～オレンジ系です

しかしブログにタイトルをそのままオレンジを載せただけでは
このブログのデザインを破壊させてしまいます
なぜならこのブログのデザインは”繊細”さと”静か”というものを最初に持ち合わせたデザインでした
なのでいきなりでかでかと色の濃い何も考えない濃い色が乗せられたら当然デザインは崩壊します

そこで光の度合いを調節し
上から日差しがあたっているように上に行くほど白色にして光を出し
下のほうはオレンジ的な少し濃い色のタイトルということで２時間かけて
タイトルロゴで陽を演出しました

ここで作った画像をフリーの

Pixia

という画像編集ツールでちょっとした編集をさせていただきました


上へ戻る

---

以下はFC2ブログでのタイトルロゴ（画像）の設定方法です

まずHTMLブログテンプレートをページ内で下の語句を検索しこの場所に行き
下記のようになっている部分を

///  headerはタイトルやサイトの説明を記述するブロックです ///  タイトルには画像を使う事も可能です /// --> <div id="header"><!-- header -->     <h1><a href="<%url>" _fcksavedurl=""<%url>"" _fcksavedurl=""<%url>"" _fcksavedurl=""<%url>"" accesskey="0" title="<%blog_name>"><%blog_name></a></h1>     <p><%introduction></p> </div><!-- /header -->

となっているので以下のように変えます

/// ///  headerはタイトルやサイトの説明を記述するブロックです ///  タイトルには画像を使う事も可能です /// --> <div id="header"><!-- header -->     <h1><a href="<%url>" accesskey="0" title="<%blog_name>"> <img src="画像URL" border="0"></a></h1>     <p><%introduction></p> </div><!-- /header -->

これでFC2ブログテンプレートでのタイトルのロゴ画像の設定は完了です


上へ戻る

---

タイトルの表示がおかしい場合は？

しかしこれだけではタイトルの位置がずれて
おかしな表示になってしまうかもしれません
そこで今度はFC2ブログのHTMLテンプレートの下のスタイルシート編集で
以下のようになっているところを自分で調整して確認してください

/* タイトル・サイトの説明部分の設定 ------------------------------------------------------------ */     /* タイトル */     div#header h1 {         padding : 25px 35px 0px 15px; /*←は左から順に上右下左の順に対応していますので調整してご確認ください*/         font-size : 30px;         text-align: right;         font-family: Arial,"ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック",Osaka,sans-serif;         voice-family : "\"}\"";                /* おまじない */         voice-family : inherit;                /* おまじない */         letter-spacing: 10px;     }

もしサイトの説明部分の表示位置を調整したいのであれば

/* サイトの説明 */     div#header p {         padding : 10px 40px 0px 250px; /*この部分を同じように調整*/         font-size : 110%;                    /* 文字サイズ */         font-weight: bold;         text-align: right; /*ここで大まかな位置を調整できます*/         color: #fff;         voice-family : "\"}\"";                /* おまじない */         voice-family : inherit;                /* おまじない */     }

以上でFC2ブログでの画像の設定方法は終わります


上へ戻る

---

～～～～あとがき～～～～

今回タイトルロゴを製作するに当たって
画像編集などの心得やタイトルロゴの作成方法もろくにわからない状態で
直感と想像力を頼りにロゴを作成しました

しかし・・・欲を言えばまだまだ不満なところはあります
もう気づいている方もいると思いますがタイトルロゴの画像の質が荒いところなどです

これに関しては管理人の技量不足なため
画像を修正し完全な形で提供することができませんでした

今回使用したテンプレートのデザインの改変は正直かなり神経の使うものでした
なぜならこのブログテンプレート（fragment_of_summer）は最初から完成された
繊細で静かなデザインであるためそこに手を加えていいのかどうか迷いました

しかし上記で表示されていたように白文字だけでは
テンプレート（fragment_of_summer）として芸術としてはすばらしいですが
人に残す印象ははっきりいってかなり薄いです

なので今回はこの芸術（ブログ）のデザインに配慮しつつ
自分の手で新しい第三の要素である陽のタイトルロゴを作成してみました


結果は完全に満足。。。とまではいきませんでしたが
なんとかデザインを崩壊させずに新しい要素を取り入れることができたな～と思っています


このロゴデザインに対し何らかのアドバイスまたは意見があれば聞かせていただければ嬉しいです--------------------------------------------------------------------
上へ戻る

関連記事：
高級画像編集ソフトをWEB上で無料で使ってみよう！
漫画の下書きを簡単に書くソフト
HTML文法の対応するタグをチェック