Forum relacionado com web design e design gráfico. Duvidas, sugestões, regista-te e participa.

Compartilhe  | 

 [PhotoShop] Design a clear website layout

Ver o tópico anterior Ver o tópico seguinte Ir em baixo 
Autor Mensagem

Sexo : Masculino
Idade : 27
Mensagens : 50
Localização : Leiria
Data de inscrição : 09/09/2009

MensagemAssunto: [PhotoShop] Design a clear website layout   Seg Dez 07, 2009 5:01 am

Final result:
[Você precisa estar registrado e conectado para ver este link.]

You may click the image for a bigger preview of the final layout.

Materials needed:

[Você precisa estar registrado e conectado para ver este link.]
[Você precisa estar registrado e conectado para ver este link.]
[Você precisa estar registrado e conectado para ver este link.]

Step 1:Download the 960 grid system template.

step is downloading the 960 grid system template,which is in big
lines,a system which allow us to divide the layout in equal columns.You
can find it on the [Você precisa estar registrado e conectado para ver este link.] official
website.Unpack the zip file and look for PSD templates. You will see
that there are two different types of templates: one is 12_col and the
other one is 16_col.We`ll use the one named 12_col because the template
we`ll have 3 columns,as you can see in the final image.So,open the 960_grid_12_col.psd into Photoshop.

Step 2

can see that the image has some pink vertical stripes,to evidence those
12 columns,but we want to get rid of them.For this,hide the group named

Now we are ready to move on.Step 3:Adding the background.

Set the canvas size(Layer->Canvas size) to 1200 px wide and 1020 px high.Load the wood image into Photoshop and paste it over the project.

Step 4:The logo

Add an horizontal guide at the 170th pixel.This will be the height of the logo area.Now with the Scriptina font downloaded from the top list,grab the Horizontal type tool(T) and write a title for our layout.

Add the next blending options:
Drop Shadow:

Gradient overlay:

The logo looks ok for me.

a new layer and place it under the logo layer.Using a soft round brush
of 500-600px with a low opacity,draw several times above the logo some
white points to create a nice light effect.

Now the logo looks cooler than before.

Step 5:The search field

the Rounded rectangle tool(U),set the radius to 5px and draw a shape in
the right side of the image.After,center the shape at the same level
with the logo.

Next,add some blending options.
Drop Shadow:
Gradient overlay:


add some text like “Search the site” or whatever and from the Dellipack
icon set,add the pen icon and resize it to fit into the shape.

The layer until now looks like this:

Step 6:Navigation bar

With the same Rounded rectangle tool(U) with the radius of 5px,draw a shape of 960px width and 55px height.

Add some blending options as gradient overlay and stroke.Gradient overlay:


Step 7:Defining the buttons

Add vertical lines of 1px weight of gray and black colors to define the buttons areas.

Step 8:Defining the a:hover button.

the Rounded rectangle tool(U),radius of 5px,draw a shape of 125px width
and 55px height and delete from the right side,the 2 rounded corners of

Add the next gradient effect:

…and an inside stroke:

Next,add some light following the same process we`ve made at the logo,but resizing the brush tool.

Step 9:Adding text to buttons

Now,add some text inside the buttons just created.I used a text with Georgia font and a nice blue color(#7ddddd) and grey.
Repeat the process for all buttons.

Step 10:Adding some icons.

Choose some icons from the icons pack and place them above the navigation text.I used the 32px icons.
We have now a nice header,containing the logo,a search field and a navigation bar.

Step 11:The middle area

With the Rounded rectangle tool(U) and the radius set to 5px,draw a shape of 960px width and 350pxheight.

Then add the next effects:Drop shadow:

Gradient overlay:


You should have something like this:

apply the step we took when we added the light effect above the logo
and place a light at the top of the middle box too,using a soft brush
with a low opacity.

Step 12

It’s time to design the content for middle tab. We need a featured design image and a nice heading.
First we will create the featured image. I thought that it would be
nice to create a nice stacked photos effect for our featured design
image. To do this, draw a white rectangle with a 1px light gray border,
and a very subtle drop shadow effect.The shape has 410px width and
260px height.

Now copy that layer and rotate it slightly with the Free Transform Tool. Do this one more time.

Step 13

an image of 400×250px and place it into the white slider.Give it a
black color stroke to contrast a little bit with the white frame.

the Custom shape tool(U) and from the list select a type of button and
place two nice ones in the right and left of the image.Add them the next blending options:Inner Shadow - color: #000000, Blend mode: Multiply, Opacity: 75, Angle: 90*, Distance: 0px, Size: 1px.
Outer glow- color:#646464,Blend mode: Multiply, Opacity: 75,Size: 1px.
Gradient overlay-Blend mode: Normal, Opacity: 100, Angle: 90*, Style:Linear, Color:#666666-#FFFFFF.

Add a nice heading near the slider.Mine is some big text with a Drop shadow and a
left to right Gradient Overlay effect.

The middle tab is finished.

Step 14

By adding some more icons,headings,some text and links,our layout is almost ready.Add 3 groups of content and give them each 10px padding to the left and 25px to the top,to center them into the layer.

Above each group,add some lights using a soft brush tool with a low opacity and the white color.

Step 15:The footer

Duplicate the navigation bar shape and place it at the bottom of the image,under the content area.

Using a gray color,type some links and Copyright text into the footer.

And now the layer is ready.Final Image:

So there we go,the final design:
[Você precisa estar registrado e conectado para ver este link.]

Click the image for a bigger preview.I
hope you enjoyed the tutorial and waiting your comments for any
suggestions or questions regarding the layer.The difference between a
good designer and a not so good one are details.So,keep this in mind
when you create something.See you next time for another tut.
Voltar ao Topo Ir em baixo

[PhotoShop] Design a clear website layout

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo 
Página 1 de 1

Permissão deste fórum: Você não pode responder aos tópicos neste fórum
Ds-Design :: Design Gráfico :: Astúcias e tutoriais para criação gráfica -
Criar um fórum | © phpBB | Fórum grátis de ajuda | Fale conosco | Assinalar uma queixa | Criar um fórum