Back around Christmas time, I released a pack of really bold, gungy textures that I had created specifically for Echo Enduring readers. One of the comments that I received suggested that it might be a good idea to provide a tutorial on the process I used. So, while each texture was actually a bit different, I have decided to write a generalized overview of some of the techniques that I used to create those textures.

Kicking it Grade School Style

I don’t know about you, but back when I was in grade school, I remember having a few different projects where I had to do something “creative”. One such project was to create the last will and testemant from some character from a novel set in the Renaissance or Victorian England. Honestly, I can’t remember all that much about it, except that I wanted to make it look old and weathered. So, with the help of my mom, I set about staining paper, tea bag style.

This is a really old and simple trick, but sometimes those can be the best! Basically, just boil up some water and make yourself a nice big pot of tea. Good old-fashioned English breakfast tea works really well. Once it’s brewed, follow these directions:

• If so inclined pour yourself a cup. Then, pour the remainder into a dish that would be would be wide enough to set a piece of paper in.
• Take a piece of paper (plain old printer paper works find) and crumple it up into a ball. Then, carefully uncrumple it again.
• Set the paper into the tea so that it is fully submerged.
• Wait. How long you wait is up to you, but the longer you wait, the more of stained the paper will become .
• Take the paper out of the tea and set it somewhere to dry

Once it’s dried, you will have a nice brown-stained sheet that will work well as the base for our texture. At this point, you can either scan it into computer or photograph it. I chose to photograph mine, because we will also be using the camera to capture a couple of other resources, so the image dimensions will all be identical.

Just a bit of tea and plain old paper were used to create this texture

Finding the Grunge

I like to think that my wife and I keep a fairly clean household, but that doesn’t mean that there aren’t a few places where I can find some awesome, grungy surfaces. One of those places is the garage floor. Made from poured concrete, and victimized by all kinds of dirt, mud and other substances, it is a wonderfully stained, textured and even cracked surface that yields all kinds of grungy awesomeness. I’ve taken all kinds of shots of my garage floor for texture purposes. Here is the one we will be using today!

My garage floor offers all kinds of opportunities to find grunge

Another prime spot in my house is the wash basin downstairs. This old, battered plastic sink was in pretty rough shape when we moved in, and after having been the site of many different cleanups, it’s developed its own grungy character! So, I snapped this shot of that spot, and will be using this as the third and final resource for our process today:

Another grungy photograph from a surface in my basement

Blending And Adjusting

Start by opening up the paper texture in Photoshop. Then insert a new layer with the garage floor texture. You can either use open-copy-paste to insert it, or place it in as a Smart Object. Next, set the blending mode of the to top layer to multiply. This will essentially merge the two textures together:

Use the multiply blending mode to merge the two source images

By combining these two layers together, the entire thing is a little dull and drab, so let’s use some adjustment layers to bring a little vibrancy to the overall piece. We’ll start with by adding a Levels adjustment layer, with the following properties:

Use an adjustment layer to tweak the levels and make the image a bit brighter (values of 23, 1.04 and 192)

Next, we’ll also use a Brightness/Contrast layer to bring out even more of the texture:

Next, use a Brightness/Contrast adjustment layer with a brightness of 18 and a contrast of 16

Now it looks much more interesting, with more contrast and lighting that allows you to really see all of the details. It also sets things up for the next step, where we will be bringing in even more grunge through our third resource.

First, though, let’s add a little more colour into the mix. Create a new empty layer, then set your foreground colour to a medium brown and your background colour to a sort of kiwi-ish green. Create a a linear gradient from one corner to the other

Create a layer with a coloured gradient

Then, set the blending mode to Hue.

Set the blending mode of the coloured gradient to Hue to give a slight colour treatment to the image

The effect is subtle, but it adds a bit of extra visual interest into the composition and brings a certain sense of atmosphere. For a different kind of feeling, you can try different combinations of colours. If you’ve never really used the Hue blending mode, I really suggest taking the time to play around with it a bit. It’s become one of my favorites.

Alright, now lets import our third photograph. Again, you can either paste it in or place it as a Smart Object. The first thing we’re going to do with this one is to use another adjustment layer to bring up the brightness and contrast a bit:

Slightly increase the brightness and contrast of the texture.

This will give the texture a slightly “overexpossed” look. We’ll loose some of the detail, but that’s okay, since what we really want the most out of this one is the big patches of rust stains. Once we’re satisfied with the contrast here, we’ll want to commit to our adjustment. You can either do a hard commit by merging the texture layer and the adjustment layer, or you can be less destructive and select them both and create a new Smart Object. It’s up to you.

Whatever choice you make, you are next going to want to set the blending mode of our adjusted texture to Linear Burn.

Altogether, the blending and adjustment layers combine to create this

Now that is a dirty, grungy and intense bit of grunge!

Finishing Filters

Once we’ve come this far, another thing that I like to do is mess around with some lighting filters, just to bring a little extra finish. Of course, we can’t apply a single filter to all the seperate layers, so the first thing that I always do is to select all the layers and convert them to a Smart Object, by right clicking on the selected layers in the Layers panel and selecting the Convert to Smart Object option.

With this done, we can actually use a Smart Filter, which is basically just a filter that is applied to a Smart Object. The key difference, however, is that Smart Filters can actually be edited later, which is an incredibly useful tool.

In this instance, we will use the Filters » Render » Lighting Effects filter, with the following settings:

Use these settings on the lighting filter

One key thing to note, is that we are using the Texture Channel option, with the green channel selected. In addition to adding some lighting, this will add a bit of extra bit of grainy texture.

The lighting filter also adds an extra bit of grainy texture

Lastly, we’ll use just one more Brightness/Contrast adjustment layer to finish things off:

Use one last Brightness/Contrast adjustment layer with brightness 20 and contrast 10

Conclusion

And there you have it! One totally totally homemade texture, complete with all kinds of gritty, grungy and interesting details, which you can now use in any number of ways, such as incorporating it as the background for a poster.

Our final, homemade texture

And that’s exactly what I’m going to do. I have a poster to do for a local youth event, and this will make an excellent start! Regardless of what you choose to do with the texture, though, the important thing about this exercise is to just have fun and experiment. Play with different blending modes and adjustment layers, maybe even a few filters. This kind of thing is a great way to familiarize yourself with features and behaviours and just start to learn your way around Photoshop. Plus, it can give you some really awesome textures to use in your designs.

So go ahead and have some fun! If you end up creating something awesome that you use in a design, feel free to drop the link for everyone to see!

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

Last week, I made a slight tweak to the blog’s functionality. You can see the effects of this change in the sidebar, which should stick to the top of the page as you scroll down, but which won’t actually scroll out of the main content area. This is achieved using a custom coded jQuery plugin that I created for this exact purpose. I’ve dubbed it the Contained Sticky Scroll plugin, and released it as a freebie. If you haven’t downloaded it yet, be sure to check it out.

Anyhow, I thought it might also be interesting to take a deeper look at the code and the process that I used to write the plugin, so that’s what this post will be about.

As with any coding project, the first step is to determine the basic objectives of what we’re looking to accomplish. In this case, my main objectives were:

• To have a sidebar that would hug or “stick” to the top of the screen as a reader scrolls down the page, thus prolonging the visibility of the ads on the blog.
• Scrolling shouldn’t start until the top of the sidebar drifts above the top of the window.
• Scrolling should stop once the scrolling reaches the bottom the main content area, so that the sidebar does not hover down over the comment and footer areas, since this would look horrible in the context of the site’s overall design.
• There needs to be a way to unstick the sidebar, for users who may not like the stickiness

From the outset, it was abundantly clear to me that jQuery was going to be the best solution. It’s the one JavaScript framework with which I am the most familiar, and I’ve been working with it extensively over the past several months in some unrelated development work. It also has a robust library of animation based functionality, and methods for retrieving positioning information that will be vital for what I was trying to accomplish.

As such, to start, we’ll want to basically define the basic structure for our plugin:

(function( $ ){ $.fn.containedStickyScroll = function( options ) { /* Code will go here */ }; })( jQuery );

This code basically initiates a new method and attaches it to the universal jQuery object. Now we can utilize this method, called containedStickyScroll by calling the basic jQuery object. The method will also accept a collection of options, which should be passed as a basic JSON object (just like any other jQuery plugin).

For any plugin that uses options, we also need to set default values to be used in the event that an option is not specified by the user. In practice, it is very common for plugin methods to be called with only a few of the available options. Often, no options are supplied at all! So, it’s very important to declare defaults for values that will be needed as the plugin executes.

To set our defaults, we just need to create a simple object like this:

var defaults = { unstick : true, easing: 'linear', duration: 500, queue: false, closeChar: '^', closeTop: 0, closeRight: 0} 

Let’s walk through these options quickly. First the unstick option basically tells the plugin whether or not the unstick functionality should be activated. We have defaulted this option to true.

Next, we have easing, duration and queue, all of which are options that will be passed directly to the jQuery.animate() method that is used to actually move our sticky element across the screen. These default settings worked particularly well for me as I was developing the plugin, and are the values used for its implementation on this very blog.

Lastly, we have the closeChar, closeTop and closeRight options, which control the positioning of the trigger, which will unstick the scrolling element (setting it back to its static position) if the unstick option is set to true. closeChar simply allows the user to tell the plugin what character string to use as the trigger, while closeTop and closeRight offer a bit of precision control for tweaking the placement of the trigger in the top right corner of our scrolling element.

Now, if we felt so inclined, we could easily add further options that would also allow us to chose how we want to align the trigger vertically (top/bottom) and horizontally (left/right). This is something I may add into a future version.

Next, we want two lines of simple code to initialize options that can be retrieved later, by the rest of the plugin.

var options =  $.extend(defaults, options); var $getObject = $(this).selector;

In the first line, we are basically merging the values of the defaults object that we created with the options passed to the plugin method. Any option that has been explicitly supplied will be retained, while any option that is not supplied will be set to its default value. By doing this, we will now have a single, unified options object that we can reference as required.

In the second line, we’re basically accessing the selector that we used to target the scrolling element and storing that value to a variable. We will be using this value in the actual animation, which is the next step in the process.

Now stick with me here! This block of code may seem complex at first glance, but the logic is really simple. Here is the code, which I have colour coded to help break it down:

jQuery(window).scroll(function() { if(jQuery(window).scrollTop() > (jQuery($getObject).parent().offset().top) &&(jQuery($getObject).parent().height() + jQuery($getObject).parent().position().top - 30) > (jQuery(window).scrollTop() + jQuery($getObject).height())){jQuery($getObject).animate({ top: (jQuery(window).scrollTop() - jQuery($getObject).parent().offset().top) + "px" }, { queue: options.queue, easing: options.easing, duration: options.duration }); }else if(jQuery(window).scrollTop() < (jQuery($getObject).parent().offset().top)){jQuery($getObject).animate({ top: "0px" }, { queue: options.queue, easing: options.easing, duration: options.duration }); }});

If we use the colour coded areas as guideline, we can translate this into normal language to read:

[When jQuery sees the window scroll] { if(the top of the window is GREATER than the top of the element) AND(the bottom of the parent is GREATER than the bottom of the element){animate element to({ set top position to match the value top of the window }, { setting queue, easing and duration }); }else if(the top of the window is LESS than the top of the element){animate element to({ set top position to 0 }, { setting queue, easing and duration }); }});

Hopefully that actually makes sense to you. It’s really pretty simple. Basically, whenever the window scrolls, jQuery will execute this function. It will check to see if the top of the window is greater in value (meaning the user has scrolled past) the top of the selected element. If it is, then one condition is met. However, the function also checks to make sure that the bottom of the element does not extend past the bottom of its parent. If both of these conditions return true, the function will then trigger an animation which will reposition the element to the top of window.

One thing that is probably worth noting is how we determine the bottom values. As far as I have been able to tell, jQuery does not have a native method to return the bottom of an element the way it returns the top. However, it is relatively easy to compute based on information that we can get. If we take the current top position of the element and add it to the full height of the element, that will actually give us the bottom position.

For example, if our element is sitting 130px from the top of the document and has a height of 445px, then the bottom position can be calculated as 130 + 445, which equals 575. Thus, the bottom of the element would be sitting at 575px from the top of the document, and we would not want the bottom of our scrolling element to move beyond that.

Alright, now we have most of our code written, and if you were to test out the plugin at this point, it should be able to display the sticky scroll behaviour that we are looking for. The only thing left to do is to include the necessary code to make the unstick trigger display. We will do this by adding an extra bit of HTML to the bottom of our scrolling element and then using some generated CSS to control the positioning. Additionally, we will wrap the entire procedure in a conditional statement, so that it will only trigger when the unstick option is set to true.

if(options.unstick == true){ this.css('position','relative'); this.append('' + options.closeChar + ''); jQuery($getObject + ' .scrollFixIt').css('position','absolute'); jQuery($getObject + ' .scrollFixIt').css('top',options.closeTop + 'px'); jQuery($getObject + ' .scrollFixIt').css('right',options.closeTop + 'px'); jQuery($getObject + ' .scrollFixIt').css('cursor','pointer'); jQuery($getObject + ' .scrollFixIt').click(function() {jQuery($getObject).animate({ top: "0px" }, { queue: options.queue, easing: options.easing, duration: options.duration }); jQuery(window).unbind(); jQuery('.scrollFixIt').remove(); }); } 

The .append() and .css() methods are fairly self explanatory. The important one is the .click() method, which binds the included function to the trigger. This way, when someone clicks it, jQuery will immediately scroll the sticky element back up to its default position. It will then use .unbind() to deactivate the scroll listener from the window and the .remove() method to delete the generated trigger.

And that’s pretty much it! I will note that in the actual plugin, I placed the conditional unstick code before the scroll listener (though it could also go after it with no real effect). It was, however, the last bit of code that I wrote, so it made sense to save it to the end to talk about.

Regardless, if you want to see how it all together, why not download the plugin for yourself? Just click the image below!

Freebie: Contained Sticky Scroll jQuery Plugin (Downloaded 5580 times)

The download package contains both full and minified versions of the .js file, along with a demo page which explains the various options that can be used to configure each initialization of the plugin’s functionality. If you want to check out the demo page without actually downloading the entire package, I’ve also uploaded it here.

View the demo

So there you have it! Now you can either download the plugin or write it yourself. Either way, I hope you found this tutorial interesting, and that it’s provided you with the basic building blocks for creating your own jQuery plugins!

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

Wait. What? Is this really another “turn a photo into a comic” tutorial? Well, yes and no. Yes, I’ll be showing you how to turn a regular photo into comic-style illustration but no, I won’t be using any filters or effects. This one’s all manual, baby!

The Manual Comic Technique

First, one must ask the obvious question: why? Why spend the time drawing the whole thing when there are super fast filters and plugins, etc. that do just as good a job? The answer is quite obvious, actually: control. By doing everything yourself you have complete control over every aspect of the design, from stroke width to color choices.

So, without further ado, let’s dive right in.

I used this picture from SXC for our base (*thanks to user Mart1n for his contribution).

The Power Rangers in Sweden

I chose this picture because of the superhero-like pose of the characters. They kind of look like the Power Rangers, right?

The great blue yonder

Structurally, this techniques follow a “back-to-front” method, where you start by first creating the background elements and finally the foreground ones. It’s pretty self-explanatory, really.

Choose your colors wisely, Neo.

The “rule” surrounding color choices for an old style comic is (as the illustration above depicts) to not choose colors along the edges of the HSV histogram, regardless of hue. Constraining your color values is also an almost fool-proof way of making sure your designs are chromatically pleasing.

Pop goes the foreground!

Because the focus is on the characters in the picture, not on the background, it makes sense to spend little to no time thinking about it. A simple, clean background will automatically make any elements in the foreground pop out. That’s a good thing.

Zoom in on pen trace

I hid the blue background in order to move on to the foreground elements, the four characters in my case. I lowered the opacity of the shape layer and drew in the lines using just the Pen tool, I loosely tracked around the most contrasting elements of my characters. Remember that word: loosely. Don’t strive for perfection. The point of this style of illustration being flexibility and a very organic feel, which translates, design wise, into irregular, flowing shapes and lines.

Possibly the simplest comic

About 15 minutes later, this is what I’ve got (sky layer turned on, of course). While this qualifies as a comic-style illustration, we’d be pretty lazy to leave it like this. So let’s make their skin.

Yes, in my design everyone's orange, regardless of race

Using the Pen tool again, I drew the skin layer underneath the stroke layer. You only need to care about not stepping out of the lines described by the stroke layer.

Cool tones and steep perspective make this design quite dramatic

In this step, I made a skin shadow layer. I didn’t use a regular black or gray because I wanted to set a chromatic transition between the orange-ish skin and blue background. Thus, the desaturated purple I decided on works pretty well. I find that choosing secondary colors on the basis of transition is usually a good bet and the results are quite pleasing.

The clothes are simple shapes with colors from the dark-desaturated areas. I stayed clear of warm colors to further emphasize the characters’ faces.

By now you must have realized that while this technique involves little actual execution, it’s mostly based on color relationships and meaning. That’s because as the shapes of the characters become more and more sketchy, with less details than in real life, individual colors begin to have a much greater impact than they do in, say, photography.

The moon-like pale circle behind the characters further emphasizes the whole dramatic atmosphere I’ve been working on and really livens up the whole shot.

I almost always recommend leaving the shadows/highlights to the end of the illustration. This ensures a well designed piece. I drew a black (shadow) and white (highlights) layer above everything and then turned the opacity down to 50%. Simple!

And there you have it, folks, that’s how you manually turn a photo into a comic-style illustration. The overall work time was little over an hour and a half, so it’s not exactly time consuming. To me, the time spent on the illustration work is negligible, considering the upside of having complete control over how everything looks. And that’s something no filter or plugin can offer.

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

It has been suggested that beautiful and usable websites are created on a foundation of beautiful and usable typography. I’ve even read an article that suggests that the web is actually comprised of 95% typography. I’m not convinced that there is any empirical evidence for this figure, but I think that the point is a good one. And, that makes typography a pretty important element that you will want to look at very carefully.

Create Beautiful CSS3 Typography

Fortunately, CSS offers a variety of styling options that allow you a great deal of control over how your present your content to your viewers and users.

I’ve actually been meaning to prepare an article about typography for a while now, and I’ve finally gotten around to it in the form of this tutorial. Today we’re going to take a detailed look at how to create a beautiful and attractive typographic design using a variety of awesome CSS3 rules (many of which were also available in CSS2).

Starting with Mark-Up

Before we can get started with any kind of styling, we need to begin by creating some content, all nicely marked up as HTML. No need to waste a lot of time on this. Here is the basic markup that we will be using:

<h1>
  Web Typography
  <span>A Demo For Beautiful Typography on the Web</span>
</h1>
<div class="meta">An <span>Article</span> by <span>Matt Ward</span></div>
<div class="body">
<p>It has been suggested that beautiful and usable websites are created on a foundation of beautiful and usable typography. That makes it a pretty important element that you will want to look at very carefully.</p>
<p>Fortunately, CSS offers a variety of styling options that allow you a great deal of control over how your present your content to your viewers and users. This demo - which is entirely driven by CSS - is built to demonstrate the step by step development of attractive typography, moving from basic HTML to fully styled content. You can use the buttons at the top of the page to view the content in various stages of styling, from completely unstyled to the completed design. Please feel free to have a bit of fun by working through the various stages.</p>
<date>Created: May 13, 2010</date>
</div>

Basically, we have a heading (and sub-heading, as distinguished by a <span> tag), followed by some meta information about the author, some paragraphs and a creation date. When we look at this content unstyled, it looks something like this:

Unstyled content

Aside from the coloured background, this is basically just the way that the browser renders the content without any styles. It doesn’t look horrible, but, with a bit of love, we can make it a whole lot better.

Step 1

The first thing that we want to handle is the title itself. We’re going to change the colour, the typeface, the size and the tracking. Here’s the full style rule.

h1{
  font-size: 2.5em;
  font-family: Georgia;
  letter-spacing: 0.1em;
  color: rgb(142,11,0);
  text-shadow: 1px 1px 1px rgba(255,255,255,0.6);
}

After applying these styles, we now have a nice bold heading, as shown in this screenshot:

Content after Step 1

Now, let’s take a look at some of what we did in the CSS. First, we increased the font size up to a full 2.5em, and mixed a nice dark red colour using the rgb() colour definition.

Next, we changed the typeface of the entire title to Georgia, which is a web-safe serif font that looks really nice. Of course, with wide support for @font-face these days, we don’t really need to restrict ourselves to web-safe fonts anymore, but Georiga still works really nicely, so I’ll just stick with it.

Personally, however, I find that the default tracking on the Georgia font is a little tight, so I open it up just a little, using the letter-spacing property. Because I am using the proportional em unit, we want to keep the number relatively low. Otherwise, the tracking will become overdone.

Lastly, we applied a subtle letterpress effect by using a thin, white drop shadow, which actually ends up looking more like a highlight.

Step 2

The title looks good now. However, we also want to break out the main title and the subtitle. This is why we marked up the subtitle into a <span> tag, which will allow us to apply these different styles:

h1 span{
  display: block;
  margin-top: 0.5em;
  font-family: Verdana;
  font-size: 0.6em;
  font-weight: normal;
  letter-spacing: 0em;
  text-shadow: none;
}

We create a logical break between the heading and the sub heading by converting the inline <span> into a block level element, and established visual differentiation by lowering the text size, reducing the weight (removing the bold) and changing the typeface from Georgia to the sans serif Verdana. Notice, however, that we do nothing with the colour. Because of CSS inheritance, the original colour rules for the heading are maintained by the sub heading.

Content after Step 1

This works nicely to maintain a level of continuity within the title. Even though we want some differentiation between the title and the subtitle, we don’t want to separate them too much.

We also want to remove the letterpress effect by eliminating the drop shadow, and reset the tracking by reducing the letter spacing back down to 0.

Step 3

The next two steps involve working on the meta data line. For this one, I want to create a very strong differentiation from the title, without changing the typography completely. So, here is the CSS that we’re going to use:

.meta{
  font-family: Georgia;
  color: rgba(69,54,37,0.6);
  font-size: 0.85em;
  font-style: italic;
  letter-spacing: 0.25em;
  border-bottom: 1px solid rgba(69,54,37,0.2);
  padding-bottom: 0.5em;
}

Keeping with the Georgia font helps to maintain some nice typographical unity within the design. Changing to either another serif or sans serif font would likely just cause typographical confusion, and changing all of the other properties helps to create enough of a difference between the meta information line and the title.

Content after Step 3

You may also notice that I use the rgba() colour definition rather that just the regular rgb(). This is definitely one of my absolute favourite parts of CSS3, since it adds a fourth dimension to the definition: an alpha channel that allows us to control opacity. When using rgba(), the fourth property (a number between 0 and 1) actually defines the level of transparency to be applied to that particular colour! It may not seem like much, but it’s an incredibly powerful tool. It’s not fully supported in IE yet, but it’s pretty easy to build in some graceful degradation.

Step 4

Next, we want to make one more quick change to the meta line. You may notice that I surrounded both the term “articles” and my name in <span> tags in the markup. This is because I want to add in a very slight typographical variation on these bits of text. I can accomplish it with just a few lines of code:

.meta span{
  text-transform: capitalize;
  font-style: normal;
  color: rgba(69,54,37,0.8);
}

The text-transform property is an awesome way of dealing with case in your designs. In this instance, I made everything uppercase, but sometimes it’s also useful to reduce everything to lowercase too.

Content after Step 4

I also removed the italic styling and reduced the overall transparency (making the text more opaque), in order to establish further contrast between these snippets of text and the rest of the line.

Step 5

Historically, creating columns in CSS has been something of an arduous process, involving a division of the content into different block level containers, along with floats or other positioning magic. It was certainly better than using tables, but still not necessarily ideal. Fortunately, with the new typographic elements introduced in CSS3, creating columns has become simpler than ever.

We’re going to use some of this new typographical goodness in our next step, by creating two columned paragraphs.

.body p{
  font-family: Verdana;
  -moz-column-count: 2;
  -moz-column-gap: 1em;
  -webkit-column-count: 2;
  -webkit-column-gap: 1em;
  column-count: 2;
  column-gap: 1em;
  line-height: 1.5em;
  color: rgb(69,54,37);
}

The rule is a little long and just a tiny bit redundant, since we need to use Mozilla and Webkit specific properties to make sure that the styling is actually applied across as many browsers as possible. Eventually, I’m sure that they will both accept the standard property, but for now it’s best to keep all the declarations, just to make sure that it renders like this:

Content after Step 5

With these properties, you can set the number of columns that you want to use, and the space gap between the columns, which is great because it can allow you to keep a design tightly aligned to an underlying grid.

Also, while in this case I simply applied the column properties to the paragraph, you can also apply them to a higher, container-level element such as a <div> and have all the child paragraphs flow nicely into the proper structure.

The other thing we want to note about this styling rule is that we changed the main paragraph text to Verdana, matching it typographically to the sub title. Again, the rest of the properties are different enough to maintain a strong visual difference, but the use of the same font helps keep everything tied together.

Step 6

We are going to maintain this continuity in the sixth step too. We actually have two paragraphs in our markup, and based on the way we applied the columns, the order of the copy is actually somewhat disjointed. I did this on purpose, though, as I want to add a some different styling to the first paragraph.

.body p:first-child{
  font-size: 1.25em;
  font-family: Georgia;
  font-style: italic;
  -moz-column-count: 1;
  -webkit-column-count: 1;
  column-count: 1;
  letter-spacing: 0.1em;
}
.body p:first-child:first-line{
  font-weight: bold;
}

There are a couple of things that you should notice about this code. First, we are using the first-child pseudo-class to target any paragraph that is the first child of an element with the class of “body”. This is a handy little selector that allows you to build in some nice visual variation to the beginning of a block of text.

Content after Step 6

In this case, I want to add extra emphasis to this first paragraph, thereby giving more weight and significance to its content. I also want to stretch it across the two columns and change the font back to Georgia, again for emphasis.

Getting rid of the columns is actually pretty easy. All I have to do is replicate the column-count properties, and reduce it back down to 1.

Next, I can change the font family, and again I increase the letter spacing just a tad to help everything breath a bit better in Georgia. Then, for just an little bit of extra emphasis, I set the whole font style to italic.

You’ll also notice that this is the only step in this tutorial that actually includes two CSS rules. The second one is just a short little snippet that combines both the first-child pseudo-class and the first-line pseudo-class, allowing me to actually bold the first line of the first paragraph!

Step 7

Our typographic styling is pretty much complete. The only thing left to do now is add some styles to the date.

date{
  font-family: Georgia;
  color: rgba(69,54,37,0.6);
  font-size: 0.75em;
  font-style: italic;
  letter-spacing: 0.25em;
  border-top: 1px solid rgba(69,54,37,0.2);
  display: block;
  padding-top: 0.5em;
  margin-top: 2em;
}

The rule here is pretty similar to the rule for the line of meta information. The only real difference is that I reduced the font size a little bit, to help establish a better visual hierarchy. I also flipped the border-based rule from the bottom to the top.

Content after Step 7

Because the <date> tag creates an inline element by default, I changed the display mode to block. Finally I extended the top margin to improve the overall balance.

Typographical Summary

So there you have it: we’ve created what I think is an attractive typographical design using nothing by HTML and CSS. No images are used at all. To wrap this article up, I would just like to make a few quick notes about the typography itself.

1. Despite only using two fonts in the entire design, I was able to create a wide range of styles, simply by altering the size, weight, colour and other properties of the type. This is a great way to generate typographical interest without having to rely on a lot of fonts. As I’ve already mentioned a couple times, it also helps to maintain unity within the design.
2. Tracking (letter spacing) and leading (line spacing) are two elements of typography that are often overlooked when working with type on the web. However, while it may not have all the precession control of InDesign or Quark, CSS does provide some basic tools that allow use to make adjustments in these areas, resulting in more beautiful type.
3. The art of typography is not just about picking fonts, colours and sizes. It’s not even just about leading, tracking and kerning. These are all just concepts used to describe and modify type. The real purpose of typography, however, is to help create and convey meaning through words. One of the ways to do this is through visual hierarchy – making typographical choices that reflect the relative importance of each and every element.
4. Lastly, every element matters. Good typography takes nothing for granted. Instead, it makes a careful consideration of each and every element, no matter how insignificant it may seem. Ultimately, an element may be allowed to inherit a default value, but that should always be a conscious choice rather than an oversight.

Of course, there is always more that could be said about typography. Still, while I am no master of the craft, these are some of the things that I’ve learned through the process of my own work. I hope you find them, and this tutorial to be of some use!

Step by Step Demo

To accompany this tutorial, I have also put together a step by step demo, which allows you to use the links in the bar along the top and examine the design in its various stages of development. Move from unstyled to fully completed and back again, and have some fun along the way:

Check out the demo

What do you think? I would love to hear your thoughts and opinions on both the tutorial itself and the demo, so please feel free to drop me a line.

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

Man, it feels like it’s been a long week, and I don’t feel that I have a ton to show for it. Last week, I mentioned that I had another tutorial in the works, and that one’s finally been published over on MyInkBlog. And when I say finally, I am totally pointing the finger at me. For a variety of reasons, that particular post took me forever to finish. But it’s up now, and if you should go have a read if you haven’t already.

I also finished another vector character pack for the guys over at MediaLoot. This one was another guy, but this time I tried to make him a bit more like an artist, and built in several extra accessories, such as a paintbrush, a portfolio, a chalkboard and a clipboard. I’m pretty happy with the overall finished product.

Other than that, I’ve just been enjoying this fine weather and celebrating with some really good friends who just welcomed the first child. That was pretty awesome!

Anyhow, let’s get on to this week’s Echoes!

Logo – Zeughaus

It’s amazing how many logos I feature here on Echoes where I have absolutely no idea what the name means. We have another one this week.

Zeughaus PPP AG

Still, this is a really nice design. The designer’s comments on this one say that the “client asked for something dynamic and futuristic,” and I think that it really does a pretty good job in this regard. I really like the way the mark itself offers an interesting treatment of what is, essentially, just a basic half-tone pattern. The bright reds, oranges and whites give the mark a real sense of energy, as does the seemingly random arrangement of the colours.

I always like to talk about how a logo will translate into black and white too, and I think this one works. At first glance, I wasn’t so sure, because a lot of the effect seems to come from the colour. However, upon further inspection, it becomes clear that some of that energy also comes from the halftone pattern itself. As such, I do think that the logo will translate well into black and white.

Art – Assassins Creed

One of my favorite video games from the past few years has to be Assassin’s Creed. I really enjoy the dynamic of the first game and have the sequel sitting on my shelf just waiting to be played. This week’s art features a really nice fan image of that game.

Assassin's Creed

It doesn’t look like our Assassin is doing all that well in this particular piece, being underwater with an arrow sticking out of his shoulder, but the image is still really nice. I’m especially fond of the way that the water is rendered in this one. The blues are really vibrant and the bubbles look great.

What I really like, though, is the same thing that first drew me to the game itself – the costume. I love the design of the assassin’s outfit cloak and cowl. The bright red against the white, combined with the concealing hood, really combines to create a character who is unique and memorable, yet blends seamlessly into the game environment. This painting does a great job of capturing that costume!

Tutorial – Create Custom Option Panels with WordPress 2.9

For the second straight week, I am bringing you a WordPress tutorial. Last week, I was working on a WordPress site where I needed to set a custom option for the entire site, so when I came across this one it was really awesome.

Create Custom Option Panels with WordPress 2.9

Basically, this tutorial will show you how to go about creating your own custom options panel for the WordPress administration from within your theme (with no need for a plugin). This was incredibly useful for me, and I’m sure that it could prove equally useful to you too if you do any significant development in WordPress.

For me, I was creating a WordPress blog as an extension of a site that was running off of Concrete5. I wanted to keep the same basic design and didn’t want to upload all the same design based images again (it’s just inefficient). So, I set up a universal property which contained the URL to the Concrete5 theme, including all images and stylesheets, allowing me to very easily adapt the site’s basic theme into the blog. I’m sure you could do all kinds of similar things by creating your own options panel.

Website – Brizk Design

Some of you may have already seen this site, which has been tweeted a few times today by some fairly major players in the design community, but I thought I would feature it anyhow, for those of you who may not have seen it yet.

Brizk Design

The design itself has a nice, watercolour based minimalism, prominently featuring the hand painted hummingbird as the cornerstone of the site’s visuals. Other hand painted items – leaves, flowers and a butterfly – also appear across this single-paged site, bringing a strong sense of continuity to the overall site design.

The site also has some really nice animation effects, which I would like to draw to your attention. First, it is one of those single page sites were clicking on any of the navigation items will actually cause the page to automatically scroll down to the appropriate section. Try scrolling on your own, though, and watch as the active menu item changes as you hit each new section. Very slick. Also, try hovering over the tiny little bird icon at the bottom of the page. A footer bar pops up with the latest tweet and a link to follow the designer. These are the little touches that can really turn a site into something special!

Well that’s it for this week’s Echoes. Which ones were your favorites? As always, if you know of any designs, tutorials or art that merits being included in a future post, feel free to let me know about it!

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

Hey all. Here were are with another edition of Echoes, and things are going to be changing just a little. I’ve found that I’ve been getting a bit verbose in some of these articles, and spending a ton of time writing them. People have left some really nice comments in the past, but these posts certainly aren’t the most popular articles that I publish here. So, in an effort to free up a bit more time, I’m going to try to keep the exposition to a minimum – usually just a paragraph or two.

In general news, I had another article published over at SpyreStudios over the weekend. This one is called “A Coder’s Journey,” and chronicles my (often slow) development in the world of coding and programming. The article has received quite a bit of attention and some really nice comments, so be sure to check it out. I also submitted a tutorial to another site, which should hopefully be published sometime this week. Keep an eye on my Twitter account for an update on that.

Now, let’s get to this week’s Echoes!

Logo – ShadowCatcher

We’ll start this week off with a sweet and somewhat abstract logo design for a company called ShowCatcher, which apparently “gathers information for their clients from trade exhibitions through a wide range of media.”

ShowCatcher

I love the colours and the general feel of this piece. It has a wonderfully organic aesthetic, while still feeling fresh and modern. The simple non-serif typography really offsets the energy, giving the entire design a solid anchorage. It’s all about striking the right balance.

Other than a vague S-shape, I don’t see much of a connection between the mark and what the company does, though, and the use of gradients may effect its ability to be reproduced in certain media if there is no pure black and white alternate. Still a really nice design though.

Art – Gidleigh Goat

I have been reading through Karen Miller’s The Awakened Mage over the past little while and really love the cover art, so I went looking for more from the artist, David Wyatt, and came across this little gem.

Gidleigh Goat

The first thing that strikes me about this particular piece is the incredible depth of the green, which is just so wonderfully rich, especially for something that was rendered in watercolour. After that initial reaction, the eye instinctively seeks out the subject, which we find to be this gentle, and somewhat old looking goat character.

Yes, this is another fantasy piece. I’m sure most readers have just come to expect that from me by now! Unlike much of the other fantasy art that I have posted in these Echoes, though, this one has much more of a fairy tale feel to it. The creature seems very wise and friendly, and full of character. It almost makes me want to pull up a log and listen to whatever stories he has to tell.

Tutorial – Building A Custom Subscriber Panel With Stats In WordPress

With so many designers and developers working in WordPress these days, a good quick tutorial about how to whip up a certain bit of code is always useful, and that’s exactly what we have this week.

Building A Custom Subscriber Panel With Stats In WordPress

In this tutorial, developer Amber Weinberg (who has guest posted on this blog) outlines her process for creating a sidebar panel for displaying your RSS counts, email subscribers and twitter followers. It looks and functions much like a widget, but is actually hardcoded right into the theme – though I suppose that and industrious developer could take the information provided her and convert it into an actual plugin widget.

What I like the most about this brief tutorial is that it offers a (partial) alternative to FeedBurner. Personally, I’ve only ever had a few issues with FeedBurner, but it does seem to have developed a quasai monopoly on generating and tracking feed statistics. So, in addition to showing you how to create an awesome little information panel, this tutorial also brings to light what appears to be a very viable alternate method of tracking your stats, directly from WordPress itself!

Website – The Green House

Occasionally I come across a site with some interesting visual effects, and I have to right click on the page to see if it is actually using Flash, or if the effects are achieved with jQuery. This week’s website was an excellent example.

The Green House

The site’s home page has three large photographs, which are individually faded in and out in the background. It’s both a subtle (in terms of effective animation) and not-so-subtle (as in completely changing background) effect, which until a few years ago would have been almost exclusively achieved in Flash. Now, it’s great to see this sort of thing being done independently of any browser plugins.

Beyond that effect, though, this site also has a very interesting blend of strong graphics and photography. I really like the way that they’ve integrated the photographic images in with more vector-like elements. It has a unique and original feel to it. I also love the way the site builds really nice icons into its overall navigation system, especially since I am currently right at the beginning of a series on icons and web design. That kind of makes it the perfect time to include the site here.

Well that’s it for this week’s Echoes. Which ones were your favorites? As always, if you know of any designs, tutorials or art that merits being included in a future post, feel free to let me know about it!

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

Well, life is pretty much back to normal. My wife got back from Haiti last week safe and sound, so we’re back to two parent mode, which makes my life a whole lot easier – at least in one regard. Of course, life always seems to trade one type of busyness for another, as I have two different websites launching this week.

The first is a complete redesign for Highland Marketing, where I am the Creative Director and have been working diligently at building and releasing a new design for the site. It launched today! The point was to create something simpler and more streamlined than the old site, which was a bit rigid and boxy. Please feel free to check the site out and let me know your thoughts. And if you’re doing any direct mail and we can be of service, don’t hesitate to hit me up!

The other site should be launching later this week, and is a freelance client project built on a custom, hand coded WordPress theme. It’s a pretty cool site, and I’ll be glad when it’s up.

Anyhow, on to this week’s Echoes!

Logo – Pink Flamingo Farm

I came across this week’s logo over on Logo of the Day, and it’s just another awesome example of interesting and clever execution – this time by means of the interaction between two distinct animal shapes.

Pink Flamingo Farm

I’m not certain that I would give the name “Pink Flamingo” to a farm that focuses on breeding horses – it just seems to beg for confusion – and from the name itself, it might seem like a great challenge to come up with a design that is both interesting and meaningful. The designers deserve credit on this one, though, for devising something really interesting. Just like last week’s equestrian themed logo, this one also involves a horse’s head, except this time, the horse is actually comprised out of negative space, and the outer line of its head forms the inner line of a flamingo!

The interplay here is both clever and intriguing, as I always find these kinds of logos really interesting. I would love to see the rough work for this one, and trace the development of the concept. Was this a concept that came to the design relatively quickly, or did they produce dozens and dozens of sketches before finally devising this concept? That’s always an interesting question to ask.

Art – Final Sleep

This week’s artwork is a beautiful watercolour painting of a beautiful and dream-like scene. What I find truly remarkable, though is the amazing level of detail in the painting itself.

Final Sleep

In this context, there is probably not a lot that I can or would say about the narrative of the piece itself. There is a woman and a dragon and some other magical looking creatures, all of which could probably be imbued with some sort of story and meaning. That’s beyond the scope of any Echoes post, though, so I will won’t get into it.

I would, however, like to underscore the magnificence of the style. Watercolour seems to have been a reasonably popular trend in some recent design, and watercolour Photoshop brushes remain a much sought after resource. There is nothing, however, that can really compare to an actual watercolour painting. Despite the fact that the colours are often somewhat washed out, there frequently seems to be a strong sense of energy in this genre of painting, which I think stems from the very organic appearance of wet paint hitting paper. It’s probably my favorite form of traditional painting!

I am also astounded that level of detail in this painting. It’s difficult to see here, but there are links to detailed closeups from the deviantArt page, in which you can really see the the extensive detail that exists in this one. It’s really amazing – especially since it is done with watercolour, which can be a very finicky and somewhat unforgiving medium. Because the paint always shows through, it can sometimes be difficult to fix mistakes. So, at least for me, the seemingly flawless execution of this one is truly to be admired!

Tutorial – How To Create a Stylish Navigation Bar In Adobe Fireworks

I do nearly all of my graphics in either Photoshop or Illustrator. For most web elements other than icons, I tend to focus on the Photoshop side of things. Today’s tutorial, though, is all about creating a cool web element in Fireworks.

How To Create a Stylish Navigation Bar In Adobe Fireworks

There are a couple of interesting things about this tutorial. On one hand, it really shows how easy it is to make these kinds of graphics in Fireworks, which has been specifically engineered with the web in mind. Whereas Photoshop is a vastly powerful image editing package, with capabilities that far exceed what is typically needed for creating basic web graphics. Fireworks, on the other hand, is specifically created for this process. From what I’ve seen, this basically means that you have a more focused set of tools that can potentially help you do your job more efficiently (I’ve also read that Fireworks actually offers better compression than Photoshop).

That being said, though, don’t make the assumption that Fireworks is actually a stripped down version of Photoshop (that’s called Elements). There are some familiar tools and palettes, but it’s a completely different program, with its own way of doing things. I played around with it a bit, and will admit to feeling a bit lost. It’s kind of like the first time you get into a completely new car – you have a basic idea of how to make it work, but it still feels a bit strange and foreign, and you know it will take some time for you to really get to know where everything is.

Still, I this is still a great tutorial, and I would recommend it to anyone who is looking to give Fireworks a shot.

Website – Digital Puffin

This week, I received a request on Twitter to have a look at the redesign page for Digital Puffin, a two-man design firm based out California. I always enjoy seeing the web work of creative professionals, so I had a look and decided to feature the site here.

Digital Puffin

There are a few things that I really like about the site. I’ll start with the mascot design – of a puffin, of course – which is both simple and memorable and relates very well to the brand. I also really like the minimalism of the site, which features a different coloured background for each sub-page, along with very subtle radial gradients, watermarked with the a diagonal “dp”. The site also features some nicely styled typography, which helps complete the overall design.

It also has a really cool navigational animation effect, wherein every time you click the menu to move to a different page, the content quickly fades out. Then, in similar fashion content for the next page fades in after it loads. It’s a subtle effect, but it adds a nice flair to the site. It does present a navigational problem, though, in the use of the back button. Every time I click the back button, the previous page loads in its last state – namely with the content faded out. All that I see is a blank, coloured screen. Just seems like a minor navigational bug to me – I’m sure it will be ironed out soon.

One other area that I think could be improved is the menu system. It exists as a series of coloured bars down the side of the page, with each bar sliding out on a hover event, to reveal the menu choice. It’s a really cool little effect, but may not be the most intuitive. Users might not know where the menu is, assuming that the coloured bars are just part of the background. Also, unless you’ve been to the site before, having to hover over every option until you find what you’re looking for could be a bit frustrating for the user. I think that using small but meaningful icons could go a long way in helping to smooth out these potential usability issues.

Overall, though, it’s a really great site.

Well that’s it for this week’s Echoes. Which ones were your favorites? As always, if you know of any designs, tutorials or art that merits being included in a future post, feel free to let me know about it!

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