You purchase a new couch for your living room - a big fluffy purple one. The couch has definite form and important function, a big fat slice of design that will work tirelessly to catch you when you are weary. Though the overstuffed piece has a certain charm and aesthetic unto itself, it will only look grand if it is positioned in the perfect spot of your living room.It is the surroundings that bring definition, meaning, and purpose to an object. Consider the same purple couch perched in a dimly-lit alcove with black velvet drapes and a ceiling adorned with mauve paint, then imagine it in a lofty room with sheer white walls, angular skylights, and bleached blonde floorboards.As breathtaking as any of our pixel constructions could possibly be, the life or death of the design will be determined by the spaces that surround the elements in it. Below are several compositions that will highlight the importance of the space between and around objects.For all of you font geeks out there (like me), the face used in the examples is Gotham - light/bold (in most cases) and book/bold (where reversed type is needed).

First I present some simple type placed in the most default of positions - dead center. There is nearly perfect symmetry around all sides of the type object, which makes the white space a void more than a design tool. The type looks okay, but has a static, planned feel that does nothing to engage the viewer.

Notice these two derivations. Using the exact layout as the first example with only a font size change, the amount of white space either contradicts or defines the meaning presented by the type object.

When the object is moved to the upper right hand corner of the layout, notice how the white space actually looks like empty space, bringing meaning to the type. The object is seeming to float weightlessly, and appears pushed into the corner by the force of the space. Now the space is starting to work for the design.

Consider the difference between the past example and this one, where the space seems to be a weight on the object, pushing it to the bottom of the composition. This gives mass to the object and makes the white space airier and atmospheric.

This example further promotes the point, illustrating the force of the white space pushing the type object out of the composition. The first illustration showed a type object as the heavyweight, whereas here the space around it holds the prominent position in the design..

Where is your eye drawn in this layout? Our attention is drawn to the calm words surrounded by gentle space, while our eyes bounce from the frenetic left portion of the layout. The eyes are always searching for a resting place, and the white space on the right helps to bring order and calm to an otherwise frenzied aesthetic.

Do you see the ‘W’ as the dominant design feature of this layout? This object is being created by five magenta shapes. Here, design and layout is used to bring ambiguity to the positive and negative spaces. Whether it is the cyan shapes that are the white space or the white ‘W’ that is the negative space is up for debate.

These two examples further illustrates the ambiguity of positive and negative space. Which forms do you see first? The simple design uses the spaces between objects to keep the viewer’s eyes moving around the composition, accomplishing the goal of keeping the audience’s attention past a single glance.

Here is some basic paragrah type set centered on a page, as we have all seen on many documents. The space on either side of the paragraph is symmetrical and static - hardly a player in the design at all. There is nothing about the compositional spaces that brings meaning to the text.

Simply left-justifying the text and bringing it to the edge of the composition provides a more engaging space to the edges of the composition and forms a single shape that has equal weight to the type.

Formatting the text just a bit adds even more dynamics to the white space shape. The space between the two headline words becomes a subtle player in the layout, and the ragged edge of the four lines of type serves the type with an asymmetric balance. Reducing the margin on the left brings further weight and force to the white space.

This final example moves from typesetting to actual design. The headline and body type seem to be pressed against an actual object, and the type seems to be hinged on a fulcrum, accomplishing the illustrative goal of design simply by creating dynamic shapes out of white space. The wedge formed by the space between headline and body copy serves as an arrow that points the eye to the start of the type.

We can wow the clients with the latest pixel effects, dizzying dimensional displays, and perfected arrays of color, but the designs will only have significance and impact when our white spaces are carefully constructed and implemented to create meaning and relevance.

Photoshop Tutorial
Level: Intermediate

It is a little hard for me to believe that I am actually presenting instructions on one of my favorite text effects. There are many variations to play with, and you will find this to be an easy process once you get the hang of it.

Step 1:
Create a New Document

I use the following settings as if I was preparing this text for a small print piece. The values throughout this tutorial would need to be adjusted, but this effect works just as well designing at web resolutions and also with much larger print canvas sizes.

Step 2:
Create the Lettering

With the blank canvas in front of you, select the type tool and create the text you want to alter. This will create a new layer. I used default black for the type color, but this has no bearing on the final product.

Step 3
Create the Color Layer

Create a new layer and fill it with an appropriate background color. You can use a light gray to create silver letters, a yellow/tan color for creating gold letters, or a deep orange for creating a bronze effect. If you double-click on the name of the layer, you can rename it. I have named this layer ‘Background Color.’

Step 4
Build the Antique Base Texture

To build the antique base texture, I use a combination of a few filters. The possibilities are endless in this step, so be sure to try a few. The more scratchy and irregular the texture you develop here is, the more the letters will end up with patina and irregularities.

First I use the noise filter
Filters > Noise > Add Noise

Next, I choose the glass filter.
Filters > Distort > Glass

I could have spent a lot more time developing a unique pattern, but the irregularities in this result will make a good illustration for this tutorial. Here is the result.

Step 5
Create a Backup

I can’t stress the importance of this step enough. Create a duplicate layer containing the texture you just developed. Turn that layer’s visibility off and click on the copied layer to make it active.

The reason for this is to allow you to use your work so far for future text effects. We are going to destroy the copied layer with other effects, so a backup means never repeating the steps we just did in the future.

Step 6
Creating the Alpha Channel

Click on the ‘Channels’ tab. You should see something like what is displayed below.

Click the button at the bottom of the palette that looks like a sheet of paper with the corner turned up. This creates a new channel.

Alpha 1 is the default name for a new channel. You can rename this channel, but I don’t see any reason to do so in this procedure. Your channels should now look like this:

Notice that once you select the ‘Alpha 1’ channel, the colors in the toolbar automatically convert to default black and default white.

Step 7
Treating the Alpha Layer

Click on the Layers Tab. Command-Click the ‘T’ inside the square in the ‘deity’ layer. This will make a selection around the edges of your text.

Return to the channels palette and click on ‘Alpha 1’ to make it the active channel.

You will now see a black screen with the moving lines showing your selection

Expand the selection by a few pixels. At these canvas dimensions, 3 works well. In web applications you may want to expand by only 1 pixel, and in larger applications, you may want as much as 10 or even 20 pixels.

Select > Modify > Expand

Now feather the selection edge using the same sliding scale depending on your canvas size.

Select > Modify > Feather

Now the fun starts. With the ‘Alpha 1’ layer still selected, hit command-delete. This will fill the selection with the background color of white. Your canvas should now look like this. After you have filled the selection with white, hit command-D to deselect your selection. (The marching ants around your letters should disappear) You can also do this in the select menu:

Select > Deselect

Step 8
Apply Lighting

Return to the Layers palette by clicking on the ‘Layers’ tab. Select the ‘Background Color copy’ layer to make it the active layer.

Apply the following lighting effect, or play with the sliders and options to create something suited to your project. The most important part of this step is to set the Texture Channel to ‘Alpha 1’, make sure that ‘White is High’ is checked, and set the slider height to 100 – mountainous.

Filter > Render > Lighting Effects

After hitting ‘OK’, you should see something similar to this:

Step 9
Putting the Text On Its Own Layer

Click on the ‘Background Color copy’ layer to make it the active layer. Once again, Command-Click the ‘T’ inside of the square on the ‘deity’ layer. This will make a selection around the text.

Hit Command-J. This will take whatever is selected on the active layer and pop it up onto its own layer. I renamed this new layer, ‘Text Effect.’

Step 10
Applying Layer Effects

You can add some additional nuance to the raw text effect by adding some blending options in the ‘Layer Style’ palette.

Access this palette by double-clicking to the right of the layer name, or you can access it through the menus:

Layer > Layer Style > Blending Options

I like to add a chiseled bevel effect to the text as illustrated below.

In this case, a warm glow seems appropriate. I added one this way:

Finally, I include a drop shadow that is fairly faint and not huge.

To exit out of this palette, hit ‘OK.’ (Hitting ‘Cancel’ exits also, but will not keep any of the effects you just applied.

Here is the final lettering effect:

The letters may look a bit strange on a white background, but who would ever put those letters on a white background? I made a quick background of some stock images and dragged the text effect layer from its original document onto the new one. Here is the final look: