[NO SPAM]Design website layout by photoshop (Navagation, Icons, Button v.v..)

[Decker]

Lưu ý : Vì trong tuts này mình không sử dụng đến ngôn ngữ tiếng Việt, nên mọi người thông cảm ( ngôn ngữ Anh thì dễ hiểu hơn khi ta dùng PTS )

Notes : In tutorials, I can't use Vietnamese language ( so, English language is very easy, when we use the tools on Photoshop ).



Những Tut đã có :

[Decker]

Create a Fashion Web Layout (PSD Template) Using Photoshop

Step 1

Fire up Photoshop and create a new document with the following dimensions: 1020 X 1170. As a background choose: #e8e8e8

Step 2

Select rectangle tool and create a rectangle on the top of the document. I have used black #00000, than from Complete Designer Set use an swirl ornament (you will have hundreds of choices) and place it on the top of the document, and set the opacity to 36%
Next select Type Tool and write your desired text for logo. I have typed ArtBox7 (using black and red)

Step 3

Creating the search bar
Select rectangle tool, and create a shape on the top right side. I have used this color: #e1cdcd than select rounded rectangle tool (with a radios of 6 px) and draw a small shape using this color #e73c61.
Here’s my result:

Step 4

Creating the navigation
First of all I will add 2 guides to position better the navigation.
To add the guides, in Photoshop menu go to : View>New Guide

A new windows will pop-up. Here enter the following values: 40px for the first guide and 977px for the second one.


Next, using rounded rectangle tool, create a new shape which will serve as a navigation. As a radios I have use 10px.
Note: Please make sure that you will position this shape between the guides.

Then apply the following layer styles:


My result:

Next using type tool (T) add some text for navigation using the following details:

Here’s my result:

Next, because this will be the main navigation we will need to find a way to mark the selected page. That’s why I will select again Rounded Rectangle Tool to add a shape with a radious of 10px. I will add this shape on the Home area and I will apply the following layer styles:
Color: #e33258



The navigation is finished now.
Step 5

Creating the Header
Select Rounded Rectangle Tool and create a shape underneath the header. Be sure to place it between those 2 guides. Mine has the following dimensions: 938px X 309px
Next from Complete Designer Set, select an pack with some vector elements and place one of them in Photoshop. Basically you will need do drag the vector from Illustrator in Photoshop.


Change the Color

Change the opacity

My result

Next using type tool add a slogan for the header

And apply the following layer style

Than duplicate this text

Make sure that the duplicated text is selected on your layer panel and then go to :
Filter> Blur>Motion Blur

Make sure that the angle is set to 0 and for distance enter 90px

Here’s my result so far:

The header is not looking quite well yet, that’s why I will need to search on my hard drive for a stock image. You should know that every designer should have on their hard drive – vectors packs, icons, Photoshop brushes, textures and stock images.
Basically when you have a project which needs to be done ASAP, stock vectors, icons and Photoshop brushes are a golden mine because it can help you to create a nice looking design in a shorter time….
On our Complete Designer Set you will find more than 5000 elements (vectors, icons, Photoshop brushes), every element was been hand drawn by our design team and the entire process (to create this entire set) took us more than 6000 hours!
Well, I found that image and now all I have to do is to place it in Photoshop. Here I will need to make sure that the layer for this image is above the “Header: layer.

Next I will select the “Image” layer, right click on it and I will select “Create Clipping Mask”

My result

The result is quite nice but I will like to enhance a little bit the slogan, that’s why I will make sure that I will select again the “Image” layer and then I’ll go to :
Layer>Layer Mask>Hide All

Having layer “Header ” selected, grab “Gradient Tool” and here make sure that the color is set up to default – Black and White

Next click on the layer mask 52.jpg and then hold and drag with the mouse starting from the right side to the left

Here’s my result:

As you can see the image is too bright, that’s why I will select the layer “Image” and I will lower the opacity to 63%

Here’s my result

Next, I will add some thumbnails at the bottom of the header. I will select redounded rectangle tool with a radios of 20px, I will set the color to: # e33258
Here’s my result:

Than using some small images I will create the thumbnails

Step 6

Creating the content area
Using rectangle tool I will add a white shape with the following dimensions 939px X 574px
On the top of the shape, I will add a shadow. Select Ellipse Tool and add a similar shape
then apply a Gaussian blur (Filter>Blur>Gaussian Blur) with a radios of 37px
and place the layer (I have called Shadow) below the layer “Content”
You should have a nice looking shadow now.

Proceed in the same way for the shadow at the bottom of the content area….
To finish up this step I will add some images and some dummy text.

Step 7

Creating the footer
The footer is quite easy to create, in fact it’s similar with the top area and logo. I will select rectangle tool and I will create a black shape at the bottom than I will copy the logo, but I will make the text a little bit smaller and than from Complete Designer Set I will add an vector ornament. Here’s my result:

[Decker]

Create a Clean and Colorful Web Layout in Photoshop



As usual we will need to create a new document. To create a new document you need to press on CTRL+N and then you can set the size for this document. I will use as always the
same size 960 x900 pixels.
With Rectangle Tool I will create a big shape on top of the layout. Here I will place the navigation bar and the logo. The color used to create this shape is: #716f1a
I will make a selection around this shape, and then I will create a new layer (press on CTRL+SHIFT+ALT+N). On this layer I will draw a white point with Brush too, and a big smooth round brush.

I will change the blending mode for this layer to overlay, and in the same time I will change the opacity value to 50 %. If you want to get rid of the selection press on CTRL+D

In the next step I will use Pen Tool to create a nice shape where I will place some unusual buttons. Before I will use Pen Tool it is recommended to make the grid visible.

With Pen Tool you can create a shape similar with mine

For this shape I will use the following layer styles



This is my result so far.

With Pen Tool create another shape and place it like this. Do not forget to enable the grid. It will help you to create a perfect button.

I will add a simple black gradient for this button. This gradient is from our biggest pack with Gradients. 27.000 Photoshop gradients. In the same time I will add also some text.

Right under this black button you can create another button (a little bigger) the easy way is to duplicate the black button, and then you can change the size. To change the size of the shape press on CTRL+T and then with mouse pointer drag from a control point while you hold down the ALT key. I will change the color for this shape to white and I will reduce the opacity until I like the result.

At the bottom of the green shape I will add another orange shape

I will add the following layer styles




This is my result

I will select Rounded Rectangle Tool, and I will create a big shape with the following color: #d4d4d4

I will add the following layer style. Please save this layer style, because we will use it later.


This is how my shape will look like

With the same tool: Rounded Rectangle Tool I will create another shape. I will use the following color: #eae7e5

Over this shape I will create another one with a white color. I will add the layer style I have used for the big shape

With Pen Tool I will create a shape like our button. Turn on the grid (CTRL+H) if you want a perfect shape.

On top I will create another one (a smaller shape)

With the same technique I will create another one like in the following image

On the other side of the shape I will create a similar shape

With Rounded Rectangle Tool I will create three shapes

I will select all three shapes and I will drag to the “Create a new layer “button from the bottom of your layer palette. This action will duplicate the shapes, and in the same time Photoshop will merge all three shapes into a single one. You will notice also a new layer. Be sure you select this layer, and delete the bottom part of the shape until you have a similar result with mine.

Here is the layer style I have used for these content boxes.



One of my final steps is to add some text with Horizontal Type Tool. I will use the following font: Myriad Pro. In the same way I will add also some images and some icons. Here you can download the Icons

If you want to download this layout you need to register for a VIP account. You will be able to download ALL psd layouts for each tutorial + our huge collection of Vectors, stock photos, Photoshop gradients, layer styles, vector files, icons, etc. The price is 9.95 $ and it will allow you to download all our VIP resources plus the next one we will release during your subscription. If you want to apply for one year you will be able to download our current resources + the future ones we will release in the upcoming year.

Download PSD file :

http://www.grafpedia.com/downloads/web-layouts/67-clean-layout.zip

Have fun.

[Decker]

Web Design Layout #1

We’ll start off with a new document, with the dimensions 1000 x 1000 pixels.

Creating Our Background

Once you’ve created your new document, fill your background using the paint tool with the color #EEEEEE. Go to “filter > noise > add noise”, use the settings below.

Creating Our Navigation

Select the rectangular marquee tool and make a selection across the top of your canvas, the height of the selection should be about 68 - 70 pixels in height but must span the width of the canvas.

Fill your selection with any color then add these layer styles.



You should have something like this.

Underneath the stroke on the navigation, create a 1pixel line spanning the width of the canvas. Fill the selection with white.

On top of your navigation add your dummy text links.

Ive left one of the links in a different color, this one will be my hover state. Using the rectangular marquee tool make a selection around your first link.

Fill your selection on a layer underneath your navigation text. Fill the selection with any color. Now add these layer styles.


You should have something like this.

Were now going to make some seperators to seperate our nav links. Using the rectangular marquee tool create two 1 pixel lines next to each other.

You should have something like this.

In the empty space which is left on the right hand side, you can fill it in with a search form.

The go button use the same layer styles as our hover button.
Our Website Title & Featured Area

Using the rectangular marquee tool make a big selection underneath everything you’ve made so far.

Fill the selection with any color then add these layer styles.


Underneath the stroke add a white line like we did on our navigation.

Underneath our navigation add your website title. Ive used two different colors for the title, the font ive used is a star wars jedi font. Ive also added this drop shadow.

This is how mine looks.

Underneath your website title add a featured image to use in your featured area.

Once you’ve added your image, select its layer whilst holding down the CTRL key, this will load the images selection. Go to “select > modify > expand”. Expand the selection by 10 pixels.

Create a new layer underneath your featured image then fill the selection with white. Add a subtle stroke to the white rectangle. On the right hand side add a simple title and description.

Creating Our Content Area

Select the rounded rectangle tool with a radius of 30px.

Create a rectangle underneath your featured area.

Fill the rectangle with any color then add these layer styles.



You should have something like this.

Duplicate your rectangle 2 more times and place them underneath one another.

Inside your rectangles add some dummy content, im using some icons from smashing magazine with some simple lorem ipsum text. On the right side of the rectangles add a bigger one using the same styles.

Creating The Footer

Select the rounded rectangle again with a radius of 30px create a rectangle underneath your content boxes. Add the same layer styles as the rectangles in the steps above.

Add your footer content to the footer to finish off your layout. Your final layout should look something like this.

[Decker]

Car Layout #6 - Lets Get Started

Start off by creating a new document 1200 x 1200 pixels, setup two vertical guides by going to “view > new guide”. Set the first guide at 125px and the second guide at 1075px, this should give us a canvas size of 950 pixels to work with.

Now set the colour #212121 as your foreground and #080808 as your background. Select the gradient tool with a radial gradient then drag the gradient from the top middle part of the canvas to about half way down.

Creating The Website Title

Select the text type tool then add your website title along with your slogan in the top left corner of the canvas.

Once you’ve done that add the following layer styles to your website title (not your slogan).


You should now have something like this.

Creating The Navigation

Select the rounded rectangle tool with the default radius settings (should be 10px). Drag out a rounded rectangle starting from the right guide. Fill the navigation with any colour.

Now add the following layer styles to your navigation rectangle.


You should have something like this.

Still with the rounded rectangle create another rectangle inside the navigation rectangle.

Fill the second rectangle with the colour white then set the layer opacity to 4%. Now with the type tool add your text navigation links.

In-between each link add a simple white ellipse.

Creating The Featured Area

Underneath your title and navigation create a rectangle with the rounded rectangle tool, the rectangle should span the width of the guides and should be about 320 pixels in height.

Fill the featured rectangle with a radial gradient in the same way we did our background at the start of this tutorial. Once you’ve done the radial gradient at a 1 pixel stroke using the settings below.

You should have something like this.

Were now going to add a big shine effect over the featured area, so select the pen tool and create a curvy path like the image below.

Fill your path in white then load a selection around the featured rectangle but keep the shine layer selected. Go to “select > inverse” then hit the delete key, you should be left with a white shape which resides inside the featured rectangle. Set the shine layer’s opacity to 2% then add a layer mask, drag a linear gradient from the right of the shine to the left.

Inside the featured area add some dummy text and title.

For this next part your going to need an image of a car, im using a car by reiger. Drag your car image onto your canvas, cut away the background using your favourite cutting method. Place the car on the right side of the featured area.

Create a new layer underneath your car layer, select the polygonal lasso tool and a make selection underneath the car. The way i do it is, i imagine the car’s wheels as four corners.

Fill the selection with the colour black then blur the shadow by around 2-4 pixels using the guassian blur. Now duplicate the car layer and flip it vertically, place the duplicated layer underneath its original. Move the car directly underneath to act as a reflection, you may need to distort the image to get a correct look.
Once you’ve moved the duplicated layer into place, add a layer mask then blend it in using the linear gradient. You should have something like this.

Creating The Content Area

Select the rounded rectangle tool and create two rectangles side by side, one big one and one small one. Fill each rectangle in the color #141414 and add a stroke using the settings below.

You should have something like this.

At the top of each content box add a smaller rounded rectangle big enough to add a simple content box title. Fill each new rectangle in the colour #080808.

Now add your content box dummy content, ive just added some lorem ipsum text a small list and an example image.

Creating The Footer

Underneath all the content add two 1pixel lines, fill the top line in black and the bottom line in white. These two 1pixel lines should span the width of the canvas up to each guide.

Once you’ve created your lines set the layer blending mode to “overlay”. Now, with the rectangular marquee tool or the rectangle tool create a rectangle underneath the lines, fill the rectangle in the colour #060606.

Finish the layout by adding your footer information to the footer area.
The Result

Here’s my finished layout.

Look out for the FREE PSD file in the coming days. Thanks for reading.

[Decker]

Design a Clean Portfolio Website Layout in Photoshop

Setting up the workspace

Ok…First thing you should do is to set up the workspace.This is available for all your next layout designs.Open Photoshop and create a new file of 1300×1400px.

After,drag some guides at 150px and at 1100px,to have a centered layout.The layout will have 960 main pixels where we`ll be creating it.

Creating the Header

Now let`s design something here.Grab the rectangle tool and draw a rectangle with the height of 150px,with the #EDEDED color.Here will be the header.

After,using the same Rectangle Tool,draw another rectangle over the gray one,but give it a height of 80px and leave above it 70px.Colorize it in a dark color.I used #303030.

Now draw a rectangle of 960×90px and align it so that you`ll have 50px between it and the top.Give it the same black color used above.

I`m gonna show you now how to create for this button toolbar a nice and beautiful shadow.Duplicate this last layer and change its height from 90px to 70px then align it top with the original layer.In the image I changed the colors of the layers,to show you what you should obtain.

Ok!Now put the red layer under the white layer,change the white layer`s color to #303030 and for the red layer,give it the black color.
Now select the red layer,then go to Filter->Blur->Gaussian Blur , set a Radius of 6px and hit Ok.We`ve just obtained a nice shadow for our header.

For the layer named “white layer”,apply a smooth black gradient from top to bottom,like in the image.

Add some text in the top-left area of the project(Some buttons like Home,About or anything else).I gave them a white shadow of 90 degrees.

The logo I created myself using the Calibri font(font-size : 60px) and adding some blending options.

I added my tag near the logo:“Just enjoy it!” , using the same Calibri Font,but written Italic and with the size of 18px.

Now let`s create the buttons.Select the Rounded Rectangle Tool and draw a rectangle of 76×28px.

Now add some blending options:


Choosing Lucida Sans font and with a 16px font size and a white color type in the word “Home”.

Now create more buttons to finish the buttons toolbar.You may add a Contact button,or a Portfolio button or whatever you want.

Let`s add a little detail but with a strong effect:Let`s illuminate a little bit the logo.For this,choose the “White layer”,as we named it above and hit Ctrl+Click or Command+Click for Mac,to have the selection of the layer.Create another layer above it and with a big Soft Round Brush paint inside the selection with white just over the logo.You`ll obtain a beautiful light effect for the logo.

We`ve just finished the header.Now we`re gonna create the main content of the layout.

Designing the Main Content of the Layout

For the main content,we`re gonna design an area presenting your latest designs,or some features of your possible products.So,grab the Rectangle Tool and draw a big rectangle with the height of 400px,then add a sleek gray to white gradient overlay from top to bottom.

To make a better integration between the header and the main content,draw two lines,a black and a white one and put them one after another.This way,you`ll obtain a nice depth effect between those areas.

Download this Computer Icon and add it to our project.Put it in the right side of the project.Here will be your work`s images or product`s images.Resize the monitor a little bit to fits and integrates into the project.I made it smaller until reached 400×335px and then I had placed my own image inside.

Select the Type Tool(T) and write some content in the left side of the notebook.I used only Lucida Sans font,changing the font size depending on content.Also i used this Small Ok Icon for the “Features” list.

Now let`s create two buttons.Those buttons will be the main buttons of the layout.Grab the Rounded Rectangle Tool(U) ,set a Radius of 7px and draw a rectangle of 160×35px.

Then add the next blending options:



The button looks like this one:

Choose the button layer and hit Ctrl+Click (or Command+Click) for Mac on it to have the button selected in the canvas.(to reveal its selection).Now grab the Rectangular Marquee Tool(M),choose from the options “Intersect with selection” and select only the top-half of the button.You should have one half of the button selected now.

Grab the Paint Bucket Tool(G) and fill the selected area with white.Be sure to have another layer created above the button to paint in.Low the opacity to 8%.Write inside the button “Download” or any word you want.

Select again the button,by hitting Ctrl+Click on the layer.Create a new layer above the button,choose the Soft Round 200px Brush and paint inside the button`s selection with white.We do this to create a middle light effect inside the button.Is the same process used at the logo.

Duplicate the button and place the new button on the right side.

Now we want to create a small area under,for “more informations”.Grab the Rectangle tool and draw a gray rectangle(#EFEDEE) of 40 px.After,give it a stroke of 1px of #BBBBBB color.


Under the top stroke,draw a white line to create a beautiful effect.

Let`s add now under the PC monitor five small buttons for every slide of the slider,because this area is a big slider which rotates your products.So,grab the Elipse Tool(U) and drag 5 circles under computer.Hold Shift Key while you drag to make them perfectly round.

For the first one,set the next blending options:Inner Shadow and Color Overlay:

…and for the next four buttons,add those blending options:

Add some content in the left side of this rectangle,maybe some tags or more details about the product.

We want to design now another area for some general content,like “Who we are” or testimonials.For this,grab the rectangle tool and draw a rectangle of 1300×340px and give it a sleek gray to white gradient from top to bottom.Above the shape,add a 1px white line to integrate better with the entire design.

Now divide the shape in 3 pieces and inside the first two pieces add some text about you or what you do,and inside the last piece add a testimonials area.


That was all for the middle area.What have we done till now:

Designing the Footer:

[Decker]

Design a Clean Portfolio Website Layout in Photoshop - Continutes

Ok,we`re almost done here.We have to design the footer and the layout is finished.We`re gonna add some colored areas here,a portfolio area with your latest works and a social networks area displaying your latest tweet and more other buttons to your social networks.
What we want to create now is a small strip at the top of the footer,just to integrate a little bit more the footer with the rest of the layout.So,draw some stripes like in the image.

Now draw a big rectangle of 1300×420px under this stripe and add a gradient from black to dark gray,applying the settings from the next image:

If you followed the instructions correctly,you should obtained a footer like this one:

Now,choose a picture related to your work or product and add it to the layout but resize it until reaches 260×150px,then add it a 3px white inside stroke.

Now,duplicate the photo layer and make it black by adding Color Overlay Blending option.Then go to Edit->Transform->Warp and warp it until looks like this picture.

Now go to Filter-Blur->Gaussian Blur and give it a blur with a radius of 3px.Then reduce the layer`s opacity to 60px and put the layer under the original image layer.


We`ve just obtained a beautiful shadow effect for the image.I want to add another detail for this thumbnail.I want to add a frame.For this,make a selection around the thumbnail using the Rectangular Marquee Tool.Then grab the Gradient Tool(G),set a gray to white Foreground to transparent Gradient and paint with the gradient from top to bottom inside the selection.



This is what you should obtain:

Reduce a little bit the opacity of the layer and put it under the image layer.
We`ve just obtained a beautiful stylized thumbnail.

Add two more thumbnails to the layer and apply the same steps for them.

Under the thumbnails,create a shape with rounded corners of 520×75px using the Rounded Rectangle Tool(U) with a Radius of 20px.

Then add those blending options:



We`ve just obtained a depth effect for this shape.

Download this Twitter Icon from ProductiveDreams.com and add it next to the rounded shape.

Now add some text,imitating the tweets from Twitter.

Now,download those Social Icons from WebToolKit4.me and put them in the right side of the footer.

To finish the layout,add some copyright details regarding the layout,because a website is not a website if it hasn`t copyright details.

You can view the final image preview below.Click on it for a larger preview.

We have just finished our Portfolio Layout.I hope you learn something from this Photoshop Tutorial,and if you like it,don`t hesitate to spread the word!See you next time for another photoshop tutorial.
You may follow me on twitter or subscribe to my RSS Feed,or if you wanna receive more Freebies and news from OurTuts,just become a part of our community by just entering your name and E-mail in the for below.I promise that you won`t regret!