Create a Business Web Page Layout

First i want to thank you for visiting this tutorial. In this tutorial i will create a business layout. If you come regularly to my blog you will see how easy is to create great looking designs or websites.
In this blog you will find mainly layout tutorials.

Are you curious why ?
I am working with photoshop from a long time, and since then i have earned a lot of money creating websites for my clients. I want to teach you how to create websites because you will earn more money creating websites then creating a simple photoshop effect
If you want to start earning money on internet, then it is time to create websites for your future clients

I will give you an example. How much do you think you can charge for a logo, or for a simple photo effect ? Maybe 50 - 100 $ ?
In my entire life i have created a few thousand logos, and a few hundreds big websites, and my earnings are bigger for my layouts, that’s why i think you should start creating websites

I will try to be as simple as possible, and i am sure you can create great looking layouts with my methods

So let’s start creating or first layout. In this tutorial i will create a business layout

You can download the layout from the following link : ...

Login/Register to download/read further.

Please create a new document

Please use the following settings:

Set the foreground color to : #2b2724

Select The Paint Bucket Tool, and press on time on your canvas.
Select The background layer

Press on CTRL+J ( this shortcut will duplicate the selected layer )

Select ” layer 1 ” and go to Filter > Noise > Add Noise

Then use the following settings:

Select Rounded Rectangle Tool, and on the top of your screen, set the following settings

On your layout create two shapes for our navigation. I will change my foreground color to #e84502 , then i will use Rounded Rectangle Tool

Duplicate these 2 orange shapes. To duplicate the layer, first you need to select it, then press on CTRL+J
After you will duplicate the orange shapes, change the colors to white. To change the color you need to double click on the layer thumbnail, then you can chose the white color

this is what i have so far

Now i will select the Move Tool ( V ) , and i will move the white shapes to the top of the layout

I will place some stock images on my layout

With Type tool, i will add some text

With the same tool, add another text on the navigation bar

Select Line tool, and be sure you set the line Weight to 1 px

Create a vertical line between the navigation buttons

Now it is very important to rasterize the layer. to do this you need to right click the layer in your layer palette

Select Eraser tool, and change your brush to 60 Soft Mechanical 60 pixels

And try to delete the top and the bottom part of the line

Duplicate this layer ( to duplicate you need to have the layer selected, then press on CTRL+J )
Select Move tool, and place the duplicated line on the right side between the other text buttons

On the top of our layout, i will create a simple text logo. in my future tutorials i will show you how to create great looking logos

Create a new layer right above the layer 1

Select Brush tool ( change the brush to Soft Mechanical 60 pixels ), and with white color make a simple dot, under the text logo

To create a nice effect, please reduce the opacity for this layer to 25 %

This is my result

I hope you like my end result. This Layered PSD file is available only for VIP members

Thursday, May 21, 2009 | posted in Web Design | 0 comments [ More ]

Create Blue Black Navigation Bar

Design a beautiful navigation bar in Photoshop. This tutorial will teach you how to combine several layer styles to create a beautiful yet simple navigation bar.

Preview of Final Results

Blue on Black Navigation Bar Photoshop Tutorial

Step 1

Firstly, create a new document - the size I've used is 540 by 220 pixels. Now for the background I've filled it with a black colour. To do this go Edit > Fill with the colour #0d0d0d.

Step 2

Secondly, we'll be making the background for the navigation buttons to go inside. Create a new layer (Layer > New > Layer) and select the rounded rectangle tool. Make fixed size selection of 480 by 50 pixels with a radius of 5 pixels in the middle of the document.

Fill this selection with a linear gradient from the colour #151515 to #050505 using the gradient tool. Deselect - Ctrl + D. Set the fill of the layer to 60% (the setting underneath the opacity in the layers window). The difference between opacity and fill is simply opacity changes the opacity of the entire layer and fill changes the opacity of everything except the layer styles.

Step 3

Now we'll be adding a couple of layer styles to this navigation background.

Layer > Layer Style > Outer Glow

Layer > Layer Style > Stroke

Now your document should be looking something like this.

Step 4

Next up we'll be adding in the buttons. Create a new layer and using the rounded rectangle tool again make a selection of 150 by 40 pixels (with a radius of 5 pixels again) on the left side of the navigation bar.

Fill this selection with a linear gradient from #323232 to #161616 using the gradient tool. Set the fill for this layer to 50%.

Step 5

I've applied three layer styles to this button to give it some depth and make it look cooler.

Layer > Layer Styles > Inner Glow

Layer > Layer Styles > Gradient Overlay

Layer > Layer Styles > Stroke

Your navigation bar should now look something like this.

Step 6

Select the text tool and add in some text - the font styles that I have used for the text are Bell Gothic Std, Bold, 20 pt, Crisp, #ffffff.

Step 7

Now repeat the button steps so you have two new buttons - I've decided that I'd make the middle one a different colour to stand out (this can be like a mouse over effect or something if you decided to code this navigation bar for a web layout). The blue colours I used for that are #14b9ef and #054573.

Step 8

Because we have set the fill of the layers to 50-60% we can adjust the background and it can be half see through - below I've put a radial gradient with colours used in the vista theme.

| posted in Web Design | 0 comments [ More ]

Create a Stunning Vista Inspired Menu

This tutorial will show you how to make a semi-transparent Vista-inspired menu using gradients, shadows, and blurring to produce a stunning modern effect.

Step 1

Open a new canvas that is 600x335px. Begin by showing rulers (View>Rulers), then create two guides similar to the image below. Create one at 285px and the other at 310px.

Step 2

Create a Rectangle (U) that fills the lower ruled area and label the layer "lower bar." Open up the Effects Menu for the layer. Navigate to the Gradient Overlay property and apply a gradient between #000000 and #0c0c0c at 90 degrees.

Now create another rectangle in the upper rules area and name the layer "upper bar." Again open up the effects menu and apply a Gradient Overlay between #35393d and #787b7d at 90 degrees. Select the two rectangles created so far and change the Opacity to 90%. When a background is added later, this will provide a nice effect, as it allows the background to slightly show through.

Step 3

The next step is to add a highlight to the menu using the Line Tool (U). Select the Line Tool and change the weight to 2px. Draw a line across the bar and change the color to #9fa2a4. Rename this layer to "lower highlight." Now draw another line directly above the previous and change the color to #484b4d and change the name to "upper highlight." Group these layers with bar layers in a group called "bar." This stage completes the basis of the menu.

Step 4

Now that the menu bar is complete, we can create a set of dividers to go between the text. Select the Line Tool again and leave the weight at 2px. Draw a vertical line from the center ruler mark that stops a few pixels before the highlight. This does not need to be exact and can easily be adjusted later. Open the effects menu and apply a Gradient Overlay at 90 degrees between #676a6d and #4d6672. Label this layer "upper divider."

Draw another vertical line from the center ruler going down and stopping the same distance from the edge as above. This section does not have a gradient, so change the color to #43474b. Rename this layer to "lower divider." Group the two sections of the divider and name the group "divider."

Step 5

Select the Type Tool (T) and change the color to white (#FFFFFF). The font I chose to use for the menu is called Segoe UI because it is the font used in the Vista user interface. However not everyone has this font, so as a replacement Arial will do. Set the size to 11pt and type your links out, spacing them evenly. Group them together and name the group "links."

Now copy your dividers and space them in between the links. You should end up with something similar to this.

Step 6

Now the menu bar is basically completed, so you can add a background of your choice. The background I chose is a photograph of grass. Anything colorful or scenic will do.

Copy your background into the menu and rename the layer Background. Make sure this layer is at the back in your layers palette. Note the transparency in the menu allows the background to show through without overpowering.

Step 7

This step will create the blurred rounded rectangle that is behind the text. This effect is quite common in Vista and is a good technique. It takes the focus of the background and places it on the text, but still shows the beautiful scene behind.

First of all, duplicate the background. This layer is not permanent, but we will be cutting a selection out of it. Then using the Rounded Rectangle Tool (U), draw a shape that starts past the left edge of the canvas. This means that the shape only has two rounded edges.

Rasterize the layer and then using the Magic Wand Tool (W), select the rectangle and delete the color while keeping the outline. Now select the background copy and cut from that layer. Delete the background copy layer and add another new layer called "blur."

Paste the shape in the layer called "blur" and then apply a Gaussian Blur of 5px (Filter>Blur>Gaussian Blur). Then apply a Drop Shadow as shown below.

Step 8

Now add your text inside the blur. Using the same typeface as the links (Segoe UI) type your name and tagline. Select some of the text and make it bold and keep some normal, apply a Drop Shadow, and a Gradient. This produces a modern-looking text that has a striking look.

Step 9

This step is optional, as it will produce the blue highlighted glow that will become our hover effect. Draw a large Ellipse (U) that fills the area between the dividers. Change the color of the ellipse to #5c94c5 and apply a Gaussian blur of 10px. The shape has now become a raster layer, and you can clean up the excess blur by using the Marquee Tool (M).

| posted in Web Design | 0 comments [ More ]