グラフィックデザイン

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

WordPressテーマ

WordPressテーマ「MAG(TCD036)」

スポンサードリンク

関連記事

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

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

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

  2. リファレンス

    inkscapeで画像のサイズにページサイズを合わせる方法

    inkscapeで標準的に用意されているページサイズはA4とかB5とか…

  3. リファレンス

    inkscape 星形・多角形ツールの基本操作をマスターしよう【映像あり】

    星形・多角形ツールの基本操作を紹介していきます。まずはデモ動画で全…

  4. GIMP

    PCを選ばず作業するためのUSBポータブルアプリ

    職場で使ったデータを自宅に持って帰って作業すると言う人にはもってこいの…

  5. 素材

    inkscapeの基本機能だけで矢印を描く方法

    今回はよく検索されている、inkscapeで矢印を作るための基本チュー…

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

    手作業は最小限で!inkscapeで「カラフルなドットパターン」の作り方【SVG/PNGサンプルあり…

    「ドットパターンを作る」って聞いて、難しく感じる人が多いような気がする…

コメント

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

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

CAPTCHA


スポンサードリンク

ピックアップ記事

おすすめの本

使用している素材

カテゴリー

 
  1. 素材

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

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

    読みやすい明朝体フリーフォント
  4. ブログ収益化

    無料レポートスタンドの「メルぞう・Xam」を120%使い倒す方法
  5. グラフィックデザイン

    フォトレタッチ・グラフィックデザインの無料ソフト「GIMP」(≒Photosho…
PAGE TOP