Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Creative Arts Studio Web Site Layout

Creative Arts Studio Web Site Layout


Begin by creating a new file (File>New) that would have 766x750 px and 72 dpi.

image 1

Using the Rectangle Tool (U) we'll represent the background, reserved for the site's page.

image 2

The layer's parameters are these ones: Blending Options>Gradient Overlay

image 3

Gradient's parameters:

image 4

image 5

Next we'll select the Custom Shape Tool (U) to represent a circle, colored with #3B6289

image 6

image 7

Now we have to make copies of this layer as many as we need, changing the color and the Fill parameter if necessary. And then we'll apply the usual Free Transform application to change the copies' sizes:

image 8

Next select the Ellipse Tool (U) and try to represent a circle colored with #006C9D that will be situated inside the last upper right circle:

image 9

The layer's parameters: Fill 50%

image 10

Using the same Custom Shape Tool (U), try to represent one more circle, colored with #3B6289, applying the earlier used pattern:

image 11

The layer's parameters: Opacity 70%

Blending Options>Stroke

image 12

image 13

Make several arbitrary copies of the last made layer and place them also as we want them to be placed, but we have to change also the color of the copies, their sizes, using the Free Transform application.

image 14

Next stage includes representing the primary layer, reserved for the site's sections, selecting firstly the Rounded Rectangle Tool (U). The color in this case should be #EAF8FF.

image 15

image 16

The layer's parameters: Blending Mode-Hard Light

Blending Options>Inner Glow

image 17

Blending Options>Stroke

image 18

image 19

Now we have to represent on the right upper corner a button of black color, selecting the Rounded Rectangle Tool (U) (Radius 10px)

image 20

image 21

Next make a click on the Alt button and then make another click between the button's layer and the layer reserved for the site's sections. The button will take the necessary dimensions:

image 22

image 23

Create now a new layer and select the Pencil Tool (B) to represent the primary element of the texture's pattern, colored with #596267

image 24

image 25

Save it: Edit>Define Pattern

Now we have to create the running stripe, situated on the right part of the site's sections' panel. In this case we'll use the Rectangle Tool (U):

image 26

The layer's parameters: Fill 0%

Blending Options>Bevel and Emboss

image 27

Blending Options>Pattern Overlay

image 28

image 29

The same instrument will be helpful in representing the running indicator of black color:

image 30

image 31

Using the Custom Shape Tool (U), we'll try to picture a part of the button, reserved for the section that would be colored in #596267

image 32

image 33

The layer's parameters: Blending Options>Outer Glow

image 34

image 35

Applying the Pencil Tool (B) and the here shown color - #879095, we'll try to represent next the pointer's symbol, situated inside the button.

image 36

image 37

image 38

For our convenience, we have to combine in a group all the layers, composing the button (pressing the Ctrl button and marking out the necessary layers and then keeping pressed the left mouse's button, we can take them down on Create a new group option). Make a copy of this new made group and place the copy the way you may see below:

image 39

Introduce also the titles for the site's sections' buttons:

image 40

(about company, services)

image 41

(main)

image 42

Insert now the text in the corresponding site's divisions:

image 43

(the bold text):

image 44

(the basic text of the sections)

image 45

The last stage includes introducing the site's name, keeping the demands from the tables below:

image 46

(CreativeStudio)

image 47

(digital media solutions)

image 48

Creative Arts Studio Web Site Layout
Click to enlarge

The final result!



Author's URL: Adobetutorialz.com
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Creative Arts Studio Web Site Layout"

Captcha