WEBデザイン WEB制作

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

投稿日:

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

三角形で作る幾何学模様の作り方をご紹介します。
これはパターンにするよりもランダムに色を置いていったほうが幾何学模様の雰囲気がぐっと増すと思うので、
少し面倒ですがパターン登録じゃなくてこつこつとした作業になるのですが、よければ読んでみてください^^

 

 

【アートボードを方眼紙に見立てて直線を配置します】
1
まずはアートボードの一番端に合わせて直線を引きます。(念のため、アートボードよりもはみ出る長さにしましょう!)
この直線を選択したまま、[オブジェクト]→[変形]→[移動]で等間隔に配置していきます。
今回は幅20mmで設定。コピーをクリックします。

 

 

 

2
コピーをクリックしたら、Ctrl+Dでアートボードいっぱいになるまで繰り返します。

 

 

 

34

この縦の直線をすべてコピー、ペーストし、90度回転させて横の直線も作ります。

 

 

 

5
今度は直線を45度回転させて、斜めの線を作ります。
この斜めの線が、正方形の角に来るように配置します。
アウトライン化して分割したら、アートボードからはみ出た余分な部分を削除します。

【塗り分け】
6
以前紹介した配色のサイトさんから一例をお借りしました。
今日はこの色で塗って行こうと思います!
78
ランダムに色を置いていきます。(本当に適当に)
色が隣り合ってしまっても、それはそれで面白いかなぁと思います^^

 

 

 

9
少し地味な作業ではありますが、完成すると可愛く見えてきませんか?
このまま使ってもいいとは思うのですが・・・

 

 

kikagaku kikagaku1
これを画像にして保存して、テクスチャをかけたりしてみると使える幅が広がる気がします^^
たとえばこれは、上が完成形で、下が加工したものです。
[効果]→「ピクセレート」→[水晶]を使うと、クレヨンでぼかしたような印象になります。

ぜひ試してみてください!

 

弊社では技術力を活かした美しいWEBサイトのデザインをご提案します。
様々な目的に応じたプランを用意しておりますので、ご興味のある方はご覧ください。

WEBデザイン

WEBサイト制作実績3,000サイト以上!
新規作成からリニューアルまで、
多様なご要望にお応えした弊社制作事例から検討したい方はこちら

制作実績を見る

-WEBデザイン, WEB制作

関連記事

失敗しない!ホームページ制作時の見積もりの取り方を解説!見方や項目ごとの内容もご紹介

失敗しない!ホームページ制作時の見積もりの取り方を解説!見方や項目ごとの内容もご紹介

「安い見積もりを選んだら品質が低かった」「後から追加費用が発生した」―そんなホームページ制作の失敗、もう繰り返しません。このガイドでは、ディレクション費からSEO対策費、CMS導入費まで、見積もりに含 …

採用サイトに掲載すべきコンテンツ16選まとめ!制作のポイントや実際の事例を交えて紹介

採用サイトに掲載すべきコンテンツ16選まとめ!制作のポイントや実際の事例を交えて紹介

「なぜうちの採用サイトは応募が少ないのだろう?」「他社の採用サイトと差別化するにはどうすればいいのか?」——そんな採用担当者の悩みを解決するため、本記事では採用サイトに掲載すべき16のコンテンツを徹底 …

デザインにおいて余白は重要!おしゃれに見える理由や効果などを例をもとにしてわかりやすく解説!

デザインにおいて余白は重要!おしゃれに見える理由や効果などを例をもとにしてわかりやすく解説!

デザイン設計においては、余白が重要です。適度に余白が配置されることで、コンテンツが見やすくなります。余白がなくコンテンツが敷き詰まった状態は、ユーザビリティが低いため改善が必要でしょう。 本記事では、 …

ランディングページを改善するための方法20選!適切なLPO対策でCV率を上げよう

ランディングページを改善するための方法20選!適切なLPO対策でCV率を上げよう

「なぜ訪問者が増えても問い合わせが増えないの?」この悩み、解決します。業界20年のプロが厳選した即実践できるLPO施策を大公開。PASONAの法則で導線を最適化し、コンバージョンボタンのたった1つの変 …

ランディングページに動画を埋め込む効果は?やり方や活用のためのポイントを解説

ランディングページに動画を埋め込む効果は?やり方や活用のためのポイントを解説

今、ランディングページに動画を取り入れる企業が増えています。 動画は、視覚と聴覚の両方に訴えかけられるため、ユーザーの理解を深めたり、信頼感を高めたりするのに効果的です。 しかし、ただ動画を載せるだけ …