Web design layout tutorial

Create a new document 800×800 with a black background, select the color #01afee and create a rectangle. Once you have your rectangle press “CTRL + T”, now rotate your rectangle like this.

Now for this part you need some “splatter brushes” EITHER search yahoo or goto a site like brusheasy and download a set, once you have them make some randam splatters over your canvas, using the colors blue and black.

Select the type tool and add your site title and slogan.

Now if you have used two colors like mine above for your title then select one of the colors and add a splatter. If you have used white then you can just use a white splatter, you should have something like this.

Select the type tool again and add your navigation, use free transform (CTRL + T) to rotate the text. Read more of this post

Making your own portfolio web page

Need personal web page? In this tutorial we will learn to create nice personal portfolio web page.

Start working by creating a new file (File>New), having 770×750 px and 72 dpi. We shall use on this new made file the Rectangle Tool (U) to represent the background of the site’s page to be.

Making your own portfolio web page in Photoshop CS3

Set the next parameters for this layer by making a mouse click on the layer we work with on the layers’ panel: Blending Options>Gradient Overlay

Making your own portfolio web page in Photoshop CS3

Gradient’s parameters:

Making your own portfolio web page in Photoshop CS3

Making your own portfolio web page in Photoshop CS3

Choose again the Rectangle Tool (U) to represent that place reserved for the author’s portrait and the lateral menu. Firstly we have to represent the common primary layer and then press Alt button to divide the zones, applying the same tool, used before. Read more of this post

Urban layout web design

Hello friends

The Talk-Mania Team wants to thank you for a great 2007, and we’re looking forward to an even better 2008. We plan to add more tutorials than last year, and to create a few new websites for you.

From now on almost each tutorial will have a sponsor. If you want to support our website try to visit each sponsor to see their offers. I promise i will choose the best products and sponsors for you.

Today’s sponsor is a great website which i personally use, and now i really like to promote it because i think it is very cool piece of software for a webmaster. ( it is FREE )
If you want to store your files online, create a photo album, Store & backup your important files online, Share & publish your documents and photos online than you should register right now and you will receive2 GB of free Storage
Sign up for a FREE account

Today i will create Tutorial Number 142 from 500 Tutorial Marathon
I will show you how to create a Urban layout. You can use this type of layout if you plane to start a web design company

Please make a new document. size should be 760×770 Pixels. Use a White background for this document

Open this image in Photoshop. Read more of this post

Design a cool photography portfolio

Create a new file (File>New) that would have 800×800 px and 72 dpi. Selecting the Paint Bucket Tool (G) may help us to paint the new file with the next color #111111

Create Photo Portfolio Web Layout in Photoshop CS3

Next we have to use the Rounded Rectangle Tool (U) (radius 7 px) to represent the primary layer reserved for the menu’s button, situated on the site’s header.

Create Photo Portfolio Web Layout in Photoshop CS3

The layer’s parameters are selected by making a mouse click on the necessary layer on the layers’ panel.
Blending Options>Gradient Overlay

Create Photo Portfolio Web Layout in Photoshop CS3

Gradient’s parameters:

Create Photo Portfolio Web Layout in Photoshop CS3 Read more of this post

Designing personal web page layout

Create a new file having 766×606 px and 72 dpi. Color the layer in black, with the instrument. Now use the instrumentto draw a grey short stripe. Set the adjustments in Blending Options, like it is demonstrated in the picture.

 Designing Personal Web Page Layout in Photoshop CS

 Designing Personal Web Page Layout in Photoshop CS

 Designing Personal Web Page Layout in Photoshop CS Read more of this post

Funky web design layout

Create a new document 850 x 1024 with a white background. Select the rounded rectangle tool and create a rectangle at the top.

Add these layer styles yo your rectangle.

Now add your navigation text and a little symbol as a seperater.

Now select the rounded rectangle tool again and create a number plate shape, fill with the color #0195cb and add a 2pixel white stroke. Read more of this post

Create a high end web design from scratch

In this tutorial, we’ll put together a high-end Web design using a crisp, thin font, gorgeous background images, and clever use of space and layout. You can easily use the technique to create your own unique designs.


It’s quite an elegant design, which would probably suit a designer portfolio-type site, but really could be altered for all sorts of purposes. It relies on having elegant typography, a structured layout, and a visually interesting background.

The real power of this design is to show you what can be accomplished by keeping it simple. At the end of this Photoshop part of the tutorial, I’ll show you how we can easily swap backgrounds and fonts and explainwhy this design works well.

It’s a simple structure: horizontal menu, main heading panel, and content area. Although this is a homepage design, you could imagine an interior page would simply have a different heading panel and new content area. For the purposes of simplicity, we’ll only be putting together the homepage design.

First of all, create a new document. Mine is 1100px wide x 1100px high. This is so that I can create a Web site made for 1024px wide, but still have space to decide what is going to happen outside the viewable area so that it degrades nicely even on larger screens.

Now our first task is to create a nice abstract background. To do this we’ll draw a linear gradient down using these two colors: #1b204c to #472373.

Now we want a visually interesting background which is abstract enough that it doesn’t distract from the text. Fortunately, there is an awesome watercolor image available free via GoMedia’s Arsenal, click on the freebie section and you’ll find two watercolors; the one we want is the greenish one.

Now while it’s very pleasant as is, it’s much cooler if we press CTRL+I and invert it so it’s that nice pink/purple on black.

Now copy the watercolor onto our main canvas and press Ctrl+T to transform it down to a reasonable size. Our aim here is to have it fade to black on the right (so that we can build our HTML later with greater ease). Additionally, we don’t want it too long vertically, either, so it’s best to erase a little of the excess. To do this grab a paint brush and paint in black to just remove the bottom parts.

Note that it’s best to get a brush that has some texture so it’s not obvious that we erased parts. If you scroll down your brush list, there is a brush that comes with Photoshop that looks like the one shown. It’s not a bad brush to use. Of course, you might have some even nicer paint brushes and feel free to use those.

When you’re done, fill in any areas on the right and bottom with black so that the whole canvas is covered by this layer. Read more of this post