WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： もの
カテゴリー： デザイン >イラスト

デザインにイラストを入れる際に「このイラストを使いたいけど、ちょっと線が太すぎて合わないな…」と思うことはありませんか？
使用するイラスト素材の線画が「線」として作られていれば、線を細くするだけで調整ができるのですが、アウトライン化されていて線画が「塗り」になっていると調整ができません。

今回は、Illustratorで作られ、アウトライン化されたイラストの線を調整する方法をご紹介します！

まずは、イラストをIllustratorで開きます。

「アウトライン化」とは？

アウトライン化とは、Illustratorで描いた「線」を「塗り」の状態に変更することで、イラストを拡大・縮小しても線の太さを維持する機能です。

例えば、「全体の横幅500px、線の太さ5px」のイラストをアウトライン化せずにIllustrator上で「横幅100px」に縮小すると、環境によってはイラスト自体が小さくなったのに線の太さが5pxのままとなり、すごく線の太いイラストになってしまいます。
線画をアウトライン化することで、イラストを拡大・縮小した際に線の太さも一緒に調整されるため、元のイラストの印象を維持できます。

線画を選択した際に、線のアンカーポイントが線上の中央にあれば「線」、線の境界線上にあるなら「塗り」で作られています。

アウトライン化のデメリットは、線の太さを後から変えられないことです。
線画が「線」になっていれば、後から太さを変える際にはIllustratorの「線」タブの中の「線幅」を変更するだけで可能ですが、「塗り」になってしまっている場合は「線幅」の設定では太さを変更することはできません。

しかし、今回ご紹介する小ワザを使えば、「塗り」状態になった線画の太さを変更することができます！

「塗り」になった線画に「線」を追加する

まずは、「塗り」になった線画に「線」を追加します。このとき、分かりやすいように赤などの目立つ色の線をつけると良いです。

線の位置ですが、「塗り」の境界線が「線」の中央または内側に来るように設定してください。「塗り」の外側に線を設定しても変化しません。
「線」が「塗り」の端に少しかぶさって、「塗り」が少し削られるイメージです。

赤い線に隠れて、元のグレーの線画が細く見えていたらOKです。グレーの線が好みの細さになるまで赤線を太くします。

アウトライン化する

見かけの太さを調整できたら、線画を選択した状態で上部のメニュー化から「オブジェクト」→「パス」→「パスのアウトライン」を選択します。

線画がアウトライン化されました。このまま線画を選択した状態でいてください。

赤い線でグレーの線を切り抜く

線画を選択した状態で、「パスファインダー」ウィンドウ内の「形状モード」の左から2番目のアイコンをクリックして切り抜きます。

アウトライン化された線画を細くすることができました！

なお、「パスファインダー」→「形状モード」の左から1番目のアイコンをクリックすると線がすべて結合され、線を太くすることもできます。その場合は、線画全体が後から追加した「線」の色になってしまうため、「塗り」になった線画に「線」を追加する時に「塗り」と同じ色の「線」を追加してください。

イラストをIllustratorで自作する時の注意点

アウトライン化されたイラスト素材をダウンロードして使用する場合はこちらの方法で線を細くすることで解決しますが、Illustratorを使ってイラストを自作する場合は、次のようにしておくと良いです。

アウトライン化前のデータも残しておく

一度アウトライン化して「塗り」の状態にしてしまった線画を「線」に戻すことはできません。後で修正したくなったり、線の太さを変えた状態で使用したくなったときのために、アウトライン化する前に「線」の状態の線画をコピーして残しておくか、「アウトライン化前」「アウトライン化後」でそれぞれaiデータを持っておくと安心です。

そもそもアウトライン化しない

最近のIllustratorは、線画のあるイラストを拡大・縮小した際に線の太さを維持するかどうかを選ぶことができます！

「変形」ウィンドウの下部にある「線幅と効果を拡大・縮小」にチェックを入れると、イラストを拡大・縮小した時に、線の太さもイラストサイズに応じて自動調整してくれます。線の幅が小数になってしまうのがやや難点ではありますが、特に支障がなければアウトライン化せずにサイズ調整して使用しても良いと思います。

イラストを微調整して使いこなそう

せっかく良いイラスト素材を見つけたけど、「あともう少し線が細かったらデザインに合うのにな…」「他のイラストに対して線の太さが違うから使えない…」という理由で諦めてしまうこともあるかもしれませんが、今回ご紹介した方法で、そういったお悩みが解消できます。

手順を覚えればそれほど難しいものではないので、ぜひ試してみてくださいね！