Photoshop Blending Modes

I admit it – I’m a blending mode junkie. Most of the background images in my portfolio are the result of a LOT of blending mode combinations that are used together to create interesting effects. Before I begin to create a new background image, I don’t always have a clear idea in my mind of what I want it to look like – I usually just end up throwing several textures together in the layers palette and experimenting with blending mode adjustments until I get something that looks halfway decent.

If you aren’t aware of the power of these layer blending modes in Photoshop, you’re missing out on a whole world of creative possibilities. In a nutshell, this tool is found in the layers palette in the form of a drop down box at the top of the window. You need several layers in your palette before this drop down box becomes active, and you cannot apply these blending modes to the bottom (base) layer. Go ahead and pick any layer (as long as it’s not the bottom one), and try out a few blending mode options. Your image will update in real time, and depending on the blending mode that you choose, it can create some rather dramatic effects. Pretty neat, huh?

If you are like me and you incorporate these blending modes into your normal workflow, you’ll need a quick way to cycle through them quickly instead of picking them one by one (which takes far too long). Here’s how to do that:

On Windows:
Make sure the layer you wish to apply the blending modes to is selected, then click on the blending mode drop down box. Choose “Normal”, and let go of the mouse. The drop down box will stay highlighted, and you can now quickly toggle through the entire list with the up and down arrow keys on your keyboard.

On a Mac:
Make sure the layer you wish to apply the blending modes to is selected, then click on the blending mode drop down box. Choose “Normal”, and let go of the mouse. The arrow keys on your keyboard won’t toggle through these blending modes like they would on a Windows machine, so you’ll have to hold down the Shift key and use the “-” and “+” keys to cycle through all the modes.

I’m not really sure why, but FormZ just doesn’t get any love in the 3d modeling community. While it does have a respectable following with architects and environmental designers, product designers and animators don’t even seem to give it a second look. But the fact is that it’s a very good 3d modeling program for everyone from beginners all the way to experienced designers (like me) who don’t need all the fancy animation tools that are a part of other 3d software like 3ds Max and Maya. Sometimes all a designer needs to do is to build a simple 3d model that will result in an attractive rendering. And that is what FormZ does so well.

Setting up a simple and nice looking scene in FormZ and it’s built in rendering engine (RenderZone) is very simple. This tutorial will guide you through the steps of creating a simple, but well-lit and attractive scene for placing your objects into.

Step one: build some sample objects

Begin by creating a new file from the main menu (“File > New Model”). A blank 3d space will be created which is void of any environmental data. Ah, a blank canvas! Note that there is one default light provided in the light palette, plus a collection of default surface styles in the surface style palette. Ignore those for now…we will deal with them later. After selecting “File > New Model”, this is what you should see:

Now build a flat floor surface by selecting the 2d surface rectangle tool in the Modeling Tools palette, and drawing directly on the grid in the main window. Then add a few primitive shapes to set onto that surface. A couple boxes and a sphere is fine. The size of all these elements isn’t important – just make something that sort of looks like this:

Step two: create your environment

Now that you have a few sample objects built, it’s time to define the parameters of the environment you will render these object in. Go to “Display > Display Options…” and you will see a dialog box that looks like this:

Since we will be rendering this scene with RenderZone, press the “RenderZone Options” button. This will launch the RenderZone settings window. In the “Scene” tab, set the rendering type to “Raytrace” and the “Background / Project Color” to white. That’s all you need to do here, so hit “Ok” to close the window.

Step three: create your lights

Setting up the lights is probably one of the most important steps in creating a good rendering, and it’s really not all that complicated with FormZ. The goal is to create a uniform series of lights that illuminate your objects from all sides without being too harsh, and you can do that in just a few simple steps. In your light palette, click on the title text of that window (which is “Light Name”). This will launch the light parameters window, and here you can manage all of the lights in your scene. Since the only light currently in our scene is the default one, we need to add a few more. Click on the “New” button to create a new light, and up will come the “Light Parameters” window. This is where you define all of your settings (like intensity and shadows) for the light. For the sake of simplicity, lets create a simple directional light with an intensity of 100. Give it a name of “New Light”.

Now, click on the “Shadows” tab, and select “Soft (mapped)” and Quality: High. Increase the softness to 20.

Press “Ok” and close the window. As you can see in your scene, it looks like nothing happened – the light doesn’t appear by default, so we need to make it visible. In your Lights palette, click on the column with the diamond shape next to your new light (highlighted in the screenshot below). Now your light should be visible in the window:

If you tried to render your scene right now, it would be very dark and the light would only be coming from one direction – because you only have two lights after all. But that can be fixed very easily by copying your new light and positioning those duplicates all the way around your objects. But before we do that, let’s put our new light in a slightly better position. Go to the front view and position your light as you see in the image below. Note: you can do this by using the “Move” tool (from the Tools palette) and selecting only the handle at the top of the directional light indicator (the heavy looking dot). Don’t select the long line, because it will move the entire light – we only want to change the angle!

Now go to the top view, and position it again just like so:

Finally, select the “One Copy” option and then the “Move” tool from the Tools palette. Then click on the handle of your light and move it 90 degrees. Since you have the “One Copy” option selected, a new light will be created and your original one will stay as it was.  Do this again two more times so that you have four lights positioned around your objects in the top view:

Step four: creating your surface styles:

For the simplicity of this demo, let’s create two surface styles: one for the floor, and the other for your objects. Let’s begin with the floor: click on the first blue (defualt) surface style in your Surface Styles palette. Change the name to “Floor”, make the color white, and change the Reflection type to “Catcher” as shown in this screenshot:

Click on the “Options” button next to Catcher and set the following paramaters: Shadow Intensity: 100, and Reflectivity: 45:

Press “OK” to close the window and return to the scene. To make the surface style for your primitive shapes, double-click on the next pre-existing surface style in the Surface Styles palette and select the following parameters: Color: white, and Reflection: Matte. Click on the “Options” button next to Matte and set the following paramaters: Ambient Reflection: 0, Diffuse Reflection: 26, and Glow: 21.

Finally, we need to assign these surface styles to our objects. With your white “Floor” surface style selected in the Surface Styles palette, choose the “Color” tool in the Tools palette (the icon that looks like a color palette). Click on the outside line of the floor surface, to assign that surface style to the floor. Deselect the floor (“Ctrl + D” on Windows, “Command + D” on a Mac), and do the same thing with the surface style for your objects.

Step five: render the scene

Your scene is ready, so it’s time to render it. For the best looking rendering, let’s compose the scene a little better. First, change the view to “Perspective” (“Views > Perspective”). Next, zoom in so that your objects fill the window better. Now you’re ready! Press “render” (“Ctrl + k” on Windows, “Command + K” on a Mac) for a raytrace rendering, and this should be the result:


One final note:

Now that you have built a basic scene with basic lighting and materials, you may want to consider saving this file (without any other models included) as a template that you can use to start any new project. Of course you may not always want to render your objects in this sort of environment, but it’s a good starting point, and better than beginning from scratch. Besides, building a 3d model in a decently-lit scene is much better than doing it without lights and shadows. It’s much easier to evaluate your surfaces and textures with good lighting!

I’ve been called a lot of things, but the only thing that really confuses me is my title. I proclaim myself to be a visual designer. I am not a graphic designer, nor am I exclusively a web designer. But I think there is a chance that I might be a digital designer. Ah, confusing isn’t it? So what do all of these different titles mean? Here are my own personal definitions of the most common titles given to people who create graphics:

Graphic Artist – I have never heard the term “graphic artist” more than I did while working in a large Fortune 500 company in the midwest about 13 years ago. It was a communications company with a small design department, of which I was a core member of. In my three years of employment there, I don’t think I was ever once called by my real name by the executives – I was known simply as “the graphic artist”. Those guys and gals had no real understanding of what I did – all they knew is that I could make pretty PowerPoint graphics for them when called upon. To me, their lack of understanding implied that they looked at me the same way they would a painter or fine artist. So to this day, when I hear someone use the term “graphic artist”, I naturally assume they don’t give a crap about what I do on a day to day basis. “Graphic artist” is simply a catch-all term to conveniently label all graphic people as one of the same.

Graphic Designer – Someone primarily focused on print design is most commonly referred to as a “graphic designer”. These are the people who design magazine and book layouts, print advertisements, banners, and billboards. Of all the graphic designers I’ve worked with over the years, I’ve found most to be highly talented vector artists and illustrators as well.

Web Designer – This one is pretty much self-explanatory I think. A web designer is someone who designs and builds websites. This can include everything from the graphic design and layout of the website, all the way to building and deploying it. In my experience, I’ve found that most web designers are more specialized in one area vs. another (graphics vs. coding). The superstars of web design are the ones who can do everything very well. These people are difficult to find, and if you are lucky enough to come across one – pay them handsomely.

Digital Designer – You know those fancy on-screen menus that come with your DVD and BlueRay movies? That is the work of a digital designer. Digital designers typically work in TV and interactive media, which can also include things like game design and animated websites. Digital designers produce graphics that are rich in mixed media like video, sound, and images.

Visual Designer -A visual designer is someone who dabbles in all aspects of the visual arts. This includes print, web, illustration, and even fine art. Because of the broad range of design categories required n my mind, there are very few truly exceptional visual designers. I’m also noticing many large companies using the term “visual designer” to advertise open design positions, as this implies that they are in need for someone who can do many graphic-related things. So if you are a designer looking for work, take note that anybody looking for a visual designer will work you hard – but it could be a very satisfying experience because of the variety of work involved.

“Visual designer” is the title that I am currently using for myself, and I don’t think it’s working out very well. Whenever I tell someone that I am a “visual designer” it is usually met by blank stares, thus requiring me to take more time for a more detailed explanation. If they still don’t get it after a minute or two of describing the work I do, I realize that I was probably better off by just saying that “I am a graphic artist” to begin with.

I think you’ll find this to be a very useful image. It’s a high-resolution metallic RSS logo rendered over a black reflective background that is easy to mask out in photoshop (in case you want to place this over a transparent background). I do a lot of web development work, and this is the default RSS logo I use for all of my client’s projects. It’s pretty sharp looking when scaled down to a smaller size, and the bling factor is very high thanks to the high gloss of the metallic surfaces.