Illustrator

自分で作れると便利!illustratorでチェック柄を描く方法


みなさんこんにちは、mayukouです。

※熊本・大分で地震の被害に合われた方、お見舞い申し上げます。1日も早い復旧を願います。Yahooネット基金に募金させていただきました。

さて、本題に入ります。チェック柄のデザインというのは、何かと便利です。
先日は、テーブルクロスをイメージした料理のデザインに使えました。
そのほかにもガーリーなデザイン等にもおすすめです。
チェック柄を素材集でダウンロードするのもいいですが、
自分の好きな色の組み合わせが作れるのは、オリジナルのものですよね。
今回は、そんなillustratorでチェック柄を描く簡単な方法をご紹介します。

スポンサードリンク

チェック柄の作り方

四角ツールで正方形を描く

ベースとなる背景色を設定します。※背景が白の場合はこの工程はいりません。

スクリーンショット 2016-04-20 18.52.21

中の柄を描く

その中に長方形を描きます。まず縦を描きます(高さが正方形と同じになるようにしましょう)。

書いた長方形をコピーペーストして、90度回転させます。

48-kaiten

 

縦横それぞれ別の色にしても同じ色で構いません。好きな色を選びましょう。

縦と横を揃える

三つのオブジェクト(正方形+二つの長方形)を選択し、次に選択した状態で正方形をクリック(正方形が太線で囲まれます)。

その後整列パネルで図に指し示したところをクリックしましょう。縦と横が揃います。

49-soroe

乗算を選択または透明度を低くする

二つの長方形を選択したら乗算を選びましょう。

50-jouzan

※背景色に長方形の色が混ざって欲しくない場合は、長方形の透明度を下げましょう。

 

スウォッチに登録する

スウォッチパネルにドラッグし登録します。

スクリーンショット 2016-04-20 21.36.03

実際に、四角ツールで書いたものに適用してみました。(パターンは50%縮小しています)

スクリーンショット 2016-04-20 21.37.56

別のバージョンを作ってみました。縦横に長方形を増やしています。

スクリーンショット 2016-04-20 21.42.10

最後に

いかがでしたか?バリエーションも豊富に作れて便利ですので
ぜひデザインに活用してみてください。

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. Photoshop

    あっという間に!Photoshopのブラシで写真を手描き風にする方法

    みなさんこんにちは、mayukouです。今回は、Photoshop…

  2. Photoshop

    画像からフォントを探してくれる!Photoshopのマッチフォントが素敵。

    みなさんこんにちは、mayukouです。「このフォント何を使っている…

  3. Photoshop

    便利!Photoshopで描いた絵をIllustratorで使えるパスに変換する方法!

    みなさんこんにちは、mayukouです。今回は、Photoshopで…

  4. jQuery

    簡単設置で見やすい!レスポンシブ対応メニューslicknavの使用方法

    みなさんこんにちは、mayukouです。さて、4月21日から、goo…

  5. Photoshop

    アナログにも負けない水彩画風表現を!Photoshopで混色しながら色を塗る方法

    こんにちは、mayukouです。みなさん、いかがお過ごしですか?…

コメント

  • コメント (0)

  • トラックバックは利用できません。

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

CAPTCHA


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. ブログ

    webの最新情報を学べた!webデザインセミナー「CSS nite fukuok…
  2. photoshopでカンプ作成

    Photoshop

    photoshop CCでデザインカンプを作成。メリットとデメリット
  3. CSS

    グローバルメニューに最適♫メニュー幅を均一にしてくれるtable cellが便利…
  4. 日記

    wordpressでコーギーブログ始めました♫
  5. デザイン

    脱自己流!上手くいくデザインの手順とは。
PAGE TOP