So where's all these tutorials heading? Two directions really-a high-tech, gaming-type interface with sci-fi elements, and a modern looking, organic interface.

Here's a deconstruct of the modern organic interface.

The Background:
An organic interface's background usually consists of multiple photos, illustrations etc. merged together through PhotoShop's Layer Modes. Often a tinting of the photo is necessary to get the achieved effect.

Here are the 3 images used to create the background for the above interface:

Each image would go on a separate layer, and then the appropriate tint would be applied. Next, a Layer Mode would be chosen for the two top layers.

I'll cover this more fully in another tutorial.

The Background Part 2-Type as Texture:
Once you've got some images chosen, tinted, and "moded", the next step is to introduce type.

Many people think of type as, headlines for example, or newspaper text, etc. They don't really think of type as a design element, because since they were 4 years old, they've been using type for one thing and one thing only-to gather information.

But designers know that type is almost as important, if not more so, than an illustration or photo. And in organic interface design, type is VERY important, but not to read! Type is important in organic design to use as texture.

The basic concept (again, future tutorial) is to create various sizes and weights of type to use as texture in our backgrounds.

Read that again-Type As Texture. Not to read. Very important concept.

In the example above, there's not a lot of type, but it's there to add to the organic feel of the background. Often when I'm designing these types of interfaces (no pun intended), I'll use 2 inch high letters all the way down to 4 or 5 pt. type (very very small type for the uninitiated).

It doesn't matter that it's too small to read at that size-remember, it's used for texture.

Take a look at this image:

You may not have even noticed the very small type on the left side running from top to bottom, or the big word covering over half the design (bottom half), and that's kind of the idea.

It's not meant to be read or understood-even a foreign alphabet could be used. It's just there to provide texture, or as some say, atmosphere.

So try to get over thinking of type as just something to provide us information. It's a powerful design tool.

The Background Part 3-Grids:
Another powerful element of organic design is the grid. Notice in the image above, there's 2 kinds of grids-little square traditional grid, and a hexagonal based grid. Both give texture to the background.

Without them, it feels like it's missing something. Really.

The Background Part 4-Geometric Shapes:
The final part of the background that we need to look at and yet just as important is geometric shapes. This is closely related to grids, but it can be circles (a favorite of mine), triangles, squares (individual and groups), very thin lines (another favorite of mine), and shapes which have no mathematical names that I know of.

All of these shapes come back to one thing-the line. And lines in design help guide the eye around the composition. Use line as often as you can. But keep it subtle. That goes for grids and text as texture.

In a future tutorial (soon!), I'll build one of these interfaces from scratch, or at least the parts that haven't been covered in previous tutorials.

Here's another example of an interface that uses these techniques. See if you can spot:

A) Text for Texture

B) Grids (remember, they don't have to be square!)

C) Geometric Shapes

Later!

John

[COMMENTS? NEED HELP? JOIN OUR PHOTOSHOP FORUM]