This task we’ll see how to create a Web Layout for Computer Store. Open a new file, firstly with 768x800 px and 72 dpi. Paint it in 1E2528, using next instrument .



Place the logotype in the left upper corner.



You may see below the parameters of each the logotype’s text.

Applying next instrument now , it’s possible to represent a rectangle with parameters from Blending Options, like it is indicated next picture.





Make use of the following instrument on a new layer with the Opacity of 10% and create the flares like in the next picture.



Represent next the menu of the future web-site. Insert the sections the future site is composed of and divide them by pointed lines which may be done using the regime of text’s inserting. The color code is 444B44.



Insert the point many times and we’ll get a pointed line. Place it out on the necessary position and we’ll get a divider.



The next parameters may be used for the text.



Separate now the menu from logotype by another pointed line and another simple line. Place them close one to another.



Add to our header the picture of a DELL notebook. Right to the notebook must be inserted a short description of the notebook, its price, like in the next image.

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:



Inner Shadow parameters:



Gradient Overlay parameters.



Stroke parameters.



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



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



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.



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

Under the pictures must be represented the names of the goods, their short description, the price and two small buttons ADD TO CART and DETAILS.



The buttons may be created with the same Rounded Rectangle Tool . You may see below the colors’ codes and Blending Options parameters corresponding to the buttons.



Drop Shadow:



Inner Shadow:



Gradient Overlay:



Stroke:

The Blending Options parameters are the same for both buttons.
Create now a rectangle, using next instrument to the left side of those three goods. The rectangle’s color’s code must be 6B7B81. Apply next parameters.



That is must we get on this work’s stage.



In this rectangle must be inserted the sub-catalogue of the companies, producers of these goods. Represent them with bullets to the left side of their names. Choose for this the instrument , minimizing the size of the pointer till 1px and insert 5 squares, like it is done below.



Our Sub-Catalogue of Brand must look this way.



Create now two rectangles, applying Rectangle Tool with the color’s code d1dbdf and represent a stripe under them colored in 818586. That is what we should get.



Insert on the left lower rectangle a couple of logotypes.

Create now in the right rectangle one more rectangle with Rounded Rectangle Tool , the same way it is shown in the picture.



Choose the Brush Tool now and click on the left mouse’s button inside of it. As a result we’ll get a dialogue window where must be pressed OK.



Choose now the instrument Rectangular Marquee Tool to mark that place which is shown on the picture. Press the Delete button.



Apply to this layer the next parameters, inserted in the next table.



Divide on four equal parts with the lines colored in D2D2D2 and place the logos exactly like it is demonstrated below.



Add to the first article situated on the upper right corner Custom Shape Tool (a star)

Choose now the Rectangle Tool to cut out the upper corners (keeping pressed Alt button). There must be selected the star’s layer.



Apply the Blending Options adjustments to the layer.











Insert on the star the Ellipse Tool and cut out the edges the same way we did with the stars. Set to this layer Opacity of 30%.



Add the text now:





The site is ready!
View full size here.