マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

WEBデザイン WEB制作

【Illustrator】アーガイル模様の作り方

投稿日:2014年10月8日 更新日:

みなさまこんにちは、新人Aです。

今日はまたIllustratorを使って、パターンのお話を。
以前は七宝柄、タータンチェックときて・・・今日はアーガイル柄を作りたいと思います。
アーガイル柄といえば、セーターやソックスなどに多く使われている伝統的な柄ですよね。
秋になるとよく見かける柄だと思います。ワンポイントとして使えば、可愛い雰囲気が出るので、Illustratorで作ってみましょう!

 

【1.ひし形を作ります】
1
正方形を作成し、回転ツールで45度回転させます。
そこから左右の角を引っ張り、好みの形のひし形を作ります。

 
【2.並べて配置する】
2
先ほど作ったひし形をコピー、ペーストし、並べて配置します。
パターンに擦るので、このときに隙間が出来ないよう注意します。
このとき、色を2種類か3種類に塗り分けます。

 

 

【3.ステッチを作ります】
3
ひし形の中心から、上のひし形の中心まで直線を引きます。
図のように移動させたら、この直線をコピーして反転させ、Xになるようにクロスさせます。
このとき、うまく揃えられない場合は整列を使いましょう!

4
これが終わったら、このXを破線に設定します。
5

 
【4.ステッチを並べて配置する】
6
先ほど作ったXの破線をひし形に並べていきます。(これもずれないように注意!)

 
【5.クリッピングしてパターン登録】
7
図のように、(紺色の)ひし形のたての長さに合わせて長方形を作り、クリッピングマスクをします。
最後に[編集]→[パターンとして登録]で終了です。

 

 

私は同系色で作りましたが、いろんな色を組み合わせてみるのも面白いと思います^^
ぜひお試しください。

 

-WEBデザイン, WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【Illustrator】幾何学模様の作り方

【Illustrator】幾何学模様の作り方

みなさまこんにちは、新人Aです。 三角形で作る幾何学模様の作り方をご紹介します。 これはパターンにするよりもランダムに色を置いていったほうが幾何学模様の雰囲気がぐっと増すと思うので、 少し面倒ですがパ …

【世界一カンタン?!】1枚の画像だけでロールオーバーをさせる方法

【世界一カンタン?!】1枚の画像だけでロールオーバーをさせる方法

画像のロールオーバーって面倒ですよね。 2枚の画像を用意してJavascriptで制御して、、や背景画像していしてh overで、、 というのが一般的ですが、 今回は画像1枚だけ。CSSに4行記載する …

【Photoshopのすごいテキストエフェクト】クールなフォントでデザイン力アップ!

デザインをしている時に、最も人の目に触れるメインの処理について悩む事はありませんか? そんな時、フォントをPHOTOSHOPで少し凝ったエフェクトを使ってデザインすることで、デザインの質が2倍にも3倍 …

【photoshop】素材なしで手軽にテキストを水彩風にするテクニック!

暑い日が続いておりますが、デザインする時も季節感を演出できたら、より人の目を引くデザインになるかもしれないですね。 ここで夏にふさわしい、テキストを涼しげな水彩風に加工するPhotoshopテクニック …

jQueryを使ってみよう【開閉式メニューを作る編】

html・CSSでのマークアップは何となく分かるけどjQueryはちょっと分からないという方、 今からjQueryを使ってみようと思っている方必見。 jQueryの便利な使い方をご紹介します。 jQu …