Basicly it boils down to pixel to pixel ratio when you scale your art down. Say a 8px line your 512×512 icon down to a 64 x 64 px icon. What happens is, that your 8px line becomes 1px wide in the 32px version. That’s pretty straightforward. Scaling it further down, say to 16 x 16px you will get a pretty muddy result, as your 8px line, now has to be divided by 2 again.  

The thing is, if you made your initial document right, it’s pretty easy to get past this problem. What you do is, that you increase your layer-styles sizes with the the multiplier you scale down. So, if you have 1px outline, and you want that outline to stand out when you scale down, you just multiply it with the amount of times you scale you illustration down. 1px in 512x512px becomes, 1px in 32x32px if you make it 8px wide in the high resolution.

This doesn’t always work though – but a lot of times it will.

Another good idea is to keep a grid in the background of your artwork, for pixel position reference. Attached in the PSD you will find a 8x8px grid file – which you can make into a pattern, and apply to your backgrounds; this works perfectly with your 512x512px document  

There are several ways to achieve a nice wood effect, but the one I am going to show you is pretty easy. The hardest thing is to get some good reference material, and to make you texture tile right. But if you have any suggestions for improvement, please tell me

In the zip file you will find a file called wood-texture with 3 layers. The first layer is the original reference picture, cropped to a interesting area. After cropping it you need to desaturate it (Shift + Alt + U). When this step is done, we need to make the wood tile-able. To do this go into Filter > Other > Offset – and offset the picture both on the x- and y-axis. Now you should clearly see the seam. The easiest way of  getting rid of the tiling, is to sample some pixels from the nearby areas with your stamp tool – until you have something like the last layer in the file. When you are done, simply select all, and go into Edit > Define Pattern, and type in the name of your pattern.

If you take a look at the file woodflat.psd – you can see the pattern applied, among other layer styles. 

And here’s another small example of what you can quickly put together using the same techniques.

If you have any questions, feel free to post them as a comment.

In this case Illustrator is a real dealbreaker if you want to get the perspective right. Illustrator has this nice 3D Extrude & Bevel effect, which is perfect for this specific task of creating depth to a complex object. Look at the example below. Times new roman, 3D Extrude & Bevel effect – and you got your starting point for your vectors for photoshop

Check out the rest in the PSD file – and give me a poke with a stick if you want any further details on the creation process

As promised this is the first tutorial in a series, describing my process creating my illustrations and icons. Comments and suggestions for improvement of the articles are very welcome. Please bear in mind that English is not my mother tongue, but I hope the point comes across anyways; if not – please let me know.

My rambling are not necessarily the only way to archive your goal, but I hope you will learn a thing or two by reading this tutorial. If you have a better idea on how to solve some of the things I talk about you are very welcome to leave a comment.

So, what is this article about? Well as mentioned in a earlier post, this is not a step by step-plot in numbers-kind of tutorial. Those kinds of tutorial are nice, but I hope this will help you understand some basics of illustration, instead of just handing out numbers.

These articles will illustrate how to reach a certain goal, IE. how to get lighting right or how to use photoshops filters for things you don’t usually use them for. In this specific tutorial I will try to show you how I add mass to an object, using the tools available in photoshop.

It’s all an illusion

Creating the illusion of a 3d object in a 2d space (which our canvas in photoshop is), can sometimes be daunting. What I usually do is to split a object into several easier-to-handle parts. Spheres, cylinders and boxes are a good starting point. Let’s take a look at this character:

Basically it’s just a couple of circles and a few cylinders. What is it that gives this character the illusion of depth and mass? Well, highlights and shadows for one. But also the subtle differences in color, and most importantly luminosity. The brighter a color is, it seems to be closer to us; and the darker a color is it seems to be further away from us.

 Let’s take a look at how you create objects with the illusion of depth, shall we?

Creating a sphere

Creating a sphere is pretty simple, as long as you know a trick or two. It’s all about knowing your light sources, and how the light will reflect on the surface of your object. I usually begin the illustration with outlining my object with vector paths filled with a soft gradient. Let’s take a look on what we are trying to achieve:

Let me use a moment to explain why the use of paths is a good idea. Basically it boils down to you being able to rescale your illustration if necessary. But another good reason to make your illustration in a path is that you are able to export it to a vector program if you need to. It’s also very easy to edit your paths afterward, and you will always get a nice sharp edge.

Instead of using a solid color; I always use a gradient. Objects that appear one color are seldom 100% that exact color all over. Light, shadows, materials and reflectiveness all affect the perceived color of an object. Observe the objects around you, and study how light reflects, colors overlap and how the shadows fall.
 

Our sphere will consist of a couple of layers. After creating the initial shape we need to add some layer styles. To give the circle a bit of depth start by adding a inner shadow, with a fairly large distance and size. That creates the illusion of roundness. Never us the initial 75% on the layerstyles – it’s way to hard, turn it down to half. A small tip, while you have Inner Shadow active, you can click and drag on the canvas to move the it onto the position you want it to be. 

Adding a bit of inner glow will create a soft highlight. Using the Overlay blending mode adds some nice contrast in the colors.  

And at last add a Gradient Overlay from black to white set on Soft Light. Now turn the angle dial to reflect the position of your light source. 

The next thing we need to do is to define the shape even more. Adding highlights and shadows is very important. Even though most objects don’t seem reflective, they mostly are. Very reflective objects(mirrors, plastic, apple products ) have hard highlights. Adding a combination of hard and soft highlights all adds to the illusion of a solid 3d object. 

As you can see we have something that resembles a ball by now. But we still need a few finishing touches.

Create a copy of your initial shape, and set the color fill to 0%. By adjusting the color fill, we can remove the fill color of a layer, but keep any layer styles we add to the layer. Now add another inner shadow to the layer we just created, to add even more depth to our shape. Make the size way smaller than our original inner shadow – and set the blending mode to multiply if it isn’t already.

If you want to define the shape a bit more here’s a tip. Adding a very small outer glow with the color set to a dark shade of your object, it will pop out even more. 

Adding a inner glow with the color of our object at a very low opacity, and at a reasonable large size gives us a soft highlight.

The last thing we need to do is to add a small shadow. Take a look at the shadow on this picture. Do you see how it fades out the further it goes away from the object? Well – most shadows (depending on the light source ofcourse) blur out and loose some opacity the further they travel from an object. 

Objects also tend to bleed some of the color of the object to the surface, and nearby objects. So adding a tad of the spheres color on the floor adds to creating a believe able object.

This is what my layers look like. Download the PSD if you want to study it further.

If your like this tutorial – these are my thoughts for future ones:

Creating Materials

• Metals
• Glass
• Plastic
• Rubber
• Texture
• Wood

More than just spheres

• Creating complicated objects
• The power of adjustmentlayers
• Color correction