Computer Store Web Layout

December 12th, 2006 by ART-D Posted in Adobe Photoshop, Web Layout

   

Those who want to see the total description of our notebook may use a special button MORE DETAILS that can be represented with Rounded Rectangle Tool and a color code 5A676C. Apply the Blending Options adjustments which are written below.
Drop Shadow parameters:

Computer Store Web Layout in Photoshop CS

Inner Shadow parameters:

Computer Store Web Layout in Photoshop CS

Gradient Overlay parameters.

Computer Store Web Layout in Photoshop CS

Stroke parameters.

Computer Store Web Layout in Photoshop CS

As a result we’ll get such a nice button:

Computer Store Web Layout in Photoshop CS

Finish the Header with two lines: one line must have 1 px and the other – 2 px, exactly like in the picture below.

Computer Store Web Layout in Photoshop CS

The Header is ready and we can get to the representing the basic part of our site. Represent a white rectangle, like in the next picture and divide it into three equal parts.

Computer Store Web Layout in Photoshop CS

Add in the each one the pictures of goods, like it is represented below.

Computer Store Web Layout in Photoshop CS

  •  

  •    
  •  

 

Post Pages: 1 2 3 4 5 6 7

  • Web designers

    04/09/2009

    Very tech Delicious design .

  • raymond

    02/03/2010

    What is teh details, add to card font? email me please.

  • Amin

    19/04/2010

    Very Helpful……at least i’m happy

  • newsnetbook

    03/05/2010

    hmm very nice share and useful info thanks for your sharing

  • anura

    18/05/2010

    this is very good tutorial from you… this was really very helpful…so thank you very much..

  • laptopsleek

    29/06/2010

    good tutorial….. thanks for share…. i like it

  • Ryuu

    19/07/2010

    Splendid, and thanks to your tutorial I hope to be able to create something along those lines. But i guess, simplicity is the key to website designing and building.

  • Tim Richards

    30/09/2010

    Your tutorial has been an great source of information. I will come back many times. I wish other sites like this for information. Thanks for your great thoughts.

  • Arte fact

    14/11/2010

    Hello great tutorial, i’m stuck at the brush part. Could you please be more specific regarding the flare? I mean the type of brush and the color?
    thanks!!!
    Arte FACT

  • Seth Waite

    26/01/2011

    Thanks for the tutorial for photoshop. It’s a pretty simple tutorial which makes it easy to follow.

    Thanks,

  • buyer and seller

    26/04/2011

    Thanks for the tutorial for photoshop. simplicity is the key to website designing and building.

  • Inewsphone

    09/07/2011

    great tutorial….. niche share…
    thanks

  • sovit

    11/07/2011

    thanks you for providing such a nice tutorial..very very thanks again.

  • Ramakrishna

    12/08/2011

    Great tutorial, shall i get how to convert to html also?

  • Amit Kumar Gupta

    08/10/2012

    Very nice tutorial…… it’s very helpful for me and also those people they are new in photoshop.