Concorra a três cursos on-line totalmente grátis:
1. Web Marketing
2. Técnicas de Vendas
3. Marketing Pessoal
Aprenda a criar um layout completo usando apenas o Fireworks, o exemplo que iremos mostrar é montar um layout de site de hospedagem.
Olá pessoal, nesta aula estarei ensinando vocês a fazer um site de hosting bem bacana, então, vamos la!
Com o seu Fireworks aberto, crie um novo projeto, de 777x600.
Crie um retângulo de 777x250 com a cor #333333, com o efeito: Grid 4 10% como na figura abaixo:
(clique na imagem para amplia-la)
Crie um retângulo de 777x30, com a cor #CCCCCC, duplique-a e aplique o efeito que aprendemos na aula passada,
deixando uma impresão de metal. como na imagem abaixo:
(clique na imagem para amplia-la)
Crie um retângulo de 6x777, com a cor: #FFFFFF, com o efeito: Line-Diag 2 100% transparent com Opacity de 16%, como na figura abaixo:
(clique na imagem para amplia-la)
Para fazer o efeito metálico que corta nosso topo, crie um retângulo, de cor: #CCCCCC, dupliqueo e aplique o mesmo efeito da aula passada, ou seja, aplique a coloração linear sobre ele, deixando as duas cores como #FFFFFF, retirando o Stroke Options da seta esquerda, e faça da maneira que está na figura abaixo:
(clique na imagem para amplia-la)
Nosso logo, crie uma esfera com a ferramenta Elipse Tool (U), crie a primeira bola de 60x60, com a cor #FF9900, duplique-a e faça o efeito da imagem acima, diminuindo a bola para: 54x54. As linhas pontilhadas, sao outras bolas, so que, Com cor Principal None, e com as bordas em #FFFFFF, Dashed -> Dotted, tamanho 2, crie várias bolas, cada uma 10x10 maior que a anterior. como na figura abaixo:
(clique na imagem para amplia-la)
O menu de links, e fácil, crie um retângulo, de 13x170, com o efeito: Line-Diag 2 100% transparent com Opacity de 10%, como na figura abaixo:
(clique na imagem para amplia-la)
Os links, são feitos sobre novas imagens, então, crie um retângulo de 150x25, com a cor #999999, com efeito: Commands -> Criative -> Fade Image, no menu superior do Fireworks, a imagem deverá ficar assim:
(clique na imagem para amplia-la)
Abaixo da imagem que corta o nosso topo, crie um novo retângulo, agora de: 777x150, com a cor: #CCCCCC, e sobre ele, crie outro retângulo, de 777x140 com a cor #E5E5E5, como na figura abaixo:
(clique na imagem para amplia-la)
Para o Menu De planos, faça um retângulo de 30x130, de cor #333333, e com a ferramenta Peen Tool, arredonde a borda superior do retângulo, e ao seu lado, crie outro retângulo, de 130x130, de cor: #CCCCCC, como na imagem abaixo:
(clique na imagem para amplia-la)
O menu de notícias, basta fazer um retângulo de, 245x274 a x=532/y=261. com a cor #333333, sobre ele, crie outro retângulo agora de, 240x270, a x=534/y=263, com a cor: #CCCCCC. e outro retângulo de 230x242 a x=540/y=286 com a cor: #E5E5E5, como na figura abaixo:
(clique na imagem para amplia-la)
Abaixo do menu de planos, crie um retângulo de 530x130 com a cor #cccccc, a x=0/y=400. Faça sobre ele outros topicos do teu site, eu fiz um menu de comentários dos clientes, um com as imagens das técnologias, e um espaço para Hel-Desk, este menu fica a seu critério, apenas faça a imagem descrita no começo. como na imagem abaixo:
(clique na imagem para amplia-la)
Para fazer o roda-pé do nosso site, crie um retângulo de: 777x64, a x=0/y=536, com a cor: #333333, sobre ele, usei o noss logo , apenas sem a bola com o HW, esta parte também fica a seu critério, o meu ficou assim:
(clique na imagem para amplia-la)
Em fim, seu layout deve ter ficado assim:
(clique na imagem para amplia-la)
Espero ter ajudado vocês, dado dicas, em fim, até a próxima coluna. Um forte abraço!
Autor: Lucas F. Rizzotto
Compartilhe:
Marciano em 08/09/2008
Até alguns meses atras eu usava o Photoshop para criar layouts... até que um dia vi uma video aula, e fiquei curioso em testar o fireworks, e percebi que para criar site o fireworks eh bem melhor que o PS.
Principalmente agora na era da web 2.0
Raphael em 05/07/2008
eu quero aprender
Anderson em 18/06/2008
Muito bom!!
Luiz em 17/06/2008
Desejo receber ,todos os informativos da Web.
Anderson em 10/11/2007
Baita massa, mas brother.. so acostumado a mexer com PS.. não faço a mínima ideia de como fitir as imagens no firewokes.. pode me ajudar?
Moreira em 25/09/2007
Amigo, Adorei esse maravilhoso tutorial, seguinte fiz tudo certinho, agora como faço pra exporta pra html, eu tentei exportei mas ele foi em imagem, queria saber como faço pra exporta ele em htmlele todo em tabelas, Abraços
meu msn e vendaswebmu@hotmail.com
abraçosss
Renan em 07/08/2007
Olá, boa noite.
Quer dizer que quem não pegou a aula passada, fica sem saber como faz o efeito metálico? Parabéns.
Pq pelo menos neste tuto não deu p/ aprender como faz este efeito metálico pelo menos quem não pegou a outra aula.
Nil em 06/12/2006
ae cara me da seu msn ou algum contato por favor?
ivan em 14/03/2006
olha, eu to querendo por comentarios no meu site de disigner sobre o q os kainhas axaram da image sabe? so q naum sei como, eu fasso 100% do site no FW c podia me ajudar? ce precisar de flash ou algo sei la vc podee me mandar um videeo tutorial insinando?
Zattoni em 08/01/2006
É so abrir o seu template no Dream e la poderá construir os links e tambem hospedar seu site na net.
Washingthon em 25/08/2005
Olá Gaera, olha eu ainda estou novo nos templates, mais ai ja sei criar, só q naum sei como colocar ele no site..tem como alguem me ajudara ai ´só me mandar um e-mail ou quem tem msn me add...falow
2004-2008 Weblivre.net Todos os direitos reservados.
Quem somos | Política de Acesso | Anuncie | Na Mídia | Seja um Colunista | Sugestão de Pauta | Fale Conosco
Idealização: Webla - Comunicação Digital