The most versatile section of the Photoshop tutorials, it includes guidelines on drawing and editing of different objects in Photoshop.  Home Photoshop Drawing Techniques Website Design Studio

Website Design Studio

Browse Pages: << < 1  2 

Gradient's parameters:

image 1

image 2

Combine in a group both layers of the last made button (press as usually the Ctrl button to mark out the corresponding layers and keep pressed the left mouse's button while moving the marked layers on Create a new group option). Make three copies of the last made group and use the Free Transform option to place the copies as it is demonstrated below:

image 3

Select again the Rectangle Tool (U) to draw an inclined line on the left side of the page's top.

image 4

The layer's parameters: Blending Options>Drop Shadow

image 5

Blending Options>Gradient Overlay

image 6

Gradient's parameters:

image 7

image 8

Write the site's title:

image 9

image 10

The layer's parameters: Blending Options>Drop Shadow

image 11

image 12

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

image 13

home page

image 14

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

image 15

The buttons' titles should be written on the same layer, applying the next parameters for it:

Blending Options>Drop Shadow

image 16

image 17

Insert the divisions' titles for the web page:

image 18

image 19

The text's divisions should be inclined a little:

image 20

image 21

Insert the date on the news groups:

image 22

image 23

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.

image 24

contact us

image 25

the phone number:

image 26

The next parameters should be set for the layers containing the contacting information.

Blending Options>Drop Shadow

image 27

image 28

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

image 29

image 30

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.

image 31

image 32

The last step includes inserting the copyright:

image 33

Website Design Studio Tutorial: Final Result (Click to enlarge)
Click to enlarge

Finished!



Author's URL: Adobetutorialz.com
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
Browse Pages: << < 1  2 
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Website Design Studio"

Only registered users can write comment

No comments yet...