Forum relacionado com web design e design gráfico. Duvidas, sugestões, regista-te e participa.
 
InícioPortalFAQBuscarMembrosRegistrar-seConectar-se

Compartilhe  | 
 

 [PhotoShop] Design a clear website layout

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

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

[PhotoShop] Design a clear website layout Vide
MensagemAssunto: [PhotoShop] Design a clear website layout   [PhotoShop] Design a clear website layout EmptySeg 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.

First
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.
[PhotoShop] Design a clear website layout 1

Step 2

You
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
12_col_grid.
[PhotoShop] Design a clear website layout 2

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.
[PhotoShop] Design a clear website layout 3

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.
[PhotoShop] Design a clear website layout 5

Add the next blending options:
Drop Shadow:
[PhotoShop] Design a clear website layout 6

Gradient overlay:
[PhotoShop] Design a clear website layout 7

The logo looks ok for me.
[PhotoShop] Design a clear website layout 8

Create
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.
[PhotoShop] Design a clear website layout 9

Now the logo looks cooler than before.
[PhotoShop] Design a clear website layout 10

Step 5:The search field

Select
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.
[PhotoShop] Design a clear website layout 11

Next,add some blending options.
Drop Shadow:
[PhotoShop] Design a clear website layout 12Gradient overlay:
[PhotoShop] Design a clear website layout 13

Stroke:
[PhotoShop] Design a clear website layout 14

Now
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.
[PhotoShop] Design a clear website layout 15

The layer until now looks like this:
[PhotoShop] Design a clear website layout 16

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.
[PhotoShop] Design a clear website layout 17

Add some blending options as gradient overlay and stroke.Gradient overlay:
[PhotoShop] Design a clear website layout 18

Stroke:
[PhotoShop] Design a clear website layout 14

Step 7:Defining the buttons

Add vertical lines of 1px weight of gray and black colors to define the buttons areas.
[PhotoShop] Design a clear website layout 19

Step 8:Defining the a:hover button.

With
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
5px.
[PhotoShop] Design a clear website layout 20

Add the next gradient effect:
[PhotoShop] Design a clear website layout 21

…and an inside stroke:
[PhotoShop] Design a clear website layout 22

Next,add some light following the same process we`ve made at the logo,but resizing the brush tool.
[PhotoShop] Design a clear website layout 23

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.
[PhotoShop] Design a clear website layout 24Repeat the process for all buttons.
[PhotoShop] Design a clear website layout 25

Step 10:Adding some icons.

Choose some icons from the icons pack and place them above the navigation text.I used the 32px icons.
[PhotoShop] Design a clear website layout 26We have now a nice header,containing the logo,a search field and a navigation bar.
[PhotoShop] Design a clear website layout 27

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.
[PhotoShop] Design a clear website layout 28

Then add the next effects:Drop shadow:
[PhotoShop] Design a clear website layout 29

Gradient overlay:
[PhotoShop] Design a clear website layout 30

Stroke:
[PhotoShop] Design a clear website layout 14

You should have something like this:
[PhotoShop] Design a clear website layout 31

Now
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.
[PhotoShop] Design a clear website layout 32

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.
[PhotoShop] Design a clear website layout 33

Now copy that layer and rotate it slightly with the Free Transform Tool. Do this one more time.
[PhotoShop] Design a clear website layout 34

Step 13

Import
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.
[PhotoShop] Design a clear website layout 35

Select
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.

[PhotoShop] Design a clear website layout 36

Add a nice heading near the slider.Mine is some big text with a Drop shadow and a
left to right Gradient Overlay effect.
[PhotoShop] Design a clear website layout 37

The middle tab is finished.
[PhotoShop] Design a clear website layout 38

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.
[PhotoShop] Design a clear website layout 39

Above each group,add some lights using a soft brush tool with a low opacity and the white color.
[PhotoShop] Design a clear website layout 41

Step 15:The footer

Duplicate the navigation bar shape and place it at the bottom of the image,under the content area.
[PhotoShop] Design a clear website layout 42

Using a gray color,type some links and Copyright text into the footer.
[PhotoShop] Design a clear website layout 43

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
https://ds-design.forumeiros.com
 

[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 | Informática e Internet | Informático | © phpBB | Fórum grátis de ajuda | Fale conosco | Assinalar uma queixa | Fórum grátis