Desta vez, eu vou trazer um dos melhores tutoriais de como montar o seu site, não é tão simples, pois você não precisa tirar uma idéia do que eu estou passando, é um designer completo, com efeitos e tudo mais, que ficará pronto para você usar como se fosse um layout pronto baixado da internet. É ótimo ter acesso a fontes de web-design, se voce esta re-desenhando PartyPoker Português ou você está construindo uma nova loja online para equipamentos esportivos
Precisaremos de:
( pacote de fontes usadas / imagem 1 / imagem 2 )
1. Click no Arquivo > novo para abrir um novo documento, ou simplesmente pressione CTRL + N
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)
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...
4. Com esta setinha branca selecionada, você vai clicar nos pontinhos brancos que se formou, onde ficará como na imagem abaixo.
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)
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
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.
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
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
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
de11. pois você escolhe a textura Retícula Cruzada 3 com opacidade de 21% da textura finalizando...
12. agora você vai no painel de baixo do fireworks e diminui a opacidade dele para 75%
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. 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. assim ele vai ficar preto e branco
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
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
Após o click no OK seu E.T está verde então vamos ajustá-lo para que combine melhor
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.
19. Agora vai ficar como na imagem abaixo...
20. Você vai manter clicado na ferramenta
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
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...
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....
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
24. faremos então o rodapé, que também é bem simples, faça como o topo... desde o início.... ajustando ele ficará assim...
Bom pessoal por hoje é só...
Nenhum comentário:
Postar um comentário