This isn’t a personal reflection or anything, but more from a visual designer perspective. Over the years, an increasing attention has been given to the way in which software interfaces (and by relation icons) are designed. One of the fundamentals of visual design is how well the message is conveyed by the designer.
This is through the use of color, depth and texture among other things. We think one of the biggest things that can differentiate icons (which make up a large portion of the software visual design canvas) is how well its texture is designed.
We’ll focus on the shine aspect for this post, because it’s one of those things that can either make or break an icon in terms of realism. We’ll be honest upfront, and say that there are several ways of doing shine on an icon, depending on the situation and circumstance.
If you’re doing a 3D icon then shine is very important, and it’s important to render the right areas with it. Of-course, if you can design icons inside a 3D app, you can ignore this all together since the hard part will largely be done for you with ease.
The shine on 3D icons, is different from the shine on 2D icons. What’s the difference you ask? Well, a 2D icon for example would be an iOS app icon (just a square with the design inside).
A 3D icon could be an application icon, or any other icon used on the web that require curvature on the shine indicating depth.
All right, enough on the theory spiel and more on the case study below. Note that layer specific styles are not shown in screenshots as it would take a long time loading all of them (there are way too many!).
If you’d like to see them in detail, you can download the attached master PSD that’s used in this case study and check out the layer styles in detail inside Photoshop.
We have two pictures above, and there is a problem here. The one on the left is how shine on icons were done during the early 2000s, when the whole “I have to add shine to everything” time period existed. There are still loads of tutorial on the internet from this period which tell you how to do shine like that, and it’s sad..like really sad.
We’ll show below a more realistic way of doing shine. The picture on the right, is exactly that. It’s rendered in a more believable way because it has lighting and shadowing that give it a more 3D appearance (think depth), and is 100% Photoshop.
No 3D app whatsoever is required to get that (although if you know how, you can do it in a fraction of the time). In any case, we’ll start out by showing what the layer composition looks like between the two.
The above images pretty much show the level of detail required (without even talking about the detailed layer style properties) to get the 3D looking reflection. On the left side is the one for the basic shine, which is pretty simple, as it consists of the base circle, the top shine, and lower reflection.
Those three and a few layer effects (which we’ll get to later) are all it takes to get the basic icon. Now looking at the layer composition of the 3D style reflection shows that it is much more complicated. Let’s break it down into the major parts of the icon.
Basic Shape
You have the main circle that makes the basic shape of the icon. You then add inner glow/shadow and gradient effects to give it a more sphere look. This is done via the use of both layer styles and masking effects as you can see on many of the layers.
Masking is an extremely powerful tool that can give you extreme precision on where you want the layer styles to be visible/invisible. If used properly, you can make some pretty nice vector icons that can also have some detailed effects.
In the 3D reflection style, there are 3 layers for the basic shape that all contribute to giving it the sphere look. You can check out the detailed layers in the full downloadable PSD to see which layer has what effect.
Top Shine
The above image shows the top shine (reflection) area of both the icons. Again, the left one has a very basic shine, and the one on the right has a very sophisticated shine (just take a look at the layer styles between the two.
The funny thing about shine is that the color of the underlying object can influence how hard or subtle they have to be.
If it’s a metallic object, then you would need very hard gradients with a hard shine, but plastic would require a more gradual gradient with a softer shine. It’s all about experimentation, but in any case adding a mask to a shine and then exposing only the needed areas can increase the realism greatly.
Bottom Reflection
The bottom reflection is another area which is pretty important. In a 3D application, this area would be the light reflected by the resting plane in which the object is sitting on.
Obviously because we’re not doing this in a 3D app, we would need to manually add this effect in (it’s ok if its not exactly like what a 3D app will render, as long as it looks like its reflecting a ground plane then that will give it a good 3D look).
in the 3D reflection version, this is done by adding a very slight circle (with layer effects) reaching over the bottom edge. This makes it seem as if the dark areas on the left and right are walls (or empty space) and the white area is the reflected ground, which is curved because of the curvature of the sphere as light reflects off of it.
Shadows
This isn’t technically part of a reflection process, but it does give the reflected object some depth and weight by adding a realistic shadow. The basic version on the left has essentially just a drop shadow, with nothing more. The one on the right has several different shadows. You can see in the picture below one way to draw a realistic shadow.
Also when drawing shadows, the center of the shadow (where the object touches exactly) is the most heaviest/thickest area and as it progresses out, the shadow becomes both increasingly blurry (softer) and lighter.
For icons, this works well, and even in real life this is the case. For example in a cloudy day, you will cast a soft shadow and when it’s very sunny the shadow will be hard.
This is for a simple sphere shadow with a light source that is directly above (so it appears exactly even underneath). Another important point to remember for drawing shadows is that it’s not always exactly black. For example, the above 3D reflection version has a shadow that’s blue in color (dark blue).
This increases the realism because in reality this is the color of the object. In real life the shadows take the ambient color of the object which it is being cast from. The level or strength of this color is based on the plane in which the object is sitting on and also its material.
If the plane is made of wood, then the shadow would likely be very dark (almost black), but if it’s on a white matte surface, the color would be a bit lighter and more noticeable.
These little bits of design detail go a long way, and ultimately what make up beautiful and realistic looking icons (and interfaces), regardless of the color, shape or size. A thing to remember is that 70% of an icon can be done in 1/3rd the time it takes to do the other 30%.
This is true because it’s the finer details that really bring it to life. Keeping that in mind during design will really, really take the composition to the next level.
1 CommentsThoughts from the Community