After publishing my last article on the Process of Making an Icon, I got a few requests for more indepth knowledge on Blending Options, and a more explicit walkthrough of their direct usage.

Now, Blending Options are one of the first things Photoshop Novices stumble upon. The infancy of adding layer styles often leads to a short period of horrible drop shadows and cringeworthy bevels. Ironicly, this easily available styling is one of the harder things to master. Blending options is all about manipulating individual layers to obtain a certain effect. It’s a key aspect of creating icons, and will help you create textures, shading and highlighting.

Both of these icons consists of the same 3 layers *gasp*

To give you a better idea of how Blending options can be used, i’ve chosen to take you through a recent project I did for Jeffrey Lynch Development, Ltd. Inspired by the ancient Yin & Yang symbol, Jeffrey Lynch requested a simplistic icon to be used as a company logo. The reason, this examble is so well suited to illustrate the power of blending options, is because of it’s simplicity and most importantly the fact that it’s only made up of 3 handdrawn vector layers!

The above picture shows the same 3 layers, that makes up the icon with and without layer styling. If anything, this shows how much can be obtained with simple blending options. Let’s go through the steps, that gave this seemingly flat icon a life of its own.

Gradients

Let’s start with something I´m sure most people are familiar with; Gradients. A Gradient is, as you might know, a colourfill that blends through a selection of colours. Gradients are the salt and pepper of the average photoshop user. A Gradient can add life to even the most boring element, and with the right combination of colours it can help you control object lighting.

You gotta love Gradients!

Gradients are fun and easy to apply, and I´m sure most people have fooled around with them, so i won’t spend more time dwelling on this particular Blending Option.

Textures

Not everything should be shiny reflections and smooth surfaces, textures can add realism to an icon. Blending Options can help create a simple gritty texture, that will contrast the abundance of shiny surfaces in the web 2.0 world.

Inner glow used for that noisy texture

In this instance I’ve used Inner Glow with a high noise level and a centered source. Remember to set the blending mode correctly - if the noisy color is lighter than the background, it’s gritting up, make sure that drop down is set to ’screen’ - if it’s the other way around, use ‘multiply’. There’s hundreds of ways to add different textures to your surfaces, This is an extremely simple texture - what appeals to me with this solution is that you avoid using filters, which will often render your layers rasterized, in which case you lose scalabillity.

Using Inner glow to create a gritty texture might seem odd. Trust me, this will be a reaccuring theme, when you work with Blending Options. Don’t be fooled by the labels Adobe has given the individual options, find out what´s possible with said functionality, press it to the limit and learn, how the options can work together. Before you know it, you’ll be doing highlights with ‘Drop Shadow’ and shadows with ‘Satin’.

Shadows

As with many other things, there are alot of ways to do shadows. Shading your objects correctly helps add depth and perspective while mimicking a source of light.

Adding an angled shadow using ‘Inner Shadow’

In this case. I’ve used ‘Inner Shadow’ with the ‘Color Burn’ blending mode at a middle opacity. Color Burn looks at the color information in each channel and darkens the base color to reflect the blend color by increasing the contrast. Play around with the Angle, Distance, Choke and Size until you got something interesting. The image above has also got a subtle ‘Drop Shadow’. A common mistake is to overdo the Drop Shadow- turn it down guys, nothing casts that dark generic drop shadow.

Lighting

At this point our icon is looking alittle dark. Now we could just go in and brighten up the gradients, but another neat trick is to add some ‘Satin’ with curvey Contours and a lovely low opacity Color Dodge blending mode.

Satin with white Color Dodging creates interesting lighting

It’s a personal preference of mine to use Color Dodge for highlights - it adds some really interesting lighting if used the right way. Color Dodge looks at the color information in each channel and brightens the base color to reflect the blend color by decreasing the contrast.

Highlighting

Let’s try and take that Color Dodging highlighting to a more detailed level.

Highlighting with a Color Dodging Bevel

Believe it or not, but Bevel & Emboss is actually useful beyond doing funky looking bubbly text. Here I’ve used Color Dodging angled with an Altitude of around 70 to create a sleek highlight slightly displaced from the edge of the layer to add a sense of thickness to the object. The thinner the higlighted line, the sharper the curve will seem.

Last words…

As you might have realized by now, Blending Options is a pretty powerful tool. There are so many ways of obtaining various effects, that every good designer has their own little tricks. My advice is; forget the names and learn the limitations of the individual options. Play with the subtle symphony of the respective styles, flip the dials, turn the nobs and eventually you will end up with something useful.

Headphones for iTunes or any other music application. Throw out the old node/cd combo and personalize your music listening with 11 different styles to choose from! Mac, PC & PNG files included, heck i even threw in a candybar iContainer this time.

Happy listening.

A funky neon wallpaper pack with 5 discolicious variations: Diagonal Disco, Horisontal Hotness, Foursome Force, Vertical Vengance & Slim Showdown. I’ve got a thing for neon these days. Check them out.

I’ve had a few requests for insights into the process of making icons. Instead of answering individually, I’ve decided to make this the first subject of a range of articles to be authored here at PixelResort.

This won’t be a tutorial or a step-by-step walkthrough, more like a general guideline based on my own experience. It’s how my workflow crops up. Enough disclaimer, let’s see if we can make an icon. To illustrate the creation of an icon, I’ve decided to redraw my old TextEdit icon from the bottom up.

Sketching

Sketching is an important tool in defining the concepts of your icons infancy. Sketching shouldn’t be accurate, it’s all about getting your ideas down on paper.

Get your ideas down on physical paper, it will save you time in the end

Unconsciously you make alot of decisions when you first put that pen to the paper. Perspective and major elements materialize and you get a first and early look of what might work. The power of moleskins should never be underestimated. Reference pictures and rough tracing might come in handy if you’re drawing something completely alien to you.

Where to Start?

When that unceremoniously blank photoshop document is staring back at you, it might be hard to know where to begin. My advice is, start with large and defining elements of the Icon. In this case the wooden pad sets the perspective and works as the foundation of the icon.

Start drawing large and defining elements

The Pen Tool

The Pen tool is the iconists best friend. It takes time to master, but it’s the heart and blood of icon creation. Even though your finished work will be raster based, vector scalabillity in the work area is essential. It allows you to move around and resize elements like there’s no tomorrow.

Get familiar with the pen tool

Blending Options

If the Pen tool is the iconists best friend, blending options is the beer they enjoy together. Blending options are way more powerful than many recognize. The subtle symphony of individual styles can create almost any texture and surface.

Alot can be accomplished with the blending options

I could write an entire book about the power of blending options. The best way to learn is to play around with it yourselves. Don’t be fooled by the labels adobe has given the individual options - an inner shadow doesn’t necessarily need to cast a shadow, etc. Explore the possibilities of the individual options.

Organize!

As you slowly add more details to your icon, make sure to stay in control of your growing number of layers. Organize in folders, and nestle in smart objects.

Organize layers in folders and smart objects

Icons can easily have 100+ layers, so staying on top of the individual parts make tweaking alot easier.

Smaller Sizes

As you may know, a regular icon package contains several sizes. When you first start out, make sure to work on the maximum size your package will contain. This is often 512×512 pixels (leopard standard). From there on, you should work your way down the various sizes (256, 128, 32, 16).

Give your small versions the attention and care they deserve

Tweak and completely redraw your icon to fit each individual size. Much of the liberty you have in the 512px version won’t be afforded you in the smaller sizes. Each size is equally important. An icon is only as good as it’s least attractive size. Make those pixels count!

Packaging

When you’ve spend a few hours perusing the details and tweaking everything to your satisfaction it’s time to pack up the icon. Personally i use Iconfactory’s marvelous IconBuilder. It outputs Mac & PC formats without a blink.

Packing the various sizes in icon files

Ultimately the creation of each icon is inheretly different. To say that I haven’t gone into detail is a mild understatement. There are quite alot of aspects which i haven’t covered, but I hope that i’ve shed some light on the process of making an Icon.

Download

Download the finished icon from the Icons Section.

I’ll be happy to answer any questions in the comments.

While working on the new site i had a chance to revisit a few of my older works. The Apple Retro and Apple Modern Wallpapers have both been completely redrawn. Jump to the wallpaper section and get them now.

Wow, am i glad to be finally writing this post. I know things here at PixelResort has been dead quiet for some time, but thats about to change. Between University assignments and Freelance work i’ve been pouring alot of time into a complete redesign of PixelResort.

After launching the first incarnation of PixelResort back in November ‘07 i was overwhelmed with the positive response; visitors by the thousands, personal and work related mails from all over the world and alot of fine publicity in the blogosphere. It’s been a tremendous experience both professionally and personally, a hearty thanks to all who made this site’s infancy so special. A couple of months wiser, and more hours than i care to account for, im finally able to welcome you to this second version of PixelResort. While i cared much for the pixel’ish look of the old site, every designer must mature and constantly seek to renew and refine. This sparkling new site is a product of months of moleskin sketchin’ and coffee slurpin’ brainstorming with peers. It’s a cleaner look, more content focused, and i hope you will grow as fond of it as i have.

Everything has been build from the ground up, and the lovely wordpress has been integrated into my blog with all the features that comes with a thoroughbred CMS; archives, search, comments etc. Hopefully this will allow for a much more dynamic experience.

I will spare you the hairpulling lessons i’ve learned over the past couple of months, it’s been an interesting journey and as of now im just really excited to show you around my new home. PixelResort is no longer in it’s infancy, i think it just grew to a well combed teenager. Please have a look around the different sections, use the features, comment or mail me all you like.

Remember to subscribe to the new RSS feed, stick it in your local RSS pusher to receive updates.

It’s good to be back.

Sincerely,
Michael Flarup