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

Compartilhe  | 
 

 [PhotoShop] Design a Hand Drawn Wordpress style Website Header

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 Hand Drawn Wordpress style Website Header Vide
MensagemAssunto: [PhotoShop] Design a Hand Drawn Wordpress style Website Header   [PhotoShop] Design a Hand Drawn Wordpress style Website Header EmptySeg Dez 07, 2009 4:46 am

Final Image Preview:

Take a look at the image we’ll be creating.You may click the image for a bigger preview!
[Você precisa estar registrado e conectado para ver este link.]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.]
[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.]

First step:Setting up the workspace:


First step is to set up the workspace.For this,create a new file of 1260×300px:
[PhotoShop] Design a Hand Drawn Wordpress style Website Header Workspace-of-photoshop


Step 2:Creating the brush


Now I`m gonna show you how to create a V brush to create the VVVVV effect that you may see in the final image.Create a new document of 100×100px and add a vertical and an horizontal guide at 50px,like in the image.
[PhotoShop] Design a Hand Drawn Wordpress style Website Header Creating-a-brush


Now
select the Line Tool,set the weight to 10px and create a “V” symbol by
adding 2 stripes,under the horizontal guide.With the Crop Tool(C),
select only the “V” symbol,like in the picture:
[PhotoShop] Design a Hand Drawn Wordpress style Website Header V-brush-image



To create a brush from this image,go do Edit->Define Brush Preset,choose a name and hit “OK”.
[PhotoShop] Design a Hand Drawn Wordpress style Website Header Define-brush


You should have now the brush in your Brush Preset Picker.
[PhotoShop] Design a Hand Drawn Wordpress style Website Header Brush-picker


Step 3

Let`s add some options to the brush we`ve just created.Select brushes,choose our brush and add the next settings:
[PhotoShop] Design a Hand Drawn Wordpress style Website Header Master-diameter


[PhotoShop] Design a Hand Drawn Wordpress style Website Header Space-dynamics

[PhotoShop] Design a Hand Drawn Wordpress style Website Header Shape


Step 4:


Now
paint an horizontal line with the new brush ,but be sure that above the
line you`ll have at least 200px for the header content.To make a
perfect line,hold SHIFT key while you paint.
[PhotoShop] Design a Hand Drawn Wordpress style Website Header Drawing-line


Step 5:


Fill the top area with the same color used when you painted the line.Mine was red.
[PhotoShop] Design a Hand Drawn Wordpress style Website Header Red-area


Step 6:


Download
the Paper pattern,install it by adding it to the Presets->Patterns
folder.You may find the folder where you have Photoshop installed.Step 7:

Double click the header layer and add the next blending options:
[PhotoShop] Design a Hand Drawn Wordpress style Website Header Shadows-for-the-world
[PhotoShop] Design a Hand Drawn Wordpress style Website Header Gradients-packets
[PhotoShop] Design a Hand Drawn Wordpress style Website Header Pattern-over-the-earth


Ok!What we have until now:We have a piece of paper style header sitting on an apricot color background.
[PhotoShop] Design a Hand Drawn Wordpress style Website Header Until-now-wallpaper


Step 8:

Now
select the Rectangle Tool and draw a rectangle with the height of
40px.The width should be the same with the width of the entire
page(aprox 1300px).Fill it with a gray to black gradient and low the opacity of the layer to 50%.
[PhotoShop] Design a Hand Drawn Wordpress style Website Header Gradient-for-the-top-bar


[PhotoShop] Design a Hand Drawn Wordpress style Website Header Top-header


Step 9:

Now draw 2 lines at the bottom of the top shape.One gray and the other white,to create an effect of depth.
[PhotoShop] Design a Hand Drawn Wordpress style Website Header Black-or-white


Step 10:

Add two vertical guides,one at 150px and the other at 1110px(150+960),because we want to have a content space of 960px wide.
[PhotoShop] Design a Hand Drawn Wordpress style Website Header 960-grid


Step 11:Creating the logo

Download
the Roughage font and write some text to create a logo.I wrote
“OurTuts”.Give it a linear soft gradient from black to dark gray to
make it more interesting.
[PhotoShop] Design a Hand Drawn Wordpress style Website Header Logo-for-the-header


Download the Mia`s Scribbling font and write again some smaller text under the big text,to finish the logo!

[PhotoShop] Design a Hand Drawn Wordpress style Website Header Just-enjoy-it


Step 12:

Now download the two social icons packs and add the 48×48px icons to the main project.
[PhotoShop] Design a Hand Drawn Wordpress style Website Header Social-icon


Write some suggestive text,like “Spread the word” or “Show us your love” or do like me:write “Tell them about me!”
[PhotoShop] Design a Hand Drawn Wordpress style Website Header Spread-the-word


Step 13:

Let`s create the top header navigation!Download the Daniel font and create some buttons above the logo.Let`s start with “Home”:Type “Home” with white and under draw a white line.
[PhotoShop] Design a Hand Drawn Wordpress style Website Header Home-button


Select the line layer and go to Filter->Liquify,select a big brush size and bend the line like in the image:
[PhotoShop] Design a Hand Drawn Wordpress style Website Header Bending-a-line


The button looks more artistic:
[PhotoShop] Design a Hand Drawn Wordpress style Website Header Before-and-after



Step 14:


Create some more buttons using the same way.
[PhotoShop] Design a Hand Drawn Wordpress style Website Header Home-about-contact


At the middle,type “Categories:” and add a down-arrow from the custom shapes.
[PhotoShop] Design a Hand Drawn Wordpress style Website Header Sign-3
[PhotoShop] Design a Hand Drawn Wordpress style Website Header Categories


Final step:


The
final step is to add a subscribe area in the top-right zone of the
project.For this,type “Subscribe:” and add from the icons sets,the mail
and the RSS icons.
[PhotoShop] Design a Hand Drawn Wordpress style Website Header Subscribe-area


The Final Image:


If you followed all the steps,the final image should looks like the next one.You may click the image for a bigger preview!
[Você precisa estar registrado e conectado para ver este link.]


That`s all,my friends!I hope you liked it and if is so,don`t hesitate to
comment it! And if you want to stay closer,please subscribe to our RSS
feed.Feel free to stumble,tweet or digg the tutorial!If you`re reading this line,it means that you watched the tutorial and I must thank you for your effort!Have a great day!
Voltar ao Topo Ir em baixo
https://ds-design.forumeiros.com
 

[PhotoShop] Design a Hand Drawn Wordpress style Website Header

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 -
Um fórum grátis | © phpBB | Fórum grátis de ajuda | Fale conosco | Assinalar uma queixa | Fórum grátis