Vectornator使い方大全集

Vectornator’s Tips

ゆるいイラストやWEBサイト制作・保守などでこれまでに対応させていただいたお仕事をご紹介します。

基本編

MacのVectornatorに外部のカスタムフォントを追加する方法

イラストレーターのハセガワ(@h_hasegawa8)です。 MacのVectornatorに外部のカスタムフォントを追加したいなと思い、過去に自分で書いたVectornatorに外部のカスタムフォントを追加する方法の記事を見たところ、どうやらiPadやiPhone専用の方法だったようではMacのVectornatorには追加できないようでした。 そこで、MacのVectornatorに外部のカスタムフォントを追加する方法をご紹介します。...

Vetornatorで破線のパスを描く方法

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorで破線のパスを描く方法をご紹介します。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorで破線のパスを描く方法 Vectornatorで破線のパスを描きたいときは、スタイルタブの「線」よりその設定を行います。 破線にしたいパスを選択して、スタイルタブの「線」スイッチをオンにします。 スタイルタブの「線」スイッチをオンにしたらストロークの種類を普通にします。...

Vectornatorでテキストボックスをテキストにぴったり合わせる方法

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorでテキストボックスをテキストにぴったり合わせる方法をご紹介します。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorでテキストボックスをテキストにぴったり合わせる方法 対象のテキストボックスを選択した状態で、スタイルタブの「境界を文字サイズに合わせる」をタップします。 タップすると、テキストを囲むバウンディングボックスがそのテキストにぴったり合うように調整されます。...

Vectornatorでパスの途中にアンカーポイントを追加する方法

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorは、iPadやMac、iPhoneなどのApple製品向けに開発されているAdobe illustratorのようにベジェ曲線でデザインやイラストを描くことができるソフトウェアです。 ベジェ曲線でデザインやイラストを描くのは慣れるまで難しく感じますが、その操作感を理解できれば制作の幅が広がると思います。 そこで今回は、Vectornatorでパスの途中にアンカーポイントを追加する方法をご紹介します。...

Vectornatorでアートボードを追加/複製/削除する方法

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorでは、1つのドキュメントで複数のアートボードをつくることができます。 それによりドキュメントを切り替えることなく異なる別々の作業を行うことができます。 Vectornatorでアートボードの追加や複製、削除をするときの操作感は、レイヤーの操作と似ています。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorでアートボードを追加/複製/削除する方法...

Vectornatorで編集途中のアートボードのサイズを変更する方法

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorで編集中ドキュメントのアートボードのサイズを変更する方法をご紹介します。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorで編集途中のアートボードのサイズを変更する方法 Vectornatorでは、次の3つの方法で編集中ドキュメントのアートボードのサイズを変更することができます。...

Vectornatorでグリッドを設定する方法

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorには次の2つのグリッドが用意されいます。 垂直方向のグリッドアイソメグリッド 垂直方向のグリッドは正方形をベースにした格子状のグリッドで、アイソメグリッドは三角形をベースにしたグリッドです。 今回はその両方の設定方法や使い方をご紹介します。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorでグリッドを設定する方法...

Vectornatorのスポイトでオブジェクト間で色をコピーする方法

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorには「スポイト」というツールがあり、これを使うとオブジェクトに対してキャンバス上の好きな色をコピーすることができます。 今回はその「スポイト」で色をコピーする方法をご紹介します。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorのスポイトで、オブジェクト間で色をコピーする方法 Vectornatorのスポイトは、次のいずれかのメニューから使うことができます。...

Vectornaotrでスナップを設定する方法と5つの効き方を紹介

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornaotrでスナップを設定する方法とその効き方についてご紹介します。 https://h-hasegawa8.com/introduction-vectornator/ Vectornaotrでスナップを設定する方法と5つの効き方を紹介 Vectornaotrでスナップの設定を有効化するには、次のいずれかの画面から行います。 クイック設定メニュー作業面の環境設定メニュー そしてVectornaotrのスナップには次の5つの種類があります。...

Vectornatorで筆圧感知を設定する方法をイラストレーターが解説

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorで筆圧感知を設定できるのはブラシツールのみです。 今回は、ブラシツールで筆圧感知を設定する方法とそのカスタマイズをご紹介します。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorで筆圧感知を設定する方法をイラストレーターが解説 本題に入る前にブラシツールについて簡単にご紹介します。 ブラシツールは、フリーハンドでベクターパスを描くことができるツールです。...

VectornatorとAdobe illustratorの互換性4選

イラストレーターのハセガワ(@h_hasegawa8)です。 今回は、VectornatorはAdobe illustratorとどのような互換性があるのかについてご紹介したいと思います。 https://h-hasegawa8.com/introduction-vectornator/ VectornatorとAdobe illustratorの互換性4選 VectornaotrはAppleデバイス向けにリリースされている無料のベクターグラフィックデザイン・イラストレーションソフトウェアです。...

Vectornatorでオブジェクトや文字の縁取りを行う方法2選

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorでオブジェクトや文字の縁取りを行う方法をご紹介します。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorでオブジェクトや文字の縁取りを行う方法2選 Vectornatorでオブジェクトや文字の縁取りを行う場合、主に次の2つの方法が有効です。 対象に「線」のスタイルを適用して縁取りする背面に縁取り用のオブジェクト/文字を配置する それぞれ詳しくご説明します。...

Vectornatorできれいな直線を描く方法2選

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorできれいな直線を描く場合は、主に次の2つの方法が有効です。 ペンツールで直線を描く図形ツールで直線を描く 具体的な描き方をご紹介します。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorできれいな直線を描く方法2選 https://h-hasegawa8.com/application/how-to-vectornator/ ペンツールで直線を描く...

Vectornatorでオブジェクトを複製(コピー)する方法3選

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorでは、オブジェクトを複製(コピー)する方法として次の3つの機能が用意されています。 https://h-hasegawa8.com/application/duplicate/ それぞれショートカットキーも用意されているので、それ含めて詳しくご紹介します。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorでオブジェクトを複製(コピー)する方法3選...

Vectornatorで直前の動作を取り消し戻る・戻した動作をやり直す方法

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorで直前の動作を取り消し戻る・戻した動作をやり直す方法をご紹介します。 また、これらの動作履歴を最適化することも可能なようなので、それも一緒にご紹介します。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorで直前の動作を取り消し戻る・戻した動作をやり直す方法 Vectornatorで直前の動作を取り消し戻る・戻した動作をやり直すには、それぞれ2つの方法があります。...

Vectornatorでオブジェクトを等間隔に配置する方法

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorでオブジェクトを等間隔に配置する方法をご紹介します。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorでオブジェクトを等間隔に配置する方法 Vectornatorでオブジェクトを等間隔に配置するときは、アレンジタブにある次の機能を使うことで簡単に実現することができます 整列(Alignment:アライメント)分散(Distribute:ディストリビュート)...

Vectornatorで画像のdpi(解像度)を変更する3つの方法

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorで画像のdpi(解像度)を変更する3つの方法をご紹介します。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorで画像のdpi(解像度)を変更する3つの方法 Vectornatorではdpi(解像度)の変更を次の3つのタイミングで行うことができます。 ドキュメントを新規作成するときドキュメント編集中ドキュメントを書き出すとき 順番にご紹介します。...

Vectornatorでオブジェクトにぼかした影をつくる方法

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorでは「影」という機能があり、これを使うことでオブジェクトに対して簡単に影をつくることができます。 この「影」機能は細かな設定がいくつかあり、その中の1つに「ぼかし」があります。 そこで今回は、その「ぼかし」を使ってオブジェクトにぼかした影を作る方法をご紹介します。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorでオブジェクトにぼかした影をつくる方法...

Vectornatorでパスの角を丸く/鋭角にする方法

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorでパスの角を丸めたり尖らせたりする方法をご紹介します。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorでパスの角を丸く/鋭角にする方法 スタイルタブの線セクションの中にある「①ここ」でパスの形を角丸を含む3種類の中から変えることができます。 実際にやっていきます。 Vectornatorとはベクターグラフィックのデザインに必要な機能を揃えた無料のソフトウェア...

Vectornatorで線やオブジェクトレイヤーの順番や前面/背面を変更する方法

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorで線やオブジェクトレイヤーの順番や前面/背面を変更する方法をご紹介します。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorで線やオブジェクトレイヤーの順番や前面/背面を変更する方法 Vectornatorで線やオブジェクトレイヤーの順番や前面/背面を変更するには次のいずれかの方法があります。...

Vectornatorで線やオブジェクトをグループ化するとレイヤー結合にもなる

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorで線やオブジェクトをグループ化して、レイヤーを結合する方法をご紹介します。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorで線やオブジェクトをグループ化するとレイヤー結合にもなる Vectornatorには「レイヤー結合」という機能はありません。 ですが、線やオブジェクトをグループ化することで、結果的に「レイヤー結合」した状態にすることができます。...

Vectornatorのブラシツールの使い方を現役イラストレーターが解説

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorのブラシツールの使い方をご紹介します。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorのブラシツールの使い方を現役イラストレーターが解説 Vectornatorにはいろいろなツールがありますが、その中でもブラシツールは、直感的にストロークを描くことができるツールの1つです。 ブラシツールのストロークはベクターパスなので、あとからパスやノードの編集ができます。...

Vectornatorに外部のカスタムフォントを追加する方法

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorで外部のカストムフォントを追加する方法をご紹介します。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorに外部のカスタムフォントを追加する方法 Vectornatorで外部のカストムフォントを使うときは次の流れでそのフォントをiPad(やiPhone、Mac)にインストールします。...

Vectornatorの反転。オブジェクトを上下左右に反転する方法

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorでオブジェクトを左右反転、上下反転させる方法をご紹介します。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorの反転。オブジェクトを上下左右に反転する方法 結論から言うと、「①インスペクターバー」の「②アレンジタブ」にある「③反転」でオブジェクトを上下左右に反転させることができます。 実際に使ってみます。...

Vectornatorの使い方。できることは?iPadで無料版ai?

イラストレーターのハセガワ(@h_hasegawa8)です。 僕がイラストを描くのによく使っているVectornatorというアプリについて次の観点でご紹介します。 VectornatorはどういうアプリなのかVectornatorで何ができるのか Vectornatorは多機能です。 そのため、2つ目の「Vectornatorで何ができるのか」では、僕が実際によく使う機能やこりゃスゲェ!と思った機能に絞ってご紹介します。 Vectornatorが気になっている方は参考にしていただければともいます。...

Vectornatorのはさみツールでベクターオブジェクトを分割する【現役イラストレーター解説】

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorのはさみツールの使い方をご紹介します。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorのはさみツールでベクターオブジェクトを分割する【現役イラストレーター解説】 Vectornatorのはさみツールは、ベクターのオブジェクトやパスを分割するのに使用します。 「①ツールバー」にある「②はさみのアイコン」をタップすることで使えるようになります。...

Vectornatorのグラデーションを現役イラストレーターが解説

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorのグラデーション機能をご紹介します。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorのグラデーションを現役イラストレーターが解説 Vectornatorのグラデーションには、「①線形のグラデーション」と「②放射状のグラデーション」の2種類があります。 線形のグラデーションは、オブジェクトの両端に2つの異なる色を設定し、それが中心に来るほど混ざり合うグラデーションです。...

Vectornatorのブーリアン(パスファインダー)を現役イラストレーターが解説

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorのブーリアン機能をご紹介します。 Vectornatorのブーリアンは、Adobe Illustratorでいうところのパスファインダーにあたります。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorのブーリアン(パスファインダー)を現役イラストレーターが解説...

Vectornatorの消しゴムツールを現役イラストレーターが解説

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorの消しゴムツールをご紹介します。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorの消しゴムツールを現役イラストレーターが解説 Vectornatorにおける消しゴムツールは、ドキュメントからベクターのオブジェクトを削除するためのツールです。 ベクター以外のオブジェクト、例えばテキストオブジェクトやインポートした画像などのオブジェクトは消しゴムツールで消すことはできません。...

【完全版】Vectornatorのインポート(読み込み)機能を現役イラストレーターが解説

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorのインポート機能についてご紹介します。 https://h-hasegawa8.com/introduction-vectornator/ 【完全版】Vectornatorのインポート(読み込み)機能を現役イラストレーターが解説 Vectornatorでインポートを行うことができる画面と、その対象となる素材が次の通りです。 画面 素材のインポートもと ギャラリー ファイル カメラロール アナログ素材(カメラでスキャン) Figma...

Vectornatorでクリッピングマスクをやる方法【現役イラストレーター解説】

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorでクリッピングマスクをやる方法を解説します。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorでクリッピングマスクをやる方法【現役イラストレーター解説】 結論から言うと、Vectornatorでは「①インスペクターバー」にある「②パスタブ」の「③マスク」からクリッピングマスクを行うことができます。 「④マスク解除」で1度適用したマスクを解除することもできます。...

Vectornatorでパスやテキストをアウトライン化する方法【現役イラストレーター解説】

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorでパスやテキストをアウトライン化する方法を解説します。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorでパスやテキストをアウトライン化する方法【現役イラストレーター解説】 結論から言うと、パスをアウトライン化は「①インスペクターバー」にある「②パスタブ」の「③アウトライン」から行うことができます。...

Vectornatorで背景を透過して書き出し・保存する方法【現役イラストレーター解説】

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorで背景を透過して書き出し・保存する方法を解説します。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorとはベクターグラフィックのデザインに必要な機能を揃えた無料のソフトウェア Vectornatorとは、ベクターグラフィックのデザインに必要な機能を揃えた無料のソフトウェアです。 Vectornatorだけで、デザインやイラストレーションなど幅広く作業することができます。...

Vectornatorのトレースのやり方2選【現役イラストレーター解説】

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorでトレースを行う方法をご紹介します。 方法は次の2通りです。 ペンツールを使って手動でトレースオートトレース機能を使って自動でトレース それぞれの詳しいやり方を見ていきますが、本題に入る前にVectornatorがどういうものなのかご説明します。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorとはベクターグラフィックのデザインに必要な機能を揃えた無料のソフトウェア...

[塗りつぶし5選] Vectornatorの塗りつぶしを現役イラストレーターがツール別に解説。 「バケツツール」はない?

イラストレーターのハセガワ(@h_hasegawa8)です。 僕はイラストを描くのにVectornatorを使用しています。 Vectornator唯一の欠点として、公式のドキュメントが英語しかありません。 そのため、使い方がいまいちわからないという人も多いのではないでしょうか。 今回は「Vectornatorで塗りつぶしを行う方法5選」と題し、4つはツール別に、1つは僕がよくやるオリジナルの方法をまとめたいと思います。 https://h-hasegawa8.com/introduction-vectornator/...

応用編

Vectornatorで星が輝く夜空をつくる方法

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorで星が輝く夜空をつくる方法をご紹介します。 星が輝く夜空をつくる方法以外にもさまざまVectornatorの使い方をご紹介しているので、よろしければ下記もあわせてご覧ください。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorで星が輝く夜空をつくる方法 今回ご紹介するVectornatorで星が輝く夜空をつくる方法は、次の流れで作業を行います。...

Vectornatorで分断・分割されたデザインの文字を描く方法

イラストレーターのハセガワ(@h_hasegawa8)です。 ロゴやバナーなど、デザインのワンポイントとして分断されたデザインの文字は使い勝手が良いですよね。 そこで、Vectornatorで分断されたデザインの文字を描く方法をご紹介します。 分断されたデザインの文字を描く方法以外にもさまざまVectornatorの使い方をご紹介しているので、よろしければ下記もあわせてご覧ください。 https://h-hasegawa8.com/introduction-vectornator/...

Vectornaotrで波打つように変形したデザインの文字を描く方法

イラストレーターのハセガワ(@h_hasegawa8)です。 ロゴやバナーなどのデザインのワンポイントとして、波打つように変形したデザインの文字は使い勝手が良いですよね。 今回は、Vectornaotrで波打つように変形したデザインの文字を描く方法をご紹介します。 波打つように変形したデザインの文字を描く方法以外にもさまざまVectornatorの使い方をご紹介しているので、よろしければ下記もあわせてご覧ください。 https://h-hasegawa8.com/introduction-vectornator/...

Vectornatorのブラシツールで手書き風のイラストを描く方法

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorのようなベジェ曲線を使うベクターグラフィックソフトウェアの場合、デザインやフラットなイラストを描くことが多いかと思います。 しかし、そのようなソフトウェアでも手書き風のイラストを描くことができます。 そこで今回は、Vectornatorのブラシツールで手書き風のイラストを描く方法をご紹介します。 https://h-hasegawa8.com/application/brush-tool/...

Vectornatorで文字に蛍光ペンで描いたような手書き風ラインを引く方法

イラストレーターのハセガワ(@h_hasegawa8)です。 ロゴやバナーなどデザインを考えていると、「ここの文字強調したいな」なんて思うことありますよね。 そんなとき、蛍光ペンで引いたような手書き風ラインを入れるとバランスを崩すことなく文字の強調ができるのでとても便利です。 今回は、Vectornatorで文字に蛍光ペンで引いたような手書き風ラインを入れる方法をご紹介します。 https://h-hasegawa8.com/introduction-vectornator/...

Vectornatorでグリッチノイズでデジタル風加工がされた文字を描く方法

イラストレーターのハセガワ(@h_hasegawa8)です。 今回はVectornatorで次のようなグリッチノイズでデジタル風な加工がされた文字を描く方法をご紹介します。 ノイズ加工を行うと一気に近未来感が出て、とてもかっこいい雰囲気に仕上がります。 ぜひ参考にしていただければと思います。 https://h-hasegawa8.com/introduction-vectornator/ https://h-hasegawa8.com/application/luminous_characters/...

Vectornatorでギザギザや緩やかな波線のパスを描く方法

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorでロゴやバナーを作っていると、デザインのワンポイントとしてギザギザや緩やかな波線のパスを描くなんてことがあるかと思います。 今回はVectornatorギザギザや緩やかな波線のパスをきれいに描く方法をご紹介します。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorでギザギザや緩やかな波線のパスを描く方法...

Vectornatorのブラシツールでもやもやした煙や霧を描く方法

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorのブラシツールはフリーハンドで自由な幅のパスを描くことができるツールです。 ブラシツールで描くパスのストロークは基本的にくっきりしたものですが、すこし設定を加えるだけで煙や霧のようなもやもやした線を描くことができます。 そこで今回は、Vectornatorのブラシツールでもやもやした煙や霧を描く方法をご紹介します。 https://h-hasegawa8.com/introduction-vectornator/...

Vectornatorでかすれ(グランジ)加工されたデザインの文字を描く方法

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorでロゴやバナーを作っていると、デザインのポイントとして文字にかすれ(グランジ)加工を施したいなんてことがあるかと思います。 そこで今回は、Vectornatorでかすれ(グランジ)加工されたデザインの文字を描く方法をご紹介します。 かすれ(グランジ)加工されたデザインの文字を描く方法以外にもさまざまVectornatorの使い方をご紹介しているので、よろしければ下記もあわせてご覧ください。...

Vectornatorでネオンのように発光している文字を描く方法

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorでネオンのように発光している文字を描く方法をご紹介します。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorでネオンのように発光している文字を描く方法 Vectornatorでネオンのように発光している文字を描く場合は、次のような流れで作業を行います。 背景として黒塗りのオブジェクトを描く発光させたい文字をテキストツールで書く文字に発光のエフェクトをつける...

Vectornatorでギンガムチェック柄のパターンを作る方法

イラストレーターのハセガワ(@h_hasegawa8)です。 デザインのは背景などにギンガムチェックをつかうと一気に華やかになりますよね。 ギンガムチェックのパターンはフリーでも代用できますが、どうせなら自作したくないでしょうか。 そこで今回は、Vectornatorでギンガムチェック柄のパターンを作る方法をご紹介します。 とても簡単にギンガムチェックをつくることができるので、ぜひ試してみてください。 ちなみにVectornatorとは、Adobe...

Vectornatorで徐々に透明になるグラデーションで塗りつぶしする方法

イラストレーターのハセガワ(@h_hasegawa8)です。 Adobe illustratorでは、「不透明マスク」というオブジェクトに対して徐々に透明になるグラデーションをかける設定があるようですが、Vectornatorにそのような設定はありません。 ですが、Vectornatorでもオブジェクトに対して徐々に透明になるグラデーションをかけたいときがあると思います。 「不透明マスク」という設定自体はありませんが、それを実現することは可能です。...

Vectornatorで金色(ゴールド)/銀色(シルバー)で塗りつぶす方法

イラストレーターのハセガワ(@h_hasegawa8)です。 Adobe illustratorでは、オブジェクトの塗りつぶしでメタルエフェクトをかける設定があるようですが、Vectornatorにそのような設定はありません。 ですが、Vectornatorでも金色(ゴールド)や銀色(シルバー)のような金属質な色でオブジェクトを塗りつぶしたいときがあると思います。 そこで今回は、Vectornatorで金色(ゴールド)や銀色(シルバー)でオブジェクトを塗りつぶしする方法をご紹介します。...

Vectornatorでオブジェクトを斜線状に塗りつぶす方法を解説

イラストレーターのハセガワ(@h_hasegawa8)です。 Adobe illustratorでは標準の機能でオブジェクトを斜線で塗りつぶすことができるようですが、Vectornatorにはそのような機能はありません。 ですが、Vectornatorでもオブジェクトを斜線状に塗りつぶしたいときはあると思います。 そんなときVectornatorでは、マスクを使うことでオブジェクトを斜線で塗りつぶしたように見せることができます。...

Vectornatorでアートボードの背景色を塗りつぶす方法

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorのアートボードの背景色は白ですが、これを変更したいと思ったことはないでしょうか。 残念ながら、Vectornatorにアートボードの背景色を変更する方法はありません。 ですが、そのように見せることはできます。 そこで今回は、Vectornatorでアートボードの背景色を白以外に塗りつぶす(塗りつぶしたように見せる)方法をご紹介します。 https://h-hasegawa8.com/introduction-vectornator/...

Vectornatorで円グラフを作る方法を現役イラストレーターが解説

イラストレーターのハセガワ(@h_hasegawa8)です。 Adobe illustratorには円グラフツールがあるようですが、Vectornatorにはそのようなツールがありません。 そのためVectornatorで円グラフを作りたいときは、そのツールがやってくれていることを自分でやる必要があります。 https://h-hasegawa8.com/introduction-vectornator/ 具体的には、「円グラフにしたい値からその角度を求めて円グラフを描画する」作業です。...

Vectornatorで水彩画風にイラストを加工する方法

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorで水彩画風にイラストを加工する方法をご紹介します。 完成イメージは次の通りです。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorで水彩画風にイラストを加工する方法 今回ご紹介する方法では、フリーの水彩画のテクスチャを使います。 次の流れで水彩画風にイラストを加工していきます。...

Vectornatorのテキストツールで書いた文字を縦書きにする方法

イラストレーターのハセガワ(@h_hasegawa8)です。 Illustratorでは縦書き用のテキストツールがあるようですが、Vectornatorのテキストツールは横書き用しかありません。 そのためVectornatorの場合は、基本的に横書きの文字しか書くことができません。 ですが最終的な仕上がりで文字を縦書きしているように見せることはできます。 今回は、Vectornatorで実際には文字を横書きしているが仕上がりで縦書きしているように見せる方法をご紹介します。...

Vectornatorで表をつくる方法

イラストレーターのハセガワ(@h_hasegawa8)です。 Adobe Illustratorでは表をつくるのに便利な設定があるようですが、Vectornatorにはそのような設定はありません。 そのため、Vectornatorで表を作るときは自分で地道につくる必要があります。 今回はVectornatorで次のような表を簡単につくる方法をご紹介します。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorで表をつくる方法...

Vectornatorでトリムマーク(トンボ)をつける方法

イラストレーターのハセガワ(@h_hasegawa8)です。 Illustratorではトリムマーク(トンボ)の設定があるようですが、Vectornatorにはそのような設定はありません。 そのため、Vectornatorでトリムマーク(トンボ)をつける場合は自分でそれをつくる必要があります。 今回はその具体的な方法をご紹介します。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorでトリムマーク(トンボ)をつける方法...

Vectornatorで半円を描く方法【簡単3ステップで半円を描く】

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorで綺麗な半円を描く方法をご紹介します。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorで綺麗な半円を描く方法 ブーリアンの型抜き使って半円を描きます。 流れは次の通りです。 円のオブジェクトを描く円に重なるように四角のオブジェクトを描く円と四角オブジェクトを選択した状態でブーリアンの型抜きをする 実際にやっていきます。...

Vectornatorで作ったベクターイラストをアニメーションさせる【SVG ✕ animateMotion】

イラストレーターの(@h_hasegawa8)です。 Vectornatorで描いたベクターのイラストをアニメーションさせる方法をご紹介します。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorで作ったベクターイラストをアニメーションさせる【SVG ✕ animateMotion】 前提として、Vectornator自体にイラストをアニメーションさせる機能は残念ながらありません。...

Vectornatorでカットパスを描く方法【現役イラストレーター解説】

イラストレーターのハセガワ(@h_hasegawa8)です。 Vectornatorでカットパスを描く方法をご紹介します。 https://h-hasegawa8.com/introduction-vectornator/ Vectornatorでカットパスを描く方法【現役イラストレーター解説】 Vectornatorでは、ペンツールを使用してすることでカットパスを描くことができます。 詳しいやり方を見ていきます。 Vectornatorとはベクターグラフィックのデザインに必要な機能を揃えた無料のソフトウェア...