Coluna Fireworks – Desenvolvendo um layout
Coluna Fireworks – Desenvolvendo um layout
Salve, comunidade MX Studio!
O Fireworks é, vamos dizer assim, uma espécie de software multi-uso, quase tudo relacionado a imagens pode ser feito com ele, desde uma simples edição a uma grande criação, como o layout de um web site.
“Layout”, de todas as funções do Fireworks essa sem dúvidas é a principal. Para os que não sabem, layout de um site é o projeto gráfico do mesmo, sempre ao desenvolvermos um devemos fazer esse projeto, e só depois montá-lo no Dreamweaver ou qualquer outro editor de web. Por essa razão, escolhi esse como tema dessa coluna.
Nos parágrafos abaixo aprenderemos a fazer o seguinte layout. O mesmo é sobre uma empresa fictícia chamada “mx design”, que trabalha com a criação de sites pessoais e profissionais.
Para tornarmos o site acessível, se não a todos, a pelo menos a enorme maioria dos internautas, o faremos na resolução de 778px de largura, assim ele poderá ser visto perfeitamente por pessoas que usam como resolução do monitor a partir de 800x600px (são 778px e não 800, pois há os 23px da barra de rolagem).
Portanto, crie um novo documento no Fireworks com o tamanho de 778x700px.
Crie um retângulo que cubra toda a largura do documento. Para altura defina 215px. Posicione-o no topo do documento (X=0; Y=0).
Crie agora outros dois retângulos mais escuros (#510051) que, em largura, cubra o que você criou anteriormente. Faça um com 4px de altura e outro com 2px.
Coloque o maior em cima e o menor embaixo, assim como visto na figura seguinte.
Duplique (CTRL+SHIFT+D) o retângulo do fundo, o mais claro, o maior. Com a ferramenta pen (tecla de atalho: P) edite-o para que fique da seguinte forma:
Aplique a essa forma um gradiente linear das cores #890089 opaco para #770077 transparente com a disposição como mostra a figura a seguir:
Duplique (CTRL+SHIFT+D) a forma em que estamos trabalhando e inverta a cópia surgida horizontalmente (Modify > Transform > Flip Horizontal). Posicione-a do outro lado do topo.
Mude a disposição do gradiente para “de baixo para cima”, lembrando que a bolinha indica o começo e o quadrado o fim do mesmo. No gradiente mude também a cor inicial de #890089 para #A800A8.
Faremos agora o menu. Para isso crie um retângulo de cor prata num tom claro (#F1F1F3) de 5px de altura, logo abaixo do retângulo roxo, que cubra toda a largura do documento.
Com a ferramenta Rounded Rectangle crie um retângulo arredondado de 115x65px.
Posicione-o a 5px de distância da lateral esquerda. Mais precisamente na posição x=5 y=76.
Toda forma construída através das ferramentas de formas pré definidas do Fireworks (Círculos, retângulos, retângulos arredondados, trapézios, dentre outros) vem agrupada, sendo assim, para podermos editá-la com as ferramentas de edição vetorial, como a pen e a knife, deveremos desagrupá-la. Para isso selecione-a e pressione CTRL+SHIFT+G.
Ainda com esse objeto selecionado, usando a ferramenta knife (tecla de atalho: Y) corte-o de forma que a maior parte fique em cima. Tente cortá-lo no rumo do retângulo roxo. Para cortar basta clicar com o botão esquerdo do mouse e arrastá-lo para a direção em que você deseja cortar.
Com o corte, você partiu a forma em duas, já que usaremos apenas a parte de cima, delete a de baixo. Selecione a que sobrou, a de cima, e aplique nela um gradiente linear de prata claro (#F1F1F3) para um prata um pouco mais escuro (#BBBBC4). Disponha-o como mostra a figura abaixo:
Duplique a forma. Da cópia que surgir diminua 2px da largura e 1px da altura. Após isso centralize-a com a forma do fundo, a maior. Isso deixará um efeito de contorno gradiente quando acabarmos o menu. Altere o gradiente para a disposição “de cima para baixo” e as cores para “branco opaco para branco transparente”.
Faremos agora a setinha que indica o item do menu. Para isso, crie um triângulo roxo (#930093) com a ferramenta pen como mostra a figura abaixo:
Duplique esse triângulo e inverta verticalmente (Modify > Transform > Flip Vertical) a cópia que surgirá. Posicione-a abaixo do outro triângulo de forma que se forme uma seta. Mude a cor do preenchimento para um roxo mais escuro (#710071).
Agrupe (CTRL+G) esses dois triângulos que agora forma uma seta.
Escreva o nome da seção a que esse item do menu corresponde. Como fonte, usei a Trebuchet MS no tamanho 15 com “Smooth Anti Alias” para suavizar as bordas.
Agrupe (CTRL+G) todo o menu para facilitar o trabalho.
Duplique esse grupo de objetos e mova a cópia para a direita deixando-a 5px de distância do outro grupo.
Com a ferramenta Subselection (tecla de atalho: A) selecione o texto e altere-o para o nome da seção a que esse item do menu corresponde.
Repita esse mesmo processo para criar o restante do Menu.
Importe (Arquivo -> Import…) o logotipo de sua empresa e posicione-o no topo do layout, acima do menu.
Crie uma setinha, assim como a usada no menu, só que com a cor branca. Ao lado dela escreva o slogan de sua empresa com a fonte Trebuchet MS, tamanho 14, Itálica. Posicione-os junto ao logotipo.
Para dar um toque bem legal no layout é sempre bom usar fotos, essas achamos aos montes na internet, algumas com direitos controlados, outras gratuitas.
Pesquise no Google ou em qualquer outro sistema de busca por “Banco de imagens” que você achará muitos sites legais sobre o assunto. Usei para o topo uma foto de uma mulher dando a entender “Bem vindo”. Tente fazer o mesmo, procure fotos que se encaixam bem no seu layout e depois veja como elas ficam nele.
O topo, nesse caso a parte mais complexa, está pronto, faremos agora a parte de baixo – geralmente chamada de “button”.
O button foi feito com os mesmos princípios do topo, diferenciando-se apenas no retângulo maior que é um gradiente linear de roxo claro (#A800A8) para roxo escuro (#750075) com um contorno da cor #750075.
Assim como no topo, é preciso criar também o retângulo de cor prata claro acima do retângulo principal (roxo maior) e também os outros dois roxos escuros na base.
No Button geralmente coloca-se os direitos da página e, se couber, uma lista simplificada de todas as áreas do site também. Para escrever isso use a fonte Verdana no tamanho 10 com a cor #DAB3DA.
A parte inferior do layout já está pronta. Falta agora só preencher a seção que exibe o conteúdo. Essa será aquela que se altera de acordo com o que for requisitado pelo menu. No layout a representaremos com a página inicial, a “Index”.
Organize o layout em quatro partes, que é o ideal para o que nossa empresa fictícia precisa expor em sua página de boas vindas. Para separar use retângulos de cor de preenchimento cinza claro (#FAFAFA), com 2px de distância dos cantos. Faça como mostra a figura a seguir:
Para dividir melhor, crie também com a ferramenta line (tecla de atalho: N) uma linha vertical e outra horizontal de cor #EDEDF1 nas extremidades dos retângulos. Veja na primeira figura da matéria, a do layout completo, como deve ficar.
No topo do conteúdo, na parte da direita colocaremos um chamativo para a empresa que terá o título “Por que escolher a mx design”. Na parte esquerda do mesmo colocaremos uma foto para dar uma realçada na parte do conteúdo.
Para o título do conteúdo ao lado direito no topo utilize a fonte Trebuchet MS em smooth Anti Alias no tamanho 14 e cor roxa (#710071). Para separá-lo do conteúdo faça dois retângulos de cor #EDEDF1, um com 1px de altura (o de cima) e outro com 3px (o de baixo), para ambos dê uma largura de 300px. Separe-os por 1px em distância vertical.
Selecione o retângulo maior, o de baixo, e aplique a ele a textura “Line-Diag 1” com intensidade 100. Isso fará com que ele fique cortado por várias linhas diagonais, dando um efeito bem bacana.
Adicione um texto a essa parte do layout, e formate-o para Verdana, tamanho 11 e cor #51545E.
Dica: Caso você ainda não saiba o que irá escrever utilize uma linguagem que não significa nada a não ser que ali virá um texto ainda não desenvolvido. Essa linguagem tem um nome, chama-se Lorem Ipsum, quase todos os textos nesse layout foram escritos nela, por isso que se você leu algum não entendeu nada.
Você pode achar parágrafos prontos no idioma inventado – apesar de baseado no latim – no site da Lorem Impsum – www.lipsum.com.
Para a foto, na parte esquerda do topo, quis colocar uma idéia de “olhe a interação entre nossa equipe de trabalho e a qualidade da mesma”. Tente colocar a que você achar melhor ali. Animações em Flash geralmente também ficam muito legais se bem feitas.
Na parte inferior esquerda do site colocaremos um sistema de Newsletter – notícias enviadas periodicamente através de e-mail -. Na inferior direita colocaremos os trabalhos ou acontecimentos mais recentes da empresa.
Dê uma olhada na primeira imagem da matéria, o layout. Veja que tudo o que foi feito na parte de Newsletter já foi explicado antes, menos a caixa de texto e as caixas de marcar, mas esses são apenas uma representação já que formulários só podem ser feitos pelo Dreamweaver. Portanto, usando as mesmas técnicas usadas anteriormente faça a seção “Newsletter”.
Na parte inferior direita colocaremos três notícias, portanto a dividiremos em três partes verticais. Para isso crie um retângulo com um cinza bem claro (#FDFDFD) que cubra toda a altura dessa parte, mas apenas um terço da largura desta. Veja na figura abaixo:
Divida essas partes também com linhas verticais da cor #EDEDF1 usando a ferramenta line.
Adicione o conteúdo das notícias que serão nada mais que fotos e breves textos de descrição.
Os textos usados para essas notícias foram escritas com a fonte Verdana de tamanho 10. Sendo as descrições na cor #51545E e os títulos na #710071.
O Layout está pronto! O próximo passo é montá-lo no Dreamweaver, mas esse já não é mais assunto da área de Fireworks, por isso deixo vocês por aqui. Espero que tenham gostado!
Escrito por tiagoperes
on abril 7, 2008. Arquivado em Fireworks.
Você pode seguir as respostas a esse artigo pelo RSS 2.0.
Você pode deixar respostas para esse artigo
Excelente coluna Tiago! Voltou de vez agora??
=)
Muito bom ver uma coluna do Tiago no ar, sempre com qualidade de artigos e trabalhos muito bem feitos.
Prezado Tiago; é um prazer sua coluna, mas, tentei montar minha news seguindo sua orientação, na própria página, e não consegui. Tenho que ir para outra página:? explique-me
Sebastião Rocha
Santa Cruz/RN
Olá Sebastião. Não entendi muito bem onde extamente está sua dúvida, mas tentarei reponder baseado no que entendi.
As notícias devem ser colocadas nos quadrados feitos no passo anterior a eu mostrar a imagem de como deveria ficar a seção “News”. As fotos foram escolhidas aleatóriamente, você pode fazer o mesmo, elas foram apenas redimensionadas e colocadas alí. abaixo das fotos vieram um breve descrição, que fiz normalmente com a ferramenta texto, o mesmo fiz na notícia em sí, usei aferramenta texto e escrevi um texto abaixo da descrição.
Tente acompanhar o tutorial com a imagem “objetivo” aberta, assim você pode saber exatamente onde você está e o que está fazendo.
Espero ter ajudado, qualquer coisa é só dar um toque
nossa!!! fuderoso esse tutor veio.. parabéns.. =x
Estou começando agora, treinei bem o html montando site na força de codigos, agora gostaria de saber usar programas para montar minhas paginas e entrar de cabeça em propaganda de e-mail.
Seus conteudos são ótimos obrigado
Ola Tiago, gostaria de saber qual seria a forma certa pra eu salva esse trabalho… sou novo no ramo e nao sei o certo.
(tem como eu desenvolver um site todo em fireworks?)
A melhor maneira de se fazer esse trabalho é conhecendo bem html e css, assim você pode montá-lo com o mínimo de imagens possível. Você deve primeiro analisar o layout, saber o que pode ser feito somente com css e html, o que precisará de imagens e como as mesmas serão organizadas.
Fazer um site só com fireworks é possível, mas é pesado e não é profissional.
Não consegui modelar o retangulo…bem no comeco pra ele virar akela linha… elefica criando um caminho pra voltar pro ponto inicial… =P
Valeu Tiago pelo excelente tutorial. Muito bom e muito rico também.
Obrigado.
Ola pessoal,eu estava vendo essa web me ocorreu uma duvida,eu so web design e web master , nunca fiz curso so que to com uma duvida,tipo eu para por minhas noticias “news” no meio da pagina eu crio uma fatia coloco a mema cor do backgound a fatia e tranformo ela em html sacas dai fica aquela tabela eu queria sabe se alguem mais ai sabe como dividir as noticias de uma forma que eu possa editala no Macromedia Dreamweaver 8
se alguem ai ler esta menssagen me add no msn
J-Cir@hotmail.com
Mais o tutorial ta otimo!!
não consegui fazer o layout, fiz tudo oque mandava mas não consegui.mas valeu thau!!!!
Muito bacana o layout, principalmente o topo. Aprendi bastante!
Porém me restou uma dúvida: como se faz aquela “faisca” abaixo do mx design do topo?
É isso.
Parabéns e até mais…
Po, Gostei Muito,
MAS GOSTARIA DE SABER O QUE TENHO QUE FAZER AGORA PRA EDITAR NO DREAMWEAVER!!!
ALGUEM PODE ME AJUDAR?????
bruno_amabile@yahoo.com.br
é tri complicado mas eu gostei!!!!!!!!!
Ae, gostei do tutorial, bem rico em informação, até fiz uma página similar com tonalidades diferentes e outras imagens, bem facil de fazer.
Abraços
o Link e http://www.excon.rg3.net
Muito bom trabalho, fiz aqui e fico muito bom.
Só queria saber agora como eu faço pra abri ele no dreamweaver e editalo para se tornar um html e fazer meu site??
Alguem souber um tutorial ensinando,
desde já Obrigado.
André, na hora de exportá-lo marcar a opção de html and images e depois abrir o html no Dw. flw!!! Abraços galera e o tutorial tá show!!!
Excelente trabalho, nunca pensei que a côr rocha bem trabalhada fica bonita.
Sucesso para todos webdesigner
O trabalho é realmente mto bom. Eu estava fazendo, só que usando cores diferentes..ao invés de tons de roxo, usei tons de azul que caem melhor para o que eu estou fazendo. Porém, qdo eu clico na guia Preview ou entao aperto o botao F12 para ver o resultado no explorer, o site fica todo preto e branco…voce saberia responder o pq disso??
abraço e parabens pelo trabalho
Aos que querem editar no DW:
eu vou falar bem por cima, e tentar explicar ao maximo…nao é dificil, porem sem as imgs fica mais complicado, mas vou tentar.
No Fw, voce deve quebrar todo o layout, exemplo:
clique no retangulo que forma o topo da pagina, copie e cole-o em um novo arquivo do Fw. E assim, sucessivamente para todas as outras partes do layout. Quebre os 4 retangulos do corpo do site e tbm o ‘button’.
no Dw, crie uma tabela de mesma dimensao do layout (778 x 700 px) com as mesmas divisoes de linhas e colunas. Após isso, é só ir adicionando as imgs “quebradas” do layout do Fw em seus respectivos lugares na tablea do Dw.
Depois, tem a ativaçao dos links e etc, mais ai, só por texto é complicado explicar. Espero ter ajudado em algo.
abraços
Olá pessoal do mx studio! parabéns a todos pelo trabalho de vcs simplesmente show de bola.. mas gostaria de fazer uma ressalva.. porque vcs colocaram a data desse ano, já que tem mais de um ano que vejo esse layout aqui nessa coluna.. seria interessanter ter novos materiais.. abraço a todos
Olá Tiago, ótimo trabalho! Não sabia que era tão simples desenvolver um layout em fireworks.
Precisamos de mais pessoas como você na web.
OLá tiago, gostei pra caramba meu caro, to iniciando meus conhecimentos de fireworks tem pouco tempo, eu fiz esse layout como exemplo, se vc puder dizer uq achou da minha versão blz!
http://img100.imageshack.us/img100/3069/topod.png – vlw t+
Esses turoriais não são bem tutoriais!!!!
Eles ensinan para quem ja tem uma noção bem avançada sobre o assunto, eu acho que eles deveriam postar tutoriais explicando passo a passo(o que é isso ou aquilo).
Usam termos que muita gente não entende(inclusive eu).
Mas vale dizer que isso é uma critica constrrutiva.
Mas mesmo assim valeu!!!!
abraços a todos!!!
Saudades!!!
Muito bom ver uma coluna de profissional que sou fã de carteirinha, onde aprendi os meus primeiros passos no firewoks onde eu fazia tutorial por tutorial sempre com qualidade de artigos e trabalhos muito bem feitos.
Bem vindo ao Mxstudio do qual estou sempre de olho para as novidades.
PARABÉNS! ótimo trabalho
Consegui fazer o layout e ficou muito 10…
valeu e parabens pelo trabalho
Nossa acredita que meu professor formado em licenciatura em informática passou este layout pra gente fazer e eu pensava que ele que tinha desenvolvido
como transportar o layt para o drewever?
Cara nem terminei o tutorial mas já quero postar que é excelente muito melhor que vários videos que vi na web, parabéns você fez um trabalho excelente. Até mais.
Galera para vcs colocarem vo dreamweaver, precisa primeiramente fatiar essas imagens no fireworks, e salvar cada uma separadamente em JPEG que ? um arquivo mais leve para Web, ou se as imagens tiverem cantos aredondados ou partes transparentes salve em PNG….
Depois ? s? trabalha-las no dreamweaver montando o Site …
vlw aew BRUNO agora eu entendi como se edita no DW! abraço!
valew Leandro
Sou totalmente novato, aprendendo do zero, e já travei no começo la, não axei essa ferramenta para criar um gradiente de cores, após criar o efeito com a ferramenta pen.
Abraço