グラフィックデザイン

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. グラフィックデザイン

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  6. グラフィックパーツ

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

    この記事はキャプチャ画像だけでしたがアクセス数が多く人気があったので最…

コメント

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

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

CAPTCHA


WordPressテーマ「MAG(TCD036)」

スポンサードリンク

カテゴリー

ピックアップ記事

ロゴマルシェ - LogoMarche   ボタンマルシェ - ButtonMarche  
  1. 便利なツールの話

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

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

    無料レポートスタンドの「メルぞう・Xam」を120%使い倒す方法
  4. ブログの収益化

    報酬の受取に苦労してません?Amazon・楽天のアフィリエイトで効率的に報酬を受…
  5. ブログやサイトの作り方

    月額100円から使える「ロリポップレンタルサーバー」
PAGE TOP