イラストレータでデザインをやってみましょう

In this detailed tutorial we'll be learning how to create a Leprechaun's shoe in Adobe Illustrator CS4 for the upcoming holiday, St. Patrick's day. Combination of linear and radial gradients can be very useful for achieving nice results in creating realistic vector illustrations.
Here's a preview of the final illustration:

Img

Step 1: Creating the shape of the shoe

First we'll try to create the shape of the shoe. From the Tool panel grab the Pen tool (P) and draw the path as it is shown on the picture below. You can use a tablet if you have one (it might be much easier to draw with actual pen). If it's hard for you to draw it all at once, try to break it into few paths you will put together in order to get the shape of the shoe.

Img

Img

Img

Now we have all the paths. We just need to put them together. Select endpoints and under right click select Join.

Img

Img

Img

Now we need the upper part. Using the same technique try to draw the shape of upper part of the shoe.

Img

Next step is making a sole. Grab the Pen tool (P) and draw the path like you see on the picture below.

Img

Select the green part of the shoe and the path and under the Pathfinder panel hit Divide button

Img

Ungroup it by selecting Ungroup under right click or simple by hitting Shift+Ctrl+G on your keyboard. Set the Fill color for lower part of the shoe to dark red for now.

Img

Select the green part of the shoe and hit Ctrl+C and then Ctrl+F. This will copy and paste-in-front the object. Now we have two pieces of the green part. Soon you will see why. Take again a Pen tool (P) and draw the line like you see on the next picture.

Img

Select the green part of the shoe and the yellow line and under the Pathfinder panel hit Divide.

Img

Ungroup it (Shift+Ctrl+G) and delete a bigger part. Change the color of the smaller part to white. You should end up with something like this.

Img

We are going to add gradients to the green part of the shoe.

Img

Select the white part of the shoe and under Object - Path - Offset path set the Offset to -3 pt. Change the color of the new object to yellow just to make it visible. Now using the arrow keys on the keyboard nudge the yellow object to the left.

Img

Img

Img

Copy and then paste-in-front (ctrl+C then ctrl+F) the white part. Holding the Shift key on the keyboard select both, yellow and the white part, and under Pathfinder panel hit Intersect.

Img

Remove the Fill color for the new object we've just made and add the stroke. Using Direct Selection Tool (A) remove the anchor points on the left side of the stroke line.

Img

Select the stroke line and under Object select Expand. After that change the color to dark red. This is what you should have now.

Img

Step 2: Creating the shadows

Let's create a few shadows. That will make our shoe look more realistic.

Select the green part of the shoe and make a copy of it (Ctrl+C, Ctrl+F). Do the same thing for the upper red part of the shoe. With the upper part of the shoe still selected, using the arrow key on the keyboard nudge it a few times downwards. Then holding Shift on your keyboard, select the green part of the shoe and under the Pathfinder panel hit Intersect button.

Img

Change the color of that part to dark green and send it behind upper red part of the shoe using right click - Arrange - Sending Backward ( Ctrl+[ )

Img

This is how your shadow should look like.

Img

We will do the same thing for the white part of the shoe, to make it look like it's attached to the shoe. Select the white shape and hit the Ctrl+C, Ctrl+F on the keyboard. Set the Fill color of the copy to dark green. Using Arrow keys on the keyboard nudge it 2 pixels to the right and under the right click select Arrange - Backwards ( Ctrl+[ ). It looks like the white part of the shoe is casting the shadow on the green part.
Change the Fill color of the lower part of the shoe to dark green, a little bit darker then the shoe.

Img

Let's create few more shadows. Just imagine a source of light above the shoe. According to that light try to create some interesting shadows. Shadows are actually one of the most important things in illustrations. They simulate a nice realistic look.

Select now everything except upper red part and its shadow. Copy and paste-in-front the selected objects, and under the Pathfinder panel hit Unit button.

Img

Now duplicate the new object we've just created and change the Fill color to blue (just to make everything more visible). Move it to the left a little bit. Grab the lower right point of the selection box and rotate it a little bit. Like it's shown on the picture below.

Img

Holding the Shift key on your keyboard select the red and blue objects and under Pathfinder panel hit Minus Front. You will end up with funny parts of the shoe.

Img

Img

Select that funny shape and ungroup it (Shift+Ctrl+G). You can delete all parts except the one we will be using for the shadow. See the picture below.

Img

Duplicate the new shape we've just created, duplicate the lower red part of the shoe. Select both parts and hit the Intersect button under the Pathfinder panel.

Img

Change the color of the new shape to dark green (darker than lower part of the shoe). Do the same for the bigger part of the shape. This is how the shadow should look now.

Img

Using the same technique make a few more shadows on the shoe. Some of them should have a lighter color to look like a highlight. Remember the source of the light right above the shoe we talked about in previous steps? That light is very important. According to that light you can create different highlights and shadows. I will select all shadows and highlights I've made. I think you can get the idea how to do that.

Img

Step 3: Creating the four leaf clover

Let's create a four leaf clover for luck.

We'll start with a circle. Grab the Ellipse Tool (L) from a Tool panel and create two overlapping circles. Select them both and under the Pathfinder panel hit the Unite button.

Img

Grab a Direct Selection Tool (A) from a Tool panel and select lower anchor point and holding the Shift key on the keyboard drag it downwards like shown on the picture below.

Img

Select Convert Anchor point Tool (Shift+C) and click on the same lower anchor point. You should end up with something like this.

Img

With Delete Anchor Point Tool (-) remove two anchor points on the both sides of the object. That will make a shape of the heart we can use to complete the four leaf clover.

Img

Img

Now we have to add a golden linear gradient to the heart shape.

Img

Select the heart shape and under Object - Path set the Offset path to -6. Set the Fill color to green. Grab the Line Tool (/) from the Tool panel and draw the vertical line. Select the green part of the shape and the vertical line and hit the Divide button under the Pathfinder panel.

Img

Ungroup the shape (Shift+Ctrl+G) and apply the radial gradient to both parts.

Img

Select the heart shape with the golden part and group it (Ctrl+G). Grab the Rotate Tool ( R ) from the Tool panel. Holding the Alt key on the keyboard click on the lower anchor point of the the golden heart shape and set the Angle in the Rotate box to 90. Hit the copy button.

Img

Repeat that action by hitting the shortcut Ctrl+D. To complete the clover hit that shortcut two more times.

Img

You can also select all golden parts and unite them under the Pathfinder panel. After that offset the path for about 3 pixels and change the direction of the gradient. You should end up with something like this.

Img

Place the four leaf clover on our shoe but don't forget to create a shadow. Make a copy of the clover (Ctrl+C, Ctrl+F). Ungroup the copy (Shift+Ctrl+G) and unite all the paths under Pathfinder panel (by hitting Unite button). Change the Fill color to dark green and send it backwards under right click - Arrange - Send Backward ( Ctrl+[ ). Using the Arrow key on the keyboard nudge the shadow 1 pixel to the right and 1 pixel downwards.

Img

Step 4: Creating the shoelaces

Let's make shoelaces for the shoe. Grab a Pen Tool (P) and draw a line like this.

Img

Under stroke panel set the thickness of the line to 5 and select Round cap to make end of the line rounded.

Img

Expand it under Object - Expand, make a few copies and place them like shoelaces.

Img

Select the white and the green part of the shoe (use Shift key on your keyboard to do that) and unite them using the Unite button under the Pathfinder panel. Make 6 copies of that shape (because we have to complete 6 shoelaces) and use them for cropping shoelaces (using Intersect button in Pathfinder panel). After cropping add radial gradient to our shoelaces.

Img

Img

Group all of the parts together, make a copy (Ctrl+C, Crtrl+F), change the color to dark green, nudge it downwards for a pixel or two and send it behind white part of the shoe.

Img

Repeat the previous step, but this time we will set the Fill color to gray, nudge it for the same amount like in previous step and send it underneath the shoelaces. Crop the shadow using the white part of the shoe. This might look like lots of work, but I think it is much better to do that then to make just one shadow to set the color to black and then to lower opacity. I think we can make the artwork look more realistic.

Img

Img

If you are not too lazy do it one more time to create the shadow for the thin red line. Repeat the previous step and set the color for tiny parts to dark red. Just make a 6 copies of the red line and one copy of the shadow for the shoelaces. Each part of the shoelaces select with one copy of the red line and using Intersect button under the Pathfinder panel make a crop which will be a small shadow casting on the red line.

Img

Img

Now we need holes for the shoelaces. With Ellipse Tool (L) make few circles and place them to look like holes for shoelaces. Set the color to dark green.

Img

Holding the Shift key on the keyboard select all circles and under Object - Path - Offset Path set Offset to 1 pt.

Img

With new circles still selected remove the Fill color for them and set the stroke to 1.

Img

Expand them under Object - Expand and use a golden gradient as a Fill color. Make a copy of the golden rings, nudge them in the same directions as other shadows, change their color to dark green, and send them backwards (right click - Arrange - Send Backward).

Img

Lets select lower green part of the shoe. Under Object - Path - Offset Path set the Offset to -5.

Img

Using Direct Selection Tool (A) remove the lower Anchor points of the new object we've created...

Img

...and using the Pen Tool (P) make the path we have now longer than we actually need. Remove the Fill color and leave just the stroke.

Img

Set the stroke to 1 and check the box for Dashed Line and set the dash to 4 pt.

Img

Expand the dashed line, apply the golden gradient we've used in previous steps. If there is anything overlapping the shoe just erase it with Eraser tool.

Img

Step 5: Creating the pattern

For the upper part of the shoe we will create a pattern. From the Tool panel grab the Rectangle tool (M) and create two rectangles like it is shown on the picture below.

Img

Select both rectangles and under the Object, Blend select Make.

Img

In the Blend option box set the spacing to Specified Steps to 20. You should end up with something like this.

Img

With the stripes still selected hit the Expand under the Object.

Img

Grab the Rectangle Tool (M) from the Tool panel and create the rectangle in the same size as the surface with the green stripes.

Send it backward using right click - Arrange - Send Backward ( Ctrl+[ ). Apply the radial gradient to the rectangle.

Img

Group the rectangle with the stripes (Ctrl+G). Under the Object select Transform - Rotate. Set the rotation Angle to 45 degrees.

Img

Grab the new object we've just created, drag it and drop it in the Swatch panel. We are going to apply it to the upper red part of the shoe. Just select that part and select the pattern we've just made from the Swatch panel.

Img

Let's create the shadow from the shoe. Grab the Ellipse Tool (L) from the Tool panel and create a circle. Apply a radial gradient to the circle (white-gray gradient). Scale the circle down using non-uniform scale.

Img

Place the shadow underneath the shoe. Adjust the position to look like the shoe is creating the shadow. And you are done!

Img

I hope you liked the tutorial! Feel free to experiment with colors and gradients. Looking forward to seeing some of your results. If you have any questions or comments please post it below. Thanks for reading!

サイト内検索

例: LINEカレンダーカメラなめこ


イラストレータの勉強

グラデーションと分割
図形と合流・型抜き
ロゴマークの作成
テキスト落書き
VECTIPS Logo
Vectortuts Logo
水滴の作り方
WATER
グラデーション背景

リボン
薬カプセル
かぼちゃ
緑の玉
亀さん
気球
花びら
つやのある球
ロゴ vectips
ロゴ Zee
ロゴ 風船
ロゴ UPWARD
ロゴ ZERO
ロゴ VECTORS
ロゴ VECTORSその2
ロゴ WOOF
ロゴ Don't Break
ロゴ Smooth
ロゴ VECTORSその3
ロゴ VECTORSその4
ロゴ VECTORSその5
ロゴ VECTORSその6
ロゴ VECTORSその7
ロゴ VECTORSその8
ロゴ VECTTIPSその1
ロゴ VECTTIPS その2
ロゴ VECTTIPS その3
ロゴ VECTTIPS その4
ロゴ VECTTIPS その5
ロゴ VECTORSその8
ロゴ VECTORSその9
ロゴ VECTTIPS その6
ロゴ ROMERO WEEK
ロゴ VECTORSその10
ロゴ ECLIPS
ロゴ ROCKEY
ロゴ VECTORSその11
ロゴ VECTORSその12
ロゴ Tutorial Shock
ロゴ VECTORSその13
ロゴ VECTORSTUTS
ロゴ ARCADE LOVE
ロゴ Zeeその2
ロゴ VECTORS PUFFS
イラスト1
イラスト2
イラスト3
イラスト4
イラスト5
イラスト6
夜空
3D ロゴ
葉と水玉とテントウムシ
イラスト10
イラストカーテン
イラスト木目
イラスト 幻想
イラスト メッシュの葉
イラスト 靴
イラスト 家
イラスト9
イラストレータ
フォトショップ
イラストレータV10の使い方

デザインの勉強

デザインの基礎
AIRに挑戦
AOBADAIに挑戦
DOWNFALLに挑戦
フレームに挑戦
BOXグラフに挑戦
LUCKに挑戦
オレンジに挑戦
リングに挑戦
STORMに挑戦

テキストにチャレンジ

カタカナ入力
七夕様
相田みつをの世界
誕生石
誕生石と誕生花
フランスの国旗
ドイツの国旗
イタリアの国旗
日本の国旗
ロシアの国旗
シャガール
犬のおまわりさん
拡張子
メニュー パン
世界の国旗
気になる言葉2
気になる言葉3
大きな古時計
オリエント急行
お料理教室
おしながき
パソコン専門用語
地図・・・PC検定
メニュー 紅茶
特殊文字
占いいろいろ
ウォルトディズニー
全館停電
ひまわり図鑑
ゆり図鑑
テキスト 初級
テキスト 中級①
テキスト 中級②
テキスト 上級①
テキスト 上級②
アロマセラピー講座1
あなたと薬
アロマセラピー講座2
オーストラリアの動物
美人が作るレシピ
ブログ
お料理知恵袋
ゆば
ドトールコーヒー物語
地震
円の国際化
福原 愛
振り込め詐欺
楽しいガーデニング
ガーリック
クリップアートの色を
埼玉の観光
山梨の観光
ゴールデンウィーク
はがきで挨拶
敗戦の時
阪神タイガース
ハワイに行こう
ヒアルロン酸
肥満の知識
ほくろがガンに要注意
今すぐトライ
インターネットで調べよう
ITニュース
日本のお茶
時代を切り開いた女性1
時代を切り開いた女性2
地獄めぐり
時間割
スポーツの審判
花粉症
段落番号の設定
神奈川県
漢文とは中国語か?
阪神タイガース
漢字の偏見
関節痛
ゴールデンウィーク
簡単お弁当レシピ
キーボード
国民年金
暮らしを楽しく
草花図鑑その1
草花図鑑その2
行頭文字の設定
段落番号の設定
主な国際機構
浅田真央のプロファイル
数学図形の問題1
パソコンについて
中原中也
オーガニックコットン1
オーガニックコットン2
落ち葉の森
お大事に
奥の細道
ページ番号の設定
埼玉の観光
ラーメン博物館
レシピ1
レシピ2
連絡網
履歴書
竜宮城
竜宮城バザー
世界の気候
脂肪を燃やせ
資格
四季折々の野菜 春
四季折々の野菜 冬
下町で
食品の分類
生涯学習
生姜と豚肉
四季の折々野菜(春)
四季折々の野菜 秋
四季の野菜 春
下町で遊ぼう
そばの献立
サッカー世界標準
スターバックス
すだちとかぼす
スーパーサッカー
数学の問題2
体内チェック
寅さんシリーズ1
寅さんシリーズ2
寅さんシリーズ3
寅さんシリーズ4
海から吹く風
横浜ベースターズ
郵便払込み
湯河原独歩の湯
ゆかた祭り

模写は意外と簡単

大黒様
着物の柄
富岳百景
ベートーベン
オペラ座
ミニー
ゴメン
母の日
ドラゴンボール
潮干狩り

パソコン教室

パソコン教室の特徴
会員の最大の特典は?
パソコン教室の会員の種類
すべて個人指導で、解りやすく
出張!パソコン家庭教師
追加受講する場合
日曜教室、始めました
パソコン教室の料金体系

何を学ぶか?

どんなサービスか?
学べるソフト一覧
ホームページを作ろう
パワーポイントを勉強しよう
模写の勉強
デザインの基礎
ビデオの編集をやってみよう。

パソコンの基本的知識

マウス使わず操作
ショートカットキーについて1
ショートカットキーについて2
ショートカットキーについて3
ショートカットキーについて4
パワーポイント
めいわくメールの対策
パソコンが遅い
メールデータの移行方法