グラフィックデザイン

「とあるのロゴジェネレーター」を参考に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

関連記事

  1. グラフィックデザイン

    inkscapeで「冷えてます。」POPをつくってみたのでデータ配布します

    ちょっと仕事で使うことになったので試しにPOP作成をinkscapeで…

  2. グラフィックデザイン

    GIMPで木目に合わせてかすれた文字を表現する方法

    GIMPで木目に合わせて擦れたような文字を書く方法のチュートリアルです…

  3. グラフィックデザイン

    GIMPでトリミング画像に影をつけてサクッと立体感を生み出すチュートリアル

    写真から切抜きした画像単体では、立体感がなく物足りないような印象を受け…

  4. グラフィックデザイン

    無料素材を集めてコラージュを作るチュートリアル

    デザインを独学で学ぶとき、何をすればいいかわからないということも多ので…

  5. グラフィックデザイン

    自作?外注?その前にコレ!ブログのロゴデザインをするなら「Logaster」を使ってみて

    ブログやサイトのロゴを作るときって時間的・金銭的に結構なコストがかかり…

コメント

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

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

CAPTCHA


スポンサードリンク

スポンサードリンク

スポンサードリンク

カテゴリー

ピックアップ記事

関連コンテンツ

WordPressテーマ「MAG(TCD036)」   ロゴマルシェ - LogoMarche   ボタンマルシェ - ButtonMarche  
  1. ブログやサイトの作り方

    月額100円から使える「ロリポップレンタルサーバー」
  2. ブログやサイトの作り方

    TCDテーマ比較「CUBEY」と「BlogPress」どっちがいい?
  3. 特集

    無料でクオリティが高く、検索機能が利用できる画像素材サイト3選
  4. ブログの収益化

    報酬の受取に苦労してません?初心者でもAmazon・楽天のアフィリエイトで効率的…
  5. 特集

    inkscapeの使い方を集めたスキルアップのための日本語チュートリアル集
PAGE TOP