PSDesignZone.com » Web Layouts

Create Really Detailed Dark Web Layout Using Photoshop

NinjaMonkey — Fri, 03 Dec 2010 22:12:31 +0000

Interior Design Layout in Photoshop

NinjaMonkey — Mon, 15 Feb 2010 16:23:26 +0000

Modern Website Design in Photoshop

NinjaMonkey — Thu, 28 May 2009 21:04:52 +0000

Modern Website Design in Photoshop, very effective.

Click Here to see the Tutorial

The Art Institue Photoshop Design

NinjaMonkey — Sat, 16 May 2009 19:17:40 +0000

Art Institute Web Layout Design

Click Here to see the Tutorial

Flash Website Design with Photoshop

NinjaMonkey — Sat, 16 May 2009 19:07:52 +0000

Learn how to design for your Flash Projects

Click Here to see the Tutorial

Design a Studio Web Page

NinjaMonkey — Sat, 16 May 2009 18:46:11 +0000

Awesome Studio Web Page Layout design in Photoshop, very cool and easy to do.

Click Here to see the Tutorial

Replicating the Gamespot website

NinjaMonkey — Fri, 17 Apr 2009 14:45:03 +0000

This new and Trendy Tutorial will teach you how to create a website similar to the famous Gamespot Website. Excellent Design Concepts and ideas are covered.

Click Here to see the Tutorial

Sweet User Interface in Photoshop

PSDesignZone — Wed, 25 Feb 2009 23:03:23 +0000

We are going to be creating a User Interface like below:

To begin create a new image 500×100 pixels for the Dimensions, fill the background with #3F3F3F

Click on the brush tool, and make the settings like so:

Create a new layer and pull out the pen tool and make a path like below

Right click in the graphics area and choose ‘stroke path’ choose Brush with Simulate Pressure unchecked It should look like below

Where your layers are click on the ‘paths’ tab, click on the Path1 and drag it to the new path icon to convert it to an editable path, right click on the path and choose ‘duplicate path’ duplicate it twice like below:

Now deselect all the paths by clicking in the grey area below them, and click the layers tab, select the layer with the black line and it and press ctrl+j to duplicate it, press ctrl+i to change it’s color to white and then use the move tool and the arrow keys to move the line down about 2-3 pixels, change that layers blending mode to Overlay.

Now go back to the paths tab, pull out the pen tool and select one of your duplicated paths. Make sure your pen tool is configured like so:

Use the pen tool to make a shape like below:

Right click in the graphic and choose ‘make selection’ deselect the path and go to the layers tab, pull out the gradient tool and set the colors to black to transparent

Now create a gradient like so.

Do the exact same thing for the top except pull the gradient too the top.

Now use the text tool to type out the text ‘sweet’, I used the font Tahoma and the color is #CF7600

Create a new layer above the ‘sweet’ layer and press ctrl+g (alt+ctrl+g in CS4) to mask that layer over the text layer below it, ctrl+click on the sweet text to select it, pull out the marquee tool and press alt on the keyboard and select the bottom half of the selection to deselect it.

Fill the remaining selection with white, and set that layer opacity to about 20-30%

Follow the same process for the UI text. You can then add in some links like Home | Portfolio etc.. I used Tahoma 10 pt.

Extreme Website Header

PSDesignZone — Wed, 25 Feb 2009 01:49:00 +0000

We are going to be creating an Extreme Website Header like below

View Full

First create a new Photoshop document, that is 800×200 pixels, and has a transparent background.

Next use the paintbucket tool to fill the background with #B5B292, create a new layer , then pull out the Marquee Tool Make a selection like below and then use the paintbucket tool again to fill the selection with #473E26. Your document should look like below:

Next we are going to make a dropshadow image, create a new document with the following settings:

Set the foreground color to black and then pull out the pencil tool , zoom in really close and create an image like below

Now go to Edit > Define Pattern it doesn’t matter what the pattern is, so press ok

Now make a new layer and position that layer underneath the layer with the Brown Header rectangle on it press ctrl+click on the layer with that Brown Header to select it use the down arrow key to move the selection down about 5 pixels (BE SURE THE LAYER UNDER THE BROWN HEADER IS SELECTED):

Next with the layer under the header selected press shift+backspace, and select the pattern you created earlier. Then press ok:

Set that layers opacity to 20% and you should come out with this:

Next you need to download the following image, (right click and select save image as)

Then open the image use the marquee tool to copy and

tip

Press ctrl+g on the layer with the trees on it to make sure you get it to match up perfectly with the brown header layer

paste it over top of the Brown Header layer. Make it look like this

Your going to be needing to create a new pattern now, press ctrl+n to create a new image, make it’s dimensions 2×1 pixels and draw out an image like so, use the zoom tool to zoom way in:

Make a new layer and make a selection right above the layer with the trees on it

Press shift plus backspace and fill that layer with the new pattern:

Whiteshading Website Layout V2

PSDesignZone — Sun, 22 Feb 2009 01:54:33 +0000

Download the WordPress theme!

Objectives

In this tutorial you will learn how to create a smooth style website layout with a technique I have dubbed Whiteshading, this is Version 2 of the popular tutorial

Fundamentals of Web Design
Color choice ideas
‘Whiteshading style’

Difficulty Level: Intermediate

Final Result:

Zoom

Step 1:

Your first step is to create a new Photoshop document 800×600 pixels in size, fill the background with #F0EEE8, now make a new layer and make a marquee selection in the middle of the document with about an inch of room on every side, fill that selection with white #FFFFFF.

Step 2:

Now apply the following dropshadow to it:

Step 3:

Now we need to start working on the buttons at the top of the screen, create a new layer and position that layer under the layer with the big white square in it, create a selection pictured like below fill it with white and apply the same dropshadow to the button that you applied to the main area.

Step 4:

Duplicate the Layer by pressing

Tip

It might help to put each button into a ‘Set’ so that you can group all of the text layers and color layers for each button together, then you can move them all together

ctrl+j or dragging the button layer onto the new layer icon , Duplicate it for as many buttons as you’d like an d use the move tool to move it around.

Step 5:

Now create a new layer, once

Tip

Whew! that’s alot of layer styles that are the same, to copy and paste layer styles Simply right click on a layer with the layer style you want to copy, select ‘Copy Layer Style’, then to paste a layer style right click on the Layer that you want to paste it on and select ‘Paste Layer Style’

again underneath the main layer. Create a selection like pictured, and fill it with #AAA196, then apply the same Dropshadow setting to it that you’ve applied to everything else.

Step 6:

Create a new layer above the main layer this time, make a selection like below fill it with white and (are you ready) apply the same layer style once again.

You have now got the base of the website done, proceed to the next page to continue onto adding in the colors

Use the Menu above to navigate.

Step 7:

Let’s start with the buttons, set the foreground color to #AAA196 and make a long thin Rectangular selection in the top of your leftmost button fill it with #AAA196, also Apply an Inner Shadow too it with the following settings.

Step 8:

Now do the same thing to the other two buttons with the same layer style, except for with the new color layers selected press ctrl+alt+u and set the Saturation bar all the way to the left, this will give the colors a grayscale look, subduing the colors

Step 9:

Now for the Side Navigation,

Tip

When I design sites I try to stick to only 3-4 colors at most, to make the website look less busy, notice that throughout the design I use the same colors for areas in completely different areas creating Visual similarites

For the Heading, create a selection like below, and fill it with #AAA196

Step 10:

Next create a new layer, and create a selection exactly 1 pixel under the header for the side navigation (like below) and fill it with #7E7E7E:

Step 11:

Do the same think once again, under the Sub Header but fill the new selection with #EDE3CF

Step 12:

Alternate this procedure various times to come out with something like this

Step 13:

This step is optional but it can add some flavor to the design, grap a Stock Photo (I used an image from the upcoming Halo 3) and crop and position it similar to what I did

Step 14:

Now we’re going to add in a grey header bar underneath the image, position it exactly one pixel under and make a selection like below, fill that selection with #E2DFDE

You should have the following so far

Step 15:

Add in some text and your all set
Zoom

Synopsis

I hope you enjoyed the Tutorial, if you have any questions feel free to leave a comment below.