Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Graphic Design Studio Web Layout

Learn how to create an effective and contemporary web layout for your design studio.

Final Image Preview

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Start working by creating a new file (File>New) of 1000x8000px/72 dpi. Using the Paint Bucket Tool (G), now give black color to the new background layer.

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Using a standard brush with the Opacity of 20% on a new layer (Create new layer), it’s possible to represent a spot of red color and then minimize the brush’s┬ásize to add some green color by the vertical line.

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Create a new file (File>New) of 3x3px/72dpi where we’ll represent the next pattern. In this case we’ll apply the Pencil Tool (B) (brush 1 px) and black color. The file’s background needs to be removed.

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Edit>Define Pattern
Create a new layer and apply here Edit>Fill, choosing the earlier saved pattern.

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Select now the Rounded Rectangle Tool (U) (radius 10 px) to represent a panel reserved for the portfolio and the text on the site.

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Set the next demonstrated styles by making a mouse click on this layer on the layers’ panel: Blending Options>Outer Glow

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Blending Options>Inner Glow

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Blending Options>Gradient Overlay

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Gradient’s parameters:

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Make a copy of the last made layer and select the Convert Point Tool and Direct Selection Tool (A) to change the placement of the right top corner and the left lowest corner on the picture:

Create contemporary web layout for your design studio in Adobe Photoshop CS4

The layer’s styles: Blending Options>Gradient Overlay

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Gradient’s parameters:

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Insert the section’s name, keeping the next shown demands in the table:

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Insert the text we need under the section’s name, keeping also the demands from the table:

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Now we’ll place the pictures on the right side of the site’s name:

Create contemporary web layout for your design studio in Adobe Photoshop CS4Select the same styles for the pictures’ layers: Blending Options>Stroke

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Now we’ll represent the scrolling button on the right side of the pictures, applying the Custom Shape Tool (U). The button needs to be turned over with the Free Transform option.

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Create contemporary web layout for your design studio in Adobe Photoshop CS4

The layer’s styles: Blending Options>Gradient Overlay

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Gradient’s parameters:

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Make a copy of the layer containing the button with the pointer. Using Free Transform option, try turning around the copy, situating it the same way as it is demonstrated below:

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Next we’ll draw the indicator cursor under the scrolling top pointer, using the Rounded Rectangle Tool (U) (radius of 10 px).

Create contemporary web layout for your design studio in Adobe Photoshop CS4

The layer’s styles: Blending Options>Inner Shadow

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Blending Options>Gradient Overlay

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Gradient’s parameters:

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Create contemporary web layout for your design studio in Adobe Photoshop CS4

Page: 1 2

Comments