チュートリアル

「とあるのロゴジェネレーター」を参考にinkscapeでロゴをリメイク

「ロゴ作成の勉強ってどうやってすればいのー?」

と、よく自分でも考えているのですが、やっぱり誰かが作ったロゴをまねして作るのが一番いい気がします。

すでに完成されたロゴを自分の手でリメイクすることで、デザインのレパートリーを増やしていくというイメージです。

そんなわけで、今回は「とあるのロゴジェネレーター」をもとにinkscapeでロゴ作成をしてみました。

手順とその技法をご紹介します。

完成形イメージ

このロゴはネット上でパロディを楽しむために作られた「とあるさくらのジェネレーター」というもので作成したものです。

元ネタは「とある魔術の禁書目録」というライトノベルを原作としたアニメのロゴです。

ジェネレーターだとバランスが崩れていますが、本家のロゴを見ると絶妙なバランスのもとで成り立っている気がします。

文字の配置が独特なんですが、それでいてバランスを崩していないあたりが良いですね。

このあたりを意識してinkscapeで作成してみます。

文字の配置とサイズ変更

ロゴ自体がほとんど文字で構成されているので、文字の配置とサイズ変更が作業の全般を占めます。

まずはテキストツールで基本の文字を全部打ち込みます。

2016-10-16_00h08_14_inkscape%e3%80%8c%e3%81%a8%e3%81%82%e3%82%8b%e3%81%ae%e3%83%ad%e3%82%b4%e3%82%b8%e3%82%a7%e3%83%8d%e3%83%ac%e3%83%bc%e3%82%bf%e3%83%bc%e3%80%8d%e3%81%ae%e5%86%8d%e7%8f%be%e3%83%ad

「とある魔術の禁書目録」ととりあえず打ち込んで進めていきます。

本家のロゴが明朝体なので、明朝体のフォントで打ち込みます。

テキストの下準備

打ち込んだテキストオブジェクトのままでは、1文字ずつの配置変えやサイズ変更ができないので、ちょっと下準備をします。

テキストのパス化

2016-10-16_00h44_55_inkscape%e3%80%8c%e3%81%a8%e3%81%82%e3%82%8b%e3%81%ae%e3%83%ad%e3%82%b4%e3%82%b8%e3%82%a7%e3%83%8d%e3%83%ac%e3%83%bc%e3%82%bf%e3%83%bc%e3%80%8d%e3%81%ae%e5%86%8d%e7%8f%be%e3%83%ad

テキストオブジェクトからパスへ変換すると・・・

2016-10-16_00h46_48_inkscape%e3%80%8c%e3%81%a8%e3%81%82%e3%82%8b%e3%81%ae%e3%83%ad%e3%82%b4%e3%82%b8%e3%82%a7%e3%83%8d%e3%83%ac%e3%83%bc%e3%82%bf%e3%83%bc%e3%80%8d%e3%81%ae%e5%86%8d%e7%8f%be%e3%83%ad

1文字ごとにパスに変換され、グループ化されます。

グループ化の解除

2016-10-16_00h58_04_inkscape%e3%80%8c%e3%81%a8%e3%81%82%e3%82%8b%e3%81%ae%e3%83%ad%e3%82%b4%e3%82%b8%e3%82%a7%e3%83%8d%e3%83%ac%e3%83%bc%e3%82%bf%e3%83%bc%e3%80%8d%e3%81%ae%e5%86%8d%e7%8f%be%e3%83%ad

グループ化を解除すると選択ツールで自由に配置・サイズを変えることができます。

2016-10-16_00h59_57_inkscape%e3%80%8c%e3%81%a8%e3%81%82%e3%82%8b%e3%81%ae%e3%83%ad%e3%82%b4%e3%82%b8%e3%82%a7%e3%83%8d%e3%83%ac%e3%83%bc%e3%82%bf%e3%83%bc%e3%80%8d%e3%81%ae%e5%86%8d%e7%8f%be%e3%83%ad

これで下準備完了!

配置を決めてサイズも一緒に調整しちゃいましょう

ここからは本家のロゴに見習って配置とサイズを変えていきます。

基本は選択ツールで文字の移動とサイズ変更をするだけです。

配置を決める

2016-10-16_01h08_52_inkscape%e3%80%8c%e3%81%a8%e3%81%82%e3%82%8b%e3%81%ae%e3%83%ad%e3%82%b4%e3%82%b8%e3%82%a7%e3%83%8d%e3%83%ac%e3%83%bc%e3%82%bf%e3%83%bc%e3%80%8d%e3%81%ae%e5%86%8d%e7%8f%be%e3%83%ad

元のロゴに近い位置までまずは移動していきます。

このあたりはカンでやっても大丈夫です。

きっちりしたいなら、ガイドを作って配置の調整

2016-10-16_01h20_16_inkscape%e3%80%8c%e3%81%a8%e3%81%82%e3%82%8b%e3%81%ae%e3%83%ad%e3%82%b4%e3%82%b8%e3%82%a7%e3%83%8d%e3%83%ac%e3%83%bc%e3%82%bf%e3%83%bc%e3%80%8d%e3%81%ae%e5%86%8d%e7%8f%be%e3%83%ad

枠外からクリックドラッグでガイド線を引くことができます。

2016-10-16_01h24_29_inkscape%e3%80%8c%e3%81%a8%e3%81%82%e3%82%8b%e3%81%ae%e3%83%ad%e3%82%b4%e3%82%b8%e3%82%a7%e3%83%8d%e3%83%ac%e3%83%bc%e3%82%bf%e3%83%bc%e3%80%8d%e3%81%ae%e5%86%8d%e7%8f%be%e3%83%ad

ガイドをダブルクリックするとページに対してきっちり真ん中を指定することもできます。

サイズを変えながら再配置していく

2016-10-16_01h35_30_inkscape%e3%80%8c%e3%81%a8%e3%81%82%e3%82%8b%e3%81%ae%e3%83%ad%e3%82%b4%e3%82%b8%e3%82%a7%e3%83%8d%e3%83%ac%e3%83%bc%e3%82%bf%e3%83%bc%e3%80%8d%e3%81%ae%e5%86%8d%e7%8f%be%e3%83%ad

サイズを変えながら位置を調整して、ロゴの形にしていきます・・・

フォントの崩れを防止したいので、なるべく縦横比は維持したままサイズ変更した方がいいです。

でも、たまにフォントを細長くしたり・・・

2016-10-16_01h48_29_inkscape%e3%80%8c%e3%81%a8%e3%81%82%e3%82%8b%e3%81%ae%e3%83%ad%e3%82%b4%e3%82%b8%e3%82%a7%e3%83%8d%e3%83%ac%e3%83%bc%e3%82%bf%e3%83%bc%e3%80%8d%e3%81%ae%e5%86%8d%e7%8f%be%e3%83%ad

こんなもんかな!

2016-10-16_01h57_19_inkscape%e3%80%8c%e3%81%a8%e3%81%82%e3%82%8b%e3%81%ae%e3%83%ad%e3%82%b4%e3%82%b8%e3%82%a7%e3%83%8d%e3%83%ac%e3%83%bc%e3%82%bf%e3%83%bc%e3%80%8d%e3%81%ae%e5%86%8d%e7%8f%be%e3%83%ad

という感じで配置は終了です。

「禁」の白抜き囲み文字を作る

このロゴの最大の特徴と言ってもいい部分を作っていきます。

矩形と文字を重ねる

2016-10-16_02h15_54_inkscape%e3%80%8c%e3%81%a8%e3%81%82%e3%82%8b%e3%81%ae%e3%83%ad%e3%82%b4%e3%82%b8%e3%82%a7%e3%83%8d%e3%83%ac%e3%83%bc%e3%82%bf%e3%83%bc%e3%80%8d%e3%81%ae%e5%86%8d%e7%8f%be%e3%83%ad

矩形は文字の後ろに来るように、最背面へ配置しておきます。

白抜きに変更

2016-10-16_02h22_41_inkscape%e3%80%8c%e3%81%a8%e3%81%82%e3%82%8b%e3%81%ae%e3%83%ad%e3%82%b4%e3%82%b8%e3%82%a7%e3%83%8d%e3%83%ac%e3%83%bc%e3%82%bf%e3%83%bc%e3%80%8d%e3%81%ae%e5%86%8d%e7%8f%be%e3%83%ad

文字と矩形をそれぞれ選んでフィルを設定すれば、一旦白抜きのイメージができます。

パスの差分で矩形と文字を1つのパスに

2016-10-16_02h27_06_inkscape%e3%80%8c%e3%81%a8%e3%81%82%e3%82%8b%e3%81%ae%e3%83%ad%e3%82%b4%e3%82%b8%e3%82%a7%e3%83%8d%e3%83%ac%e3%83%bc%e3%82%bf%e3%83%bc%e3%80%8d%e3%81%ae%e5%86%8d%e7%8f%be%e3%83%ad

文字と矩形をShiftキーを押しながら、両方とも選択状態にして差分を取ると、1つのパスになります。

これで「禁」の部分も完成しました!

ちょっと修正で「インデックス」の部分を追加しました

2016-10-16_02h50_45_inkscape%e3%80%8c%e3%81%a8%e3%81%82%e3%82%8b%e3%81%ae%e3%83%ad%e3%82%b4%e3%82%b8%e3%82%a7%e3%83%8d%e3%83%ac%e3%83%bc%e3%82%bf%e3%83%bc%e3%80%8d%e3%81%ae%e5%86%8d%e7%8f%be%e3%83%ad

グラデーションをかける

最後に全体のグラデーションをかけて完成になります。

全体のグラデーションをかけるために、まずは一つのパスに統合しなければいけません。

全部の文字を1つのパスへ統合

2016-10-16_02h58_48_inkscape%e3%80%8c%e3%81%a8%e3%81%82%e3%82%8b%e3%81%ae%e3%83%ad%e3%82%b4%e3%82%b8%e3%82%a7%e3%83%8d%e3%83%ac%e3%83%bc%e3%82%bf%e3%83%bc%e3%80%8d%e3%81%ae%e5%86%8d%e7%8f%be%e3%83%ad

文字を全て選択した状態で、パスの統合を実行します。

全体を1つのオブジェクトとして、グラデーションなどの操作ができるようになります。

フィルにグラデーションを設定する

2016-10-16_03h00_22_inkscape%e3%80%8c%e3%81%a8%e3%81%82%e3%82%8b%e3%81%ae%e3%83%ad%e3%82%b4%e3%82%b8%e3%82%a7%e3%83%8d%e3%83%ac%e3%83%bc%e3%82%bf%e3%83%bc%e3%80%8d%e3%81%ae%e5%86%8d%e7%8f%be%e3%83%ad

フィルにグラデーションを設定するとデフォルトのグラデーションが設定されます。

モノクロのグラデーションを編集して、とあるのロゴのような色味に変えていきます。

グラデーションの編集

2016-10-16_10h24_08_inkscape%e3%80%8c%e3%81%a8%e3%81%82%e3%82%8b%e3%81%ae%e3%83%ad%e3%82%b4%e3%82%b8%e3%82%a7%e3%83%8d%e3%83%ac%e3%83%bc%e3%82%bf%e3%83%bc%e3%80%8d%e3%81%ae%e5%86%8d%e7%8f%be%e3%83%ad

グラデーションツールに切り替えて、グラデーションのハンドルをクリックします。

クリックしたハンドルの色をフィルの設定から変更できます。

2016-10-16_11h09_32_inkscape%e3%80%8c%e3%81%a8%e3%81%82%e3%82%8b%e3%81%ae%e3%83%ad%e3%82%b4%e3%82%b8%e3%82%a7%e3%83%8d%e3%83%ac%e3%83%bc%e3%82%bf%e3%83%bc%e3%80%8d%e3%81%ae%e5%86%8d%e7%8f%be%e3%83%ad

反対側のハンドルも色を変更しておきます。

グラデーションの向きを変える

2016-10-16_11h13_38_inkscape%e3%80%8c%e3%81%a8%e3%81%82%e3%82%8b%e3%81%ae%e3%83%ad%e3%82%b4%e3%82%b8%e3%82%a7%e3%83%8d%e3%83%ac%e3%83%bc%e3%82%bf%e3%83%bc%e3%80%8d%e3%81%ae%e5%86%8d%e7%8f%be%e3%83%ad

マウスで動かして、右斜にグラデーションがかかるように調整します。

ハンドルを対称になるようにすると、淡い色の部分(HSL:127,255,108)が広くなってしまって読みづらくなります。

そこで、淡い色の部分が少なくなるように長めに伸ばしてあります。

完成!!!

inkscape%e3%80%8c%e3%81%a8%e3%81%82%e3%82%8b%e3%81%ae%e3%83%ad%e3%82%b4%e3%82%b8%e3%82%a7%e3%83%8d%e3%83%ac%e3%83%bc%e3%82%bf%e3%83%bc%e3%80%8d%e3%81%ae%e5%86%8d%e7%8f%be%e3%83%ad%e3%82%b4%e3%82%92

最後にエクスポートして完成!

お疲れ様でした。

あとがき

とあるのロゴをinkscapeで再現するために

  • パスの差分や統合など基本操作
  • ガイドの引き方
  • グラデーションのかけ方

この3つをサラーッと使ってみました。

本当に基本的なことばかりでしたが、これだけ単純なスキルでもロゴを作ることは難しくないですね。

グラデーションのかけ方はアイコン作成などでも使えるので、ぜひ覚えておくといいと思います。

では今回はこのあたりで。

使用したフォント素材

ここに収録されている

  • Arphic 明朝体 L
  • TYPE C4 ゴシック・ドゥ NEXUS 04

を使用しています。

 

記事が気に入ったら
tipLog を "いいね!"
Facebookで更新情報をお届け。

tipLog

WordPressテーマ

WordPressテーマ「MAG(TCD036)」

スポンサードリンク

関連記事

  1. 設定

    inkscapeにフォント専用フォルダを追加する方法

    inkscapeにはフォント用のフォルダを登録する機能がありませんが、…

  2. inkscape

    inkscapeでフローチャートを作る方法

    最近作り始めた資料でフローチャート様な、マインドマップの様なものを取り…

  3. チュートリアル

    PHPで配列と文字列の変換をデータベースに応用する方法

    データベース検索などを利用するときに、$_POSTや$_GETで受け取…

  4. チュートリアル

    PHPでデータベースから取得した配列を加工する方法

    データベースからデータをfetch関数などで取得すると、大体は2次元配…

  5. レイアウト

    デザインの中で「線」が果たす役割を考えてみよう

    1つのデザインの中で「線」がどんな役割をはたすのか?についてのお話です…

  6. inkscape

    レイアウトデザインに最適な無料ソフト「inkscape」(≒Illustrator)

    グラフィックデザインを勉強するには有料のソフトと専門の講座を受講するの…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


スポンサードリンク

ピックアップ記事

おすすめの本

使用している素材

カテゴリー

 
PAGE TOP