Criando um layout Moderno
Nome da Empresa: mx design
Ramo de Atuação no Mercado: Criação de sites pessoais e profissionais.
Resolução: 778×700px
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 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 na vertical da cor com tom original para um mais claro, 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.
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 115×65px.
Posicione-o a 5px de distância da lateral esquerda. Mais precisamente na posição x=5 y=76.
Obs: 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.
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 você pode implementar como quiser para preencher a Home Page do site.
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!
