Inkscape で作る「缶バッジ作成用の絵」

缶バッジづくりの工程

「絵」を作る前に「絵」が何なのか。見てみよう。下の一番左の丸い紙が「絵」です。本当はなんて呼ぶんだろう?分からないので「絵」でいきます。この絵がマシンで加工されると一番右のバッジになります。

  1. バッジ用の絵を作って丸く切り出しておく
  2. バッジマシンに金具、絵、フィルムの順番にセットする
  3. レバーをギューッとやって表面をプレス
  4. 裏面(Zピンがついてる)の金具をセットしてまたギューっとやる
  5. 完成

絵を作ってみよう

缶バッジ用の絵は要は直径53mmの紙に直径44mmの絵を用意すればいいだけなので、手描きでも写真でも雑誌の切り抜きでもパソコンで作って印刷したものでも何でもいいわけなんですが、手軽にデザインできるパソコンで作ってみます。何で作ればいいかといえば、有名所では Adobe の Illustrator が定番でしょうが、いかんせん高価なソフトの上、実行できるプラットホームが限られるし、たった50円の缶バッジのためにそんな大層なソフトを使う必要ないので、オープンソースの Inkscape を使うことにします。と書いてしまっては Inkscape が只々金のかからないソフトのように聞こえてしまうかもしれません。いえいえ、大概のことは Inkscape でできます。なかなか Illustrator じゃないとダメだ!ってことはないです。でも Illustrator にある合成フォントの機能は Inkscape にもあって欲しいなぁ。無くても支障はないけど。

このチュートリアルは多くの人が使ってるであろう Windows 環境で書きます。が、Inkscape は MacOS 版もリリースされているのでおそらく同様にできると思います。Linux、FreeBSD、… もちろんいけます。

Inkscape インストール

省略

インストール用のパッケージはInkscape ホームページにあります。

※Windows 32bit版の場合最新バイナリでは不具合があります。0.92.1 をおすすめします。

フォントのインストール

文字を使わない場合はここはスキップしてかまいません。 インターネット上にたくさんのフリーフォントがあります。ダウンロード後、アーカイブされているものは解凍してフォントファイル(*.ttf *.ttc *.otf など)を右クリックして[インストール]をクリック。ちなみにフォントファイルをダブルクリックすると印字サンプルが表示されます。また、Windows のシステムディレクトリにある Fonts ディレクトリにフォントファイルをドラッグ&ドロップしてもインストールできます。有償のフォントもありますので法に触れないようにご注意ください。詳しくはフォント配布元のライセンス条項をご確認ください。

Inkscape で編集

Inkscape 起動

初回起動させるときは、内部的にフォント関係の情報を収集・データ作成を行うので、かなり遅いです。起動のダブルクリックを失敗したかなと感じますが、ハードディスクのLEDを確認してくださ。ガリガリやってるはずです。二回目以降はそれなりの速さで起動できます。この後、フォントを追加でインストールするたびに再構築が必要になるのでまた待つことになります。Linux版では遅くなりません。ちなみに画像編集ソフトGIMPも同様な振る舞いをします。

テンプレートの読み込み

この文化祭用にテンプレートを用意しました。

ダウンロードしてテンプレートファイルをダブルクリックで Inkscape を起動するか、素で Inkscape を起動してメニューの [ファイル] から [開く] でテンプレートファイルを開いて下さい。 左上にカエルのバッジがある四角(紙面)が表示されます。テンプレートは印刷しやすいように一枚の A4 用紙で6個のバッジを作れるようにしています。Inkscape の右下に〇〇%と書いてる所を右クリックすると今表示されている用紙のズームを指定できます。見やすい・作業しやすい大きさにズームして使います。

「ページ」「描画」「選択範囲」というのもズームの中にあります。説明するよりもやってみれば分かるので、とりあえず選択してみてください。これらは便利なのでよく使います。まずは「ページ」を選択すると、ページ全体が見られるサイズにズームされます。それから、バッジ1個分をドラックして選択状態にしてズームを「選択範囲」にしてみてください。選択したバッジ絵が拡大されて、一つ一つのデザインに集中できる大きさにズームされます。「描画」は紙面外にも置いたオブジェクトすべてを把握するのに便利です。どんな紙のサイズで作業するかは、メニューの [ファイル] から [ドキュメントのプロパティ] を選択することで確認・変更ができます。グリッドの設定(必要であれば)もそこでできます。

それでは、サンプルにある KERO-KERO WORLD CUP 2019 カエルバッジを作っていきましょう。

カエル画像の取り込み

カエルの画像は、もう毎日どこかで目にする「いらすとや」から拝借しました。「いらすとや」からダウンロードしたファイルを Inkscape へドラッグ&ドロップします。「png ビットマップ画像のインポート」というダイアログが表示されます。問答無料で [OK] でいいです。でっかく表示されるはずなのでズームを「描画」にして全体を表示して、カエル画像をバッジにあう適当なサイズまで縮小します。カエル画像は選択状態になっています。

画像の周りにある両矢印マークを Ctrl キーを押しながらドラッグして適当なサイズに縮小します。コントロールキーを押しながらだと画像の縦横比が崩れないです。ときどきチラシで縦横比が変になった画像や文字があります。みっともないのでやめたほうがいいです。ちなみに選択状態は二つあって今は拡大縮小モード、選択状態でオブジェクト(この場合画像)をもう一度クリックすると回転モードになります。矢印の形で分かります。モードを変えたければもう一度オブジェクトをクリックすればいいです。

ザイズの変更ができれば、画像をドラックしてバッジの円の中に入れてみましょう。ここでもザイズの調整をしてください。破線内がバッジになりますが、バッジの端の方は曲面になっているので若干小さめにするのがよいのではないでしょうか。

ここで、メニューの[オブジェクト]から[整列と配置]をクリックしておいて下さい。画面右ペインに [選択と配置] が追加されるはずです。

バッジの破線の円をクリックして選択状態にして、Shift キーを押しながらカエル画像をクリックして、円と画像の両方が選択状態になるようにします。[選択と配置] ペインの基準を「最初の選択部分」にして「中心を垂直軸に合わせる」と「水平軸の中心に揃える」をクリックすると、円の中心にカエルが来ます。

カエル画像の大きさを変えながら上の動作を繰り返していい感じのサイズと配置にしてください。

ときに自動スナップが邪魔になることがあります。そういうときは一時的にスナップを無効化します。いろんなスナップの仕方があります。それはまた別途他のサイトで勉強してください。

文字を用意する

文字列「KERO-KERO WORLD CUP 2019」を作ります。まずはツールボックスからテキストツールを選びます

カーソルが「+A」に変わります。キャンバスの適当な場所でクリックして文字入力モードにします。「KERO…」と上の文字列を打ち込みます。

文字を流し込む場所を作る

バッジの内側の破線を選択します。この破線内がバッジになります。バッジの周囲はカーブしているので文字が歪まないように破線のさらに内側に文字を配置しましょう。ここでメニューの [編集] から [複製] (ショートカットは Ctrl-D)を選びます。新しくまったく同じ破線が生成され、まったく同じ場所に重なって配置されます。

このままメニューの [パス] から [インセット] を選択します。

破線の円が 44mm の破線の内側にできました。先程作った複製を小さくしたのです。どれくらい小さくなるかは、メニューの [編集] から [Inkscape の設定] を選んで設定画面の [振る舞い] の [変化量] で決めることができます。

文字を円周上に列べる

上の状態を保ちながら、Shift キーを押しながら先程入力した文字列をクリックして両方が選択された状態にします。

そこでメニューの [テキスト] から [テキストをパス上に配置] を選択します。

文字の調整

まずはフォントを選びましょう。メニューの [テキスト] から [テキストとフォント] を選びます。画面右に [テキストとフォント] ペインが表示されます。先程の文字列がまだ選択状態になっているはずなので、その状態でペインの中のフォントを選びます。ここでは Cabin を使ってみます。※ Cabin は Windows 非標準フォントです。予めインストールしておきました。

フォント名をクリックして選択状態にして [Apply] ボタンをクリックして適用します。フォントのスタイルは Bold に、サイズは10ptにしました。ときどき^H^Hよく [Apply] ボタンが無効化されちゃいます。そんなときは文字列のアラインボタンなどを押すと有効化されます。

次は文字の色を変えてみます。メニューの [オブジェクト] から [フィル/ストローク] を選びます。画面右に [フィル/ストローク] ペインが表示されます。

フォントの色は [フィル] で設定します。ここでは自由度の高い色の設定ができますが、そんなに凝らないよ…という場合は画面下のリボンから色を選ぶことができます。

文字列が選択された状態にして色をクリックするだけです。サンプル作成なので簡単にリボンの中から濃いめの緑にしました。

デフォルトの色リボン以外にもリボンがあります。リボンのさらに右にある [◀] をクリックするといろいろ出てきます。

こういうので使う色を限定させると、とっちらかったやたらめったカラフルなものにしないことができます。

さて、このままでは文字列が左に偏ったままです。内側の円を2回クリックして回転モードにして回転させます。このとき水平ガイドを使うとちょうどよい所に落ちつけやすいです。間違ってダブルクリックするとパスの編集モードになってしまします。もしなってしまったら、ツールボックスから選択ツールをクリックしてください。

水平ガイドは画面上のルーラーをクリックしてドラッグすると生成できます。垂直ガイドは左のルーラーからです。ガイドをダブルクリックするとガイドの詳細を調整できます。

お掃除

さて概ねバッジ用の絵はできました。しかしまだ印刷されたくないものが残っています。

文字列を配置するだけのために作った破線の円が選択されているはずです。選択されていなければマウスでクリックして選択状態にしてください。そのまま [フィル/ストローク] ペインを開いて [ストロークの塗り] タブを選択します。

現状では塗りつぶされた四角が選択されています。この横のバッテン [×] をクリックしてください。これで破線の円が見え(印刷され)なくなります。オブジェクトとしては残ってるので後から復活させることはできます。同様に 44mm の破線の円も見えなくしてください。文字列の回転調整用に作ったガイドは特に害はありませんが、不要なのでマウスでドラッグしてルーラーまで持ってい行って消しましょう。

ケロケロ!(完成!)

保存

できあがったら、svg 形式と印刷用に pdf 形式で保存しましょう。メニューの [ファイル] から [名前をつけて保存] を選択します。適当なファイル名をつけて保存します。次にメニューの [ファイル] から [コピーを保存] を選択します。

ファイルの種類は *.pdf を選び [保存] ボタンを押します。

PDFの作り方を指定するダイアログが表示されます。フォントはパスにしておいたほうがいいでしょう。今回はラスタライズするようなエフェクトは使ってないので関係ないです。[OK] ボタンを押します。これで完了です。

印刷

出来上がった PDF ファイルをプリンタで印刷したり、USBメモリに保存してコンビニのカラーレーザープリンタで印刷できます。印刷時に縮小や拡大は絶対にしないでください。紙の厚さは 0.07mm~0.15mm がよいようです。印刷ができたら丸く切り抜いてバッジ加工を楽しみに待っていてください。

さらに勉強するには

書籍やネット上の Inkscape の情報は少ないです。バージョンが古い情報ばかりです。もっとメジャーになればこれも解消されるかもしれません。とりあえず基本的に機能は変わらないのでそれらの情報も十分に役に立ちます。

おまけ

貼り付ける画像が大きくて 44mm の破線円が隠れてしまった

オブジェクトを前面や背面へ移動する機能を使って隠れてしまった破線円を画像の前面に移動させます。またはオブジェクトを破線円の背面に移動させます。一回の移動で破線円が見えるようにならなければ何回も移動させます。

53mm の円も同様に移動できます。

貼り付ける画像と 44mm の破線円の色が似ていてよく見えない

貼り付けた画像より破線円が前面にあるのに色が似かよって見えないときは破線円の色を変更しましょう。破線円を選択状態にして[フィル/ストローク]ペインでストロークの色を決めるか、色リボンを右クリックして[ストロークに設定]をクリックします。

文字間の幅が狭い

文字の間隔は調節できます。調節する文字列をダブルクリックして編集できる状態にします。

画面の上に文字間を調整できるのが表示されます。

この1番左のAAが並んでるのが文字列全体の間隔を調節するところです。プラスで文字間隔が広がって、マイナスで狭まります。左から3番目のA|Aはカーソルのあるところの間隔を調整できます。

最後に

文化祭ではいろんなオリジナル缶バッジを作ってみて下さい。それから、くれぐれも使う素材のライセンスにはご注意下さい。


このドキュメントは第33回西部コミセン文化祭用に書きました。現在、西部コミセンのホームページは運用の方法について長く検討しているところもあって、イベント後は削除・移動されることがあります。

<< 古い記事「」 「」新しい記事 >>