マーカーネット株式会社

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

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

関連記事

面白い動きや便利な機能をJSで実装! その6:クリックで画像を拡大表示させるアニメーション

記事内の画像をクリックしてその場から拡大表示させるアニメーションを実装したいと思います。 今回使用するjavascriptは「zoom.js」になります。 【これまでの関連記事】 面白い動きや便利な機 …

全部無料!?写真をアートに加工できる【オススメ無料アプリ3選!】

こんにちは!デザイナーAです。 WEB制作時にサイトに掲載する画像を写真ではなく、お洒落なイラストにしたい…! でも制作費用は極力抑えたい~!!そんな方にオススメな写真をイラスト風に加工できるアプリを …

【Vol.3】優れたキャッチコピーを見て、閃き力を上げよう!【ファッション編】

は~るがき~た、は~るがき~た♪ みなさまこんばんは。いかがお過ごしでしょうか? 桜の花が各地で満開を迎え、 日差しもあたたかくなり春を感じることが少しずつ増えていく毎日ですね。 春は出会いと別れの季 …

【2014年総まとめ】今年一番多く使ったWEBフォント

【2014年総まとめ】今年一番多く使ったWEBフォント

こんばんわ~WEBデザイナーのHです。 本日はこの1年間、実際のWEBデザイン制作を通して、一番多く使ったWEBフォント、トップ3をご紹介します。 中には有料のものもありますが、社内で共有することを優 …

さまざまなレイアウトの工夫その①

さまざまなレイアウトの工夫その①

キレイなウェブ制作のためには色んな要素が必要となります。「フォント」「色」「レイアウト」「写真」「バランス」「テーマ」等々!今回はその中でも「レイアウト」ついて少し説明させていただきたいと思います。で …