SEARCH
 
Join our free newsletter for useful tips and valuable resources in web design industry.
It doesn't look like an e-mail address
  Tutorials Photoshop Web Layout Computer Shop Layout

Computer Shop Layout

Create a new document 800x950, 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".

image 1

image 2

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

image 3

image 4

image 5

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.

image 6
Click to enlarge

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 I'm 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.

image 7
Click to enlarge

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.

image 8

Now add these layer styles to the button.

image 9

image 10

image 11

Your button should now look like this.

image 12

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

image 13
Click to enlarge

Now label your buttons with the type tool.

image 14

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

image 15

Fill the circle with the color white.

image 16

Here comes the tricky part, "hide every layer apart from your buttons" once everything is hidden goto "layer > merge visible" 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.

image 17

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

Select your rounded rectangular tool again and draw out 3 rectangles.

image 18
Click to enlarge

Add these layer styles to your rectangles.

image 19

image 20

In the left rectangle add your, title/products.

image 21

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

image 22

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

image 23
Click to enlarge

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

image 24

That's it all done really, looks quite plain but with your content added as well, it could look like this.

Computer Shop Layout
Click to enlarge

   
subscribe to newsletter