グラフィックデザイン

inkscapeでIllustratorのモザイクオブジェクト機能を再現してロゴを作るチュートリアル

Adobe Illustratorにはモザイクオブジェクトという機能があり、背面にあるオブジェクトを●や■でトレースして、ドットで文字などを形作ることができます。

ここではIllustratorのモザイクオブジェクトと同じことをinkscapeで再現する方法を紹介します。

作成するもの

「inkscape」の文字をモザイクオブジェクトととして作成して、ちょっとしたロゴを作ります。

inkscape_モザイクロゴ

次の流れで作成していきます。

  1. 背面オブジェクトの作成(今回は文字)
  2. モザイクオブジェクトの単一オブジェクトを作成
  3. 背面オブジェクトを単一オブジェクトのタイルクローンでトレース
  4. 細かな整形と調整

アレンジによって色々なものを作れるので、試してみてください。

レイヤーの準備

背面オブジェクトとモザイクオブジェクトをそれぞれ別のレイヤーに作成した方が編集作業がしやすくなります。

そのために、まずレイヤーを準備します。

2015-08-12 17-08-21-222_inkscapeでillustratorのモザイクオブジェクト機能を再現するチュートリアル

「背面オブジェクト」レイヤーにはトレースされる文字オブジェクトを作成します。

「モザイクオブジェクト」レイヤーにはトレースしたあとのドットが作成されます。

背面オブジェクトの作成

背面にはトレースされる側のオブジェクトを作成します。

今回は「inkscape」という文字オブジェクトを使います。

レイヤーで「背面オブジェクト」を選択して、テキストツールで「inkscape」と入力して作成します。

2015-08-12 17-05-03-554_inkscapeでillustratorのモザイクオブジェクト機能を再現するチュートリアル

文字サイズはページに合わせてもいいですし、ロゴ画像の作成サイズに合わせてもOKです。

ここでは「48px」で作成しています。

モザイクオブジェクトの原型を作成

モザイクオブジェクトの元となる単一のドット(●)を作成します。

レイヤーから「モザイクオブジェクト」を選択しておきます。

2015-08-12 20-05-14-770_inkscapeでillustratorのモザイクオブジェクト機能を再現するチュートリアル

 

円形ツールF5_円形ツールを選択して適当な大きさの楕円を作成して、選択ツールF1_選択ツールで縦横の大きさを数値で指定すると、正円が出来上がります。

2015-08-12 20-02-01-048_inkscapeでillustratorのモザイクオブジェクト機能を再現するチュートリアル

ここでは縦横の大きさは、「3.5px × 3.5px」に指定しています。

この正円のフィルを「アンセット」に

2015-08-12 23-20-31-874_inkscapeでillustratorのモザイクオブジェクト機能を再現するチュートリアル

ストロークを「なし」にしておきます。

2015-08-12 23-20-39-321_inkscapeでillustratorのモザイクオブジェクト機能を再現するチュートリアル

これでモザイクの雛形の準備ができました。

タイルクローンの設定をする

タイルクローンのトレース機能を使うと、Illustratorのモザイクオブジェクトのような効果を生み出すことができます。

はじめにタイルクローンの設定をするので、ダイアログを開きます。

2016-06-13_19h01_46_inkscapeでillustratorのモザイクオブジェクト機能を再現するチュートリアル

対称化タブ

ダイアログが開くと「対称化」というタブが開いているので「P1:シンプル移動」になっていることを確認します。

2016-06-13_19h05_10_inkscapeでillustratorのモザイクオブジェクト機能を再現するチュートリアル

違っていたら「シンプル移動」に変更してください。

 

トレースするサイズの設定

次に、トレースする幅と高さを変えておきます。

2016-06-13_19h22_16_inkscapeでillustratorのモザイクオブジェクト機能を再現するチュートリアル

テキストオブジェクトがおさまるような大きさでトレースしなければいけません。

大きさの基準がわからないときは、選択ツールでテキストオブジェクトを選ぶと、ツールコントロールバーに幅と高さが表示されるので、それを参考にして入力してください。

2016-06-13_19h13_53_inkscapeでillustratorのモザイクオブジェクト機能を再現するチュートリアル

 

タイルの設定

タイルの設定は、同じオブジェクトをどのような規則で並べるか?を決めるものです。

初期状態であれば特に何もする必要はありません。

要点だけ確認すると以下のようになります。

「シフト」「拡大縮小」「回転」「ぼかしと不透明度」のタブで、行ごと列ごとの値をすべて「0%」、それぞれの指数をすべて「1」にして、チェックも全て外します。

2015-08-13 00-15-21-584_inkscapeでillustratorのモザイクオブジェクト機能を再現するチュートリアル

初期状態から変わっていなければ、この設定になっているので何もする必要はありません。

トレースしたときの色を設定

色の設定では、お好みの色を選んで下さい。

ここでは「0109ffff」を使用しています。

2015-08-13 00-16-28-445_inkscapeでillustratorのモザイクオブジェクト機能を再現するチュートリアル

トレースの設定

トレースするときは背面にあるオブジェクトの、何をトレースして、タイルクローンでどのように出力するかを設定します。

今回は背面のテキストをタイルの不透明度でトレースしていくので次の設定をします。

2015-08-13 00-28-47-839_inkscapeでillustratorのモザイクオブジェクト機能を再現するチュートリアル

描画から採取するものを「不透明度」、採取地の補正はいじらず、抽出値の適用対称を「不透明度」に設定します。

この状態で「作成」をクリックするとモザイクオブジェクトが出来上がります。

inkscape 2015-08-13 00-29-23-440

整形と調整

出来上がった状態では背景のテキストが重なっていて、よくわからないので背景オブジェクトのレイヤーを非表示にします。

2015-08-13 00-43-35-725_inkscapeでillustratorのモザイクオブジェクト機能を再現するチュートリアル

モザイクオブジェクトを拡大すると、透明に近いタイルがあるので、それらを消していきます。

 

消しゴムツールECtrl_消しゴムツールを選択して、ツールコントロールバーから触れたオブジェクトを削除a01_触れたオブジェクトを削除を選びます。

2015-08-13 01-42-55-165_inkscapeでillustratorのモザイクオブジェクト機能を再現するチュートリアル

透明に近いタイルを消しゴムで消していきます。

ある程度消したら、すべてのタイルを選択して、フィルの設定をします。

不透明度がバラバラなので、すべて100%に設定して、タイルをくっきりさせます。

inkscape 2015-08-13 02-02-17-636

inkscapeの選択ツールには色域選択が無いので、ドットの調整だけは手動になってしまいます。

最後に、背景色を矩形ツールで作成して、背面へ持ってくるとシンプルなロゴになります。

inkscape 2015-08-13 02-04-23-285

あとがき

illustratorに比べると簡単さでは劣るのですが、inkscapeでは細かい設定でいろいろなことができます。

今回はアナログ的な消しゴムの使い方が入っているので、ちょっと手間がかかってしまいました。

もっとスマートな方法が見つかったらまたシェアさせていただきます。

 

では今回はこの辺で。

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

tipLog

関連記事

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

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

    「ロゴ作成の勉強ってどうやってすればいのー?」と、よく自分でも考え…

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

    簡単にテキストレイアウトができるinkscapeの「テキストの流し込み」機能の使い方

    写真付きのパンフレットでよくあるテキストレイアウトには被写体を邪魔しな…

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

    Inkscapeを使ったわかりやすいフローチャートの作り方

    プログラミングの分野でよく使われているフローチャートですが、最近は業務…

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

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

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

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

    GIMPで秋の行楽・旅行バナーを作りました。

    秋の旅行をイメージしてGIMPでバナーを作成してみました。以下…

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

    GIMPのカラーハーフトーンでロゴ作成

    カラーハーフトーンとは、画像をドットで表現することです。GIM…

コメント

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

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

CAPTCHA


スポンサードリンク

スポンサードリンク

スポンサードリンク

カテゴリー

ピックアップ記事

関連コンテンツ

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

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

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

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

    月額100円から使える「ロリポップレンタルサーバー」
  5. グラフィックデザイン

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