Pareto Principle – The 80-20 Rule

Posted on 05. May, 2010 by Roman Leinwather in Tutorials

The Pareto Principle has been applied to so many areas and industries with a big success. I would like to show you how you can apply this rule into your design work.

We can apply the Pareto Principle in design the following way. 80% of all design work can be produced with only 20% of the Photoshops functionality. I will show you on a real example as to how you can produce professional, realistically looking icons using only a few of the Photoshop effects.

If you are just starting to learn Photoshop and you feel overwhelmed with all the functionality, relax; there is no need to learn it all at once.

The final product will be an Apple mouse.

During the whole process of creating this icon I have used the following tools.

• Pen tool to create the basic shapes
• Layer styles such as – drop shadow, inner shadow, outer glow, inner glow, color overlay, gradient overlay, and stroke
• Smart Objects – to be able to apply Gaussian Blur filter
• Opacity – applying opacity to layers for smooth transactions

Step 1

Create a basic shape which represents the basic shape of an old Apple mouse using the pen tool.

Apply layer styles.

This is the most important screen in Photoshop for any web designer. You learn how all this layer styles work and you will be able to produce most of the effects you need. I have applied a white/gray gradient and a 1 pixel stroke to the basic shape.

Step 2

In the next step I have created another shape which sits on top of the first layer. The purpose of this is to create the illusion that the mouse consists of two pieces which are connected at the bottom. I have applied a glow, bevel, gradient and stroke. You will need to find the right balance between the effects to achieve the desired effect. The best way to do this is by looking at a real object or a photograph of it.

Step 3

Second image in Step 1 is showing the shape which represents the light. It has a white color applied to it. In order to apply a gaussian blur you will need to convert this shape into a smart object. You can achieve this by right clicking on the layer and selecting “convert to smart object“. Once the shape is converted to a smart object you can apply filters to it. The advantage of smart objects is that you can always change the original shape and the filters will stay applied.

The filter we need to apply is a gaussian blur which will blur the in the edges of the shape so the light effect feels more natural and realistic.

Step 4

In this step we need to create the drop-shadow which will create the 3D feel on the side of the mouse. I have used the same smart object I used for the lighting effects but I have rotated it 180 degrees and applied a dark colour to it. And lastly I have applied a 26% opacity so it blends nicely into the mouse object.

Step 5

Create a shape which represents the mouse side button. Apply layer styles. Reduce the opacity. Here I have used a gradient, glow and stroke to create the side button.

Step 6

Create a shape which represents the mouse wheel. Apply a simple gradient creates a 3D wheel effect, reduce the opacity so the button sits better on top of the mouse.

Step 7

Image in Step 4 illustrates a simple shape which will be used as a drop shadow below the mouse, there is black colour applied to it. First image in Step 5 shows again that the shape has been converted to a smart object so the gaussian blur could be applied and the opacity has been dropped so the drop shadow blends with the background nicely.

Thats all which has to be done to create a realistic mouse icon. You could use these few layer style techniques to create visually appealing icons and/or artwork for your sites.

Download 642-642 tutorials and 70-662 demos to learn how to create perfect web designs. Become expert with 70-432 web designing course.

Tags: Photoshop, Tutorials