Icons for WordPress

First, you will probably find there are normally several standard icons in a WordPress website.

Common WordPress blog icons include

These are some common icons which will appear in a typical WordPress website. They are all for the basic operations in a WordPress blog. Usually people or companies do like to iconic every main page (i.e. design icons for each single page and put them on the navigation menu such as products, services, downloads, about, etc.). You can draw these icons within minutes using Illustrator or other tools (i.e. Photoshop, Coreldraw) as icons are basically simple shapes which people can understand them by using their common sense. Too complicated shape will mess up the icon without giving more useful information. Actually, based on each of these icons there can be some variations.

Icons Variations

Now let us take a look at the typical WordPress template which includes header, contents, sidebar and footer in a two-column layout style. The default WordPress theme doesn’t contain any icon files in the theme folder. When we put the icons into the theme folder, we need to rewrite the CSS style file to set all icons in the correct position. The quickest way to do this is by setting the left padding into a large value and use the icon as the background for the class in your style file. I highly recommend to place the icons in this way rather than insert icons directly inline into the texts because it can be reused as many as you want and it makes your html files a bit clearer. Sometimes designers replace texts with icons when the icons are very well recognised such as RSS feed, email address, homepage, etc.

Now the WordPress page is looking a bit livelier. Then we can focus on designing and drawing these icons. I recommend drawing all icons in vector format and then converting them into icon or image files. Therefore, Adobe Illustrator is our number one tools for this (or you can use your own favourite, but the following of this article refers to some unique functions in Illustrator which other tools might not have).

Drawing and Styling Your Icons in Illustrator

The most important principle of drawing an icon to me is to keep it as simple as possible. However, you need to give people a clear understanding of what it is about. As shown in the above images, there are several places where icons can be put: date/time, author, categories, comments, RSS feeds, archives, some navigation arrows.

I’m giving some examples here to demonstrate drawing an icon in Illustrate. To draw an icon of date/time, we can use a simplified calendar image which consists of two rectangles, two rounded rectangles on the top and a triangle on the right bottom corner. You can apply colours to the icon (i.e. single colour or fancy colours with shades). However, you need to make sure that when icon is exported to an image file in the standard size (typically 16×16 for small icon, 24×24 for medium one, 32×32 for large one), the icon is still clear to be seen. In this example, the small icon is not so clear. Some people might not recognise that it’s a calendar.

You can now probably draw the rest of the icon set by only a few clicks. A magnifying glass for “Search”, a cabinet for “Archives”, a piece of paper for “Post”, a label for “Category” and so on. You will probably ask why every time we use these shapes for our icons. Of course you can think about some of your own unique elements for the icons. I did see some website of a food somewhere using different fruit as icons (i.e. apple as posts, pineapple as comments, banana as categories, etc.)

When you finish drawing the basic icon elements, you can add some sub elements to make the variations (i.e. Add/Delete/Edit etc). But you need keep each sub-icon in the same area. Normally we use a quarter of the whole icon area for the sub-icon. Also you need to make sure the sub-icon doesn’t block any major shapes of the main icon otherwise, the icon will be not clear in expressing information.

Here are some simple tips of drawing well designed icons:

1. Keep all the icons in the same style

To keep your icons in a same design style, you should keep all the property in a constant value such as stroke weight, stroke type, rounded corner radius, some angles, perspective, etc. If you feel your 2D icons are more or less the same to the others did, and you still want some unique design for your own. You can try to use 3D icons. Illustrator can easily transform your 2D icons into a 3D shape in one second. Make sure all your icons are in their own group, then select all the groups and click Effect->3D->Extrude & Bevel … , set all the parameters (i.e. rotation for each axis, lights, depth, etc), and click OK. Every icon will be transformed in to 3D using the same setting. You can preview the 3D effect in real time when tuning the parameters. It’s that simple!

As a different 3D rotation effect will give a brand new style for all your icons in the set. You can tune some parameters in detail to make some of your icons closer to it should be. For example, the post icon is a piece of paper, using this 3D effect will produce a very thick paper which does not look so good. Therefore, change the depth in the 3D effect will make it much better. Also, the cabinet (archives icon) looks too short in depth. Therefore increase the depth will make it better. After some fine tuning, your icons are looking unique now. You can apply different colour scheme to your icons according to your website theme.

Look at some others’ icon designs, some of them are making mistake in this point. The following icon designs are taken from www.webappers.com. They are all free icon sets.

The Example with Mistakes

This is designed by Smash Magazine. The design is cool, and colours are good. But they are not constant in style. You can clearly see that they are 2D/3D mixed icon set. The Home icon and the Printer icon are 3D while the rest are 2D. Even though, the Home icon is 3D in perspective. The Printer is in non-perspective. Furthermore, some of the icons are not clear in giving information. Take a look at the one between the pencil and the star, is it a fried egg? What information can a fried egg give in a WordPress blog or in an operating system? I have no idea.

The Good Example

The following design is from www.dryicon.com, and to me these icons are very good in the criteria of keeping a constant style. All the icons in this icon set are using rounded corners, a simple underline shade, a 2D front view and gradient fills. Also all the sub-icons are placed in the right bottom quarter.

2. Use the proper size of icons

As mentioned before, there are some standard icon sizes (i.e. 16×16, 24×24, 32X32, etc) for applications. However, for a website, every size is OK as long as the entire layout of the website is well structured. Normally, we use a square image as an icon. If you text font size is around 12px then, the icon beside the text is best to be 16×16. Or you can make them a bit larger (i.e. 18×18 pixel). However, too large in size will make the layout appear to be unbalanced. The following screenshots gave some example of using proper size of icons and the positioning. Middle sized icons can be aligned to vertical centre with texts. Sometimes a horizontal line would be helpful especially for the headings. Large icons also can be positioned into left top and the bottom space can be left blank to emphasis the icons.

Also, when using the small icons, it is better to draw the icon originally in small dimension. Even if using vector drawing tools like Illustrator, when an icon is exported, the vector image will be converted into pixels. Most of time, details in the icon will be lost. Therefore we recommend drawing the small icons separately. The following example shows really good icons in small size without lack of details.

3. Use the proper colour theme

You have to keep all your icons in a good colour theme. Also you have to fit these colours into your whole WordPress website. The following WordPress blog (designed by myself, for someone‘s cake shop). If we add a set of icon in this theme (the icon set is well designed in everything including colours). It’s clearly to see that the colour theme for the icons do not fit the whole site colour theme which is in dark reds. Therefore my original design doesn’t contain any icon in this theme.

Summary

This article gives some tips of how to design and use icons in a WordPress blog site. Also some examples have been given to show how to design unique icons for your sites using Illustrator. Hopefully, this article will be helpful for the people who want to make their site unique. To me It is important to remember four words in designing icons which are “Simple”, “Clear”, “Uniform” and “Unique”.

Many design would draw these icons by hand and then scan them into the computer, clean up a little bit and use them. Actually, to draw some vector icons in this style is not as complicated as it looks like. Thanks to some distortion functions in Adobe Illustrator. Here we will share some easy steps of drawing an RSS icon and a MP3 file icon. Once you master this technique you can create similar icons for use in other projects like printed brochure layouts.

Step 1

Create a new Illustrator file, basically what we want is a number of same lines in the same direction. Unfortunately, Adobe Illustrator does not have any array tools. However it does have a blend tool which can do the job. Draw a horizontal line, rotate 45 degree and make a copy. Put the two lines at the top left and the right bottom of the art board, respectively.

Click the Blend Tool on the toolbox, the cursor will become a small square with some dots. Move the cursor onto the first line, a small cross will appear on the cursor. Click once, and move to the other line click again when the cursor changes. Now Illustrator will create several lines between the two lines you drew.

You can adjust the stroke weight and the specify the steps between the two lines (double click the blend tool button on the toolbox, the option dialog will pop up) according to your drawing requirements. Basically, when drawing by hand, the more intensive the lines are, the darker colour they represent. So if your icon set are in a single colour scheme, this can be a good way to vary the darkness. Adjust the size so that the lines can cover the art board. Use the command Object>>Expand in the menu to convert the effect into objects which will produce a group of lines.

Step 2

Now, draw a square in the center which be used as the boundary of the RSS icon. Select both the group of lines and the square. Use the Crop command in the pathfinder window to crop the area in the center.

Before doing this, you should make sure the group of lines filled with any colour (NOT None or Transparent). Other wise the crop won’t work. After doing this you probably won’t see the lines but you still can see the selections because the stroke colour has changed. I am not sure why this happens but when you assign the stroke colour you should have the following graph.

Step 3

Apply the Illustrator filter “Tweak” (Menu: Effect>>Distort & Transform>>Tweak…). Set the amount for both horizontal and vertical into 1% relative. The lines will be tweaked a little which is similar to sketch drawing.

Then select the “Twist” filter (Menu: Effect>>Distort & Transform>>Twist…) and set the angle to 3 degree (or any some amount you want). A sketch style fill is ready.

Step 4

Adjust the stroke weight of the lines to meet your desired effect. Draw a square again of the same size you did just now for cropping the lines. Set the stroke weight into 3 to make it thicker. Draw or copy from the standard RSS vector image. Apply the Tweak and Twist filter to the square and RSS icon again to make them the same style. This sketch style RSS icon is ready.

Other Icons

Using this method, we can draw many icons in the sketch style. Here is another example which is a MP3 file icon. We can use the same procedures to produce most parts of this icon. There are something more in this one, the paper and the music notes have some shades on the right. This can be done by using the Blend Tool and the Free Distort filter (Menu: Effect>>Distort & Transform>>Free Distort…)

Download the .AI source file (for Adobe Illustrator CS3)

Have you tried the tutorial? Feel free to leave links to examples created using this as well as any feedback that you may have. Thanks…

In Photoshop there is a function called Angle Gradient which is able to give an easy way to draw a nice stripe of colour spectrum on the CD surface. However, there is no Angle Gradient function in Illustrator which makes drawing a little bit difficult.

I did read some article or tutorial related to how to draw a CD icon using illustrator. But I think they are not simple enough and not good enough. Here we will see some simple steps of drawing an icon of CD.

Step 1

Draw 6 circles from outside to inside. make 2 copies of the 5th circle and use the Pathfinder>>Subtract to create 3 thick rings. Make sure they are in the right order. Then we can now fill these rings.

Step 2

Fill the 3 rings from back to front. The bottom one is filled using grayscale (K=5) and the stroke is 1pt weight and grayscale (K=40). The second one should be filled using the following gradient (grayscale K=25 at both ends and white in the center), the stroke should be the same as the previous ring. The third smaller one in the center has to be filled in grayscale (K=10) and stroke is 1pt, grayscale (K=50). Also for this one, we have to set the opacity into around 50% to obtain a transparent effect.

Step 3

Draw a simple shape like the left one in the following (the angle in the middle is around 15 degree), then copy the second ring in the previous step and set to no fill. Put the ring in the back of the shape we drew just now. Then use Pathfinder>>Intersect shape to get two sectors.

Then make 4 copies of the sectors and fill them with different colours. and rotate them to have the following layout.

Step 4

Select the 5 sector we just made and make them into a group. Use the Radial Blur (Amount:18, Method: Spin, Quality: Good) in the menu (Effect>>Blur>>Radial Blur…) and set the blending option into Overlay.

Step 5

Now the CD is almost ready and the last step we can add some effects to the CD. For 2D style, we can add some simple drop shadow (Effects>>Stylize>>Drop Shadow) or cast shadow (Draw a very thin circle in black and set the opacity to around 30%, then use Effect>>Blur>>Gaussian Blur and set radius to 4.0). Also we can use Effects>>3D>>rotate function in Illustrator to produce a unique vision. The shadow can be drawn in the same way we discussed just now.

Furthermore, you can draw another ring in the same shape of second one in Step 1, fill it in Golden. Blend it on the CD using Multiply method and set opacity to 75%. Put a DVD logo on it. Your DVD icon will be ready.

Download the .AI source file (for Adobe Illustrator CS3)

Have you tried the tutorial? Feel free to leave links to examples created using this as well as any feedback that you may have. Thanks…