Como criar layout

(No fireworks) ( tutoriais tirados de diversos sites)


Precisaremos de:    (  pacote de fontes usadas  /  imagem 1  /  imagem 2  )



1. Click no  Arquivo > novo para abrir um novo documento, ou simplesmente pressioneCTRL + 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 umCTRL + 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 emModificar > 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 + Ce 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


 de

11. 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 aferramenta varinha mágica e clique na parte branca da figura e em seguida aperteDelete 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...

entendendo um gif

Um gif na verdade, é basicamente uma sequência de imagens que são mostradas em rápida sucessão, dando assim uma ilusão de movimento.

1° passo

Abra um New Document (um novo documento) com as seguintes características: 300 x 300px e fundo branco.
Obs: O tamanho varia de acordo com o gif que forem criar, aqui usaremos esse tamanho.

Crie agora um circulo em preto e o centralize no documento.
Obs: Esse circulo servirá como fundo base de nosso gif.

2° passo

observando o painel de frames (molduras)

(1) Número da moldura.
(2) Nome do quadro.
(3) Tempo de visibilidade da moldura.

duplicando frames (molduras)

Nosso gif utilizará 5 quadros. Para adiantar nosso processo, vamos duplicar frame 1 (moldura 1), que é o que está nossa base (o circulo preto).

Selecione o frame que iremos duplicar, clique na caixa de opções, que fica no canto superior direito do painel (painel frames). Veja abaixo:

(1) Moldura que iremos duplicar.
(2) Caixa de opções do painel.

Ao clicar na caixa de opções o menu será exibido. Escolha a opção Duplicate frame (Duplicar borda).

A caixa Duplicate frame será exibida.

(1) Número de molduras a serem criadas
(2) Posição das molduras que serão criadas em relação a moldura selecionada.

No campo Number deixaremos 5, ou seja, cinco molduras. No campo de número 2 em nossa figura acima, escolha a opção After current frame (Após a moldura atual). Assim o novo Frame será criado após o quadro atual. Por fim dê OK.

Veja que a nova moldura foi inserida no painel Frames, juntamente com um número sequencial.

Vamos renomear cada frame para facilitar nosso trabalho. Para isso, basta dar dois clique na frame e um campo aparecerá para que possa renomeá-la. Veja como ficou:

3° passo

inserindo texto nas frames

Nessa parte, iremos por os textos que enfeitaram nosso gif em suas devidas frames.
Obs: Nesse gif, usaremos texto, mas você pode fazer com imagens por exemplo. Vai da criatividade de cada um. Para um melhor entendimento usarei textos. Então vamos lá!

(1) Vamos inserir o texto hey no frame que renomeei como hey. Para isso basta selecionar o frame hey e por o texto.

Agora, é só ir pondo as palavras restantes em seus devidos frames, por exemplo: Agora na frame agora, sei na frame sei e assim por diante.

Visualizando nossa animação

Após terminar de por cada palavra em seu devido frame, você já poderar visualizar a sequência de animação usando o controle de animação na parte inferior da janela.

Controlando os quadros

Depois de ter testado sua animação, iremos regular o tempo de cada frame (o tempo que cada frame permanecerá visível). Por padrão, o tempo estipulado pelo fireworks é de 7 centésimos de segundo. Para alterar é só dar dois cliques na coluna frame delay (demora do quadro).

Altere o tempo a seu gosto, vá testando até encontrar uma que lhe satisfaça. Após regular o tempo de seus frames, iremos para parte final.

fim

salvando a animação

Após terminar o passo 3, vamos exportar e ajustar as configurações do arquivo. Vá em: File / image preview(na barra superior). Ao aparecer o painel do image preview, na aba Options escolha Animated GIF no campo Format.

Agora, nessa mesma janela só que na aba Animation, escolha a maneira que você quer que o gif seja executado. Veja abaixo:

(1) O gif só executa 1 vez.
(2) O gif se repete
(3) Númedo de vezes, se escolheu o repetir pro gif.

DICA: Se você escolher o número 2 (repetir) e no número 3 escolher Forever, O gif repetirá sempre.

Ao escolher suas devidas configurações, basta clicar em Export para que o arquivo seja exportado. Pronto! Espero que tenham gostado!

exemplo

outro exemplo

..: Animação quadro a quadro - 1 ^a. Parte:..

::Objetivo::

Mostrar uma técnica para criar animação construindo cada um dos quadros (frames) individualmente.

---

::Visão antecipada::

A técnica mostrada neste tutorial resulta em uma gif animada disponível nesta VISÃO ANTECIPADA

---

::Os objetos para aplicação do efeito::

Conforme você acabou de ver na visão antecipada, usei duas imagens. Uma de um braço que se movimenta na vertical e outra de uma cabeça que se deforma sobre a ação do movimento do braço.

A finalidade deste tutorial é a de mostrar a técnica de animação frame a frame, assim você não precisa ficar limitado ao movimento de "esmagar" mostrado na gif que usei.

Entendendo a técnica e com um pouco de imaginação você poderá obter efeitos completamente diferentes deste e certamente muito mais criativos e interessantes.

E, se você pretende treinar depois de entender este tutorial, sugiro tentar o seguinte.
Criar uma animação de um quadrado que vai aumentando sua dimensão e mudando de cor.

(Para iniciantes: se você aprendeu aqui e conseguiu criar uma animação simples, mande para mim por e-mail que terei prazer em publicar no final deste tutorial as primeiras cinco GIF que chegarem, com o devido crédito. Mas, mesmo que já tenham sido publicadas as primeiras cinco, mande para eu ver.)

Observe as dimensões dos dois objetos usados:

---

::Preparando as imagens::

O braço não sofrerá deformação durante a animação e então será usada a imagem exatamente como a mostrado na figura anterior em todos os frames.

A cabeça irá sendo deformada ao longo da animação.
Vamos estabelecer como será o achatamento ao longo dos frames.

Observe que se a cada frame achatarmos a cabeça em 10 pixels teremos as alturas 90, 80, 70, 60, 50, 40, 30, 20, 10, 3 pixels, resultando 10 frames. Para o último frame adotamos 7 px de achatamento.

E, na largura deveremos expandir de 95 pixels até 120 pixel (largura total dos frames).
O cálculo é assim:
120px - 95px = 25px. Então teremos que expandir 25px em 10 frames.
E, teremos as seguintes larguras: 95,98,101,104,107,110,113,116,119,120 pixels. Para o último frame adotamos 1 px de expansão.

Assim, as dimensões da cabeça para os 10 frames serão:

• frame 1 - 95 x 90
• frame 2 - 98 x 80
• frame 3 - 101 x 70
• frame 4 - 104 x 60
• frame 5 - 107 x 50
• frame 6 - 110 x 40
• frame 7 - 113 x 30
• frame 8 - 116 x 20
• frame 9 - 119 x 10
• frame 10 - 120 x 3

---

::Criando os 10 frames da animação::

Construa a cabeça inicial não deformada com as dimensões reais (no nosso tutorial
95 x 90 px), selecione e tecle Ctrl + C para copiá-la;

Abra um novo documento. Ajuste as dimensões de canvas para 120 x 135 (o tamanho dos frames) e na cor #999999 e tecle Ctrl + V para colar a cabeça no palco;.

Movimente a cabeça com as setas do teclado até colocá-la centrada e na parte inferior do palco como mostrado no item acima "Os objetos para aplicação do efeito" a figura à direita;

Tecle CTRL + Shift + S ou menu File => Save as e salve como base.png ;

Tecle CTRL + Shift + R ou menu File => Export e salve como frame1.gif ;

Agoras temos dois arquivos salvos. O arquivo base.png que usaremos para construir os demais frames e o arquivo frame1.gif que é o primeiro frame;

Abra o arquivo base.png;

Selecione a cabeça e tecle Ctrl + Shift + T ou
menu Modify => Transform => Numeric Transform para abrir a caixa de diálogo mostrada abaixo.
Ajuste os parâmetros da caixa como mostrado na figura.

Tecle OK e irá aparecer a cabeça achatada de 10 px e alongada de 3 px como abaixo.

Com a cabeça selecionada, use a tecla para baixo do teclado até alinhar (assentar) a cabeça com a parte inferior do palco.

Salve esta cabeça como frame2.gif

Abra o arquivo base.png repita os passos mostrados acima até obter uma cabeça com as dimensões de 101 x 70 px e salve como frame3.gif

Repita os passos como acima e construa as imagens até a frame10.gif

Agora você possui 10 cabeças salvas com o nome de frame1.gif até frame10.gif e com as dimensões mostradas na listagem acima no título "Preparando as imagens" e todas elas em um palco de 120 x 135 px

---

::Inserindo o braço nos frames::

Vamos posicionar o braço sobre a cabeça, e anotar as coordenadas X e Y do braço.

Acompanhe na figura abaixo:

1-) Abra a imagem do braço, selecione a imagem e tecle Ctrl + C para copiá-la;

2-) Abra o frame1.gif, e tecle Ctrl + V, isto irá colar o braço na cabeça;

3-) Imagem 1 abaixo - selecione a imagem do braço e arraste para cima da cabeça como mostrado ;

4-) Imagem 2 abaixo - selecione o braço e anote as coordenadas X e Y que aparecem no canto inferior esquerdo do palco. No nosso caso as coordenadas são X = 27 e Y = - 87.
Notar que a coordenada Y será negativa.

5-) Tecle CTRL + Shift + R ou menu File => Export e salve como frame1.gif ;

6-) Irá aparecer um aviso alertando que frame1.gif já existe, tecle OK para salvar em cima, substituindo o original pelo atual.

7-) Abra o frame2.gif;

8-) Tecle Ctrl + V e isto deverá colar o braço no frame2. Se não aparecer o braço, proceda como indicado no item 1-) acima;

9-) Com o braço selecionado vamos movimentá-lo usando as coordenadas X e Y.
Altere X = 27 (o mesmo valor do frame1) e Y= -77 (descer 10px que foi o quanto a cabeça encolheu - de 90px para 80px de altura);

10-) Tecle CTRL + Shift + R ou menu File => Export e salve como frame2.gif ;

11-) Abra o frame3.gif e repita os passos acima. Agora os valores das coordenadas serão
X = 27 (este valor não varia para todos os frames) e Y = -67.

12-) Construa os 10 frames seguindo estes passos. Observe que para o último frame o achatamento foi de 7px e não 10px, em consequência atenção para o valor de Y.

..: Animação quadro a quadro - 2^a. Parte:..

---

::Juntando tudo::

Abra um novo documento. Ajuste as dimensões de canvas para 120 x 135 (o tamanho dos frames) e na cor transparente;

Tecle CTRL + Shift + R ou menu File => Export e salve como gifanimada.gif ;

Abra o painel frames Shift + F2;

Acompanhe a numeração na figura abaixo:

1-) Abra o menu suspenso do painel

2-) Escolha Add Frames (adicionar frames);

3-) digite 9 (frames);

4-) Marque After current frame (Depois do frame atual);

5-) Tecle OK;

Veja no painel que agora você está com 10 frames.

Abra o arquivo frame1.gif, selecione e tecle Ctrl + C para copiar;

Volte ao arquivo gifanimada.gif, vá ao painel frames e selecione o frame1, Tecle Ctrl + V esta ação irá colar o frame1.gif no frame 1 do arquivo gifanimada.gif;

Abra o arquivo frame2.gif, selecione e tecle Ctrl + C para copiar;

Volte ao arquivo gifanimada.gif, vá ao painel frames e selecione o frame2, Tecle Ctrl + V esta ação irá colar o frame2.gif no frame 2 do arquivo gifanimada.gif;

Repita os procedimentos descritos acima para todos os 10 frames.

---

::Salvando e testando a animação::

Vamos ajustar os parâmetros para salvar como gif animada. Isto é feito no painel Optimize (Tecle F6 para abrir e fechar o painel) escolhendo-se a opção Animated GIF e Exact, como mostrado na figura.

Nota: Neste painel você poderá configurar outros parâmetros de otimização para salvar suas criações, porém isto foge ao escopo deste tutorial. É importante que você escolha Animated GIF, caso contrário sua animação não funcionará no navegador.

Tecle CTRL + Shift + R ou menu File => Export e salve como gifanimada.gif ;

Clique no triangulozinho do player, que aparece na barra logo abaixo do palco para visualizar sua GIF funcionando no palco.
Tecle F12 para visualizar sua GIF funcionando no navegador.

Você notará que a animação está muito acelerada.

---

::Ajustando o loop e a velocidade da animação::

Vamos agir na velocidade da animação para dar um efeito mais real.

Tecle Shift + F12 para abrir o painel Frames;

Clique sobre o pequeno triângulo localizado ao lado esquerdo da palavra Forever para abrir um menu Popup e escolha a opção Forever naquele menu.
Aqui você controla o número de vezes que sua GIF vai funcionar (loops) e Forever ajusta o funcionamento "para sempre" ou seja não pára de funcionar.
Se você escolher 2 por exemplo, a GIF funciona em dois achatamentos e pára.

Clique sobre o Frame 1 e com a tecla Shift apertada clique sobre o Frame 10 para selecionar todos os frames.

Duplo clique sobre um dos números (7 na figura) à direita para abrir a caixa de diálogo da velocidade.

Digite 15 e marque a caixinha Include when exporting, tecle Enter, e você verá a velocidade dos frames alterada de 7 para 15;

Tecle Enter.

Tecle Ctrl + F12 para testar a animação.

---

::Um toque final::

Vamos dar uma paradinha no início e no final da animação para melhorar o efeito;

Tecle Shift + F12 para abrir o painel Frames;

Clique sobre o Frame 1 e com a tecla Ctrl apertada clique sobre o Frame 10 para selecionar os Frame 1 e o Frame 2;

No frame 1, duplo clique sobre o número (agora, 15 no nosso caso) à direita para abrir a caixa de diálogo da velocidade;

Digite 100 e marque a caixinha Include when exporting, tecle Enter, e você verá a velocidade do Frame 1 e do Frame 10 alterada de 15 para 100;

Tecle Ctrl + F12 para testar sua GIF animada prontinha.

Tecle CTRL + Shift + R ou menu File => Export e salve como gifanimada.gif ;

Terminado! ;-)
Votos que você consiga construir GIF animada com esta técnica.

Nota: Coloquei mais dois frames no final da minha animação onde aparece uma faixa vermelha escrito em branco Arghh. Este efeito deixo para você acresentar, como exercício

1- Bem.. Abra sua imagem escolhida no fireworks.

2- Agora na barra de ferramentas na parte Vector escolha a Rounded Rectangle. Obs: Poderia ser a ferramenta Ellipse, polygon outra mas eu preferi esta.... Tente fazer com outras e veja como fica.

3- Agora cubra sua imagem fazendo retângulos com a ferramenta escolhida no passo 2... mas tire a cor de preenchimento do retângulo e ponha uma cor forte no contorno para que possa ajudar a você na hora de alinhas seus retângulos... Obs: depois do primeiro retângulo criado deixe o dedo na tecla "ALT" para ir duplicando o retângulo.. Isso faz com que ele seja duplicado na mesma camada.. se usar Copiar e colar não dará certo pq ao colar ele cola em uma nova layer. Veja na figura abaixo:

4- Ao preencher toda a imagem que escolheu faremos o seguinte passo: Clique na layer que estão os retângulos para selecioná-los todos de uma só vez.. verifique que só a layer dos retangulos está selecionada.. agora com os retângulos selecionados tire a cor do contorno.. deixe a sem cor.. notára que os retângulos sumirão.. mas não se preocupe pq não sumiram, estão apenas digamos q invisíveis...

5- Agora clique na layer onde está a imagem, depois dê um "Control + X" (recortar) ,agora clique na layer dos retângulos e dê um "Control + Shift + V" (Cola no mesmo local onde foi recortada) e veja como ficou:

Pronto galera agora é só usar a imaginação e fazer diversas experiências.. Troquem a cor de fundo depois, mecham , inventem e é isso ai ..dar pra fazer bastante coisa com essa dica: topos de sites, assinaturas para e fóruns e etcc.. Obs: Galera existem outros meios de se fazer..uns até mais rápidos .. mas prefiro esse meio manual mesmo, pois, gosto mto do resultado final.  Crie uam fita de primeiro lugar 01. Pressione Ctrl+N para criar um novo documento, defina o tamanho em 570x700 pixels, 72 dpi´s e modo de cor em RGB, pressione Ok, defina as cores de Foreground e Background como azul claro e azul escuro, pressione a letra G do teclado para selecionar a Gradient Tool, defina o gradiente como Radial e aplique no documento como na foto abaixo. 02. Pressione a letra D do teclado para resetar as cores de Foreground e Background para preto e branco, pressione a letra X do teclado para alternar as cores de Foreground e Background, sua cor de Foreground deve ser a branca, pressione a letra U do teclado para selecionar a Ellipse Tool, certifique-se de que a opção Shape Layers esteja ativada, com a tecla Shift pressionada clique e arraste para criar um círculo como o da foto abaixo. 03. Vá em Layer> Layer Style> Blending Options, Layer> Layer Style> Stroke e defina os valores abaixo. 04. Sua imagem deverá ficar como a da foto abaixo. 05. Pressione a letra P do teclado para selecionar a Pen Tool, certifique-se de que a opção Paths esteja marcada na barra de opções da ferramenta, crie um path com o da foto abaixo, clique com o botão direito do mouse dentro do path e escolha a opção Make Selection, pressione Ok, pressione Ctrl+Shift+Alt+N para criar uma nova layer, escolha uma cor qualquer e pressione Alt+Backspace (a tecla acima do Enter) ou pressione a letra G do teclado para selecionar a Paint Bucket Tool, clique dentro da seleção para preencher com a cor escolhida. 06. Pressione Ctrl+J para duplicar a layer, com a tecla Ctrl pressionada clique sobre a miniatura da layer copiada para ativar a seleção ao redor do shape, escolha um cinza escuro e pressione Alt+Backspace (a tecla acima do Enter) ou pressione a letra G do teclado para selecionar a Paint Bucket Tool e clique dentro da seleção para preencher o shape com a cor escolhida, pressione Ctrl+T para abrir a caixa de Free Transform, defina o valor de Angle como na foto abaixo. 07. Posicione o shape copiado como na foto abaixo e pressione Enter para finalizar a transformação. 08. Continue com o mesmo procedimento até que sua imagem fique como a da foto abaixo. 09. Clique na layer do círculo e vá em Layer> Hide Layers para retirar a visibilidade da layer, agora clique no primeiro shapes criado e vá em Layer> Layer Style> Gradient Overlay, definaos valores abaixo. 10. Clique no próximo shape, vá em Layer> Layer Style> Gradient Overlay e defina os valores abaixo. 11. Repita o procedimento até que seu trabalho fique como o da foto abaixo. 12. Clique na layer que estiver no topo da paleta de layers, pressione a letra U do teclado para selecionar a Ellipse Tool, certifique-se de que a opção Shape Layers esteja ativada, com a tecla Shift pressionada clique e arraste para criar um círculo como o da foto abaixo. 13. Vá em Layer> Layer Style> Drop Shadow, Layer> Layer Style> Inner Shadow, Layer> Layer Style> Bevel and Emboss, Layer> Layer Style> Gradient Overlay, Layer> Layer Style> Stroke e defina os valores abaixo. 14. Sua imagem deverá ficar como a da foto abaixo. 15. Pressione a letra T do teclado para selecionar a Horizontal Type Tool, no caso deste tutorial a fonte usada foi a Georgia no tamanho 72 pt com a cor #fddc00, escreva uma palavra qualquer na parte superior do círculo, selecione a palavra, vá em Edit> Transform> Warp e defina os valores abaixo, repita a operação para a palavra na parte inferior do círculo. 16. Sua imagem deverá ficar como a da foto abaixo. 17. Pressione a letra M do teclado para selecionar a Elliptical Marquee Tool, com a tecla Shift pressionada clique e arraste para criar uma seleção circular, pressione Ctrl+Shift+Alt+N para criar uma nova layer, escolha a cor #fae500, pressione Alt+Backspace (a tecla acima do Enter) ou pressione a letra G do teclado para selecionar a Paint Bucket Tool e clique dentro da seleção para preencher a layer com a cor escolhida, vá em Select> Transform Selection, com as teclas Shift+Alt pressionadas clique e arraste para diminuir a seleção, pressione Enter para finalizar a transformação, pressione Delete para deletar a parte interna da seleção, pressione Ctrl+D para desabilitar a seleção. 18. Mude o modo de blend da layer para Difference. 19. Pressione a letra P do teclado para selecionar a Pen Tool, certifique-se de que a opção Shape Layers esteja ativada, crie uma das fitas como na imagem abaixo, pressione Ctrl+J para duplicar a layer, pressione Ctrl+T para abrir a caixa de Free Transform, rotacione a layer e posicione como na foto abaixo. 20. Clique na layer da primeira faixa e vá em Layer> Layer Style> Gradient Overlay, defina os valores abaixo. 21. Clique na layer da segunda faixa e vá em Layer> Layer Style> Gradient Overlay, defina os valores abaixo. 22. Agora vá em Layer> Layer Style> Pattern Overlay aplique um pattern com linhas diagonais, repita o procedimento nas duas faixas, clique nos shapes que estão acima das faixas e vá em Layer> Layer Style> Drop Shadow para adicionar uma pequena sombra sobre as faixas como na foto abaixo. 23. No final sua imagem estará como a da foto abaixo.

::Visão antecipada::

O efeito final da animação é mostrado abaixo.

Observar:

Cor do texto: vermelha;
Cor da animação: verde;

---

::O texto a animar::

Abra um novo documento;

Digite no palco o texto a animar na cor de sua preferência e aplique efeitos se assim desejar. Neste tutorial usei um texto na cor vermelha sem efeitos;

Clone o texto digitado. Para clonar Ctrl + Shift + D

Mude a cor do clone para a cor da animação. Neste tutorial usei a cor verde;

Você deve obter o mostrado na figura abaixo:

---

::A máscara::

Sobre o texto digitado, desenhe um retângulo na cor preta e com a ferramenta "
screw
" "skew" distorça o retângulo dando-lhe a forma de um paralelogramo como mostrado na figura abaixo:
Em 2005-12-01: Você pode "pegar" a ferramenta skew assim: selecione o retângulo e tecle duas vezes a tecla "Q".

---

::Colando a máscara::

Agora vamos colar o paralelogramo como máscara no texto:

Selecione o paralelogramo e tecle Ctrl + X para recortá-lo do palco;
Selecione o texto que está no palco e menu Modify ==> Paste as Mask

Você obterá o mostrado na figura abaixo

---

::Desvinculando a máscara::

Observe no painel "Layers" da figura acima um símbolo em forma de "8" (oito) entre o texto e a máscara.
CLIQUE no símbolo e ele vai desaparecer, desvinculando o texto da máscara;

Pegue a ferramenta de seleção seta branca e clique dentro do paralelogramo que agora está com uma linha de contorno e sem preenchimento (cor amarela neste tutorial) para selecioná-lo e arraste para um lado e para outro para constatar que você pode movê-lo a vontade ficando o texto imóvel.

---

::Criando frames::

Posicione o paralelogramo no início do texto como mostrado abaixo;

Abra o painel "Frames" Shift + F2

Clique para abrir o menu suspenso do painel "Frames"
Duplicate Frames ==> Number 23 ==> OK

---

::Animando no painel Frames::

Clique sobre Frame 2 e desloque o paralelogramo uns 2 pixel para a direita;

Clique sobre Frame 3 e desloque o paralelogramo uns 4 pixel para a direita;

Clique sobre Frame 4 e desloque o paralelogramo uns 6 pixel para a direita;

Clique sobre Frame 5 e desloque o paralelogramo uns 8 pixel para a direita;

Vá repetido a operação até atingir o último Frame que deverá coincidir com a chegada do paralelogramo no final do texto.

---

::O efeito final::

Aqui está o texto animado que você já havia visualizado no início deste tutorial.

Passo 1

Novo documento, eu usei 800x600px e defina o fundo para preto.

Passo 2

Obter o logotipo da Apple a partir de uma fonte ou você pode obtê-lo neste linkhttp://brandsoftheworld.com/download/brand/134868.html. Depois que abri-lo no Fireworks e mantê-lo vetor.Copiá-lo e colá-lo em seu documento.

Passo 3

Coloque o logotipo como o vetor abaixo e escolha Gradient> Radial para o tipo de preenchimento. E para as cores cinza escuro e um cinza claro. Usando a ferramenta Gradient clique entre a folha ea maçã, segure o botão e arraste-o para lugar e criar o gradiente. Use a imagem abaixo para referência.

Passo 4

Certifique-se que o logotipo é selecionado e vá para Modify> Alter Path> Expand curso . Use 3px para alargura , cantos arredondados, e as tampas arredondadas. Depois disso vá até Modify> Combine Paths> Dividir.

Teremos 4 objetos, selecione os 2 menores vão para Modify> Combine Paths> Join , renomeie a camada para "front" . Em seguida, selecione os outros dois e repita o comando Join. Renomeie a camada para"back" . Dica: o comando juntar nos permitirá aplicar um gradiente para os objetos.

Passo 5

Selecione o "back "camada e aplique um gradiente. Desta vez Linear e para as cores use 4 níveis: preto, branco, branco e preto como na imagem abaixo.

Passo 6

Usando a ferramenta Retângulo (U) , crie um retângulo como na imagem abaixo. Depois que alterar o tipo de preenchimento para Gradient> Linear. Para usar as cores preto para o início e fim, mas mudar a opacidade para o ponto de partida a 0 . Que vai criar uma sombra.

Passo 7

Adicione alguns textos com uma fonte de luz, eu estou usando Helvetica Neue Ultra Light.

Passo 1

Abra o Fireworks e comece um novo documento. Estou usando o tamanho 1024x1024 pixels. Você pode fazer o mesmo usando Illustrator ou Photoshop. Depois disso, com a Ellipse Tool (U), crie um círculo.

Passo 2

Crie mais círculos usando a foto como referência.

Passo 3

Agora vamos criar os círculos menores que serão as lentes. Quando você vê essas lentes elas parecem bastante complexas, mas na verdade é simples de criar o efeito, são apenas círculos.

Passo 4

Agora temos todos os círculos necessários para criar a lente. Como podem ver estamos apenas brincando com black outlines, nada de cores.

Passo 5

Com a Rounded Rectangle tool crie o corpo da câmera. Depois clique no controller amarelo para trocar o tipo de canto.

Passo 6

Agora vamos dar um visual mais realista para a lente. Selecione o círculo maior e aplique um gradiente. Use o tipo Cone com as cores cinza e preto. Use a imagem abaixo como referência.

Passo 7

No segundo círculo apenas use a cor preta com #333 de stroke.

Passo 8

No terceiro círculo use #1B1C1C na cor e #333 no stroke.

Passo 9

Use a cor preta e a mesma cor de stroke no próximo. Para o outro use o mesmo do terceiro para alternar as cores.

Passo 10

Para os próximos 4 círculos use #1B1C1C na cor com #333 em stroke. No quinto use pretp na cor. Depois disso use #999 no stroke do sexto. Precisamos de um pouco de luz na parte do centro. Adicione então 3 novos círculos, usando um linear gradient no último.

Passo 11

Preencha o círculo do centro com preto. Como você pode ver na imagem abaixo, até agora não fizemos nada muito difícil, foram apenas repetições.

Passo 12

Agora adicione 4 círculos no centro do documento. O maior em roxo (1), outro em verde amarelo eescuro (2), outro menor bem no centro em amarelo claro (3) e outro em verde (4). Use a imagem abaixo como referência. Troque o Edge Type para Feather com 3pt.

Passo 13

Adicione 2 círculos, um maior e um menor. Depois vá até Modify>Ungroup. Com a Subselection Tool (A)edite os círculos para deixá-los mais parecidos com elipses. Troque Fill color para Linear Gradient e use#728EA6 na cor com 100% transparency no começo e 0% no final. Deixe a parte totalmente transparente no centro da lente.

Passo 14

Adicione uma elipse para usar como mask. Isso é importante para criar o reflexo na lente.

Passo 15

Recorte a elipse e comece a selecionar os círculos coloridos. Selecione o amarelo escuro e vá até Edit>Past as Mask.

Passo 16

Repita a mesma coisa nos outros círculos. Agora, para o reflexo maior, selecione o círculo como fiz na imagem abaixo e copie. Selecione a elipse grande com gradiente e vá até Edit>Paste as Mask. Faça o mesmo na elipse menor com gradiente.

Passo 17

Agora vamos adicionar alguns efeitos no corpo da câmera. Tínhamos um retângulo arredondado. Para adicionar um pouco de 3D apenas adicione dois retângulos, uma em baixo, um em cima. Aplique um gradiente neles para que as margens da esquerda e da direita fique transparentes.

Passo 18

Adicione 2 retângulos nos dois lados da câmera. Aplique então um gradiente usando a cor branca e 100% transparent no começo e fim e 0% transparency no meio.

Passo 19

Mova a lente para o corpo. Você pode adicionar efeitos como sombras e elementos.

Passo 20

Aqui estão outras partes da câmera que criei. São basicamente retângulos com gradientes e tamanhos diferentes. Eles são básicos mas em conjunto criam um efeito bacana.

Conclusão

Selecione todas as layers menos as do centro da lente. Vá até Add Filters button no Properties panel. Clique e selecione Noise>Add Noise. Use 2 Amount para dar uma textura legal.

Como você pode ver, criar a câmera e a lente é super simples, o importante é prestar atenção nos detalhes para alcançar o resultado que quiser.

Passo a Passo

Passo 1 - Primeiro Retângulo

Primeiro de tudo, abra um novo documento com 1000 x 560px. Crie um retângulo com um simples Linear Gradient da cor #000 para #333.

Passo 2 - Primeira Textura

O que nós iremos fazer agora é começar o efeito de textura. Iremos ver 2 retângulos com 2 texturas diferentes. Crie o primeiro, com a cor #CC66FF e 800 x 242px. Aplique a textura chamada Swirl com 100% e Transparent. Então vamos brincar com isso, selecione o efeito Soft Dodge e aplique o filtro Motion Blur com 90º e 100. Você terá esta imagem agora:

Passo 3 - Diplique

Neste passo, simplesmente duplique o último retângulo que nós criamos e troque a textura para Oilslick. Escolha também o blend mode para Normal. Verifique os layer que nós temos e a ordem deles.

Passo 4 - Grupo, máscara e Color Dodge

Agora agrupe os 2 layers texturizados. Então selecione o retângulo escuro e copie (CTRL/Cmd + C). Agora selecione o grupo e vá em Modify > Mask > Paste as Mask. Isto irá criar um novo layer mask. Então aplique Color Dodge neste layer.

Passo 5 - Criando as linhas de luzes

As linhas irregulares de luz são fáceis de criar. 1- Crie uma elipse branca. 2- Aplique Feather 30. 3- Aplique Linear Gradient com a cor default Silver. 4- Aplique Soft Dodge. That's it!

Passo 6 - Distribuindo as luzes

Agora você pode espalhar as luzes pela superfície do retângulo. Note que você pode rotacionar, mudar a opacidade, esticar, etc. Olhe como deve estar a imagem até agora.

Passo 7 - Elementos do layout

A imagem principal está pronta, agora use sua imaginação para completar o layout. Aqui nós não focamos nisto, mas você pode criar seu próprio wireframe e estrutura de site.

Conclusão

Com este simples efeito você pode criar imagens muito legais. Brinque com as cores, Hue e Saturations e você verá a facilidade que é modificar e criar novas e incríveis imagens. Agora, crie a sua e compartilhe os seus experimentos!

PASSO 1

Para começar então baixe as 2 imagens que servirão de base.
Imagem do iPhone
Imagem do background colorido

Crie um documento novo de 800x800px e fundo preto, e importe as 2 imagens.

PASSO 2

Agora coloque o layer da imagem dos peixes para traz do iPhone e reduza a imagem, tente enquadre até ficar parecido com a imagem abaixo.
Dica: vamos usar a imagem do telefone com a parte central recortada como layer acima de todos os outros, desta forma podemos ter mais liberdade para trabalhar com as formas por trás dele!

PASSO 3

Vamos criar um retangulo de 255 x 380px, ele servirá para mascarar a imagem de fundo. Agora selecione a imagem, recorte e cole dentro do retângulo (CTRL+SHIFT+V). Agora posicione para ficar nos limites do visor e por trás.

PASSO 4

Para criar a interface, vamos usar basicamente retângulos e aplicar alguns gradientes e trasnparências. O processo é simples, e devem haver diversas maneiras de criarmos esses efeitos. Vamos começar entao criando um retângulo na parte superior de 255 x 20px, na cor #000 e use como transparência 55%. Copie este retângulo, mova 20px para baixo e coloque na altura 76px. Crie depois mais uma linha abaixo, de 1px na cor #000 e com uma trasnparência de 50%.

PASSO 5

Agora vamos criar o efeito de relevo. Crie um retângulo de 255 x 38px na cor #FFF e posicione no topo do último retângulo criado como mostra a figura. Agora aplique um gradiente linear do #FFF para o #FFF nele e use as transparências no próprio gradiente como mostramos nos detalhes (note q criarmos um ponto a mais de trasnparência para dar o efeito de feather somente na parte de baixo).

PASSO 6

Ja temos a parte superior pronta, agora copie os dois retângulos criados por último para a parte de baixo. E crie outra linha de #000 e 50% de trasnparência acima deles, da mesma forma q fizemos antes.

PASSO 7

Vamos fazer agora o botao de "slide to unlock". Crie um retângulo de 215 x 39px sem preenchimento e com borda de 1px na cor #CCC, use um round de 50. Duplique este retângulo e com ele vamos cortar a parte de baixo do gradiente branco. Selecione retângulo e o gradiente, vá em Modify > Combine Paths > Punch.

PASSO 8

Depois disso duplique novamente o retângulo e mova este de cima 1px para cima, aplique um gradiente linear da cor #000 para a #000, e com uma trasnparência de 24 na parte de baixo do gradiente. Depois em todo o retângulo aplique uma trasnparência de 80%.

PASSO 9

Para o botão, crie outro retângulo de 53 x 35px, e round de 43. Aplique um gradiente liear da forma como está a figura. Depois vamos colocar uma seta acima dele, use a ferramente Arrow, e deixe no formato como estamos usando. Use na seta a cor #979797 e aplique um Inner Shadow nos valores 0 30% 2.

PASSO 10

Agora vamos começar a colocar os textos. Aqui usamos a Helvetica, mas se não tiver pode usar a Arial sem problemas. O texto da hora está na cor #FFF no tamanho 50. Duplique esse layer do texto e no de baixo aplique a cor #000 e mova 1px para cima. Esse efeito fica melhor que o Inner Shadow, pois mantém a fonte no aparência normal. No texto da data usamos a cor #CCC no tamanho 13. Para o "slide to unlock" usamos a cor #FFF com trasnparência de 25% e no tamanho 20.

RESULTADO FINAL

Para finalizar, aplique os ícones e nome da sua opradora no topo, por cima do retângulo de 20px de altura. Todos os ícone criamos também somente como retângulos e linhas, brinque um pouco com isso! No PNG está tudo que foi feito também.

PASSO 1

Vamos começar criando nossa letra, aqui vamos usar a letra "a". Escolhemos a fonte Helvetica, mas você pode usar a que preferir. Deixe ela na cor #000. Agora vamos trabalhar ela em curvas, para isso clique com o botão direito nela e vá em Convert to paths. Ele irá converter e deixar agrupado o layer, desagrupe para podermos trabalhar com os pontos mais pra frente.

PASSO 2

Agora duplique esse layer e neste de cima aplique um Gradiente Bars e com as cores como mostramos na figura.

PASSO 3

O layer que ficou por baixo será nossa borda preta. E para isso este de cima precisa ser um pouco menor. Selecione o comando Modify > Alter Path > Inset Path. Selecione Inside e width 5.

Depois faça como na figura seguinte, selecione os pontos e vá modificando para deixar eles bem alinhados e com bom espaçamento. Na parte de baixo é legal deixar bem perto da borda para criarmos o efeito certo.

PASSO 4

Agora vamos aplicar bevels e shadows nesse layer. Serão 2 Bevels e 1 Inner Shadow. Deixe os valores como na figura em cada um dos filtros.

PASSO 5

Boa parte da estrutura está pronta agora temos que começar a colocar os efeitos. Vamos fazer o reflexo na parte de cima. Para isso, simplesmente duplique o layer do "a" azul e apague os pontos selecionados na figura. Depois ajuste a curva e aplique um Gradiente Linear com os lados #FFF e 0% de alpha em um dos lados.

PASSO 6

Agora vamos fazer o efeito de luz que aparece na parte de baixo. Será feito com 3 elipses. Aplique as cores como na figura e repare que usamos sempre um Feather e um filtro. Depois agrupe os 3 elementos.

PASSO 7

Vamos aplicar uma máscara agora nesse grupo. Selecione o "a" azul copie (CTRL+C), depois vá em Modify > Mask > Paste as Mask . Duplique esse layer e aplique o filtro Overlay nos 2 layers com alpha de 60% no de cima.

PASSO 8

Precisamos agora criar os arcos amarelos. Vamos usar elipses para fazer eles. Crie 2 elipses como na figura. Para deixar elas no formato e tamanho desejado, use a ferramenta "Q" na opção Distort que facilita bastante.

Depois de criar as duas elipses vá em Modify > Combine Paths > Punch. O arco final está na cor#F8A30A. Faça uns ajutes na ponta de baixo parecer que ela passa por trás da letra.

PASSO 9

Nesta forma aplicamos um Inner Glow com os valores 2 50% 6 0. Depois vamos criar uma nova forma com a ferramenta Pen. Deixe por baixo do arco com o gradiente linear com as duas cores #F8A30A e um lado com alpha 0% como mostra a figura.

PASSO 10

Agora vamos criar a sombra do arco. Duplique o arco amarelo, diminua ele e deixe na cor preta. Aplique agora um Gradiente Radial e deixe bem suave as cores trabalhando com os valores do alphas no gradiente.

Agora aplicamos uma máscara nesta sombra. Copie o "a" azul (CTRL+C) e faça o mesmo processo anterior, selecione a sombra e vá em Modify > Mask > Paste as Mask .

RESULTADO FINAL

Seu efeito deve ter ficado parecido com este!

Podemos colocar também um complemento ou brincar com algumas cores.

::Novo documento::

Abra o FW - (Óbvio!) :-)

Tecle Ctrl + N ou selecione, Arquivo ===> Novo para abrir a caixa de diálogo "Novo documento", conforme mostrado na figura abaixo.

Ajuste as dimensões de Canvas (palco, área de trabalho, tela, etc...) para:

Largura: 200 pixels - Altura: 150 pixels

Cor da Tela: Transparente. Tecle OK.

::O retângulo::

Com o palco para construção do novo documento na tela, vamos começar desenhando um retângulo nas dimensões do botão a construir.

1-) Clique no ícone da ferramenta "Retângulos e Elípses";

2-) No menu que se abre, clique em "Ferramenta Retângulo Arredondado"

---

Observe a figura abaixo:

1-) Com a ação descrita no item anterior o ponteiro do mouse transforma-se em uma "cruzinha", pronto para desenhar o retângulo pela ação de arrastar e soltar.

Desenhe um retângulo sem se preocupar com as dimensões!;

2-) Com o retângulo desenhado e selecionado, ajuste a cor do preenchimento para sua cor escolhida. Neste tutorial usei a cor #999999;

3-) Mantenha o retângulo selecionado e nas janelinhas W (largura) e H (altura) digite as dimensões do retângulo;

4-) Escolha o raio de arredondamento dos cantos do retângulo.

.

---

::O menu do chanfro::

1-) Selecione o retângulo (clique em cima dele). "Aparece" um contorno em linha azul com bolinhas nos cantos conforme mostrado na figura;

2-) Clique em cima do sinalzinho + de Efeitos para abrir o menu dos chanfros;

3-) Deslize o mouse até "Chanfro e relevo" e no sub-menu que se abre clique em 4-)"Chanfro externo";

---

::Aplicação do chanfro::

Com a ação descrita no item anterior abre-se um caixinha de diálogo para aplicação de chanfros;

1-) Por default será aplicado no nosso retângulo um chanfro.

2-) Escolha uma cor para o chanfro. Neste tutorial apliquei uma cor igual a cor do retângulo#999999.

Você pode escolher uma cor diferente.

3-) Escolha uma espessura para o chanfro;

4-) Nestas 3 janelinhas ajuste os detalhes de sombras e orientações para o chanfro. Faça testes variando os valores;

5-) e 6-) por default estas janelinhas devem estar com o chanfro Achatado e em Alto Relevo.

Abra estas janelinhas clicando na setinha ao lado delas.

7-) A janelinha onde esta escrito Alto relevo abre-se e você tem mais 3 opções;

8-) A janelinha aberta com as 4 opções possíveis.

---

::Mais opções::

1-) Selecione o retângulo;

2-) Clique na setinha e janelinha onde está escrito Achatado abre-se e você tem mais 6 opções;

3-) A janelinha aberta com as 7 opções possíveis.

---

::Os 28 botões::

Você pode então combinar cada uma das 4 opções de uma janelinha com as 7 opções da outra;

Com isso você obtém 7 x 4 = 28 tipos de botões, mostrados abaixo.

Resultado Final

Clique na imagem para ampliá-la.

Layout Final

Conteúdo

1º Passo – Definir as Configurações do Documento

Iniciaremos, criando um novo documento com as dimensões 1200 x 1600 pixel. No entanto, nossa área útil será de 900 pixel. E para delimitá-la com exatidão, necessitaremos da régua e das linhas-guias. Para acionar as réguas, pressionemos CTRL+ALT+R (Menu > Views > Rules); e para posicionar as linhas guias, cliquemos sobre a régua e arrastemos a linha até a área de desenho:

Fig. 01: Acionando as linhas-guia

Na verdade, serão duas linhas-guia, posicionadas em 150 px e 1050 px.

Fig. 02: Delimitação das áreas do layout com linhas-guia

E para fecharmos esta configuração inicial, vamos trocar a cor do fundo de branco para um azul escuro (#132535) no painel Properties (propriedades):

Fig. 03: Cor de fundo do layout

2º Passo: Estilizando o Fundo do Layout

Vamos criar dois retângulos, como na imagem a seguir:

Fig. 04: Definindo fundos do layout

Em seguida, aplicaremos o efeito gradiente em ambos, mas cada um com uma tonalidade diferente:

Fig. 05. Aplicando gradiente

Agora, aplicaremos uma leve textura nos dois retângulos com o filtro Noise (Filter > Noise > Add Noise)como se fosse um ruído na imagem:

Fig. 06: Aplicando filtro de ruído (noise)

E por fim, vamos criar uma separação mais refinada entre os dois fundos. Para isso, criemos dois retângulos com as dimensões 1200 x 1 px sem borda e com o preenchimento: #000000 e #203D57, posicionemos junto na divisão entre os backgrounds. Recomendo que utilize o Zoom para posicionar melhor.

Fig. 07: Divisória entre os retângulos

O resultado esperado é este:

Fig. 08: Resultado parcial

3º Passo: Criando a Área de Contorno do Conteúdo

Lembram que delimitamos em 900 px a área do nosso conteúdo? Pois bem, criaremos um retângulo para ficar melhor de visualizá-la. Sua dimensão será de 900 x 1500 px e posicionado à 50 px no eixo Y e com o preenchimento branco.

Fig. 09: retângulo do conteúdo

E agora, aplicaremos uma transparência de 10% e em seguida, acionando o filtro Filter > Photoshop Live Effects, configuraremos o retângulo da seguinte forma:

Fig. 10: Efeitos no retângulo do conteúdo

Em seguida, com este retângulo selecionado, vamos copiá-lo e colá-lo na mesma posição em que o anterior está. retiremos o preenchimento (deve ficar transparente) e acrescentemos uma borda com 1 px de espessura e na cor branca. E este retângulo (que nada mais é que uma borda ao anterior), deixemos com 10% de transparência e sem nenhum filtro.

Fig. 11: Borda do retângulo

4º Passo: Criando a Área do Conteúdo

Criada a área de contorno do conteúdo, faremos a seguir, área onde este conteúdo será colocado.

Para isso, inseriremos mais um retângulo, com as dimensões e posicionamento como na imagem a seguir:

Fig. 12: Configuração do retângulo central

Prosseguindo, inseremos um preenchimento gradiente e um filtro (Photoshop Live Effects) de acordo com a imagem:

Fig. 13: Efeitos no retângulo central

5º Passo: Montagem do topo

O topo do currículo deve ficar da seguinte forma (lembrando que todas as imagens foram baixadas do site Iconfinder):

Fig. 14: Montagem do topo do currículo

E para refinar, vamos colocar um efeito no nome do profissional e sua profissão:

Fig. 15: Formatação do Nome e profissão

E pra finalizar a montagem do topo, criaremos a mesma divisória feita no fundo do layout, mas com cores diferentes:

Fig. 16: Finalização do topo do currículo

6º Passo: Adicionando Conteúdo

Neste momento, vem a parte mais difícil: inserir o conteúdo…hehehe 

Fig. 17 - Estilização do conteúdo

E, seguindo este padrão, completemos o conteúdo do site:

Layout Final

Bom é possível criar um banner no Fireworks por causa dos Frames ou States que existe no software.
Vamos começar:
1° passo- abra seu Fireworks e crie um novo documento com as seguinte medidas 468px, 60px (medidas padrão de um Full banner)crie um retângulo com o tamanho exato do documento que você criou é interessante você adicionar uma borda preta ou de qualquer outra cor, para destacar as marcações.

2° passo- Escolha um tema em especial para começar a desenvolver o banner, no meu exemplo de um banner que é utilizado no meu site vou usar imagens e textos relacionados a avanço tecnológico, faça com sua necessidade. Bom será preciso agora criar os Frames(states) e em cada um deles será colocado uma imagem ou texto diferente dos demais. No meu exemplo vou criar 8 frames e cada um deles com uma imagem, texto e cor diferentes para que o visitante consiga visualizar a animação.
Então defina qual será o 1° frame a primeira imagem que vai aparecer no banner.

3°passo- após definir o 1° frame, qual será a imagem de abertura da animação, clique em Frames(states) no Fireworks e quando abrir, basta clicar com o botão direito do mouse sobre o frame 1 e depois na opção Duplicate frame, em seguida vai abrir uma caixa de dialogo onde você pode escolher quantos frames deseja criar, no exemplo vou criar 7, lembrando que ja foi criado um, então o numero que você escolher será os novos frames, por exemplo quero um banner com 8 frames, vou criar apenas 7. Selecione a opção “After current “.

4° passo- depois de criar os frames da animação, em cada frame criado você coloca uma imagem, texto diferente para aparecer uma animação, faça isso em todos, mude cores de fundo, tamanho e cor da fonte, utilize imagem atrativas e com cores de destaque, mais isso fica a gosto de cada, use a criatividade.

5° passo- Bom agora que os frames já estão pronto, cada um com informação e imagem diferente dos demais , será necessário configurar o tempo de transição, ou seja o tempo que ira trocar as imagens, essas alterações são feitas no painel frame(states) observe:

vai aparecer dessa forma seu painel frame, bom agora vamos editar o tempo de cada frame, sobre seu frame 1 clique 2 vezes no numero 7 que vai aparecer automaticamente no frame e coloque o tempo que deseja. Vale a pena frisar que quanto menor o valor dos numero, mais rápido será a apresentação dos frames . Eu utilizo o tempo entre 200 a 500 , é bom saber que 100 corresponde a 1 segundo, então vou colocar aqui no exemplo 500 em cada frame, ou seja será de 5 segundos a transição das imagens que compõem o banner animado. Visualize a animação no seu navegador para ter idéia de como esta ficando seu banner, de um F12.

6°passo- Agora vamos exportar o banner do Fireworks, use o atalho(ctrl+shift+X) “Export preview” , vai abrir uma nova tela, na caixa format, selecione a opção “Animated Gif” , que são as imagens gifs animados.

já na guia animation você poderá visualizar todos os frames e os tempos. Na hora de salvar coloque um nome ao banner e na opção Export , coloque HTML and imagens e depois só salvar. Esta pronto seu banner feito todo no Fireworks e exportado com as imagens e o código HTML, agora é só escolher o melhor lugar no seu site e adicionar ou as imagens somente ou inserir o HTML do Fireworks.

CARTÃO DE CRÉDITO

Passo 01: Vamos começar criando um novo documento no tamanho de 280 x 173 px como mostra na imagem abaixo:

Ficando assim o retângulo:

De: #0033FF

Para: #000066

Passo 05: Agora que o nosso retângulo tem uma forma mais redonda nas pontas e tem um ótimo degrade azul escuro vamos adiciona o nome do usuário, como na imagem abaixo:

Passo 07: Agora faça um retângulo no tamanho 66 x 83 px e aplique “60″ no Rectangle roundness como no passo 03. Coloque o retângulo na posição 204 por 77 x/y.

Passo 08: Adicione a logo da Master Card ou qualquer, ficando como a imagem abaixo

Passo 10: Com mais alguns simples retoque o meu cartão ficou assim:

Objetivo

Simples tutorial com bom rendimento para seus layouts, vou mostrar como criar uma folha de caderno em poucos passos.

---

Passo 1: Crie um novo arquivo no tamanho 600×600 px com a cor de fundo branco (#FFFFFF).

Passo 2: Faça um retângulo (U) no tamanho 287 x 329 px com preenchimento branco (#FFFFFF) e contorno de cinza (#CCCCCC).

Passo 3: Faça um círculo (U) no tamanho 15 x 15 px para ser os furos da folha, duplique várias vezes deixando como na imagem abaixo:

Passo 4: Faça retângulos sobre os círculos para dar um efeito de folha rasgada de logo após ter retirado do caderno. Antes dê uma lida na coluna Combinando Traçados.

Passo 5: Insira uma linha vertical no tamanho 329 px de cor vermelho (#FF2B2B) e várias linhas na horizontal no tamanho 240 px de cor azul bebê (#53BAFF), ficando assim:

Utilizando a sua criatividade pode fazer de diversas maneiras com a página virada, queimada com outras cores e etc…

Resultado final:

Efeitos Rápidos. Como observado nas colunas anteriores, os efeitos aqui apresentados são de fácil manipulação e são muito rápidos de serem feitos. Hoje eu trago a vocês um efeito que tenho visto muito comum em outras comunidades de programas de edição de imagem. Muitos o chamam de estilo gótico, então este é o nosso nome para o efeito: efeito gótico.

Então vamos ao que interessa, o efeito:

1) Abra a nossa imagem:

 Selecione este layer da imagem em preto em branco, e no próprio painel de layers selecione a opção Multiply:

Primeiro, escolha uma imagem ou foto que você queira aplicar essa técnica, neste tutorial irei usar uma foto da atriz Cameron Diaz:

Agora, crie um circulo com preenchimento e contorno branco do tamanho da foto:

Agora, selecione a foto e o circulo e vá ao menu Modify > Mask > Group as Mask :

Pornto, veja o resultado:

É possível também você usar outras formas como, por exemplo, uma estrela:

criação de um carimbo com Fireworks.

Primeiro pegaremos uma imagem qualquer.

aqui.

Espero que tenham gostado