Illustrated designs - http://www.illustrateddesigns.com
Futuristic MP3 Server Web Layout
http://www.illustrateddesigns.com/articles/2593/1/Futuristic-MP3-Server-Web-Layout/Page1.html
By Art-D !
Published on 01/13/2007
 
Create Futuristic MP3 Server Web Layout in Photoshop CS Futuristic MP3 Server Web Layout
Make a futuristic and unique site menu in a few easy steps.

Futuristic MP3 Server Web Layout - part 1
Create a new file with 500x400 px and 72 dpi. Choose this tool and stretch it out on the entire file.

Create Futuristic MP3 Server Web Layout in Photoshop CS

Use Blending Options and set the adjustments from the next picture.

Create Futuristic MP3 Server Web Layout in Photoshop CS

Start representing the first element of our illustration.
First we should select this instrument and draw a circle. Fill 0% on the layers.

Create Futuristic MP3 Server Web Layout in Photoshop CS

Set next adjustments in the Blending Options.

Create Futuristic MP3 Server Web Layout in Photoshop CS

Create Futuristic MP3 Server Web Layout in Photoshop CS

Create Futuristic MP3 Server Web Layout in Photoshop CS

Futuristic MP3 Server Web Layout - part 2
Take this instrument and colorize the lateral sides of the circle. The color must coincide with that one of the background.

Create Futuristic MP3 Server Web Layout in Photoshop CS

Pass to create the menu. First we should choose the instrument with a Radius of 10 px and represent 3 stripes.

Create Futuristic MP3 Server Web Layout in Photoshop CS

Set next adjustments for all of them in the Blending Options.

Create Futuristic MP3 Server Web Layout in Photoshop CS

Create Futuristic MP3 Server Web Layout in Photoshop CS

We need to draw a circle now with the following instrument . Then click on the Alt button and draw another circle inside the first one.

Create Futuristic MP3 Server Web Layout in Photoshop CS

Set the adjustments for the circle in the Blending Options.

Create Futuristic MP3 Server Web Layout in Photoshop CS

Futuristic MP3 Server Web Layout - part 3
Represent now another circle under the first circle’s layer. The color’s code is 818181.

Create Futuristic MP3 Server Web Layout in Photoshop CS

Then open a new file having 4x4 px and 72 dpi. Use the next instrument on it to insert 4 pixels diagonally on a transparent background.

Create Futuristic MP3 Server Web Layout in Photoshop CS

Select now Edit \ Define pattern… and save the picture! Get back to our actual file and apply the next adjustments for the circle.
Blending Options:

Create Futuristic MP3 Server Web Layout in Photoshop CS

Create Futuristic MP3 Server Web Layout in Photoshop CS

Choose the picture in the Pattern option.

Create Futuristic MP3 Server Web Layout in Photoshop CS

And one more circle represented with the usual tool . Its color’s code is 112840.

Create Futuristic MP3 Server Web Layout in Photoshop CS

Futuristic MP3 Server Web Layout - part 4
Create Futuristic MP3 Server Web Layout in Photoshop CS

Create Futuristic MP3 Server Web Layout in Photoshop CS

Create now that part from inside. We have to select again the known instrument already to draw another circle with parameters from Blending Options.

Create Futuristic MP3 Server Web Layout in Photoshop CS

Create Futuristic MP3 Server Web Layout in Photoshop CS

Create Futuristic MP3 Server Web Layout in Photoshop CS

Make a copy of this layer and minimize it proportionally, making use of the Free Transform selection.

Create Futuristic MP3 Server Web Layout in Photoshop CS

Futuristic MP3 Server Web Layout - part 5
We need to represent after that a circle painted in white. Use the same parameters from below.

Create Futuristic MP3 Server Web Layout in Photoshop CS

Represent a layer with the mask and apply a black color brush to create a transparency. This way we’ll get a flare.

Create Futuristic MP3 Server Web Layout in Photoshop CS

We have to copy our two circles with the flare and minimize them proportionally. Change in the Gradient selection the light-grey colors on almost white color. We must get the same result from the next picture.

Create Futuristic MP3 Server Web Layout in Photoshop CS

Create a circle with the shown color – DD812F and one more inside the first one by holding the Alt button. Set the next adjustments to this circle.

Create Futuristic MP3 Server Web Layout in Photoshop CS

Create Futuristic MP3 Server Web Layout in Photoshop CS

Pass to representing the bullets for the menu.

Create Futuristic MP3 Server Web Layout in Photoshop CS

Futuristic MP3 Server Web Layout - part 6
Select the next tool and draw a circle colored in E2E2E4. Set the next adjustments for the circle.

Create Futuristic MP3 Server Web Layout in Photoshop CS

Create Futuristic MP3 Server Web Layout in Photoshop CS

Represent one smaller circle colored in DD812F.

Create Futuristic MP3 Server Web Layout in Photoshop CS

Insert the text that we need after that:

Create Futuristic MP3 Server Web Layout in Photoshop CS

Create Futuristic MP3 Server Web Layout in Photoshop CS

The last element includes inserting the logotype which must be placed on the upper central part.

Create Futuristic MP3 Server Web Layout in Photoshop CS

Futuristic MP3 Server Web Layout - part 7
The adjustments reserved for the logotype’s font.

Create Futuristic MP3 Server Web Layout in Photoshop CS

Create Futuristic MP3 Server Web Layout in Photoshop CS

Create Futuristic MP3 Server Web Layout in Photoshop CS

The font’s adjustments under logotype.

Create Futuristic MP3 Server Web Layout in Photoshop CS

Create Futuristic MP3 Server Web Layout in Photoshop CS

The final result!