Website Design ( Adobe Photoshop)

A step by step guide to creating a professional web layout.

http://www.adobetutorialz.com/articles/2988/1/Website-Design-Studio

Set the next parameters for the layer by clicking on this layer on the layers’ palette.
Blending Options>Gradient Overlay



Gradient’s parameters:





Choose the previous tool to represent a thin stripe of white color.



Select then the Pen Tool (P) to draw a ray like the next one:



Use the same tool to draw several more rays:



Set for the layers the same parameters shown below: Fill 0%
Blending Options>Gradient Overlay


Gradient’s parameters:





Now we should use the Rounded Rectangle Tool (U) (radius of 35 px) to represent the body, applying the white color also:



It’s time to represent the panel reserved for the menu of the site’s buttons. In this case we should apply the Rounded Rectangle Tool (U) (radius of 30 px). Press then Alt button while applying the Rectangle Tool (U) to trim a little the bottom part of the panel.



The layer’s parameters: Blending Options>Inner Shadow



Blending Options>Gradient Overlay



Gradient’s parameters:





Use the same method described above to insert also the footer:



The layer’s parameters: Fill 0%
Blending Options>Inner Shadow



Blending Options>Color Overlay





Choose again the Rounded Rectangle Tool (U) (radius of 35 px) to draw the lateral panel, colored with #F6F6F6. Firstly we need to create the basis itself of the panel, then press Alt button white applying the same tool to cut out the windows reserved for the news:



Let’s draw now a white stripe above the menu’s buttons, choosing the Rectangle Tool (U) for this operation. The stripe needs to be inclined, applying the Free Transform solution.





Make six copies of the recently made layer and select one more time the Free Transform option to situate the layers as it is indicated next image:



Combine in a group all the layers containing the white stripes (press Ctrl button to mark out the necessary layers and then keep pressed the left mouse’s button while moving the marked layers on Create a new group option). Mark out the group and press Ctrl +E, applying the next shown parameters for the rasterized layer:
Fill 20%
Blending Mode-Overlay


Choose again the Rounded Rectangle Tool (U) (radius of 20 px) to draw a button of white color.



The layer’s parameters: Blending Options>Inner Shadow





Let’s create the primary layer, reserved for the next button on the menu. The tool applied in this case is Rounded Rectangle Tool (U) (radius of 20 px).



The layer’s parameters: Fill 0%
Blending Options>Inner Shadow


Blending Options>Gradient Overlay


Gradient’s parameters:





Make a copy of the last made layer and use again the Free Transform option to situate the copy a little lower, changing also the layer’s parameters with those from below: Fill 0%
Blending Options>Inner Shadow


Blending Options>Gradient Overlay




Insert on this stage the titles for the menu’s buttons, keeping the demands from below:



home page



the titles for the rest of the menu’s buttons:



The buttons’ titles should be written on the same layer, applying the next parameters for it:
Blending Options>Drop Shadow





Insert the divisions’ titles for the web page:





The text’s divisions should be inclined a little:





Insert the date on the news groups:





Introduce also the “contact us” phone on the inclined line from the left side. The text will be inclined as usually with Free Transform solution.



contact us



the phone number:



The next parameters should be set for the layers containing the contacting information.
Blending Options>Drop Shadow





Select again the Rounded Rectangle Tool (U) (radius of 5 px) to draw two windows for placing the works we do.





Let’s insert the works now. Each one needs to be placed above the window’s layer (on the layers’ palette). Press Alt button and make a mouse click between the pictures’ layers and the windows’ ones.





The last step includes inserting the copyright: