見出し画像

【イラレ/図解あり】複数色使用しているのに、複合パス化できちゃったときに読んでほしいnote

MISA / 学生

記事・サムネデザイン・ロゴデザイン ： MISA
文字数 ： 約2,300字

はじめに

こんにちは、初めましての方は初めまして、
Webデザインとフロントエンドの勉強をしているMISAです🚀

今回のnoteでは、イラレにおいて、複数色使用しているデザインなのに、複合パス化できちゃったときの解決策をメモしていきます。

先日ロゴの修正を行なっていたときに変なところでつまづいたので、
未来の自分のためにも少し書いておきます。

サクッと行きます！！🍪



環境

Illustrator2024です。



状況

大まかな状況

複数色使用したロゴなのに、綺麗に複合パス化できちゃった。


細かい状況

  • ロゴは２色で作成されたもの

  • メインカラーのオブジェクトに白のオブジェクトが重なっていた

  • アートボードは白（←これがカギ）

  • 訳あってその時はグリッドも使用していなかった


イラレの前提

イラレは複数色使用した場合に、見た目を維持したまま複合パスにできません。
複合パス自体はできますが、見た目が変わります。
重なった部分が空いたり、異なるアピアランスだった場合に下のオブジェクトのアピアランスに統合されたりします。
ここからこの前提を図解していきます。


1. オブジェクトが重なっているとき

1-1. 同じ見た目（アピアランス）
　→　重なった部分に穴が開く。

同じ見た目（アピアランス）の2つのオブジェクトが重なっている状態で複合パス化したときは、重なった部分に穴が開く。


1-2. 異なる見た目（アピアランス）
　→　①重なった部分に穴が開く。
　　　②上側のオブジェクトの見た目が、下側のオブジェクトの見た目と同じになる。

異なる見た目（アピアランス）の2つのオブジェクトが重なっている状態で複合パス化したときは、重なった部分に穴が開く。
さらに上側のオブジェクトの見た目が、下側のオブジェクトの見た目と同じになる。


2. オブジェクトが重なっていないとき

2-1. 同じ見た目（アピアランス）
　→　①重なっている部分がないので穴が開かない
　　　②下側と上側の見た目が元から同じなので、上側の見た目が変わらない。

つまり、そのままの見た目で複合パス化できる。

同じ見た目（アピアランス）の2つのオブジェクトが重なっていない状態で複合パス化したときは、重なっている部分がないので穴が開かず、見た目が変わらない。


2-2. 異なる見た目（アピアランス）
　→　①重なっている部分はないため、穴は開かない。
　　　②上側のオブジェクトの見た目が、下側のオブジェクトの見た目と同じになる。

つまり、こちらはそのままの見た目で複合パス化できない。

異なる見た目（アピアランス）の2つのオブジェクトが重なっている状態で複合パス化したときは、上側のオブジェクトの見た目が、下側のオブジェクトの見た目と同じになる。ただ、重なっている部分はないため、穴は開かない。


つまり、複数色使用しているときは、必ず見た目が変わるんです。
一色の場合は、重なっている部分がなければ同じ見た目になり得ます。
しかし、複数色（異なる見た目）の場合には下側に統一されるため、
必ず見た目が変わってしまいます。

それにもかかわらず、複数色使用しているのに複合パス化しても見た目が変わらなかった＝問題なく複合パス化できてしまったんですよね。

なぜなのでしょうか。



解決方法（というより答え）


複合パス化できたと勘違いしている可能性が高い

結論から言えば勘違いでしたーー。
複合パス化した時に、見た目が変わらなかったのです。
しかし、本当は変わっていたのです。

勘違いの流れ

既に書いたこの状況が勘違いの原因でした。

・メインカラーに白の装飾（？）が重なっていた
・アートボードは白
・訳あってその時はグリッドも使用していなかった

複合パス化をクリック！
↓
白い部分が抜かれた！
↓
抜かれた部分が見えるようになった！
↓
そこがアートボードの白い部分で気づかなかった！😭


穴が空いているのに、アートボードが真っ白だったため同じ見た目に見える
下に別のオブジェクトを置くと一目瞭然！


まとめと今後のための対策

まとめとしては、やはりそのままの見た目で複合パス化はできません。
（当たり前ですが）
なので、できた場合は何かを勘違いしているということですね。

グリッドを使用しておくのがやはり安全策だと思います。
グリッドがあれば流石にわかる！わかりたい！！



サムネに一言


完成系のサムネイル


今回もサムネに対して（めっちゃ長い）一言やっていきます！
Illustratorとわかる配色と、複合パスの話に繋がるイラスト（？）にしてみました。
イラスト自体もIllustratorの画面をイメージしていますが、
それだけでなく、周りの格子柄の部分もグリッド線を表現してみました。


採用しなかったものはこちら↓

作成途中にサムネイル

採用しなかったというより途中経過なので、配置がまだちゃんと調整されていない、、、「ざっくり」という感じですね。
これと完成形を比較したというより、これを修正していったら完成形になったみたいな！

あとはIllustratorという文字をAiにして右のイラストに入れられたことで、スッキリしたのが良かったです。
完全なIllustratorのロゴマークにもならないようにできたので、その点においても良かったと思います。



おわりに

今回は、Illustratorの複合パスにおける私の凡ミスについて書いてきましたー
とってもピンポイントな記事になりましたが、
何か参考になれば幸いです！

今回も読んでくださり、ありがとうございました‼︎


P.S.

ほしい本や参考書が沢山あるので、図書券が欲しいと思う今日この頃です。
ただ、よく考えたら図書券だけだと家に本が増えるだけで読みきれないので、
図書券にプラスして、本を読むタイム券（？）も同時にもらえると最高だなーと思いました。
オチも現実味も全くない適当な話になりましたが、、😑

私も皆さんも素敵な日になりますように


この記事が参加している募集

スキしてみて

519,144件

振り返りnote

82,989件

この記事が気に入ったらサポートをしてみませんか？