Criando layout da rockband no fireworks

[radiador22~]

Super tutorial, mostrando a força do Fireworks, uma poderosa ferramenta para web design, tutorial mostrando que com passos simples, se obtem ótimos trabalhos visuais, incrivel layout desenvolvido no fireworks, esperem que como eu, apreciem esse tutorial e que possa ser util á vocês:



Vamos utilizar alguns comandos bem interessantes nesse tutorial, e é bacana sempre testar outros valores, outras cores, outras formas, sempre tentando explorar todo o potemncial de cada comando. Espero que se divirtam com o tutorial e caso ainda não conheçam o site original, visitem: beatlesrockband.com.


1 - Novo Documento

Abra um documento de 1440x1260 pixels, use a cor #293965 como background.

[Somente Usuários Registrados Podem Visualizar os Links Desta PáginaClique aqui para se Registrar]

2- Black Elispes

Vamos começar criando o background colorido. Para isso desenhe uma elipse preta como da figura 1. Então aplique o comando Command > Creative > Twist and Fade, use os valores como na figura, mas tente bricar com eles para ver as inúmeras possibilidades que esse comando permite.

[Somente Usuários Registrados Podem Visualizar os Links Desta PáginaClique aqui para se Registrar]

3- Trocando Cores das Elipses

Após criado o Twist, precisamos alterar as cores das elipses para termos o efeito que queremos. Aplique tons de cinza alterando de #000000 até #CCCCCC, como na figura. Temos ainda alguns detalhes, em todas as elipses, aplique Inner Shadow de 0 - 30% - 10, e nas duas últimas elpises aplique um pouco de opacidade.

[Somente Usuários Registrados Podem Visualizar os Links Desta PáginaClique aqui para se Registrar]

4- Começando as Cores

Posicione esse elemento que temos até agora no topo da área de trabalho. Depois crie uma nova elipse, e aplique um gradiente com as cores como na imagem. Aqui você pode brincar com as mais variadas cores se desejar. Feito isto escale e mova esta nova elipse para ficar exatamente em cima das nossas demais elipses.

[Somente Usuários Registrados Podem Visualizar os Links Desta PáginaClique aqui para se Registrar]

5- Overlay

Agora simplesmente aplique um Overlay nesta elipse colorida e uma opacidade de 60%, então duplique esta elipse para deixarmos com ainda mais constraste.

[Somente Usuários Registrados Podem Visualizar os Links Desta PáginaClique aqui para se Registrar]

6- Área de conteúdo

Para esta área de conteúdo, iremos utilizar 3 retângulos. O primeiro terá cor #999999, opacidade de 66% e Drop Shadow. O segundo deve ser igual ao primeiro, simplesmente duplique e diminua um pouco a altura e largura. O terceiro terá cor #F5F5F5 e uma textura Vein, repare na figura.

[Somente Usuários Registrados Podem Visualizar os Links Desta PáginaClique aqui para se Registrar]

7- Criando as formas coloridas

Os elementos coloridos do header será criados com a ferramenta Pen. Faça um elemento como na figura 1. Aplique textura, cor, Drop Shadow como na Figura 2. E então replique este elemento, ajuste os tamanhos e cores como na Figura 3.

[Somente Usuários Registrados Podem Visualizar os Links Desta PáginaClique aqui para se Registrar]

8- Posicionando as formas coloridas

Agrupe estas formas recém criadas. Crie outras como fizemos na figura 1 e então posicione atrás do fundo do conteúdo.

[Somente Usuários Registrados Podem Visualizar os Links Desta PáginaClique aqui para se Registrar]

9- Estrelas

Vamos dar um pouco mais de vida para esse background agora. Para isso simplemente crie diversas estrelas e círculos, com cores e opacidades diferentes. Uma dica é aplicar Glow em alguns deles para da um efeito legal.

[Somente Usuários Registrados Podem Visualizar os Links Desta PáginaClique aqui para se Registrar]

10- Nuvens

Para as nuvens é simples, faremos elas com círculos e elipses. Crie as formas que desejar com esses elementos, então vá em Modify > Combine Paths > Union. Depois aplique uma borda branca de 10px, começe a brincar com gradientes, texturas e Drop Shadows.

[Somente Usuários Registrados Podem Visualizar os Links Desta PáginaClique aqui para se Registrar]

11- Posiconano as Nuvens

Crie uns 3 modelos de nuvens diferentes, posicione elas no header por trás do fundo do conteúdo e também no footer. Crie um elemento como o da figura para o footer também, para utilzar algum texto.

[Somente Usuários Registrados Podem Visualizar os Links Desta PáginaClique aqui para se Registrar]

12- Elementos de Conteúdo

Agora para finalizar vamos aplicar os elementos de dentro do conteúdo. Use como fizemos, uma imagem principal, alguns conteúdos de apoio, menu principal e secundário, e claro, o logo, que aqui é no nosso Abduzeetles Rockband!

[Somente Usuários Registrados Podem Visualizar os Links Desta PáginaClique aqui para se Registrar]

Resultado Final

[Somente Usuários Registrados Podem Visualizar os Links Desta PáginaClique aqui para se Registrar]

Fonte: Abduzeedo

[helme]

Muito show .
infelizmente sou péssimo no photoshop

[radiador22~]

Não é photoshop, é fireworks xD, mas se olhar bem, da pra fazer passo a passo, quando tiver tempo vou fazer e postar pra vocês verem. O que não pode é deixar de tentar por achar que é dificil, na verdade é facil, á experiencia que conta, e não se consegue experiencia sem tentar xD.

Carakia show de bolaa vey!!!

dahora mesmo=D

Parabéns radiador por postar aqui, isso me ajudará e muito.