Ir para conteúdo
Entre para seguir isso  
SpeeD

..: Aprenda a criar um Layout :..

Recommended Posts

SpeeD    1
SpeeD

1. Click no Arquivo > novo para abrir um novo documento, ou simplesmente pressione CTRL + N

 

1.gif

 

 

2. Crie um retângulo para o topo do site com o tamanho de 779 Largura X 134 Altura com a cor de preenchimento em #8FD810 então ficara como na imagem abaixo (lembrando que ela está reduzida)

 

 

2.gif

 

3. Agora crie um círculo na cor #303730 em baixo do retângulo, então você vai selecionar a ferramenta selecionar secundário (setinha branca) ou simplesmente tecle a letra "A" para selecioná-la, repare que formou-se 4 pontinho em volta do círculo...

3.gif

 

 

 

4. Com esta setinha branca selecionada, você vai clicar nos pontinhos brancos que se formou, onde ficará como na imagem abaixo.

4.gif

 

5. então você clicará nos 2 novos círculos azuis que se formou e arrasta-los, onde o círculo ganhará novas formas conforme o seu gosto, mais tente deixá-lo como na imagem abaixo (lembrando que está reduzida)

 

5.gif

 

6. Então você encaixa debaixo do topo verde... onde já dá pra ter uma idéia de como ficará o nosso topo, então ficará como na imagem abaixo

 

6.gif

 

7. agora selecione o círculo (deformado) e dê um CTRL + C para copiá-lo, e depois um CTRL + V para colá-lo, então você terá 2 dessa forma (uma atrás da outra) selecione à de cima e aperte SHIFT + Setinha para baixo do teclado para esta figura descer 10 pixels de uma só vez, o objetivo é descê-la 20 pixels, então você aperta 2 vezes, que ficará como na imagem abaixo.

 

7.gif

 

8. Agora você vai copiar e colocar a forma que você acabou de levar para baixo, fazendo que você tenha 3 iguais.. (1 em cima e 2 20 pixels abaixo) você vai selecionar 1 das formas que estão em baixo e apertar SHIFT + click do mouse em cima do retangulo verde para que 1 das 3 formas escuras e o retângulo fique selecionado juntos, agora você vai na barra de ferramentas lá em cima em Modificar > Combinar Traçados > Perfurar, agora se você perceber o retângulo verde assumiu umas curvas na parte de baixo...

Então ainda temos o retângulo e mais 2 formas, vamos prosseguir

 

// caminho para perfurar

 

8.gif

 

 

9. Agora você vai fazer a mesma coisa com as 2 formas que sobraram.. selecione 1 e aperte SHIFT + click do mouse em cima da outra forma para que as 2 formas escuras fiquem selecionados juntos, agora você vai na barra de ferramentas lá em cima em Modificar > Combinar Traçados > Perfurar e ficará como na imagem abaixo

9.gif

 

 

 

10. Bom, agora vamos dar uma textura, selecione o retângulo verde e dê um CTRL + C e depois um CTRL + V, agora temos 2 retângulos verdes, você pega o de cima vai na tabela de cores e clica no botão opções de preenchimento como na imagem abaixo

 

11.gif de

 

11. pois você escolhe a textura Retícula Cruzada 3 com opacidade de 21% da textura finalizando...

 

12.gif

 

12. agora você vai no painel de baixo do fireworks e diminui a opacidade dele para 75%

 

13.gif

 

 

13. Pronto agora já tem uma textura, agora vamos preencher o topo, você copia a imagem2 clicando aki se preferir, para que coloquemos como um logo, ajeite em qualquer lugar do topo, agora usando a fonte Alien... você escreve com letras maiúsculas o nome do site ao lado da Imagem2 ou se preferir usar outra fonte.... e com as letras minúsculas espalhe pelo topo verde....

 

a imagem abaixo é como está ficando, o texto do nome do site eu coloquei a fonte Kimbeley que está junto ao pacote de fontes, basta clicar aki para baixar, no texto eu coloquei um contorno verde e uma sombra, que você pode aplicar clicando no botão "+" que está perto da opacidade da figura acima....

 

14.gif

14. Agora salve a Imagem1 clicando aki e vamos aplicar alguns efeitos nele para por no lado direito do topo, ao baixar a imagem você abre ele no fireworks use a ferramenta varinha mágica e clique na parte branca da figura e em seguida aperte Delete assim você vai retirar a parte branca da imagem

 

 

15. Agora você arrasta a imagem pro lugar onde você quer do topo e depois você vai no menu Comandos > Creative > Converter em tons de Cinzas

 

16.gif

 

16. assim ele vai ficar preto e branco

 

17.gif

 

17. agora você selecione o E.T clica no botão "+" de efeitos perto da opacidade, e escolha a opção

Converter cores > Níveis

 

 

18.gif

 

assim abrirá uma janela, no menu "RBG"

 

 

escolha "Verde" após a sua escolha você verá 3 botões com 1 conta-gotas em cada botão escolha o botão do meio leve o ponteiro do mouse para fora desta janela e click em qualquer área verde do topo para apontar ao programa qual tonalidade de verde que você deseja e dê OK 19.gif

 

Após o click no OK seu E.T está verde então vamos ajustá-lo para que combine melhor

 

20.gif

 

18. primeiro pegue a camada do E.T e leve para trás da camada daquela Linha Escura do topo (como faço isso? vá no quadro de camadas do lado direito) lembrando que algumas camadas que estão no meu projeto não estão no seu.

 

21.gif

 

19. Agora vai ficar como na imagem abaixo...

 

22.gif

 

20. Você vai manter clicado na ferramenta 23.gif para que um círculo pontilhado apareça, então você escolha ele, caso não apareceu, não importa, quadrado também serve, então você vai selecionar aquelas partes do E.T que sobraram pra baixo da linha escura e depois dê Delete assim você apagará as pernas do E.T, deixando só a parte de cima da linha escura.

 

Perfeito, seu topo está lindo... agora temos que fazer o resto do designer

 

 

Bom o nosso topo está da seguinte forma

 

24.gif

21. Vamos fazer 1 traço de 3 pixel em cada lado do topo até em baixo na mesma cor da linha ondulada, agora faremos uma área para o banner de parceria, crie um retângulo onde ficará os banners, escreva parceiros, no meu caso eu coloquei 1 letra da fonte Alien. Em volta do retrangulo você faz 1 linha vertical, vai na tabela de cores da linha clica em opções do traço e escolhe a textura Linha Horiz 4 fará a mesma coisa com uma linha horizontal de baixo do banner.. coma textura Linha Vert 2 então ficará assim...

 

25.jpg

 

22. para o menu, vamos fazer 2 retângulos... 1 com o fundo da cor #F3F9E6 e contorno #303730 outro com a cor #DFE0DF sem contorno.... e ficará assim....

 

26.gif

 

23. agora vamos fazer as divisórias do menu.... um retângulo cinza claro para a parte do conteúdo.... e ondular ela como agente ondulou o topo.... usando o Comando > combinar traçados > perfurar então com ajustes pessoas ele ficará assim

 

27.gif

24. faremos então o rodapé, que também é bem simples, faça como o topo... desde o início.... ajustando ele ficará assim...

 

28.jpg

 

 

 

Fonte: Webtutoriais.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Faça login para comentar

Você vai ser capaz de deixar um comentário após fazer o login



Entrar Agora
Entre para seguir isso  

  • Quem Está Navegando   0 membros estão online

    Nenhum usuário registrado visualizando esta página.

×