PSDesignZone - Source for Photoshop, Fireworks, Gimp, and CSS Tutorials » Web Layouts

Interior Design Layout in Photoshop

Cybernetic Ninja Monkey — Mon, 15 Feb 2010 16:23:26 +0000

Modern Website Design in Photoshop

Cybernetic Ninja Monkey — Thu, 28 May 2009 21:04:52 +0000

Modern Website Design in Photoshop, very effective.

Click Here to see the Tutorial

Tags: photoshop, Tutorials

The Art Institue Photoshop Design

Cybernetic Ninja Monkey — Sat, 16 May 2009 19:17:40 +0000

Art Institute Web Layout Design

Click Here to see the Tutorial

Tags: photoshop

Flash Website Design with Photoshop

Cybernetic Ninja Monkey — Sat, 16 May 2009 19:07:52 +0000

Learn how to design for your Flash Projects

Click Here to see the Tutorial

Tags: photoshop

Design a Studio Web Page

Cybernetic Ninja Monkey — 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

Tags: photoshop

Replicating the Gamespot website

Cybernetic Ninja Monkey — 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

No tags for this post.

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.

Tags: ice, photoshop

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:

Tags: photoshop

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.

Tags: Buttons, ice, Logo, photoshop

Trendy Header in Photoshop

PSDesignZone — Sun, 22 Feb 2009 01:47:36 +0000

We are going to be creating the following Image:

View Full Image
First off your going to want to create a new photoshop document; I used the following settings

Fill the canvas using the paintbucket tool
with #e2e2e2

Tip:

Press (g) to bring out the Paintbucket tool

Now Create a new layer and select the Rounded Rectangle Tool , then set the foreground color to #695D54

Once you create the Rounded Rectangle we are going to create a new document for the dropshadow, press ctrl+n to create a new document and use the following settings:

Next select the Pencil tool (b) And create an image like so

Then go to Edit > Define Pattern, it doesn’t matter what it is named

Now ctrl+click on the layer that has the rounded rectangle on it to make a selection of that layer, then create a new layer now drag the new layer under the layer that contains the rounded rectangle. Use the arrow keys to move the selection down a ways.

Press shift+backspace to fill the layer with the pattern we just created.

Be sure to set the layer with the Pattern in it to about 20-30% (whatever looks good, do it by eye)

Tip:

you can make a pattern anything you want fool around with it and you can come up with some pretty cool effects.

Now we are going to make those bevels, create a new layer, first zoom in really close using the Zoom Tool pull out the handy pencil tool again set it’s width to 1px (pixel), set foreground color to black and draw a short line (see image), now set the foreground color to white and draw another line just to the right of that; Set this layers blending mode to overlay and your all set.

Copy this layer by pressing ctrl+j (while that layer is selected) and you can make multiple bevels, zoom out to see what it looks like.

Now pull out the gradient tool set the foreground color to white, and set the Gradient style to white to transparent (see pic)

Set the opacity of that layer to about 10-20%

Tip:

play around with the opacity and blending options to see interesting results

Now we can add in the text, I used Tahoma Bolded with an outer glow on it applied to it:

To come out with:

View Full Image

Hope that helps, if you have any questions leave a comment below.

Tags: effects, photoshop

Whiteshading Website Layout

PSDesignZone — Sat, 17 Jan 2009 04:55:03 +0000

Page: 1 2 next

Welcome to the tutorial Website Layout White Shadow style tutorial! We will learn how to create a website design like below:

View full image

First off create a new image using the following settings:

tip

remember that about 30% of website users still have their resolution at 800×600 pixels, it’s always good to design your sites under 800 pixels wide.

Now pull out the paintbucket tool and fill the background with #C09477

Create a new layer and make a marquee selection like below, fill that selection with white #FFFFFF

Now we are going to want to make a brown “shadow”, first ctrl+click on the layer with the white on it to select everything in that layer, then create a new layer and move that new layer underneath the white layer, go to Select > Modify > Expand and select 10 pixels

Now you have a bigger selection outside of the white part fill that with #B08469, Be sure that this layer is underneath the white layer, you should end up with this

Now before you do the next step you need to create a new image 3×3 pixels and transparent background, pull out the pencil tool and draw out this:

Go to Edit > Define Pattern, it doesn’t matter what it is named. Now back to the other document (the design) press ctrl on the layer with the brown shading to select it, then go to Select > Modify > Expand and set it to 5, press ok, now create a new layer and put it underneath the brown shading layer, press shift+backspace and in the dialouge that comes up choose your pattern:

Press ok and you should come out with this on both sides:

Now we are going to make the header of the site, make a new layer use the marquee tool to make a selection like below, fill it with white:

Bring up that layers style and apply the following dropshadow to it.

proceed to page 2 to learn how to design the rest of the site.

Page: 1 2 next

No tags for this post.

Gamespot Style Website Design in Photoshop Part 3

PSDesignZone — Wed, 07 Jan 2009 00:30:49 +0000

Page prev 1 2 3

Next Create a New layer right above the maincontent layer (the one with the light grey background) and press ctrl+g to mask that layer, then pull out the Rounded Rectangle tool and set the foreground color to #2E6A8F, draw a shape like below and apply the following layer style settings

Next create a new layer, and draw a rounded rectangle over top of the blue area, fill the rounded rectangle with #BDBEC0, select the bottom half of the rounded rectangle and press delete.

Next make a selection near the top of the new header and pull out the gradient tool, set the colors from white to transparent, and use the gradient tool like so:

Do the same thing again, except this time make a selection of the bottom half, set the colors from Black to Transparent and do it from the bottom for the shadow.

For the bottom portion, make a new layer, set the foreground color to #626469, then pull out the marquee tool and select the very bottom of the page leaving a little bit of the bottom out of it, fill the marquee with #626469 and stroke that layer one pixel with #40BDE8, And that’s about it for the layout you should have the following so far

Zoom

Add some text and a logo and your all set! Here is what I came out with

Zoom

Page prev 1 2 3

Tags: Logo, photoshop

Gamespot Style Website Design in Photoshop Part 2

PSDesignZone — Wed, 07 Jan 2009 00:29:24 +0000

Page prev 1 2 3 next

create a new layer Next use the marquee tool to make a selection like below and fill it with #000000(black)

Create a new layer and right underneath that, create another selection and fill it with #B2B3B5

Create a new layer and press ctrl+g to have that layer mask the layer you just created. Then pull out the marquee tool and select the top half of the grey nav bar, then use the Gradient tool with the colors set from white to transparent and drag far down to create an effect like below:

next use the marquee to select the bottom half of the area, use the Gradient tool again and set the colors to Black to Transparent, and this time drag up to create an effect like below:

Now create a new layer (make sure this one is also masking the grey nav bar layer with ctrl+g), pull out the rounded rectangle tool, set the foreground color to black and then create a shape like below:

Apply the following Gradient Overlay to the Layer

Page 1 2 3 next

Tags: photoshop

Gamespot Style Website Design in Photoshop

PSDesignZone — Wed, 07 Jan 2009 00:25:00 +0000

Tip

Hold down shift to make the gradient tool move at a perfect 90 degree angle

the background with #B2B3B5, make a new layer and then bring out the marquee tool and select about 25% of the left of the page, set your foreground color to #000000 and use the gradient tool pulling in a horizontal line from left to right to make a shade like below

Next press ctrl+j to duplicate the layer with the left hand Gradient on it, go to Edit > Transform > Flip Horizontal to flip the Shadow around then use the move tool to move it to the far right of the website.

Next pull out the marquee tool and select the middle portion of the site then fill it with black, and apply the following layer style settings

You should come out with this

Now make a selection with the marquee tool that leaves a little bit of the black part open, and has part of the black showing on the right and left, then fill it with #272F27, it

Tip

You can ctrl+click on a layer to select everything in it, then you can use a combination of the alt (-) and ctrl (+) to add or subtract from a selection

should look like below:

Good so far? Great! next make a new layer create a selection right underneath the black heading part and down a little ways (about 8% of the page) fill it with white, then apply the following layer settings

It should look like this:

Create a new layer and press ctrl+g to have that layer ‘mask’ the layer underneath it (the layer you made in the last step) Now pull out the Rounded Rectangle tool set the style to ‘fill pixels’ (option in the top left corner of screen) and create a rounded rectangle in the right hand corner of the top header you made, also apply the layer settings shown below:

Next you do about the same thing with the Rounded Rectangle Tool except this time do it to the left hand side, and apply the following Layer Style Settings

Page 1 2 3 next

Tags: photoshop

PSDesignZone - Source for Photoshop, Fireworks, Gimp, and CSS Tutorials » Web Layouts

Interior Design Layout in Photoshop

Related posts

Modern Website Design in Photoshop

Related posts

The Art Institue Photoshop Design

Related posts

Flash Website Design with Photoshop

Related posts

Design a Studio Web Page

Related posts

Replicating the Gamespot website

Related posts

Sweet User Interface in Photoshop

Related posts

Extreme Website Header

tip

Related posts

Whiteshading Website Layout V2

Tip

Tip

Tip

Related posts

Trendy Header in Photoshop

Tip:

Tip:

Tip:

Related posts

Whiteshading Website Layout

tip

Related posts

Gamespot Style Website Design in Photoshop Part 3

Related posts

Gamespot Style Website Design in Photoshop Part 2

Related posts

Gamespot Style Website Design in Photoshop

Tip

Tip

Related posts