Yes. It looks mighty impressive. But it's really easy to do if you know how. What I always do when I create a website design is making the interface in photoshop and then cut it up to fit it into tables. You could make a map before you start.

I often use a combination of plain images and table cell backgrounds. But this means you have to make a fixed table ie 750 pixel width. (never make it 800 pixels because about 50 pixels are lost because of the scroll bar and things).

Monitors

First we start with the foundation of the whole design. A monitor. Create a shape like the on the left using the airbrush . You don't have to use color. You can keep it greyscaled if you like.

Then make a new layer and draw some reflections. Make sure you set the pressure to a low level. Use a soft brush.

Now it's time to use a filter. WHAT? A filter? Some artists fear/hate them, but this time it save a lot of time.

We use the noise > add noise filter to create some monochromatic noise. Not too intense, play around with it.

Some wise words: Only use filters to enhance the image, not to make it.

Now take the line tool . Take the color black and set the opacity to 100%, no anti-aliasing and weight 1. Draw a line of pixels then skip a row and draw another one. Do this on a new layer. The monitor is done.

The logo

I used the above technique to create the logo. All four steps are on different layers because we want the black lines on top of the text.

Use the text tool to create a text. Mine says: 7th Project :)

I gave it a ligt cyan color and then applied the layer > effects > inner glow effect (photoshop 5 only). If you have to render the layer then do so. Now go to layer > effects > create layer. The effect is now on a sepperate layer. Merge it with the text.

We needed to do this because we are going to cut some pieces from the text. Did you know you can click a layer pressing the ctrl key to select the content of that layer? You can use this to select the screens, invert the selection, select the layer with the text and press delete...

Only works when you have created the right layers....

Lets go

I hope got that logo right. It's the messiest part of the tutorial, that's because I'm not sure how I made it at the that time :).

Now make a big monitor using the techniques explained above. Make a composition like the on the left. If you press ctrl+t and then hold ctrl, shift and alt at the same time you can add perspective to a monitor like I did. Makes the whole thing a bit more dynamic. If you add a dropshadow to each monitor (put each monitor on a layer) You get some more dept.

Next thing I did was adding wires. I made a seperate layer in which I drew some wires and then I put it below the monitors. You can see two different types of wires. Red ones and metal ones. If you don't know how to make wires read one, otherwise scroll down a bit more.

Get Wired

Thougest thing to draw using a mouse is wires. I still use the mouse (getting myself a tablet soon). Make a new layer, take a small brush, not too small, and set the pressure to 100%. Now try to draw a curve, you might have to try a few times before you master it. There are easier ways using paths but I prefer this way.

Click the 'preserve transparacy' option and take a soft brush. Use the color black to add some shades. Don't set the pressure too high.

Now grab the line tool, color black, 1 px, 100% and anti-aliasing on. Draw some lines. Then take a light color or white and set the line tool mode to color dodge set the pressure to 5% or even less. Now draw some lines above or below the black lines depending on the direction of the light. If the light comes from above, put the ines below the black one.

After you did this you get quite a realistic look. You can use the airbrush, color white, pressure 5%, color burn to add some more lighting. You can also use a color like blue or brown here and there or as undershading. I didn't because I was satisfied with this one.

The show continues

Well what did we forget. Ah, the illustration on the top. I'm not going to explain how I did this one. I found it in one of my archives and modified the colors to fit the design. It's a colored drawing.

What I did next was the logo. I simply put it on top of everything else, but it didn't seem like a whole so I drew some more wires and an iron bar I believe.

Then I used the airbrush with a big soft brush and the color black to make the wires dissappear into the darkness. I added dropshadows as well.

When you are this far you can play around with the colors a bit. Or adjust the brightness and contrast using adjustment layers. Tweak it a little.

Now it's time to transform the monitors into buttons. I used the same color blue as in the illustration and logo.

Keep in mind that if you want to transform the perspective of text you will have to render the layer (layer > type > render layer) if you work in photoshop 5. You can scale and rotate but you can't distort the thing.

Keep in mind that as long as the layer is a text layer you can scale and rotate the text without blurring the pixels. (big advantage)

Finished

We are just about done by now. I decided to put the whole thing on a darkblue background, I had to adjust some layers to make it look good but no breathtaking actions. The navigation menu on the bottom isn't used often but I looks good. I hope you are inspired. Maybe by now you understand that it is the concept that takes forever to think of. 'Beauty within simplicity' is the key.

No PSD files available. Feel free to actually try out this tutorial but don't use it on the web. Don't forget to send me a screenshot if you carried out this tutorial, it's alway nice to see.