Advanced Search
Keywords

How to Draw the Vector Style Icons Used in the “Station Fixes” Template

This entry was posted By Cubert on Monday, November 30th, 2009 at 1:49 am and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

For today’s tutorial, I’ll show you how to create a vector error icon using Adobe Illustrator. This icon was created for use in the Station Fixes Template as shown below:

You can download the “Station Fixes” template, along with the full PSD source files for this template in BoxedArt’s members section, as well as thousands of other website templates and web design products.

[ View and Download the Station Fixes Template ]

This tutorial applies to Adobe Illustrator, and requires the use of the Adobe Illustrator software to complete the lesson. To start, we will use basic shapes, gradients, transparency and even a blend. Once you get to know how it works, you can even change the shape of the icons to any other shape of your choice to create a variety of vector icon styles.

Final

Step 1

Open a new A4 sized document.

new

Under the Rectangle Tool, click on the small arrow at the corner and select the Polygon Tool.

Polygon

Click on the document and set the Polygon setting with radius 6cm and sides 3. You will get a nice triangle.

Trianglepolygon setting

Step 2

Next, select the triangle you just created by clicking on it and go to Filter > Stylize > Round Corner

round corner

and set the radius to 0.7cm.

round corner

round corner

Step 3

We need another triangle for the border, go to Object > Path > Offset Path.

offset

Make sure u checked the Preview option, so you can see what size is the suitable. Here I set is as Offset: 0.06cm, Joins: Miter and Miter limit: 4.

offset

Now, you have 2 triangle, one smaller and one is slightly larger.

2 triangle

Step 4

We actually need another triangle in between these 2 triangles. Again, we are just going to repeat step 3, but this time let’s set the Offset: 0.03cm, Joins: Miter and Miter limit: 4.

offset

Step 5

It’s time to fill the triangle some color on it. Select the gradient tool and set the foreground to a dark brown # ab3923 and background color to #e06225.

gradient

Drag from top to bottom, just like the diagram below. Don’t forget to remove the black border as well.

gradient

Step 6

Now click on the 2nd triangle and just fill it with plain yellow color #fdc014, do also remove the black border too. yellow

Step 7

Next, fill the final triangle by using the gradient tool again. This time set the gradient type to Radial; then set the foreground color #fae130 and background color # f16225.

gradient

Drag the gradient from below to top, the bright color will be at the bottom. You should be getting something similar like the diagram below.

gradient

Step 8

Shadow time… Select the pen tool, and try to draw a same size triangle as the smallest triangle. Instead of drawing the full one, draw a half one on the top just like the diagram.

draw

Step 9

Fill it with pastel yellow (#fae73f)

shadow

and set the transparency to 27% and you should be getting the effect just like in the diagram.

transparency

Step 10

Just a sew more steps – you are almost done with the error icon. Now we need to add an identifiable mark to the icon, so I used the exclamation mark as the symbol of error. Pick the Rounded Rectangle tool, and make sure the fill is white.

rounded rectangular

Draw a long rounded rectangle at the center of the triangle, just like below.

rounded rectagular

Step 11

For the dot, pick the eclipse tool and draw a little circle below the rounded rectangle. Now you have a nice exclamation mark. dot

Let’s align it nicely, select the both the rectangle and circle, then go to the align option, and click horizontal align center.

select align

Step 12

To make it more 3D look, select the exclamation point again, and copy and paste a new one. Then fill it with a dark brown color (#b44228). Then move it behind the white exclamation mark, and enlarge it a little bit and push it 2 pixels up. You should be getting the result just like the diagram below.

Final

Step 13

Now you have a nice vector icon ready. The final step is to add an outer glow to it. Select the biggest triangle and go to Effect > Stylize > Outer glow and set it accordingly.

After that… YOU ARE DONE! Here’s your nice vector error icon. You can select all and copy paste on Adobe photoshop as a Smart vector, to your website design. Hope you enjoyed this tutorial.

You can download the “Station Fixes” template, along with the full PSD source files for this template in BoxedArt’s members section, as well as thousands of other website templates and web design products.

[ View and Download the Station Fixes Template ]

Tags: , , ,

('DiggThis') StumbleDelicious

Comments

I’ve been using Ps for years now to render my art work and icons, but I’ve been told by many people that I should be using a vector editor for my work. You’re tutorial has helped me familiarize myself a little with Ai and how to achieve effects I look for in photoshop. Thanks for the freat tutorial.

[...] Author’ll show you how to create a vector error icon using Adobe Illustrator. This icon was created for use in the Station Fixes Template. Article Link [...]

[...] How to Draw the Vector Style Icons Used in the “Station Fixes” Templateクールなびっくりマークアイコン [...]

Leave a Reply


  • Built2Go
  • ThemeStock
  • Stockedphotos
  • Bravenet
  • Bluehost