スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

今回は・・・がんばってロゴ作成に挑戦してみました!
もうきづいた人がかなり多いと思いますが上のタイトルロゴを変えてみました!

Before(タイトルロゴ変更前)


そこで!今回はど素人の自分が直感と想像力を駆使して
無謀にもロゴ製作に挑んでみました! 
その創作時間(3時間)の直感的デザイン思考を今回はロゴの作成方法とあわせてご紹介します
今回は少し長くなったのでまとめてみました



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


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


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


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





ロゴ製作の苦悩


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


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

3Dロゴ製作サイト

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


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

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



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


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

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

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

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

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

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

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

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

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

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","MS Pゴシック",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文法の対応するタグをチェック
コメント

No title

え、普通に綺麗だしカッコイイのだがwww

いえいえ

デザインをほめていただきありがとうございます^^

ですが本当に自分のタイトルロゴなど
本当に作成している人に比べれば
全然たいしたことありません

自分の知っているブログサイトでは
これを軽く超えるデザインをしている方もいますし
そういう方から比べれば自分はまだまだです

画像が荒いのも事実ですし
これにいたっては管理人の力量不足
としかいいようがありません

正直アドバイスとかがあったら
お世辞を言わずにどんどん投稿してほしいです

No title

綺麗な配色でイイですね^^

Pixiaというソフトを使ったことがないから分からないけれどフォトショップなら文字を『滑らかに』とかに設定して高画質で書き出せば文字の端のギザギザは消えるんですけどね^^
光の度合いのようなグラーデーションも同じように再現できますし。
Pixiaというソフトも高機能らしいから、きっとどこか設定を変えたりして書き出せば綺麗になるんじゃないでしょうか^^
アドバイスにもなってないコメントで申し訳ないですw

No title

シンさんこんにちわ

フォトショップですか?
持っていません;;
14万はほんとやばい・・・

WEB上で使えるフォトショップもありますが
使い方がさっぱりですせめて
日本語で表示してくれれば助かるのに・・・

Pixiaでがんばって編集しようと思いましたが
ありゃりゃ・・・こりゃ無理だ・・・
んでもって自分で細かいところを編集しようとして
拡大しまくったけどなんかどう手を施しても
ぎざぎざが消えそうもありません^^;

とりあえず今からWEB上で使えるフォトショップの
使い方でも見てみようと思います

コメントの投稿
管理者にだけ表示を許可する

トラックバックURL

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。