Computer Shop Layout Tutorial

Create a new document 800×950, fill your background with the color #21252e. Select the “rectangular marquee tool” and draw out a rectangle at the top of your canvas, fill the rectangle with the color #111419 and add a “2 pixel black stroke”.

CLICK HERE TO SEE THE RESULTS.

Select your type tool and choosing a nice looking font add your title and slogan. Add these layer styles to your “title”.

Now duplicate your title text and goto “edit > transform > flip vertical”, move the text down so it looks like a mirror image, add a layer mask. (for more information on reflections do my reflections tutorial).

CLICK HERE TO SEE THE RESULTS.

Choose a shape from your custom shapes menu OR use your own logo and place by the side of your title, also add a picture of some sort to give a good idea on what you are selling, as im doing a computer store i shall use a computer. Again duplicate your image, flip it and add a layer mask like you did for the title in step1.

CLICK HERE TO SEE THE RESULTS.

Now lets add a navigation to our header. Select the “rounded rectangle tool” and draw out a rectangle roughly the same size as the image below.

Now add these layer styles to the button.

Your button should now look like this.

Duplicate as many times as needed and place at the top of your header.

CLICK HERE TO SEE THE RESULTS.

Now label your buttons with the type tool.

Lets add some reflections to our buttons, select the “elliptical marquee tool” and draw a circle over the buttons like this.

Fill the circle with the color white.

Here comes the tricky part, “hide every layer apart from your buttons” once everything is hidden goto “layer > merge visable” all of your buttons should now be on one layer with the layer styles intact. Unhide everything then click on your buttons layer whilst holding down the ctrl key on the keyboard, now click your white circle layer and goto “select > inverse” and hit the delete key on your keyboard. You should be left with this.

Now set the opacity of your white cirle layer to about 40%.

Select your rounded rectangular tool again and draw out 3 rectangles. (see link below)

CLICK HERE TO SEE THE RESULTS.

Add these layer styles to your rectangles.

In the left rectangle add your, title/products.

Select the recangular marquee tool and draw out 2 small rectangles, fill them with 2 colors, and place them next to your categories.

Select the type tool again and just type out some full stop signs (.) and place them as dividers.

CLICK HERE TO SEE THE RESULTS.

In the very bottom rectangle put your all important foot information.


Thats it all done really, looks quite plain but with your content added aswell, it could look like this.

Leave a Reply

Your email address will not be published. Required fields are marked *