猫でもわかる Illustratorのパターンスウォッチ作り方講座 市松模様編

Author :

市松模様+猫様

イラストレーターのパターンスウォッチ機能の解説シリーズです。ドット柄ストライプにつづき、今回は市松模様です。

この猫の背景が透明に見えて仕方ない人、仲良くなれるとおもう!

では、解説してみましょう。今回もかんたんです。

イラレで1分以内に市松模様を作る方法

  1. 10px x 10pxの四角形を書きます。
    イラレでパターンスウォッチを作る(市松模様)
  2. リターンキーをかしゃっと押します。
    イラレでパターンスウォッチを作る(市松模様)
  3. 水平に10、垂直に10と入力して、「コピー」をクリックします。
  4. ふたつの四角形ができました。
    まとめて選択して、スウォッチウインドウに「ぽいっ!」と入れます。
    イラレでパターンスウォッチを作る(市松模様)

はい、できました。

四角描いて、複製して、ぽいっ!

ドット柄編ストライプ編に比べても、これが一番簡単かもしれないですね。

イラレでパターンスウォッチを作る(市松模様)

“白い”市松模様は便利

色違いが欲しい場合は、「ぽいっ」する前の四角を好きな色に変更しておくか、もしくは、白い四角形で市松模様を作っておくという手もあります。

イラレでパターンスウォッチを作る(市松模様)

白いカンバスに白い四角を描くと何がなんだか分からなくなるので、背景に色を付けてあります。

白い市松ができたら、四角形を描き、「アピアランス」で塗りを追加して背面に送りましょう。こうするといつでも色を変えられて、便利です。

イラレでパターンスウォッチを作る(市松模様)

 

昔はよく、ウェブに応用したものです。

さて、このようにして作った白い市松模様、モダンブラウザ以前はよく、ウェブページの背景画像として使ったものでした。

写真背景の上に文字を重ねるときなどです。

例えばこのように。

nekobg

ある日家族でオムライスを囲んでいた。「ケチャップ足りない。ちょっとケチャップとってー」
「ねえねえ、くり(ぬこ)、ケチャップ貰ってきて。」
くりはじっと聴いていたがおもむろに立ち上がり台所に行くと「けにゃっぷ!!」と鳴いた。
家族全員びっくりしたが、しかしこれが一生に一度だけ話す人語かと思うと何だかとても悲しかった。

逆に新しいかも

今はもうCSSに透明のプロパティがあるので、こうしたやり方をすることは少なくなりましたが、もしかしたら特殊な状況で役立つかもしれないし、またはあえて古い手法を使うことで面白みが出るかもしれません。

ピクセルに合わせることだけ気をつけてください

この用法のためにイラレで画像を書き出すときは、ピクセルを合わせることだけ気をつけてください。

作業の前に、「ピクセルプレビュー」「ピクセルにスナップ」をONに、「ピクセルグリッドに整合」をOFFにしておきます。

イラレでパターンスウォッチを作る(市松模様)イラレでパターンスウォッチを作る(市松模様)

勝手に変形しちゃわないように

イラレでパターンスウォッチ…「パターンも変形する」の設定に気をつけましょう
それから、せっかくピクセルを合わせて作ったスウォッチでも、「環境設定(command + k)」>「パターンも変形する」のオプションをONにしておくと、描いた四角の変形によってピクセルが合わなくなったりしますので、その点もちょっと意識してみてください。


イラレご質問受付中

「Adobe Illustratorでこういうものってどう描くの?」という疑問をお問い合せフォームからお寄せください。時間ができたら当ブログで解説記事を書いてみます!(個別にお返事はできません)

イラレ本執筆しました

当ブログの人気記事「ドット柄パターンスウォッチの作り方」「世界一簡単な雲の描き方」「遠近グリッド」も載ってる、イラレTipsがたくさん詰まった本ができました!
特にIllustrator初心者やキャリアの浅いデザイナーさんは持ってて損はない一冊です。ぜひお買い求めください。Kindle版もあるよ。

Illustratorおいしいネタ事典(翔泳社)[→くわしくはこちら]