Just about one year ago, I wrote an article entitled “10 Photoshop Filters You Should Definitely Know,” which basically covered ten of what I had found to be the most generally useful filters built right into Photoshop. It’s proven to be one of the most frequently read articles on this blog. Moreover, even though I tend to write more about web design that I do about using Photoshop, the article has also been the one that seems to have brought the most visitors in from Google!

There has certainly been some mixed reaction to the post. Comments on the blog itself have generally been pretty positive, but the discussion on Reddit included some of the common rhetoric about how bad it is to use filters.

I respectfully disagree. Filters are still one of my favourite features in Photoshop, one which offers the potential for lots of really interesting effects. The trick is to learn how to adjust their settings to make them work for you, rather than just relying on default settings, which are rarely all that useful. Sometimes it’s also a matter of combining several different filters, perhaps even with some adjustments.

With that in mind, I would like to introduce you to an awesome product that can take the possibilities of filters to a whole other level. That product is FilterForge. What is it? Well, to quote directly from their website:

Filter Forge is a versatile Photoshop plugin which lets both novice and expert users create a wide variety of realistic and abstract textures and effects. Users can take instant advantage of over 7833 free community-created filters in the online filter library, or create their own filters in the visual filter editor by assembling them from components such as blurs, gradients, color adjustments, noises, distortions, or blends – without writing a single line of code.

Over the past little while, I’ve had the opportunity to play with FilterForge, and I have to say that it’s pretty much exactly what they say it is. In this post, I would like to offer my own, honest perspective on the product and how it can be of benefit to my own workflow.

A Massive Library

For me, the biggest benefit of this product is, hands down, the massive library of different filters that are available for download. You saw the number in the quotation above – 7833 filters, most of which have been created and developed by the existing user base, using FilterForge itself as the development tool.

This does two things. First, it provides users with an absolutely massive and continually expanding resource base for all its users. When you purchase the plugin, it’s not just a matter of getting 20, 50, 100 or even 500 filters. You have immediate access to a massive library, with each unique filter having been created to accomplish one of a broad range of visual tasks, from adding atmosphere or drama to a photograph, to creating textures and patterns, to the just plain bizarre.

9 different filters, all applied to the same image

Of course, with a wide range of authors, not all filters are created equal, but there are plenty of high quality options to choose from!

The second thing that this vast library does is work as an excellent source of ideas. FilterForge is able to do far more than I ever expected when I first came into contact with it, and there are probably a number of effects that many users would never have even thought of using a filter to achieve. Browsing the library can open your eyes to the many possibilities that exist with this incredibly powerful tool.

Options Galore

Although there are a few Photoshop plugins that don’t have any options, most come with at least a few sliders, which allow you to tweak the way that the filter is applied to your image or layer. FilterForge is no exception. In fact, in my experience, many of the FilterForge filters actually have more options than those that come standard with Photoshop.

A wide range of sliders make filters super flexible

For example, the Sketchy Painting filter has almost 30 different sliders, each of which can be adjusted in order to slightly, or in some cases significantly, alter the overall effect of the filter. With all of these different options available for customization, even a single filter can become an insanely versatile and powerful tool!

Create Your Own Filters

It’s also important to acknowledge that product’s name is not something like FilterGallery or FilterVault. It’s FilterForge. That very name suggests an act of creation, which is a huge part of what the plugin can do. Using an innovative system that allows you to chain different effects, adjustments and manipulations together in a single “tree,” the Standard and Professional editions of FilterForge allow you to build a virtually limitless array of different types of filters.

Given that many of the building blocks that you use to create these filters appear to be equivalent to some of the basic Photoshop tools, it may seem that the same sort of thing could be achieved with basic actions, until you factor in all the controls, which take the flexibility and re-usability of any given filter far beyond what you can do with Photoshop actions.

That being said, however, it’s important to note that the creation process seems to have a fairly steep learning curve. Creating very simple filters like the built-in Sepia is fairly straightforward. Here’s a screenshot of the “tree” that drives that filter:

The small tree of the Sepia filter

But for some of the more complex filters, like the Grunge filter, the tree starts to get a little more extensive:

The slightly larger Grunge filter tree

And if we look at some of the real heavyweight filters, like Sketchy Painting, we can see that it some filters can become vast networks of interacting effects and options.

The Sketchy Painting filter is far more complex, as you can see from this filter tree

Taken individually, none of these elements are particularly complicated, but learning them all and weaving them together into a single filter can become a much more complex process.

As I spent a bit of time playing around with the filter creation tools, it certainly didn’t take me long to recognize the vast potential of the tool, but I had difficulty creating anything more than just a basic colour filter. With a bit more time, I’m sure that I could do a whole lot more, it’s just a matter of learning how everything works and fits together.

So, don’t expect to start creating incredible, stunning filters right away. Chances are pretty good that it will take some time. But that’s okay. I doubt that you learned everything there is to know about Photoshop in a day either.

Wait Times

Probably one of the biggest complaints that people have about Photoshop is that it can be a bit of a system hog, and I’ve found that FilterForge tends to follow that trend. With my 13” MacBook (no Pro), I’m not exactly packing the kind of processing power that I’d like to be, but neither am I running a slow, antiquated machine. Still, even when working on a 500 x 500 pixel image, some filters could take several minutes to render. I can only imagine how long it would take to work on larger, print-ready files.

Based on the amount of work that I know the plugin is actually doing, the wait times really aren’t all that surprising, but it’s definitely something that users will want to be aware of. If it’s bringing my MacBook to a crawl, it would probably have brought my old Toshiba Satellite (which I used to run Photoshop on) right to its knees.

Standalone App

Despite being branded as a Photoshop plugin, one nice feature about FilterForge is that you don’t actually have to be running Photoshop in order to use it. It comes with a standalone application that you can launch independently of Photoshop, something that can be very useful, especially if you are using FilterForge primarily for adding effects to photos.

Just launch the app, open your photos and save them in any one of a number of standard formats.

Of course, FilterForge is not created to be a full-fledged image editing application, and there are certain key limitations, such as only being able to have a single image open at any given time. Your control is also limited to filter options, and you have no direct access to the pixels themselves.

Still, as long as you are aware of these limitations, there’s no reason why the standalone app can’t be a huge asset in the right circumstances, potentially saving both time and valuable system resources.

Conclusion

Ultimately, while it can be a bit slow in processing and has a fairly steep learning curve if you want to actually create your own filters, I think that the vast array of possibilities afforded to users through both the available library and the number of options included with so many of the filters makes FilterForge an incredibly powerful tool for anyone who is using Photoshop.

For many creative types, the Basic Edition would probably be sufficient, providing you with full access to the FilterForge library. When combined with the power of Photoshop, I imagine it would be more than enough for the average user.

If you want to take the next step and start creating your own filters, then you might want to consider the Standard Edition. The Professional Edition is for users who want or need to get the most out of FilterForge, and has to do more with levels of performance, such as being able to work with images larger than 3000 x 3000 pixels (probably not something you’ll need for the web), high-precision formats and so forth.

If you want to see a more complete version comparison, visit the website.

And while you’re there, consider downloading the free trial! It’s completely functional for thirty days, which should give you more than enough time to decide if FilterForge will bring any added benefit to your workflow. It has certainly been useful to me!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

We love effects don’t we? Admit it, the first time you ever fired up Photoshop all you did was play with effects and filters. I’ll admit right now that’s all I did the first time I played with it. I spent hours seeing what would happen to an image as I applied filter after filter. Seriously, there was nothing cooler than throwing some text on the screen and then applying every single effect possible to it. I think my personal favorite was Pillow Emboss… ah, good old Pillow Emboss.

I didn’t realize it at the time, but there was a big problem brewing. I was given these great abilities to style without any background or understanding on why or how I should use them properly. Before Photoshop came along, what probably took a graphic artist hours to create was taking me seconds. It means that at that moment I had zero respect for the power I was wielding because all it took was a pirated copy of Photoshop and a pulse.

I think that we can all agree I wasn’t the only person to go crazy with my new found powers. The Internet is littered with sites that overuse shadows, bevels and gradients. We didn’t mean to make the net look like crap, we honestly believed that we were making it cool. It’s what separated us from the guy who had Microsoft FrontPage and a pulse. The result was an unfortunate side effect of what happens when powerful tools become cheap and require no training to use.

We are making progress though. Sites like Dribbble are showing aspiring designers every day that beauty comes from subtle, proper use of these effects. It doesn’t require extensive training or art school to wield them either, just a solid understanding of the principles behind them and attention to detail.

Adding Effects with Purpose

When you get ready to add some effects to your design take the following steps in your head. First ask yourself if it’s even necessary. Will shadows and gradients help the site perform better or is it just eye candy. Deep in the back of your head you should know that adding these won’t make a bit of difference to the analytics needle. But that’s not going to land your work on the next great list post so let’s at least use them responsibly.

What do textures, shadows, highlights and gradients all have in common?

Figure it out yet? They all have to do with lighting. When you see a web design that looks like all of these effects were just puked onto the page it’s because the designer didn’t think about their light source. Without a light source, you don’t see the subtle peaks and valleys in a texture. Shadows don’t get cast and highlights don’t shine on that letterpress text without lighting.

Imagine that you are building this design out of real materials on an easel in front of you. Now take a lightbulb and shine it over your design. Where should you position the light? Should it go above the design, overhead or below? Is it focused like a spotlight or diffused? Is there more than one light source? What about the ambient light in the room?

It’s a lot to think about right? How often do you think designers think about this when slapping these effects into a design? I’ll leave it to you to answer that one.

It gets more complex though. Now picture the actual pieces of your design. Ask yourself what kind of highlights and shadows your light source creates on your composition. Is your design seamlessly flat or is it layered? If it’s layered, how should your light source cast shadows? What kind of materials are you using to build your site? Are they reflective or matte? Are there edges for your light source to reflect off and create highlights?

Think for a second about that awesome texture you found the other day on that textures roundup post. It’s really going to jazz up your background right? But does that texture match your light source? It shouldn’t. Why you ask? Because whoever made that texture didn’t position the light bulb in the exact same spot as you.

Every time you add one of these effects ask yourself if it’s true to life? Does that button really cast that hard of a shadow? Are the lighting angles and altitudes consistent throughout your design? Don’t just add a gradient because you think they are cool, but because the object and lighting demand a gradient to make it look natural.

Calculating all of this takes experience so if there is one thing to remember from this post it should be this: being subtle and discreet is the best policy when adding effects. Sometimes the nicest effects are the ones that are just barely noticeable. We don’t view websites under a 5pm summer sun so lighten up on those textures, highlights and shadows. If you are designing in Photoshop and you don’t move your effect’s opacity slider down to the teens then it’s most likely too much. Squint your eyes… did the effect disappear? Then it’s just right.

Before we finish, let’s talk for a second about everyone’s new favorite design trend—noise. Noise isn’t really a texture. If you reached out and touched noise it wouldn’t feel rough. Noise should be thought of as the internal composition of an object. It’s kind of like a granite countertop. Think of it this way, if you were to move your light source around noise wouldn’t look any different but the surface of a texture would. Just food for thought and probably some opposing comments.

Using all of the effects we have available to us demand more critical thinking then we as an industry have given them. It’s truly what separates the pros from an amateur. Every single time you add a shadow or gradient think about where your lightbulb is. Think about the object you are adding it to. Think about the surface your object is resting on. Now think about how much visual noise this is adding to your design. Is it necessary? The pixel left alone can make your content shine more than the pixel designed.

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

Today, we are going to look at two of Photoshop’s primary masking techniques – layer masks and clipping masks. We’ll be comparing the two by looking at how they work on a practical level, the basic similarities and the much more significant differences. Finally, we’ll look at how we can actually get the two different types of masks to work together in a design.

I know that a lot of people find the clipping mask to be something of a mindscrew, but I’m going to try to make this as simple and as painless as possible. So let’s get to it.

About Masks

First, let’s establish a working definition of what a mask is. Basically, a mask is an entity which controls the behaviour of a collection of pixels. Generally speaking, this control centres around the relative transparency or opacity of a given layer or group of layers. Wherever a mask is active or “on”, a pixel becomes transparent. Where a mask is inactive or “off”, a pixel remains opaque. Moreover, a mask can be either active or inactive to varying degrees, allowing for a wide range of transparencies.

When combined with Photoshop’s ability to stack different layers, masks become an incredibly powerful tool, which helps grant a designer or digital artist with extremely precise control over the interaction between the different layers. For example, let’s take this beautiful image that I picked up at Dreamstime.

Here is the original image

Now supposed we want to extract the woman from the background. To accomplish this, we can start by using any one of a number of different extraction methods (in this case, I used channels, which is another article all on its own). However, instead of destructively and wantonly deleting the unwanted pixels, I simply hid them with a mask.

Here is the extracted image

The missing pixels aren’t actually gone. I’ve just made them invisible. Now, I can place the woman onto a completely different background, which I created using textures from a couple of my own texture packs, which you can check out here and here.

And here she is on a completely different background

So that’s the basic concept behind masks. Now let’s take a look at the Layer Mask and Clipping Mask and how they each accomplish this same basic premise.

The Layer Mask

A Layer Mask is a one-to-one masking technique, by which I mean that a single mask is applied to a single layer. It’s possible to replicate a layer mask and apply copies to other layers, but each layer ultimately still has its own mask.

Layer masks also exist strictly as masks, and serve no other explicit purpose. They are a way to control the transparency and opacity of a single layer, but they don’t do much beyond that.

To create a Layer Mask, open up the layers palette and select the layer that you want to work on. Then, click on the mask button ( ) to create a new, blank mask. If you do this with an active selection, the selected pixels will be set to visible while the unselected pixels will be set to transparent. Any partially selected pixels will become transparent in direct relation to the degree of their selection.

In our previous example – extracting the woman from the dark background – I used a layer mask. Here is a screen shot of my layers palette.

At this point, this is what my layers palette looks like

Notice how the black and white layer mask thumbnail appears beside the layer thumbnail (or icon, if you have your palette set to display icons). This is an excellent visual representation of how the Layer Mask is actually attached directly to the layer itself.

This preview also gives you some useful functionality, which I thought I might let you in on while we’re on the subject. Try Command-clicking (PC: Ctrl-click) it to create a new selection based on the mask, similar to the way you would create a selection from a channel. You can also Shift-click the preview to quickly turn the mask on or off and Option-click (PC: Alt-click) to toggle between preview mode and the mask mode, in which you can actually see and edit the mask itself rather than the active preview of its effect.

The Clipping Mask

The Clipping Mask, on the other hand, is an entirely different sort of beast. Where we can think of the Layer Mask as functioning as a one-to-one type entity, the Clipping mask functions more as a one-to-many type entity, in that it can actually effect multiple layers at the same time.

A clipping mask is also, by its very nature, multi-purposed. While a Layer Mask exists as a modification to a layer, a clipping mask actually is a layer, which interacts with one or more of the layers directly above it. This has some interesting “stacking” implications, which we will get to in a bit.

Personally, I still find creating a clipping mask kind of counter-intuitive. First, select the layer that you want to have masked. If you want to have multiple layers masked, select the desired layers (they must all be in direct sequence). Right click and select Create Clipping Mask from the contextual menu, and watch what happens.

The selected layers all appear indented and are masked by the first layer immediately beneath them. Maybe it’s just me, but this seems awfully quirky. I always want to create the mask by clicking on the layer that I want to become the mask (which is the first layer beneath the indents), even though I understand why that would be programatically problematic. Still, I have gotten used to the functionality over time.

Here’s a practical example. Suppose we want to “insert” the full photograph into a vector frame. The easiest way to do this in Photoshop is to fake it, using a clipping mask! First, open up your vector file and import it into Photoshop. There are a number of ways of doing this, but I usually choose to import it as a Smart Object. I chose to use an ink splatter vector shape. I combined several different shapes from Franz Ghori’s Spray Paints, (which I downloaded from Vecteezy) to create this splatter.

Here is the basic vector shape that I created

With this shape inside of the document, I can simply activate my photograph and drag it directly above my new shape layer. Then, I simply right click and create a clipping mask. Immediately, my photograph is cropped to the masking shape!

This is the photograph as it appears when clipped by the vector shape

It really is that easy. Now, if I wanted to, I could select and move either the photograph itself or the clipping shape, and the mask would be update immediately. In fact you can actually see the masking change as you make alterations to either of these two layers.

Pixel Controls

One of the key differences that I want to focus on is the way that the masks actually work, by which I essentially mean the way in which they they control the transparency of the masked pixels. It’s important to understand the difference here, since it will have an impact on the way that you create your masks.

The Layer Mask is based entirely on a greyscale image. In a sense, the Layer Mask is a greyscale image, which is superimposed over the actual pixels of the layer itself, and used to calculate the effects of the mask. The relative blackness or whiteness is what controls the behaviour of the pixels. Wherever a pixel in the mask is black the corresponding pixel in the layer is set to transparent. Conversely, wherever a pixel in the mask is white, the corresponding pixel is set to opaque (or solid).

Here is the greyscale mask that I used to extract the woman from the background:

The layer mask itself actually looks like this

Clipping masks, on the other hand, work more upon an inheritance model. All of the layers effected by the Clipping Mask actually inherit the transparency values of the clipping layer itself. This means that a completely white layer and a completely black layer would have the same effect if used as clipping masks.

So, let’s assume that we want our ink splatter woman to be about 75% transparency. With a layer mask we could do this by using a lighter grey colour. To achieve this with our clipping mask, we can just adjust the transparency of our shape. If we take it down to 75%, our masked image automatically inherits the same properties.

The photograph actually inherits the transparency of the clipping object

The Layer Stack

There’s probably some sort of official and technical term that I am unaware of, but one of the other differences between Layer Masks and Clipping masks is something I like to call “stacking”, or the way in which the layers fall on top of each other. We’ve already discussed the way the Layer Mask works almost as part of the layer, and how the Clipping Mask is actually a layer which works to mask one or more of the layers directly above it.

But what does this mean, in practical terms?

Well, think of it this way – because the Layer Mask is actually attached to the layer itself, it exists outside of the layer stack (in other words, the order of the layers). When you move a layer, the mask moves with it, just as you might expect.

Not so with a Clipping Mask. In fact, this tool is actually dependent on the stack, because it involves one layer directly effecting another in direct proximity. Changing the order of the layers in the stack not only effects their interactions through transparencies and blending modes, it can actually have a significant effect on the Clipping Mask – adding to it, subtracting from it, or in some cases completely undoing it.

For example, it’s important to be aware that, if you duplicate the layer that is doing the clipping, the mask will actually be dissolved. It’s not really a huge deal, since a clipping mask can just be reestablished, but it can be a bit starling and annoying if it happens when you’re not expecting it.

Combining Them

It’s also important to note that clipping masks and layer masks don’t have an either/or kind of relationship, in which you would have to choose one or the other. They are perfectly capable of playing very nicely together, which can allow you to achieve some really great effects!

To illustrate this, let’s try combining the two different examples that we have been looking at throughout this article. Let’s suppose we still want our woman to be framed in our ink splatter, but that we also want to remove the dark background from the photograph and replace it with a nice, rich pink colour to match the thick streaks in her hair.

The first step is to use a layer mask to extract the woman, just as we’ve already discussed. Once we have the background removed, add in a new colour fill layer, and sample the colour from her hair. I prefer working with fill layers, rather than just using the paint bucket to just fill a normal layer with colour. This way, I can always go back and easily change the colour later.

Here we place the extracted woman on a coloured background

Next, we need to position our ink splatter under our other two layers. Then, with the photo layer and fill layer selected, we just right click and create a clipping mask. Both layers will be clipped by the shape and, after adding in our textured background, we have something like this:

Now we add in the clipping mask too

Both the clipping mask and layer mask are integral to achieving this effect, each performing a different role. This just goes to show how easy it is to make them work together! Now, just for fun, we’ll just refine the design with a bit of extra work in Photoshop.

And just a few final touches to tie it all together

Conclusion

Well, I hope that this article has been of use to you, and that you’ve learned a thing or two about clipping and layers masks, and the differences (or similarities) in how they work. Both are powerful tools, and I guarantee that if you use Photoshop for anything beyond simple photographic touch ups, mastering these will make your life so much easier!

Note: This article was originally published on the old MyInkBlog. Since that site was sold, and appears to have removed all old content, I am republishing some of the work I did there on this blog. Thanks to Andrew Houle for his blessing on that count.

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

I’m always preaching about the importance of non-destructive editing in Photoshop, and adjustment layers have to be one of my favourite features. In today’s quick tip tutorial, I want to show you a really simple technique for using the Hue/Saturation adjustment layer to precisely control the colours in your photographs, illustrations and designs.

We’ll look at two different scenarios, and the slightly different techniques that can be used in each.

Scenario 1 – The Blue Dress

Okay, so here we have an image of a lovely young lady in an equally lovely blue dress. This photograph is by Jesse Therrien can can be found over at stock.xchng.

Here is our origianl image

Basically, all we want to do with this image is change the colour of the dress – and only the dress – from its current blue to a vibrant pink. Because there is really very little blue throughout the rest of the image, all we really need to do is focus on adjusting the cyan and blue values.

First, create a new Hue/Saturation adjustment layer.

First, add a new adjustment layer

Then, in the drop down selection box, select Cyan to isolate that particular colour.

Isolate the Cyan colours

Now, adjust the hue properties as shown here:

Adjust the properties to match this

That pretty much does it. Now, I would just flip over from Cyan to Blue and adjust the properties as follows:

A slight adjustment for the blues

This extra step just fixes up some faint blue fringing around some of the edges of the design on the dress. And there you have it, a complete colour transformation:

The completed transformation

This technique is quick, super easy, and produces great results. Better yet, it’s entirely editable. You could go back and make the dress green or yellow or any other colour you might like!

Scenario 2 – The Red T

Okay, the first scenario was pretty easy, and that’s partly because we were working with an ideal photograph, where the colour we wanted to change was entirely isolated to the dress. But what about something like this photo by Carole Smith (aka mccheek), which I snagged from the Flickr Creative Commons?

Our original image

Let’s say we want to change the colour of the t-shirt from bright red to bright green. Go ahead and try the same technique that we used in scenario 1, by creating a simple Hue/Saturation adjustment layer and adjusting the hue for the colour red.

The entire image is effected

That’s a lovely shade of green that we’ve managed to get for the t-shirt itself, but the adjustment layer has also effected all of the reds in the woman’s skin and in the bricks of the wall behind her! It’s kind of a cool effect, but really not what we’re looking for.

Fortunately, we have a pretty awesome degree of control over colours through the layer mask that is automatically added to the adjustment layer when you create it. To take this control and use it to our own ends, we’re going to make use of some quick channel magic.

First, though, we’ll also need to adjust the Magentas (Hue: +103, Saturation: -8) and Yellows (Hue: +57, Saturation: 0) in the adjustment layer, just to round out the colour change.

Now, open up your channels palette and duplicate the green layer, which has the best contrast. Then, quickly adjust the brightness and contrast of channel, like this:

Adjust the brightness and contrast on this channel

Alright, now, with a large white brush just paint away all of the outside details.

Start brushing away the excess detail

Next, use a smaller brush to paint along the edges of the t-shirt itself.

Get in closer with a smaller brush for finer detail

That inner part beneath her left arm is pretty tough, though, as the shadows caused a bunch of the details to blend together. So, I’m going to trace that part of the t-shirt with the pen tool and make a selection.

Use the pen tool to make a selection

Then, simply invert the selection and paint down along the edge of the t-shirt to control the shape.

Brush away the edges, based on the selection

Lastly, paint out the jeans at the bottom and paint in the words on the shirt.

Brush away the jeans

Now, Command-Click (PC: Ctrl-Click) on our channel to create a selection from it. Turn the main RGB channel back on and select the layer mask on the Hue/Saturation layer in the layers palette. Then, simply fill the selection with black.

The basic isolation is now complete

That’s the main part. The rest is all just clean up. Using another soft brush at about 50% opacity, go to work on the layer mask, blending the hair until it looks right.

The finer bits of hair have been blended

The trick here is basically to work somewhat slowly, and just brush away most of the red until you get a nice natural look. What you don’t want to do, though, is paint with a heavy black brush. If you do that, the hair will start to take on an unnatural green tinge. You just want to brush enough that the red will disappear and a bit of the green will be added in, making it look like a natural bit of light reflecting off the now green shirt!

Lastly, there will invariably be some red fringing around the outside of the shirt itself. Again, just take a smaller, soft brush and work those edges carefully.

Polished up the edges

And there you have it. The shirt colour is completely changed, and blended nicely into the rest of the image, all using just a single adjustment layer and its layer mask. Even better, I can play with the settings in the adjustment layer and create an entirely different colour!

Another new colour by tweaking the adjustment layer

It’s a super flexible little technique that I hope you will find useful at some point. Also, I realize that I kind of blitzed through some of the channels stuff. If you’re not totally comfortable with creating isolations or extractions with channels, consider reading this article over on MyInkBlog. It’s a tutorial I recently had published, and which goes into quite a bit of detail about extracting with channels!

Conclusion

There are many other ways that you can use this technique, too. For instance, if you had a row of objects, where you wanted them to each have a different colour, you could create a separate Hue/Saturation adjustment for each object, and use the layer mask to force each adjustment to apply to the appropriate object.

Ultimately, though, it’s just a great little trick for making a subtle colour change to a photograph, illustration or design. What are your thoughts? Have you used this technique before, or something similar?

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

Layer styles are a hugely powerful feature in Photoshop, especially when you combine several different effects into a single design. In this brief tutorial, we will look at one example of how to use layer styles to apply a glassy effect to an object. For the sake of this tutorial, we’ll be working with part of the Echo Enduring Media logo, but you can really use any kind of object that you want for this (though something with rounded edges tends to work a bit better). Here is a preview of our final design:

The Final Image

Achieving this effect is actually relatively simple, and we’ll cover everything in just a few steps! So let’s get started.

Step 1

First, begin by creating a new 500px by 500px document. Then, add a simple texture into the background. I will be using one of the grunge textures from my Mega Textures Pack.

Start with a blank texture

Next, we are going to want to adjust the Global Light settings for the document, since these will have a strong effect on the our styles are rendered. Select Layer » Layer Styles &rqauo; Global Light. This will bring up a dialog box, which you should fill out as follows:

Adjust the document's Global Light

Step 2

Next, we need to create an object on which to apply our glassy style. I simply opened up my logo in Illustrator, selected the shape, copied it to the clipboard and then pasted it into my Photoshop document (as a Smart Object, of course).

Add a shape to the document

After pasting your object into the document, reduce it’s fill property all the way down to 0. This, of course, will make the object itself disappear, so I won’t bother show you a screenshot of that!

Step 3

Okay, now we start applying styles. Making sure that you have your object layer selected, add a new Drop Shadow style. You can do this by either clicking on the layer styles button that to bottom of the layer palette, or by selecting Layer » Layer Styles &rqauo; Drop Shadow from the menu. Use the following settings.

The settings for the Drop Shadow

The image should now look like this:

The image after step 3

Step 4

Next, we want to add an Inner Shadow to create a bit of depth to the object. Set the properties for this style as follows:

The settings for the Inner Shadow

Now our image looks like:

The image after step 4

Step 5

To balance the Inner Shadow, we’ll also add an Inner Glow, using properties as shown here:

The settings for the Inner Glow

This brings the full shape back into relief:

The image after step 3

Step 6

A Gradient Overlay will help really bring out the shape of our object. We’ll use a simple black and white gradient, with the opacity reduced, as in the following options:

The settings for the Gradient Overlay

Now the image looks like this:

The image after step 6

Step 7

Next, we’re going to add a Satin effect to create still a bit more depth on our object. Again, use the following properties.

The settings for the Satin effect

The effect is pretty subtle, but the image should now look like this:

The image after step 7

Step 8

The final step is to create some glossy reflections using the Bevel and Emboss style. This is where the Global Light settings will prove to be the most important. First, create the style with the following options:

The settings for the Bevel and Emboss

Next, we’re also going to slightly adjust the contour, which is an optional sub-property of the Bevel and Emboss style.

The settings for the Contour

Final Image

After adding the Bevel and Emboss effect, our glossy and glassy effect is now complete, and looks something like this:

The Final Image

There are two things that I really like about this technique. First, once you figure it out, it’s relatively simple and easy to create. Second, you can actually save it to your Styles palette for future use, and then easily apply it to all kinds of different shapes. For instance, here are a bunch of icons from Monochrome Symbols Icon Set – Part 2, available from MediaLoot:

Four plain, monochromatic icons

Now, here are the same images with our textured background, the fill reduced to 0 the same style that we created applied to them:

Same four icons with our style applied

Of course, you can play around with the settings to and get slightly different effects. If you save each one, you can end up with a really nice set of styles to add to your Photoshop arsenal. One thing to note, though, is that these kinds of styles are really dependent on the Global Light source. If you want to force the style to remain completely independent of this document-level property, just go into the style settings and uncheck the Global Light options. Then, whenever you apply the style, it will be applied with the same angle of lighting.

Also, remember that, because many of the options work in terms of a given number of pixels, almost all styles are size sensitive. If an object is too large or small, you can really lose the effect. Of course, you can also usually compensate for this by adjusting the settings within the styles accordingly!

So there you have it – a relatively simple Photoshop tutorial to help create some really cool glossy glass effects using layer styles on your objects. What do you guys think? Will this technique be useful to you? Do you have any other suggestions or ideas that you would like to add? Please do share!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

If you’ve worked with Photoshop for any significant amount of time, you will know that the application comes packed with a broad range of different filters, which can be used to create some really awesome effects. You may also find that the sheer number of filters is somewhat overwhelming!

In this article, we’re going to look at 10 Photoshop filters that I think every user should know. We’ll talk about what they do, and more importantly, why you should get to know them all.

1. Gaussian Blur

Filter » Blur » Gaussian Blur…

I couldn’t even begin to count the number of times that I use this one. It’s a wonderfully simple blur filter, but also gives you a very high degree of control over precisely how strong of a blur you want to apply. It’s a great tool for softening edges or spreading colour out across the canvas.

For example, one lighting technique that I use quite frequently involves creating a layer with a coloured light, which I give an Overlay blending mode. I can start off by simply painting a simple block of colour with a large, soft brush, over one of the textures from my Texture Pack 1

Add a large circle of blue

I can then apply a Gaussian blur of 100px to really soften the “light” up.

The colour is difused by the gaussian blur

Then I just apply the Overlay blending mode, to get an effect like this one.

Layer duplicated and set to Overlay

I’ve also used this filter to add a faked depth of field to a photo, to soften certain gradients and to add certain glow effects to type. It’s just so incredibly useful!

2. Add Noise

Filter » Noise » Add Noise…

It took me a while to start working with this filter. I had used the Reduce Noise and Despeckle filters on some rough stock photography before, but I couldn’t figure out why anyone would even want to add noise. Eventually, though, I got with the program.

When creating certain types of illustrations – or even some UI elements – adding a bit of carefully controlled noise is an excellent way to add a bit of extra texture. Take this image of my Imperial Leaf pattern for example. First, we see it without noise.

Simple, flat pattern

Next, we apply just a little bit of monochromatic noise, with a uniform distribution.

With just a bit of noise added

Notice that the pattern now has just that much more texture and depth to it. It has more of the appearance of a photograph than the large, unbroken and coloured spaces of a vector pattern. Of course, it’s a filter that requires a delicate restraint. The idea is usually to add just a tiny bit of noise for the sake of added texture. Too much noise, however, can quickly destroy the design. Fortunately, we have the Undo command, and the power of non-destructive editing, which I will get to below.

3. Clouds

Filter » Render » Clouds…

This is another filter that is really great for adding extra texture to your work, especially if you are looking to develop a nice smokey effect. When you run the Clouds filter, Photoshop basically takes your current foreground and background colours and creates a random, cloud-like effect like this:

A simple render of clouds

If we set the blending mode to multiply over a nice red-to-black radial gradient background, we get the beginnings of a nice, dark red smokey effect.

Clouds layer new set to multiply

With just a bit of extra work, this could become an awesome background for a dark or fiery design.

4. Texturizer

Filter » Texture » Texturizer…

The Texturizer filter is similar to the Clouds filter, but with a few more options. There are four different types of textures that you can choose from – Brick, Burlap, Canvas and Sandstone. You can also adjust the scaling of the texture, the relief (ie the perceived depth) and the direction of the lighting. This last option can be particularly useful if you are working on a piece with an existing light source.

Here are some textures created with this filter:

Four different coloured textures created with the Texturizer filter

Also, while you can render clouds into an empty layer, the Texturizer filter won’t work this way. It actually needs to work on something. I will often just start by filling the canvas with a solid colour, but you can apply texture to a photograph or other graphical element too.

5. Lens Flare

Filter » Render » Lens Flare…

I admit, the lens flare can be a dangerous tool in the wrong hands! A poorly executed lens flare can leave a design looking almost painfully amateurish. Still, if executed properly, it can be an incredibly useful filter.

Normally, I will take a plain black layer and render my lens flare onto that. Then, I can use some sort of blending mode in order to better apply the lens flare to whatever I’m working on. For example, here is a simple black layer with a 105mm Prime flare.

A simple lens flare

Now, with the same background we made with the Clouds filter, I set the lens flare layer to Color Dodge to get this:

Turns into a powerful effect through blending

I would probably do a bit more work to soften up some parts of the lighting effect on this one, but the filter is definitely a good start.

6. Spherize

Filter » Distort » Spherize…

Spherize is an awesome distortion filter, which basically takes a flat image and distorts it so that the details of the image itself appear to be wrapping around a sphere. Obviously, it’s a very specialized kind of filter, which you probably won’t use all the time, but I have found it useful in several projects in the past.

One of the ways that I find that this filter works best when working with textures, which you can basically turn into a textured glove or sphere of some sort. Let’s take this simple stone texture, also from Texture Pack 1, as an example:

Start with a simple texture

Make a circular selection in the middle of the texture, create a clipping mask to hide all of the excess texture that we won’t need. Then, apply a Spherize filter. I would use a strength of about. If we add a simple Inner Shadow effect layer style, here’s what we get:

Use the Spherize filter to give the texture shape

Again, this piece would probably need some work to help bring out the proper sense of depth, and maybe sharpen up some the details, but the filter certainly gives us a good start!

7. Polar Coordinates

Filter » Distort » Polar Coordinates…

This is a cool filter, which you can do a lot of interesting things with. When you use the Rectangular to Polar option, it basically compresses your image, the twists it around the canvas’ center point. It really isn’t the easiest thing in the world to explain, so let’s look at an example. These screen shots are taken from a previous post, entitled Quick Tip: Create A Simple Sunburst Element.

10 vertical black stripes

From this simple set of vertical lines, we apply a Polar Coordinates filter, and we get something like this:

The final product

Notice the way document is distorted and warped around the center point. It’s kind of like what happens when you take a Slinky and twist it so that the two ends meet. Make sense?

This is one filter that I would recommend you experiment with. It can be a bit tricky, and can sometimes yield some somewhat unexpected results. It’s still awesome though!

8. Lighting Effects

Filter » Render » Lighting Effects…

This filter allows you to apply various types of lighting effects to the layers in your designs. This can be particularly useful when working towards some of the effects that are extremely popular these days. There are also a ton of different options, including three types of lighting, the choice of colour, intensity, and many others. The filter also comes with several presets, which you can use as they are or as a starting point for creating your own custom lighting.

The preview is a pretty useful part of this filter, too, since it allows you to select and modify the shape of the light itself, giving you a remarkable degree of control over your effect.

As an example, let’s take this this same texture that we used in the Gaussian Blur example.

Another simple texture

Now, here are three different lighting effects on the same image, each using one of the different presets.

Lighting Effect 1

Lighting Effect 2

Lighting Effect 3

These lighting effects represent only a very small sampling of the different things that you can do with this filter, which is why I think it is so valuable, and absolutely worth getting to know!

9. Offset

Filter » Other » Offset…

The Offset filter is a useful little tool for shifting the position of pixels on the canvas. I will often use this filter when creating repeating patterns in Photoshop. When you run it, you are given the choice of how much you want to offset the image on both the horizontal and vertical planes. Because I am usually creating patterns, I generally offset by exactly half the width and half the height, so that what were originally the four corners of my image now meet in the center.

For example, here is an image of a lovely young woman that was made available as a free download from iStockPhoto some weeks ago (cropped down to a 500px square):

A simple image, which we will offset

Now, if we apply an offset of 250px and 250px, we get a result like this:

The offset applied

It may not look all that useful on a photograph like this, but it’s a great way of creating perfectly matching, seamless edges for patterns!

10. High Pass

Filter » Other » High Pass…

I actually picked up on this filter from an article posted over on the GoMediaZine, entitled “Photoshop Tip: Sharpening with Photoshop’s High-Pass Filter”. It’s an incredibly easy way of achieving good, controllable sharpening of your images.

Basically, you just duplicate the layer that you are wanting to sharpen and run a High-Pass filter on it. If we do this on the same image that we used for the offset, we get something like this:

The image with the High Pass applied

Not too pretty, I know. However, if we set the blending mode of this new, filtered layer to Overlay, suddenly we can see the sharpening occur. Here is the same image again, with the left half sharpened and the right half unchanged:

Compare the sharpened (left) against the unsharpend (right)

You can also achieve something similar with the Soft Light and – blending modes. And, if you don’t want to the sharpening to be quite as strong, just pull back the opacity of the filtered layer. This is a great technique for making quick and non-destructive changes to an image.

Be Smart With Your Filters

Well there you have it – 10 of my favorite Photoshop filters, most of which I am certain will be of some value to you if you use Photoshop to any significant extent. I do suggest that you go ahead and play around with them a bit. Experiment and get to know how these different filters actually work!

But I would also encourage you to be Smart with you filters.

I’m playing on words a bit, but here’s the basic gist: any filter applied to a Photoshop Smart Object is applied as a Smart Filter. What does this mean? Simply put, it means that the filter becomes editable! You will be able to see the filter in the Layers Palette, the same way you would see a Layer Style. You can then go ahead and double click it to reopen the settings dialogue and make slight modifications, if necessary! Or, you can just delete it entirely, and see the image return to its original state.

Trust me – learning this literally transformed the way I approached a lot of my Photoshop work. Plus, knowing that I could easily go back and either remove or alter a filter’s settings has afforded me a lot more creative freedom. Hopefully it can have the same effect for you!

I hope you enjoyed this post, and maybe learned about a filter or two you hadn’t used before. What about you guys? Are there any filters that you use all the time that didn’t make this list? I’d love to hear about your own experiences with filters!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

Can we have a little fun in this post? Let’s start by me admitting that I’m a pretty big Batman fan. I’m not obsessive. I don’t follow the story lines or buy all the comics every month, but I have a deep interest in the Dark Knight as a character. He’s troubled and complex and terribly interesting – definitely my favorite comic character of all time!

I was also lucky enough to get Batman: Arkham Asylum for my X-Box 360 this Christmas, and I am absolutely loving the game (even though I haven’t really had the chance to play at all over the past few days). It’s probably one of the best games I’ve ever played, and it’s gotten me back onto a big Batman kick.

Batman (click for image source)

So, what does this have to do with design? Absolutely nothing!

However, a few months ago, I was reading a pair of articles over at GoMediaZine, where the author had Photoshop and Illustrator engage each other in an epic and imaginative battle of words. It was an interesting pairing of articles. Personally, I found the writing to be a tad obnoxious, but that’s just how some people roll. Anyhow, the posts stuck with me, and I think back to them every once in a while.

One of the things that really struck me, though, was the way that the author simply presupposed this massively antagonistic relationship between Photoshop and Illustrator. Personally, I don’t see it at all. For me they are like the Dynamic Duo of my design workflow! Each application serves its purpose, and I quite often use them in tandem.

I find they work quite well together when I am working with more complex vector illustrations in Photoshop. I create a vector Smart Object in Photoshop, opening and editing it in Illustrator, as necessary. It works really well for me.

Still, there seem to be a variety of different views on the relationship between these two applications, and I found myself thinking about various relationships between Batman and the various characters in the DC universe. More specifically, the thought occurred to me – if Photoshop was Batman, what would Illustrator be? Here are some possible scenarios.

Superman (click for image source)

They’re both on the same side, but their methods are quite different, and as such they occasionally clash, though usually with a peaceful resolution. In this scenario, Illustrator is unquestionably the stronger of the two, with its polished and squeaky clean image(s).

Photoshop on the other hand, works in the rougher, grungier world of pixels. It may not have the same Kryptonian strength, but it’s bag of tricks had more to offer, and it’s not afraid to get its hands a little dirty to get the job done.

Also, they rule over completely different areas. Photoshop is the Dark Knight of Gotham’s pixel graphics, while Illustrator keeps its vigil over Metropolis’ vector art.

Robin (click for image source)

Photoshop is the head of the operation, here. He makes most of the decisions, calls most of the shots, while Illustrator is the younger, less experienced sidekick. Sure, Illustrator has a few good tricks – it’s flexible and acrobatic, but it lacks the vast knowledge of Photoshop.

Illustrator dreams of making it on its own one day, and does occasionally find itself taking on solo missions. For the most part, though, it remains firmly and safely under the tutelage of Photoshop, who it looks at like a friend and mentor, someone to appreciate and learn from.

Nightwing (click for image source)

Illustrator is all grown up. It used to be more of a sidekick to Photoshop, but has finally matured and struck out on its own. It’s still acrobatic and flexible, but has also grown in strength and is now more than capable of handling things all by itself.

Still, Illustrator recognizes that it’s working in Photoshop’s turf. Illustrator may have grown up enough to be able to handle itself out on the the tough streets of Gotham, but there is no doubt as to who is the big Bat in town.

Note: For the purposes of this article, I am purposefully disregarding the fact that Nightwing/Dick Grayson does actually don the cowl for a while.

Alfred (click for image source)

Illustrator is level-headed, hard working and incredibly loyal. It’s saved Photoshop more than a few times in the past, cleaned up messes, stitched up mistakes and just helped keep the entire operation glued together. Photoshop could probably survive without it, but it just wouldn’t be the same.

Ultimately, though, Illustrator remains Photoshop’s butler. It works hard and diligently, but all of it’s efforts are ultimately done to support Photoshop in some way.

Catwoman (click for image source)

Photoshop and Illustrator never know what their relationship is going to be like on a given day. Sometimes they find themselves working together towards a common goal. At other times, though, they are at each others throats, battling each other towards conflicting and irreconcilable ends.

Neither would consider themselves enemies, and there are even hints of some level of mutual attraction. At the same time, though, they just cannot bring themselves to completely consider themselves allies either. They both see themselves as be doing good work, but while they do share some similar methodologies, their approaches are just too different for them to work well together on a consistent basis.

Lately, though, there have been more positive encounters than negative…

Ra's al Ghul (click for image source)

Both Photoshop and Illustrator believe themselves to be working towards the greater good, but their ideologies and approaches to achieving their purposes are so incredibly different that they cannot help but come into direct conflict time and time again, often violently.

Despite their differences, though, there remains a grudging respect between them, as they each recognize the other’s unique strengths and abilities. In the most extreme of circumstances, they may even be willing to temporarily set aside their animosity and work together towards a common goal. Such an alliance must always teeter on the edge of the proverbial knife, and both sides know that it simply will not last.

Joker (click for image source)

There is nothing buy enmity and hatred here. Everything they do opposes each other and there is no hope of any alliance ever forming. In fact, their actions are almost entirely antagonistic to each other, especially Illustrator’s whose brightly coloured exterior masks a much deeper psychosis.

Each drives the other, however, in a sort of cyclical relationship in which Illustrator obsesses with besting, and perhaps even destroying Photoshop, while the ever-resourceful Photoshop continues to find ways to overcome Illustrator’s plots, but refuses to cross into that place where he ultimately destroys his arch-rival.

Final Thoughts

Alright, I think it’s fair to say that none of these imaginings will perfectly depict the relationship that exists between Photoshop and Illustrator. There are just too many varying factors, both between the applications themselves and between the various characters from the DC Comics universe. Still, I hope you found it to be a fun little exercise, and that it got your thinking about the relationship between Illustrator and Photoshop in your own workflow.

Do you keep the two applications completely separate from each other, with no thought for combining them? Or, do they function more as a team, working together to achieve the same ultimate goal? Are you satisfied with this relationship, or do you want it to change and evolve into something more productive? Even if this article was mostly just fun and silly inner-geek indulgence, these last few questions are interesting and at least worth thinking about (assuming, of course, that you actually use Illustrator and Photoshop).

Adobe has been making strides over the past several releases to help both applications play nicely together, through the introduction of things like Smart Objects. Illustrator is also equipped with some raster-based effects and familiar Photoshop filters. Personally, I find that the movement from Illustrator into Photoshop is much smoother than the inverse, though this likely at least partially due to the way that I like to work.

With that being said, though, it’s your turn to talk. What do you think? If Photoshop was Batman, who would Illustrator be for you? Would you name anyone on this list or would you choose someone else entirely? The Riddler? Bane? Commissioner Gordon? I’d love to hear your views on this (silly?) comparison! Hope you enjoyed it, too!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

If you’ve visited the Echo Enduring Blog before, chances are that you might have seen some of the different website screenshots that I use – most notably in my weekly Echoes posts. If you’ve never been here before, welcome! Here’s a sample of what I’m talking about!

Preview of the FInal Image

I’ve had some inquiries about how I create these. It’s actually really simple, and no I don’t use any special software. I do it all in Photoshop, using a template that I set up in a few simple steps. Today, we’re going to take a quick look at how to do this.

Step 1

The first thing that you are going to want to do is get yourself a screenshot of whatever it is that you want to capture. There are different ways of getting this, depending on what kind of platform you’re running. Here are the two that I know of.

Mac: With the window that you want to capture open, just press Shift-Command-3. This will take a shot of the screen and save it to the designated folder (the default is the desktop). Depending on what version of OS X you are using, the file may save in different formats. I’m using Leopard and the screenshots are always in PNG format.

Whatever format it saves in, open the file and double click on the background, to transform it into an actual layer.

PC: With some of the most recent versions of Windows (Vista, XP), you can capture a shot of the screen simply by pressing the often forgotten and somewhat obscure Print Screen button on the keyboard. This will save the current screen to the clipboard. Now, in Photoshop, just create a new document. The program is smart enough set the size of the document to match the contents of the clipboard, so simply paste the screen shot into the document as a new layer.

I will be using a screenshot from Visual Swirl, a relatively new design blog!

Visual Swirl Screenshot

Step 2

Next, we simply right click on the screen shot layer (in the Layers Pallet) and convert it to a smart object. This will become the fundamental building block of our template. Whenever we want to change the site that is being previewed, we can just change the contents of the smart object.

Step 3

Next, crop the image down with the Image » Resize Canvas option. I set mine to 500px x 500px, since this is the size of image that I typically like to use. Because we have a Smart Object set up here, the contents of our screenshot won’t get cropped away, which is important.

Document cropped down to 500px by 500px

Step 4

Next, we want to rotate the Smart Object. Select that layer and choose the Move tool from the toolbox and grab one of the handles of the Smart Object (which will now be off the canvas). This will take you into distortion mode, and allow you to rotate the object. I rotated mine by about 8 degrees, counter-clockwise (in other words, a numeric value of -8).

Next, grab the Smart Object itself and move it around so that it is positioned nicely within the the frame of the canvas.

Rotate the Smart Object -8 degrees

Step 5

Lastly, we will add a simple vignette to complete the effect. Add a new layer and select the gradient tool from the toolbox, select the radial gradient and set the tool’s blending mode to multiply. Now, select the standard black and white gradient, position your cursor in the middle of the canvas (I usually just approximate), and draw a line from that point to one of the corners (I usually to to the top left).

This will create a nice black and white gradient like this:

Basic Black and White Radial Gradient

Repeat the process several times. Because the blend mode is set to multiply, the black will grow and the white will shrink. Keep repeating until you have something like this:

After Repeating the Gradient Several Times

Now, invert the layer by pressing Shift-Command-I (PC: Shift-Ctrl-I) and set the layer blending mode to multiply.

The Inverted Gradient

The corners will be a bit dark, so reduce the transperency of the layer to about 80%.

Preview of the FInal Image

Conclusion

That’s it folks. Pretty easy, isn’t it? Now save the document with some sort of name to designate it as a template. If you want to use this same effect on something else, just open up the Smart Object and replace the screenshot. When you replace the smart object document, it will automatically be updated in the main document!

You can actually use a similar technique in a variety of different instances too! Any time you need an element that can be easily updated, you should at least look at using Smart Objects. Chances are they will be able to help you out!

Exclusive Freebie

Okay, so you don’t want to go through the whole process of creating this kind of template for yourself? Fair enough I suppose. And, just because I love all you readers out there, I’ve decided to make my own template available as an exclusive freebie.

Download the Template

Grabbing the pack is easy. Just check your feed reader for my most recent post, and look for freebie code at the bottom of the entry. Then, click the download link below, which will take you to the Crawling Vines download page. Enter the freebie code for immediate access to the pattern pack.

If you’re not currently subscribing to my blog, it’s not too late! Just add my feed to your RSS reader of choice! Not only will you get access to this awesome pattern pack, you’ll also get all sorts of other awesome content delivered right to your reader!

» Grab the RSS Feed

» Download the Website Screenshot Template

Well, I hope you find either the tutorial or the freebie useful! If you have any concerns or questions, or if I failed to make something clear, please do let me know by leaving a comment. Also, I’d love to hear about some of the ways that you have found to use Smart Objects!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

In today’s post, we’re going to walk through a really simple process for turning your favorite vector pattern into a really cool wallpaper… wallpaper.  Basically we are going to create a desktop background out of a pattern, and make it look like it’s actually a textured wallpaper. We’ll also add some dramatic lighting effects to make it look really cool. Here is a preview of what the final design will look like:

The Finished Wallpaper

This is pretty easy to do, but there are a number of steps so, let’s get started.

Step 1

First, create a new document. You can make yours whatever size you want, but I’m going to make mine 1280 x 800 so that I can use this as the desktop wallpaper on my MacBook. Also, be sure to set your document to RGB colour mode, as some of the filters and effects we will be using are not available in CMYK mode.

Create a New Document

Select white as your foreground colour and fill the canvas. Now press X to invert your background and foreground colours and set your foreground to a light grey. Hex code #BBBBBB should work nicely. Select Filter » Texture » Texturizer from the menu.

Set the texture type to Canvas, your scaling to 100% and your relief to 6. Also, change your light option to Left, which will emphasize the vertical ribbing in our new canvas texture. Once all the options are set, go ahead and apply the filter.

Create a New Canvas Texture

This will give us a nice canvas texture for our wallpaper, which we will lay over the rest of our design. To prepare for this, set the layer to multiply.

Our Created Canvas Layer

Step 2

Okay, the next step is also preparatory. First, we’re going to save our file twice. Go ahead and save the file, calling it distort.psd. Now, use the Save As option to save the same file again. This time call it something like wallpaper.psd.

Yes, I know that this gives us two identical copies of the same file, but stick with me here.

Now, open up distort.psd again. We should only have a single layer here, so simply select Filters » Blur » Gaussian Blur from the menu. In the dialogue box, set the radius to about 1.

Apply a Slight Blur to Prepare this File for Later

Save the file and close it. We’ll come back to it in a bit.

Step 3

Select a colour palette. You can do this in a number of different ways. You can go out to your favorite colour website, such as COLOURlovers or Adobe Kuler and find or create your own colour palette. I chose to simply sample a few of they key colours from my website, to help keep in tune with my branding

Once you have selected your colours, create a new fill layer. Select Layer » New Fill Layer » Solid Color. Select the colour you want for your background and create the layer. Now, drag the new fill layer beneath the canvas texture.

Select a Background Colour

If you choose a colour as dark as mine, you will hardly be able to see the texture, but that’s okay. We are going to add some lighter colour soon!

Step 4

Open your vector pattern. In this case, we will be using the new Abstract Blobs pattern that I uploaded a few days ago. We will be using the plain version (as opposed to the fully coloured versions, which have a background and a foreground). I’ve chosen this option because it has no background, which will let our fill layer show through properly.

Open the Abstract Blobs Pattern

With the pattern open select Edit » Define Pattern from the menu. This will bring up the pattern dialogue box, where we can give our new pattern a name. In this case, I will simply call it Abstract Blobs.

Create a New Pattern Preset

Press OK to create the pattern and automatically add it to the currently library.

Step 5

Next, create another fill layer. This time, instead of using a Solid Color fill, use a Pattern fill. In the new layer dialogue, name the layer “Pattern” and press OK.

Now you can select the pattern. Open the pattern flyout and select the Abstract Blobs pattern. Set the Scale to 75% and then create the layer.

Create a new Pattern Fill Layer

Step 6

Of course, our colour scheme doesn’t call for a black pattern (in this case, it’s plain black, which is rendering lighter than our background), so we’re going to use some Layer Styles to fix this – specifically the Color Overlay style. However, we have to do something else first. If you try adding a Color Overlay to the pattern layer, you will find that the overlay covers the entire layer, including all the transparent areas.

Obviously, this isn’t what we want.

So, let’s fix it by transforming the pattern layer into a Smart Object. To do this, simply right click the pattern layer in the Layers Palette and select Convert to Smart Object from the contextual menu.

Convert the Pattern Fill Layer to a Smart Object

Because the Smart Object is rendered more like a normal pixel layer, we can now apply our Color Overlay. Click the layer styles button at the bottom of the Layers Palette and select Color Overlay. Select the colour you want for your pattern, set the blending mode to normal, the opacity to 100% and press OK.

Add a Colour Overlay to the Pattern Fill Layer

This will effectively change the colour of our pattern. Now, simply drag the pattern layer beneath the canvas layer and above the background layer.

NOTE: If you are using a pattern that doesn’t have a transparent background, the previous 3 steps may not apply to you. From this point forward, we will be working with the pattern layer and background layer as one, so you can substitute your own pattern for this combination in the steps that follow.

Step 7

Did you know that it’s possible to embed Smart Layers within Smart Layers? This is exactly what we are going to do next. In the Layers Palette, select the pattern and background layers (the former being a Smart Object itself). Right click and select Convert to Smart Objects again. This will create a new Smart Object out of these two layers.

Now, let’s get back to the distort.psd file that we created earlier. Select, Filter » Distort » Displace from the menu. Set your Horizontal and Vertical scales to 2, the Displacement Map to Stretch to Fit and the Undefined Areas to Repeat Edge Pixels. Press OK.

Apply a Displace Smart Filter

Unlike some other filters, this will actually bring up an open dialogue box, from which you will select the previously created distort.psd. This Photoshop file will now be used to apply a slight displacement to the pixels in the Smart Object, which you can see more easily by temporarily hiding the canvas layer.

Essentially, what we’re doing here is contouring the pattern to the shape suggested by our canvas layer. The effect is really subtle, but it works well for this sort of warping and I wanted to include it here.

Step 8

Now let’s add some drama to our composition with a Smart Filter. Actually, we’ve already used a Smart Filter when we applied our Displace distortion, but let’s take a brief look at what Smart Filters are and how we can use them.

It’s really simple. A Smart Filter is just a regular filter applied to a Smart Object. Because Smart Objects are actually embedded files (Photoshop, Illustrator, RAW), they retain all of their original properties. This means that you can resize and distort them in all kinds of ways, and then be able to go back and change your settings whenever you want.

The same is true of Filters. When you run a filter on a Smart Object, it becomes a Smart Filter, which essentially means that it is an editable filter that you can change and modify at will.

We’re going to use this concept by applying a lighting effect.

Select our canvas layer and our pattern Smart Object and convert them to a new Smart Object, just as we did before. Now, all of our work is packed into several different Smart Objects, all nested inside each other. With this main object selected, let’s apply a lighting effect. Select Filter » Render » Lighting Effects from the menu.

In the dialogue box, select an Omni light, with the following settings.

Add a Lighting Effect with These Settings

Notice how I directed the light closer to the bottom of the canvas. This is a personal preference toward offseting the balance a little and increase the drama of the effect. You can do it however you’d like. Click OK to apply the effect.

Our Wallpaper with the Lighting Effect

Step 9

It’s looking pretty good now, but we want the final wallpaper to have a really dramatic feel. So, create a new layer and, with a large, soft brush we’re going to start painting some extra colour. I would recommend using two bright colours that complement your palette. In this case, I chose a bright cyan and a somewhat muted yellow.

Start painting in a circle, just off the center of the canvas. Paint so that the colour is the most opaque in the middle and the most transparent around the edges, sort of like spotlight. I usually also apply a Gaussian Blur to diffuse the colour even more.

Paint a Yellow Lightsource with a Large, Soft Brush

Once you are satisfied with the layer, set the blending mode to Overlay. Depending on the colours you choose, you may also have to play with the layer transparency. I found the yellow came on a bit too strong, so I reduced my transparency to 50%.

Convert the Blending Mode to Overlay

Repeat this process with your second colour, in a slightly different spot. Keep adding Overlay layers in slightly different locations, all overlapping in the center. This will build up a very dramatic effect, something like this

Repeat the Process Several Times

Step 10

One more lighting effect to go. In the same way that we created our Overlay layers, paint a new light on a new layer, at the heart of where all of your Overlay lights converge. Use white as your colour and set the blending mode to Pin Light. Try not to paint the light on too thick, as you want this to be a fairly subtle effect. If it does get a bit heavy, try adjusting your transparency settings to compensate.

Complete the Lighting Effect with a bit of White

Step 11

We’re going to apply one final effect here, a vignette technique that I use in a lot of my designs.

Create a new layer and select the gradient tool. Make sure that the gradient mode is set to radial and that you have the standard black and white swatch selected. Also, you are going to want to set the blending mode of the gradient tool to Multiply. Now, set your cursor in the center of the canvas. Click and draw a line to one of your edges. This should create your radial gradient, with black in the center and white at the edges.

Repeat this process several times, always moving from the center to the edges. With each repetition the amount of black will grow larger. You may also find that you are getting a bit of banding. I usually fix this by simply applying a strong Gaussian Blur, which blends the colours very nicely.

Create a Black-Heavy Radial Gradient

I also usually just eyeball it, but if you want to be really precise, just set up one vertical guide at 640px and one horizontal guide at 400px. The point where they cross will be the exact center of the canvas. Of course, if you’re using different dimensions, your center point will be different, so you’ll have to do the math to figure that out yourself (sorry!).

Next, just invert the layer by pressing Command-I (PC: Ctrl-I) and set the blending mode to multiply. Now you should have a nice vignette effect around the edges of your design.

Invert and Set to Multiply

Step 12

This last step I leave this entirely up to you. We’ve come this far with our wallpaper design, what you do beyond is entirely up to you. For my part, I simply added a nice coloured bar with my logo and blog address. This works just fine for me, but you can add whatever you’d like.

The Finished Wallpaper

Also, if you’ve read through all of this and really just want the wallpaper, you can download it by clicking on the preview of the finalized design, above.

Anyhow, I hope you enjoyed this tutorial and learned a thing or two. Let me know what you think! Was this article useful for you? Is there anything else that you might like to know? Just leave a comment!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd

Hey guys! I know it’s been a few week since I released my last freebie, so I’m bringing you a new one. I’ve actually had this one up my sleeve for a while, so to speak. In this unique package, you will find five different Photoshop files. Each file is designed as a “frame” that you can drop photographs into to create a cool effect.

You can pretty much see what I’m talking about in the preview, below. If you can look past some of extra pizzaz that I added to the preview, you can see that I dropped the exact same image (courtesy of istockphoto.com), into each of the different frames, creating drastically different effects.

5 Unique Photoshop Frames (Downloaded 781 times)

Originally, I created these frames just before my daughter was born. I took some pregnancy shots of my wife, and used these frames to add some sizzle to some of my favorites. Of course, since my wife would quite understandably be upset if I posted those pictures up here for anyone to see, you’ll just have to make due with the colonel here.

There are a few different ways that you can use these frames. In their unedited form, they all have a layer named “Outside White”, which basically masks of the edges of the “frame” with a layer of solid white. This was because I wanted the images to blend into a white background. For the preview, I simply inverted this layer to make them blend into a black background. You can also use this layer and, combined with some basic channeling, create layer masks to actually hide various parts of the other layers to make the frame transparent.

You can download these Photoshop frames by clicking on the preview image above. Feel free to use him in any of your designs. Go ahead. Experiment and have fun with these. Feel to add to them too, or to extract from them. I am particularly fond of some of the grunge work in one of the frames, and I will frequently go back to it and extract that part if I need a really quick’n'dirty grunge effect.

As always, I’d appreciate it of you let me know where and how you use these freebies!

Exclusive Content

To thank you for subscribing to my feed, I am including exclusive, feed-only content for you at the bottom of each post!

Current Freebie Code - 7ev165dd