Subscribe Via RSS

0 Subscribers

Subscribe Via RSS
Subscribe Via Twitter

Followers

Subscribe Via Twitter
Computer Shop Layout Tutorial

October 9th, 2007 in Photoshop Tutorials by Richard Carpenter

Computer Shop Layout Tutorial

1 Star2 Stars3 Stars4 Stars5 Stars3 Votes, Rating: 5.00
Loading ... Loading ...


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.

About The Author

About The Author: Richard Carpenter

Hi im Richard Carpenter and im a freelance web and graphics designer from England. I am also a regular Blogger, Tutorial Writer, and owner of Photoshop Plus. You can follow me on twitter HERE. You may also view my portfolio HERE.

 

Richard Carpenter has written 364 posts.

Be Part Of The Community!

Become part of the hv-designs community.

Subscribe Via RSS or Follow Us On Twitter.

Subscribe Via RSS Follow Us On Twitter

4 Responses to “Computer Shop Layout Tutorial”

  1. Chris says:

    Welldone Richard. I wish I could get the PSD file of this design please.

Leave a Reply