Webデザインセンスや多少知識が乏しくとも、プロっぽいデザインにできる方法があります。Web制作を助けてくれる便利なサイトの備忘録ブログ。

Illustrator(イラストレーター)で鉄線フェンスを描く方法

Illustrator(イラストレーター)で鉄線フェンスを描く方法

Illustrator(イラストレーター)で鉄線フェンスを描く方法

一瞬どのように作るのかと思えるフェンスでも、基本的な機能を組み合わせれば簡単に描くことが可能です。その手順をメモしておきたいと思います。

ネタ元はこちらの海外サイトです。http://www.vectordiary.com/illustrator/wire-fence-tutorial/

鉄線フェンスのイラストを描く方法

直線からフェンスの基素材を作ります。
三角形を描きます直線ツールで縦に一本線を描きます。その後、「効果」「パスの変形」「ジグザグ」を選択し、下記のように数値を設定します。
ジグザグ設定

その後、「効果」「スタイライズ」「角を丸くする」を選択し、下記のように数値を設定します。
角を丸くする
角を丸くする数値設定

次に「ウィンドウ」「線」より、線の太さをここでは5pxに、また線の色を濃いグレーに設定します。
線の太さを5pxに
その後、今作成した5pxの線を選択し、コピー(Ctrl+C)、前面にペースト(Ctrl+F)をします。見た目上はまだ何も変わりませんが、2本の線が重なり合っている状態です。ここで前面の線1本を選択し、線の太さを1pxに、線の色を薄いグレーにすると以下のようになります。
線の太さを1pxに
次に、作成した2本の線を選択した状態で、「オブジェクト「アピアランスの分割」を選択します。
アピアランスの分割
その後、「オブジェクト」「分割・拡張」を選択します。2本の線のパスが取れている状態になっていればOKです。
分割・拡張

次に、作成した2本の線を選択した状態で、「オブジェクト」「ブレンド」「ブレンドオプション」より、ステップ数を3と設定します。
ブレンドオプション

その後、「オブジェクト」「ブレンド」「作成」をクリックすると線同士がグラデーションされ鉄線ぽくなります。
ブレンド作成

次に、直線ツールを選択し、「く」の字中心部分に線を引いていきます。
線を引く

全て引き終えた後、全てを選択した状態で、「ウィンドウ」「パスファインダ」より「分割」を選択します。
分割

全てがグループ化されている状態なので、いったん「グループの解除」します。
グループの解除

「グループ解除」後、下記のようにまとまりごとに、「グループ化(Ctrl+G)」をします。。
グループ化
フェンスのように重ねていきます。
フェンスのように重ねていきます全てを選択し、上記のように、コピーで重ねていきます。しかし、このままでは交点部分の重なりが正しくありませんので、下記のように、各部のまとまりを選択して、背面に移動させるなど上下の位置を調整すれば完成です。
上下の位置を調整

楽してプロっぽいデザイン|Forty-N-Five Blog Trackbacks

このエントリーのトラックバックURL

コメントを投稿

Name:
Mail:
URL:
この情報を登録しますか?

Illustrator(イラストレーター)で鉄線フェンスを描く方法の前後の記事

前の記事は「Photoshop(フォトショップ)でページのめくれた感じをよりプロっぽく仕上げる方法

次の記事は「Illustratorの矩形ツールで描いたオブジェクト同士をピタッとくっ付ける方法

関連する情報

              

楽してプロっぽいデザイン|Forty-n-FiveBlog ホームへ戻る

検索

最近のエントリー

カテゴリー

月別アーカイブ

タグクラウド

管理人紹介

ポートフォリオサイト|Forty-N-Five

フィードを取得

フィードを取得する

スポンサードリンク

運営SHOP

健康美人30代から始める美と健康は、MovableTypeを使用して制作した通販サイトです。

健康美人30代から始める美と健康 もてもてSHOP NOLOOKS 和彩

元気をくれた本

「夢をかなえるゾウ」この本に出会えて良かったとホントに良かった思います。Webには関係ないですが、これからの人生を楽しくしてくれる本です。ガネーシャどうもありがとう(笑)

Copyright Forty - N - Five. All rights reserved.