Illustrated designs

Graphic Design Studio Web Layout

Graphic Design Studio Web Layout - part 1
Learn how to create an effective and contemporary web layout for your design studio.

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 CS4



Popular Tutorials

Create X-MEN movie poster in Adobe Photoshop CS4Create a nice looking photographer portfolio layout in Adobe Photoshop CS3Create interesting Wordpress theme in Adobe Photoshop CS4Using photo manipulation techniques create beautiful women wallpaper in Adobe Photoshop CS3Create Magic and special light effects in Adobe Photoshop CS3Create grungy photo effect using a variety of Photoshop brushes and image adjustmentsDownload PSDCreate a Glowing Neon Effects form a scratch in Adobe Photoshop CS3Make a Grunge Style Holden Efijy Wallpaper in Adobe Photoshop CS4You will learn how to pull different scrapbook elements together with your photos in Photoshop CS4

Latest Tutorials

Using photo manipulation techniques create beautiful women wallpaper in Adobe Photoshop CS3Create a Glowing Neon Effects form a scratch in Adobe Photoshop CS3Make a beautiful design from just a photo in Adobe Photoshop CS4Design grunge wordpress theme in Adobe Photoshop CS4Create sunflower themed wallpaper in Adobe Photoshop CS4

Subscribe via RSS



No popular authors found.
No popular articles found.