セッジです！おはようございます！
開発者であるヒロさんの熱意に打たれ、私もロゴデザインという形でZELOに関わることにしました。
今回は、そのZELOロゴのデザインについての解説です！
開発者であるヒロさんの熱意に打たれ、私もロゴデザインという形でZELOに関わることにしました。
今回は、そのZELOロゴのデザインについての解説です！
Bloggerの知名度を上げる方法は無いだろうかと考えていたところ、私も参加している「Blogger 初心者の集い」というコミュニティで、あるメンバーから声があがりました。
「Bloggerの新テーマを開発していますが、興味ある方、テスターをやりませんか？」
それが新テーマ「ZELO」の開発者ヒロさんでした。
新しいテーマにはとても興味がありましたので、さっそくテスターに参加することにしました。
ZELOは記事にアイキャッチ画像がない場合、トップページの記事リストにダミー画像を配置するという機能があります。
当初はここはヒロさんが用意したダミー画像が配置されていたのですが、
せっかくなので、ダミーじゃなくてZELOのロゴが出たほうが良いのでは？
と提案し、ZELOテーマに合わせロゴを制作することになりました。
と提案し、ZELOテーマに合わせロゴを制作することになりました。
ZELOロゴのラフスケッチ
ロゴの本来の意味は「図案化された文字列」です。
細かく言えばロゴ化した文字は「ロゴタイプ」となります。
最初はこの文字を図案化したスケッチを描き、ヒロさんに見ていただいています。
Zの下辺が流れているタイプと、ZELO全体が丸っこいタイプが、ヒロさんのお気に入りでした。
私としては下辺が流れているタイプ推しでした。
しかし、ここで過去ロゴを作っていたときにエンヤさん(仮名：モーションコミック記事を参照)に言われた言葉を思い出しました。
セッジくんさぁ～、デザインが文字に引っ張られすぎだよね。
もっとこう、イメージを抽出したものにできない？
もっとこう、イメージを抽出したものにできない？
エンヤさん(仮)はかなり周りを振り回すタイプの人ではありましたが、プロデュース能力は高い人でしたので、本質を突いたことを言う人でもありました。
ここで一旦文字からのデザインから離れ、マークを試作してみることにします。
聞けば「ZELO」は数字のゼロと熱意という意味のゼーロをかけているとのこと。
ということで「熱」を連想して抽出したマークを6つ作っています。
炎の強さと花のフンワリ感をもった6案目(一番右下)が「カッコカワイイ」ということで、ヒロさんのお気に入りとなりました。
6案目が決まり、これに丸いロゴタイプを組み合わせてillustratorで実制作してみることにします。
[Sponcer Link]
イラレでマークを作ろう！
炎と花のイメージのマークに、丸っとしたタイプを描き加えたものをスキャンして、illustratorに配置しました。
まずは曲線ツールで中央の炎を描きます。
中央の炎と左右の炎の間の余白は、すべて均等にしたかったので、ここでオブジェクト→パス→パスのオフセットを実行し、オフセット値を16pxと設定しました。
つづいて、左右両サイドの外側の曲線を描いておきます。
全てのオブジェクトを選択して、シェイプ形成ツールでオフセットでできた曲線と両サイドの曲線が交差した内側の部分をドラッグし、両サイドの炎を作り出しました。
※形状を作り出したあとに残る余分な線などは削除します。
これですべての塗りの色を黒にすればマーク部分は完成です。
イラレでロゴタイプを作ろう！
マークができたので、次はロゴタイプを作ります。
ソーシャルワーク系のサイトで提案されているロゴを見ていると、既存フォントをそのまま使用している例を見ることがあります。
私は既存フォントをそのままロゴとして利用することについて抵抗感があります。
それはフォントメーカーによっては「文書としての利用は可だけれども、ロゴとしては不可」といったことや、「ロゴとしても使用可だが、商標登録は不可」といった規約があるためです。
また、デザイン思考としては、ロゴタイプは対象を象徴したものであってほしいということもあり、ZELOのロゴタイプは自作することにしました。
最初は丸っこい形をしていたZELOロゴタイプでしたが、後ろに曲線の強い炎花があることを考え、直線的な印象を持つタイプに変更しています。
ではロゴタイプ制作過程を解説します。
まずは、サイズを22ｘ40px、間隔を20pxとした長方形を4つ描きガイド化しておきます。
この内側にペンツールで線幅8pxで、直線的に「ZELO」と描きました。
ここからディティールを調整していきます。
直線をオブジェクト→パス→パスのアウトラインで、図形に変換します。
このままだとシャープすぎるので図のようにマークした部分を選択し、オプションバーのコーナーで4pxにして角を丸めています。
また、ZLOは一体になっていますが、Eのみ中央の横棒が別になっているので、シェイプ形成ツールで一体化しています。
これでロゴタイプの形状ができあがりました。
文字のフチの太さ＝線幅を3px、角の形状はラウンド形状、線の位置を外側にして、塗り色は黒、線の色を白にすればZELOロゴマークの完成です。
最後に ZELO 3つのカラーパターンをご紹介
今回はGoogle Blogger新テーマ、ZELOロゴマークの制作過程について解説しました。
illustratorは今回のようなロゴデザインに特に強いグラフィックソフトです。
今回の記事を見たあなたがその一端を感じることができたとしたらうれしいです。
さて、ZELO公式ロゴとしての色は黒(に近いダークグレー)です。
しかしZELOロゴは「熱」をイメージしているため、実は黒の他に2つカラーパターンを用意しています。
せっかくの機会なので、ここで3つ並べてご紹介します。
公式の黒、熱を表したオレンジ、同じく熱を表したグラデーションをもつマルチカラー版となっています。
ダミー画像は黒のみ表示されますが、一応それ以外にも2つカラーパターンがあるということを知っていただければうれしいです。
そして、あなたがこの記事を読み、Bloggerというブログサービスについてご興味をもったようでしたら、以下の「初めてのBlogger」をテーマとした記事もご覧いただけますと幸いです。
最後までご覧いただきまして、ありがとうございました。
Google Bloggerの使い方
・無料ブログの作り方
・ブログ記事の作り方
・Bloggerブログのメリットとデメリット
・Bloggerを独自ドメイン化する方法
・爆速のテーマZELOを導入しました！
・ブログ記事の作り方
・Bloggerブログのメリットとデメリット
・Bloggerを独自ドメイン化する方法
・爆速のテーマZELOを導入しました！
イラレでロゴデザイン、楽しいですよ！
最後までご覧いただき、ありがとうございます！
ボクたちと一緒にイラレの事、もっと掘り下げてみませんか？！
下のイラレ講座まとめもよろしければ！
最後までご覧いただき、ありがとうございます！
ボクたちと一緒にイラレの事、もっと掘り下げてみませんか？！
下のイラレ講座まとめもよろしければ！
コメント