Fireworkstruquesmagicos 130205194459 Phpapp01

FIREWORKS CS5
2

NDICE
NDICE .......................................................................................................................................... 2
INTRODUO .............................................................................................................................. 4
A srie............................................................................................................. 4
01 50 VANTAGENS DO FIREWORKS ..................................................................................... 5
1. Alinhamento Preciso com Pixels ................................................................. 5
2. Quick Infos .................................................................................................. 6
3. Retngulos arredondados ........................................................................... 6
4. Largura de linha e cor de preenchimento ................................................... 7
5. Gradientes .................................................................................................. 7
6. Dithering gradients ...................................................................................... 8
7. Layer Styles e modos de mistura ............................................................... 8
8. Escala sem distoro .................................................................................. 9
9. Funes Alinhar .......................................................................................... 9
10. Objetos Ocultos ...................................................................................... 10
11. Alinhar texto ao redor de uma imagem ................................................... 11
12. Uso de caracteres especiais ................................................................... 11
13. Modelos para o Layout Grades, banners ........................................ 12
14. Painel Camadas (Layers) ....................................................................... 12
15. States-Panel (para MouseOver e Interatividade) .................................... 13
16. Camadas de compartilhamento entre os estados e as pginas ............. 14
17. Painel Pginas ..................................................................................... 14
18. Master Page (alteraes em todas as sub-pginas) ............................... 15
19. Usando estilos ....................................................................................... 16
20.Elementos de interface do usurio .......................................................... 16
21. Symbols .................................................................................................. 17
22. Propriedades do Smbolo ....................................................................... 18
23. Menus Pop-Up ........................................................................................ 18
24. Behavior ................................................................................................. 19
25. Wireframes ............................................................................................. 19
26. Criar fatias .............................................................................................. 20
27. Criar elementos interativos Parte 1 ...................................................... 20
28. Criar elementos interativos Parte 2 ..................................................... 21
29. Otimize grficos web............................................................................... 21
30. Compresso JPEG e compresso seletiva (tambm especialmente para
o texto) .......................................................................................................... 22
31. Ferramenta Slice .................................................................................... 22
32. Ferramenta Hotspot ................................................................................ 23
33. URL Library ............................................................................................. 23
3
34. Preview ao vivo ....................................................................................... 23
35. Visualizar no navegador ......................................................................... 24
36. Criando PDFs interativos ....................................................................... 25
37. Storyboard Slideshow ............................................................................. 25
38. Criar Mockups HTML .............................................................................. 26
39. AIR Prototype ......................................................................................... 26
40. Exportar grficos para todas as pginas de uma s vez ........................ 27
41. Exportao CSS ..................................................................................... 27
42. Favicon ................................................................................................... 28
43. Gerenciamento de Cores ........................................................................ 28
44. Exportar para a biblioteca do Dreamweaver ........................................... 29
45. Flex Skinning .......................................................................................... 29
46. Exportao MXML .................................................................................. 30
47. Integrao Flash ..................................................................................... 30
48. Flash Copiar e Colar com transparncias ............................................ 31
49. Trabalho em equipe ................................................................................ 31
50. Extenses ............................................................................................... 32
51. PNG: Suporte & Exportao ................................................................... 32
52. Localizar e Substituir............................................................................... 32
02 BOTES NO ESTILO IPHONE .......................................................................................... 33
03 BOTAO NO ESTILO NINTENDO WII ................................................................................. 39
04 TEXTO EM 3D .................................................................................................................... 45
05 SELO DE DESTAQUE ........................................................................................................ 54
06 INTEGRAO ILLUSTRATOR .......................................................................................... 59
07 BOTO ESTILO JEWEL .................................................................................................... 64
08 GOTA DGUA ................................................................................................................... 67
9 CRIANDO SEU CONE RSS ................................................................................................ 71
10 CONE DE CONTATO ........................................................................................................ 77
CONCLUSO ............................................................................................................................. 79

4

INTRODUO
Atualmente muito comum encontrar material que ensine a utilizar um software
em seu computador, basta apenas dedicao e voc passa a conhecer sua
interface, seus botes e menus.
Alguns materiais como os do Apostilando.com casam a explicao com
exemplos reais. Mas para quem est comeando muitas vezes isso
insuficiente.
Ento ns do Apostilando.com, criamos uma srie chamada TRUQUES
MGICOS. A composio da srie ser de apostilas para voc que j baixou
nossas apostilas e precisa exercitar a criatividade.
Cada material da srie trar dentro de um determinado software dicas e
exemplos de uso do software, reforando assim seu aprendizado sobre ele e
despertando sua criatividade. Obrigado e tenha um bom curso.
A srie
A srie em sua primeira edio abordar exemplos para os seguintes
softwares:
Adobe Photoshop;
Adobe Flash
Adobe Dreamweaver
PHP
Microsoft Word
Microsoft Excel
Adobe Photoshop WEB
Corel Draw
HTML & CSS
Javascript
Fireworks
Excel Avanado
5
01 50 VANTAGENS DO FIREWORKS
O Adobe Fireworks hoje a melhor ferramenta de crio para a Internet.
Muitos Web designers opta pelo Photoshop para esta finalidade. Alguns por
costume, outros por comodidade e alguns por no conhecerem a ferramenta.
O especialista Adobe em Web Designer o alemo Andr Reinegger listou 50
comparaes entre Fireworks e Photoshop e porque usar o Fireworks.
Importante, em nenhum momento ele diz que o Photoshop no serve para
WEB, ele apenas lista o porqu o Fireworks melhor para esta funo.
O texto a seguir foi traduzido por Bruno vila, um dos mais respeitados Web
Designers do Brasil.
1. Alinhamento Preciso com Pixels

Em Propriedades, tanto a posio X e Y, bem como a largura e a altura de
um objeto so mostrados. Isso permite a fcil edio de qualquer objeto na
pgina com preciso de pixel. Primeiro, as mudanas podem ser feitas
rapidamente e com preciso at 1 pixel. Esses valores podem ser lidos
facilmente na hora da montagem e criao do CSS e HTML
Tempo estimado: alguns segundos
Os valores no painel de propriedades s podem ser vistos, mas no editados
diretamente. As mudanas podem ser imprecisas utilizando apenas o mouse
movimentando o objeto.
Tempo estimado: segundos at minutos
6
2. Quick Infos

Uma dica com informaes exibido quando passamos o cursor sobre o
objeto. Ao trabalhar com guias, mantenha pressionada a tecla shift para
mostrar as distncias entre as guias.
Muito conveniente!
No est disponvel.
3. Retngulos arredondados

Afora o fato de que os retngulos so vetores reais que podem ser
modificadas precisamente sobre as propriedades, h a possibilidade de mais
tarde, alterar facilmente o arredondamento das bordas a qualquer momento.
H uma ferramenta retngulo arredondado, onde o valor do raio deve ser
definido primeiro. Voc s v o resultado depois de desenhar o retngulo. Uma
vez estabelecida, as curvas s podem ser modificadas de forma muito
demorada e imprecisa com o Direct-Selection-Tool.
7
4. Largura de linha e cor de preenchimento

A cor de preenchimento, traado e largura de linha do contorno pode ser
ajustada rapidamente no painel de propriedades. O mesmo se aplica texturas /
padres.
Todas as mudanas para a cor de preenchimento, cor de contorno, peso da
linha, textura, etc., devem ser adicionados e alterados em caixas de dilogo
adicionais. Essas caixas de dilogo so confusas, no so to eficientes,
requerem mais cliques do mouse e cada seleo complica ainda mais a paleta
de camadas.
5. Gradientes

Gradientes simples e preciso facilmente editados de uma maneira
confortvel e intuitiva. H tambm vrios tipos de gradiente disponveis.
A ferramenta Gradiente no muito intuitiva e tem um longo processo para
produzir a inclinao desejada. .
8
6. Dithering gradients

No Fireworks possvel ativar a funo dithering para gradientes. Isso
aumenta a qualidade do JPG, PNG e GIF de forma significativa.
Muito conveniente!
Somente disponvel para a ferramenta de gradiente, o que no intuitivo.
No disponvel para o layer effects gradient.
No est disponvel
7. Layer Styles e modos de mistura

O Fireworks tem uma camada de estilos e modos de mistura. O Fireworks
oferece quase o dobro de modos de mistura comparado ao Photoshop. Os
modos de mistura e os efeitos tambm so bastante fceis de selecionar assim
como a mudana na paleta de propriedades.
Estilos de camada devem ser selecionados na paleta camadas. Um ajuste
das configuraes s pode ser feito com uma caixa de dilogo extra. Voc
deve usar o painel Camadas para acessar essas configuraes, o que torna
9
mais demorado.
8. Escala sem distoro

O Fireworks oferece a ferramenta de dimensionamento de 9 fatias em
escala, sem a distoro de objetos. Voc tambm pode dimensionar objetos
com bordas arredondada, ou reas protegidas usando a ferramenta de
dimensionamento.
Para dimensionar objetos, sem distoro, eles devem primeiro ser cortados
em vrios pedaos, em seguida, a parte do meio escalonado e em seguida
as camadas individuais so empilhadas.
9. Funes Alinhar

A paleta de alinhamento no Fireworks muito extensa Os objetos podem ser
alinhados em relao ao outro ou em relao tela. Voc tambm pode
10
facilmente redimensionar, combinar altura e largura entre objetos, organizar os
objetos horizontalmente e verticalmente com base em percentual ou valor de
pixel.
No disponvel Photoshop oferece apenas as opes padro para alinhar
e organizar.
10. Objetos Ocultos

Se voc passar o cursor sobre um objeto selecionado destacado em
vermelho. Depois que um objeto selecionado, exibido em azul. O mesmo
vale para a ferramenta de subseo. Graas ferramenta de seleo de fundo,
ainda possvel selecionar os objetos que so completamente obscurecidos
por outros elementos.
A seleo no to intuitiva como no Fireworks. Mais uma vez, voc deve
procurar a paleta de camadas, a fim de encontrar objetos escondidos. No h
nenhuma maneira de selecionar objetos ocultos, sem realmente olhar para a
paleta de layers.
11
11. Alinhar texto ao redor de uma imagem

muito fcil anexar texto em um vetor alinhando o texto em torno de uma
imagem.
Para colocar o texto ao redor uma imagem so necessrias vrias caixas de
texto. um processo muito mais complicado.
12. Uso de caracteres especiais

Fireworks contm um recurso especial para criar textos. Fireworks contm
uma paleta de caracteres especiais que pode ser facilmente utilizado para
inserir caracteres especiais.
Muito conveniente!
No disponvel
12
13. Modelos para o Layout Grades, banners

H todos os tipos de modelos teis para documentos, tais como banners
em todos os formatos, cones de aplicativos, layouts, grades, etc.
Muito conveniente!
No h modelos. Todos os modelos devem ser criados ou baixados atravs
de pesquisa na internet.

14. Painel Camadas (Layers)

O painel Layers no Fireworks no uma parte central de trabalho. muito
raro que o trabalho deva ser feito utilizando apenas o painel de camadas. Os
itens selecionados na tela so mostrados em azul, mudando para vermelho
13
quando selecionado.
No Photoshop, trabalhar com camadas essencial. Sem o painel de
camadas voc no pode fazer praticamente nada. Para cada mudana,
precisamos de um estilo de camada ou uma camada de ajuste. Com o tempo,
o painel de camadas vai ficando cada vez mais inflado e difcil acompanhar.
Muito tempo gasto quando se trabalha com este painel, no sendo a maneira
mais eficiente de trabalhar. Tambm difcil obter uma viso geral do
documento a partir deste painel j que a cada mudana faz crescer em
tamanho.
15. States-Panel (para MouseOver e Interatividade)

Isto especialmente importante para os elementos de navegao com
diferentes estados. O Fireworks oferece o painel States que permite visualizar
os diversos estados em uma paleta nica. Desta forma, muitos estados podem
ser definidos e vistos em uma rea e so posteriormente exportados, ao
mesmo tempo.
No disponvel Photoshop no uma ferramenta de layout, por isso esse
recurso est completamente ausente. Para isso feito uma gambiarra pelo
usurio, criando o estado em diferente camadas e alterando a visibilidade das
camadas.
14
16. Camadas de compartilhamento entre os estados e as
pginas

Outra caracterstica legal do Fireworks a capacidade de compartilhar
camadas entre os estados ou pginas. Isso permite que voc transfira uma
nova camada criada com alguns cliques do mouse em pginas selecionadas ou
estados. Se o elemento alterado depois, ele automaticamente ajustado em
todas as pginas ou estados.
No disponvel
17. Painel Pginas

Como os sites so constitudos por vrias subpginas, obviamente
importante pensar em pginas na hora da criao tambm. Fireworks oferece
um painel de pginas para fazer isso. Isto torna muito fcil alternar entre as
pginas durante o processo de design alm de criar links entre as pginas.
15
Usando Fn + seta voc pode mover-se rapidamente entre as pginas tambm.
recurso est completamente ausente. Usurios tentam resolver isso criando e
alterando a visibilidade da camada ou criando vrios arquivos.
18. Master Page (alteraes em todas as subpginas)

No Fireworks h uma pgina principal como no InDesign. possvel levar
todos os elementos de design que se repetem em cada pgina. Assim, as
mudanas entre pginas fcil de fazer.
recurso est completamente ausente. cansativo ter que fazer todas as
alteraes para cada simples subpgina.
16
19. Usando estilos

Para repetidos elementos de layout voc pode definir estilos. Semelhante a
CSS, possvel alterar a aparncia de um estilo alterando diversos elementos
repetidos de uma vez s. Alm disso, j existe uma ampla gama de bonitos
estilos pr-definidos que voc pode adaptar e usar.
H tambm uma variedade de estilos, mas as funes so muito
rudimentares. Para resolver esse problema Smart-objects pode ser usado. Os
objetos inteligentes so semelhantes aos smbolos do Fireworks.
20.Elementos de interface do usurio

Todos os elementos de interface padro que aparecem em web design esto
na biblioteca comum do Fireworks. Alguns podem at mesmo ser exportados
17
como verdadeiros elementos HTML para serem usados no navegador. Com o
arrastar e soltar eles podem ser movidos a partir da biblioteca e colocado sobre
a tela. Usando a ferramenta de 9 fatias podem ser facilmente dimensionados
para o tamanho desejado. H muitos outros elementos teis na biblioteca
comum como cones, barras de menu, flex-componentes, etc. Alm disso, seus
prprios itens podem ser armazenados permanentemente na biblioteca para
ser usado em vrios projetos.
No Photoshop, o uso de elementos da interface do usurio muito
complicado. Voc deve copi-los de outros sites ao tirar screenshots e colar.
Ento voc tem que cort-los e traz-los de volta para o tamanho necessrio,
tendo que dividir em vrias partes, escalonar e posicionar.
21. Symbols

Symbols (Smbolos) no Fireworks so como o Symbols do Flash. Elas so
criadas atravs de F8, h opo de escolher entre grficos, animao e
smbolos de boto, e eles tambm acabam na biblioteca de documentos. Os
smbolos so bem adaptados para o uso de cones e elementos da interface do
usurio. Alm disso, estes smbolos podem ser levados facilmente com copiar
e colar para o Flash.
Muito conveniente!
O recurso comparvel de smbolos em PS se chama Smart Objects. Em
termos de screendesign, os Symbols tm uma gama muito maior de recursos
18
que o Smart Objects.
No est disponvel
22. Propriedades do Smbolo

Graas s propriedades do smbolo, todos os atributos de um smbolo, como
smbolo de valores, o status de cones e elementos da interface do usurio
pode ser facilmente alterado.
No disponvel
23. Menus Pop-Up

Ambos os menus horizontal e vertical do tipo drop-down podem ser criados
no Fireworks com poucos cliques. Estes so baseados em CSS e Javascript.
Muito conveniente!
No est disponvel
19
24. Behavior

O behavior do painel funciona de forma semelhante ao Dreamweaver. Com
ele, eventos de Javascript, tais como o rollover, troca de imagens, barras de
navegao podem ser criados.
Very convenient! Muito conveniente!
No est disponvel
25. Wireframes

No Fireworks possvel criar wireframes. O Fireworks oferece modelos para
wireframes, podendo adicionar biblioteca comum manualmente para poder
usar em documentos.
Muito conveniente!
No est disponvel

20
26. Criar fatias

Usando a ferramenta Slice pode-se dividir o projeto em elementos
individuais. O painel de propriedades permite posicionar, dimensionar com
exatido de pixel e nomear cada slice (fatia). possvel definir estados
mouseover para os slices. Voc tambm pode definir os atributos da fatia na
transferncia em html, tais como a fixao de metas para o texto alternativo.
Antes de exportar voc pode definir cada fatia como imagem em primeiro
plano, imagem de fundo ou HTML.
O projeto pode ser dividido em segmentos que utilizam a ferramenta slice
(fatia). As propriedades s podem ser ajustados em uma janela separada com
poucas opes.
27. Criar elementos interativos Parte 1

Utilizando cortes, estados e pginas facilmente possvel definir reas como
elementos interativos com mouseover, Javascript e hiperlinks. Assim,
21
possvel criar o prottipo perfeito de um site para o cliente.
Muito conveniente!
No est disponvel
28. Criar elementos interativos Parte 2

Fatias pode ser definidas como HTML, que permite que elementos interativos
sejam inseridos. Isto permite criar prottipos totalmente funcionais, websites
completos com animaes em Flash, vdeo, Google Maps e assim por diante.
Muito conveniente!
No est disponvel
29. Otimize grficos web

muito prtico otimizar utilizando o seu painel. Dentro deste painel, voc
tem acesso rpido a todas as opes de otimizao para cada fatia individual.
22
Alm disso voc pode ver imediatamente os resultados na visualizao.
Tempo estimado: alguns segundos.
"Save for Web & Devices"tem que ser usado um de cada vez.
Tempo estimado: segundos at minutos.
30. Compresso J PEG e compresso seletiva (tambm
especialmente para o texto)

sabido que o Fireworks gera uma melhor qualidade de JPG em relao a
compresso do arquivo. Alm disso, possvel criar compresses
selecionadas para JPG em Fireworks. Existe ainda uma opo especial
especificamente para o texto que permite que o texto seja excludo da
compresso.
Muito conveniente!
No est disponvel
31. Ferramenta Slice

possvel exportar fatias individuais ou apenas reas especficas dentro de
um documento do Fireworks.
Muito conveniente!
No est disponvel
23
32. Ferramenta Hotspot

A ferramenta Hotspot permite ao usurio criar vrios links em uma nica
imagem, desenhando reas de hotspot retangular, circular ou poligonal.
Muito conveniente!
No est disponvel
33. URL Library

Hyperlinks usados dentro de um documento do Fireworks podem ser
armazenados em uma biblioteca de URL para acessar rapidamente em caso
de reutilizao.
Muito conveniente!
No est disponvel
34. Preview ao vivo

24
Fireworks contm um "preview" onde voc pode visualizar sua pgina web
com elementos interativos, incluindo estados, grficos otimizados e
mouseovers. Voc no tem que export-los e abrir no navegador para
visualizar esses elementos.
Muito conveniente!
No est disponvel
35. Visualizar no navegador

F12 (Alt + F12 no Mac) ir gerar uma verso HTML da pgina e apresent-
lo com todos os grficos otimizados no Browser. A combinao de teclas Shift
+ Alt + F12 vai alm e cria um preview de todas as pginas no navegador.
Assim, voc pode clicar em links, testar MouseOver e verificar todas as
caractersticas de suas pginas web.
Muito conveniente!
No est disponvel

25
36. Criando PDFs interativos

Com um nico clique do mouse todas as pginas vinculadas podem ser
exportadas como um PDF interativo. Voc pode fornecer a seus clientes um
PDF interativo, com navegao completa. Isso permite um rpido feedback dos
clientes ao desenvolver um projeto.
Como no possvel trabalhar com vrias pginas no Photoshop, cada
pgina deve ser exportada individualmente e combinadas em um arquivo PDF
como um processo separado. Em seguida, as ligaes entre as pginas
devem ser criadas manualmente, o que muito demorado.
37. Storyboard Slideshow

Imagens de pginas web podem ser convertidos para serem mostrados
como uma apresentao em Flash. Isto torna mais fcil criar uma apresentao
do site.
Muito conveniente!
No est disponvel
26
38. Criar Mockups HTML

O Fireworks pode criar pginas HTML usando o recurso de exportao de
HTML. Ele cria pginas web com base em tabelas que podem ser enviados
para um servidor. Voc pode, ento, enviar ao cliente um hiperlink, para
visualizar o site durante o processo de desenvolvimento. Este processo
funciona to bem, que voc vai ter que lembrar o cliente que este
simplesmente um prottipo, no o site concludo.
Muito conveniente!
No est disponvel
39. AIR Prototype

Prottipos AIR (Adobe Integrated Runtime) podem ser gerados facilmente.
Eles podem se comportar como widgets j incluindo livre flutuao no desktop
com elementos interativos.
Muito conveniente!
No est disponvel

27
40. Exportar grficos para todas as pginas de uma s vez

Usando as vrias opes, como "Somente imagens", "Camada de
arquivos", "Estados de arquivos" e "Pginas de arquivos", voc pode exportar
todos os grficos que voc precisa para o seu site ao mesmo tempo.
No est disponvel

41. Exportao CSS

Usando a exportao, possvel exportar HTML e completar arquivos CSS
para seu site. Esta funo um pouco complicada e deve ser otimizada pela
Adobe.
Muito conveniente!
No est disponvel
28
42. Favicon

possvel salvar um grfico diretamente no formato favicon, que pode ser
usado como cone de favoritos no seu site.
Muito conveniente!
No est disponvel
43. Gerenciamento de Cores

No disponvel, pois no necessrio. No Fireworks voc cria grficos no
monitor para o monitor e no para impressos.
No Disponvel
Ao usar o Photoshop preciso ter cuidado para usar o perfil de cor correto
para o documento.

29
44. Exportar para a biblioteca do Dreamweaver

Frequentemente usado para edio de websites, os componentes podem ser
exportados para uso no Dreamweaver como itens da Biblioteca-DW.
Muito conveniente!
No est disponvel
45. Flex Skinning

O Fireworks oferece uma categoria de "flex-componentes" em sua biblioteca
geral. Esta biblioteca contm componentes padro do Flex adequado para Flex
Skinning.
Muito conveniente!
No est disponvel
30
46. Exportao MXML

Nas configuraes de exportao, existe a opo de exportar MXML.
Juntamente com a capacidade de criar componentes Flex, voc pode exportar
diretamente do cdigo MXML, facilitando a transformao para Rich Internet
Applications em Flex.
Muito conveniente!
No est disponvel

47. Integrao Flash

possvel trazer grficos, animaes e botes criados no Fireworks, atravs
do copiar e colar ou arrastar e soltar diretamente para o Flash. Isto tambm se
aplica a qualquer outro elemento grfico. Fireworks tambm pode armazenar
arquivos nativos SWF.
Muito conveniente!
No est disponvel
31
48. Flash Copiar e Colar com transparncias

Os grficos criados no Fireworks pode ser facilmente copiados, colados ou
arrastados do Fireworks para o Flash. Todas as transparncias e efeitos so
preservados.
Muito conveniente!
No disponvel. As imagens podem ser copiadas e coladas para o Flash,
mas toda a transparncia perdida.
49. Trabalho em equipe

Quando se trabalha em projetos de equipe voc pode substituir a biblioteca
de documentos, smbolos e cores facilmente uns com os outros para que todos
os membros da equipe sejam capazes de trabalhar com os mesmos elementos
e estilos.
Muito conveniente!
No est disponvel

32
50. Extenses

Para o Fireworks, existem inmeras extenses que ampliam o programa
permitindo funes adicionais
Apenas algumas extenses disponveis na Web

51. PNG: Suporte & Exportao

Fireworks suporta 8, 24 e 32 Bit PNG com transparncia alfa.
Conveniente
Photoshop suporta apenas PNG 8 e 24 bits.
52. Localizar e Substituir

33
No Fireworks, existe um recurso muito poderoso chamado "Localizar e
substituir". O painel correspondente permite pesquisar a pgina atual, uma
seleo especial ou vrios arquivos e substituir o texto, a fonte, uma cor, uma
URL e assim por diante. Isto torna possvel pesquisar um monte de arquivos
de uma s vez e fazer alteraes ou substituir os elementos.
Muito conveniente economiza muito tempo!
No est disponvel

Como pode ser visto acima, a anlise foi feita por um profissional gabaritado e
com experincia para falar sobre o assunto. Nas prximas pginas vamos
explorar um pouco mais sobre esta fantstica ferramenta.
02 BOTES NO ESTILO IPHONE
Inicie um novo arquivo com dimenso de 550x398 px e preencha-o com uma
cor #333333.

Depois desenhe um retngulo com 100px de altura e com a mesma largura do
palco de seu projeto.
34

Preencha-o com o seguinte gradiente.

35

Crie agora um retngulo de cantos arredondados com90x40 pixels e 6 de
arredondamento.

Aplique ao seu boto o seguinte gradiente.
36

Vamos agora aplicar os seguintes efeitos Photoshop Live effects.

37

Colocar a cor do stroke como #222222.
38

Adicione sue texto.

Aplique o seguinte efeito.
39

03 BOTAO NO ESTILO NINTENDO WII
Uma das formas de se chamar ateno na Internet de forma visual sem
parecer to diferente. Vamos neste exemplo aprender a criar um boto como o
do console de vdeo game Nintendo WII.
Inicie um novo arquivo no Fireworks e desenhe uma elipse.
Preencha-a com branco
Aplique um stroke na cor #999999 e 1 px de largura.
40

Copie e cole sua circunferncia, a cpia ficara por cima da branca.

Clique no menu Modify, Transform, Numeric Transform e defina o valor em
95%.

41
Preenha com um gradiente radia de #FFFFFF para #999999.

Deixe com um Fetaher 2

Posicione a barra de seu gradiente da seguinte forma.

Selecione a esfera modificada e a duplique, depois a diminua.

Preencha com seguinte gradiente de #FFFFFF para #FFFFFF mas com o da
direita em 0% de opacidade.
42

Selecione novamente a esfera que foi diminuda para 95%. Duplique-o
novamente e deixe-o no topo da pilha.

Diminua ele para 90%.
Preencha-o de branco.
43

Usando a ferramenta elipse desenhe uma elipse muito grande para que ela
forme um arco sobre o objeto duplicado.

Selecione ambas as circunferncias e clique no menu Modify, Combine Paths,
Punch.
44

Aplique um gradiente no objeto de branco com 50% de opacidade na esquerda
e 25% de opacidade na direita.

Mantenha a rgua de gradiente conforma a imagem abaixo.

Acrescente um texto e aplique um sombra nele.
45

04 TEXTO EM 3D
Crie um novo arquivo, desenhe um retngulo e preencha-o com um gradiente
linear de cinza para branco.

Adicione um texto.
46

Com a ferramenta de distoro deixe seu texto semelhante a imagem.

Adicione 2 px de contorno na cor branca. Como estamos como texto preciso
utilizar um efeito. Use o Photoshop Live Effects.
47

Clique sobre seu texto com o boto direito do mouse e escolha Convert to
Paths.
Selecione todo seu texto e com boto direito escolha a opo Ungroup.
48

Clique no boto para escolha de estilos, escolha Shadows e depois Solid
Shadow. Configure conforme a imagem.

Ser necessrio acertar a ordem das letras pelo painel de Layers.
49

Deixe da seguinte forma.
50

Selecione todas as letras, clique na galeria de filtros Shadow and Glow,
escolha Inner Shadow.

51

Duplique o texto, Aplique um efeito de brilho de -50% e diminua a opacidade
para 10%.

52

Pela paleta Layers arraste a copia selecionada para baixo do primeiro texto e
posicione conforma a imagem.

Crie mais uma copia do texto retire os efeitos e preencha de preto.
53

Aplique nele um Gaussian Blur com valor 5.

Diminua sua opacidade para 50%

54
Agrupe as letras e posicione entre os as outras duas copias.

05 SELO DE DESTAQUE

Inicie um arquivo no Fireworks e importe uma imagem para dentro dele.
Clique na ferramenta estrela e desenhe em sua tela.

55
Mude os pontos de sua imagem conforme a imagem.

Agora preencha a sua forma com seguinte gradiente linear de #DDA600 para
#FFEB77.

Mantenha a rgua da seguinte forma.

Aplique um efeito Drop Shadow com as seguintes configuraes.

Escreva o texto principal no centro de sua forma, preencha com a cor
#DDA600.
56

Copie e cole. Preencha de preto, com as setas direcionais mude para cima
duas vezes e depois atravs no menu Modify Arrange o posicione um para trs
ou mude atravs do painel Layers.

Selecione o texto colorido copie e cole, depois preencha de branco e mova dois
para baixo. Depois mova para trs.
Coloque opacidade em 50% para os textos em preto e branco, para facilitar
clique sobre eles no painel layers.
57

Desenhe uma elipse em sua forma. Se necessrio aumente a forma ou diminua
o texto.
Selecione ambos os objetos e alinhe-os.

Copie e cole a circunferencia.

Diminua o tamanho da copia
Selecione o primeiro texto e a circunferncia menor. Clique no menu Texto
Atach to path
58

Rotacione e mova para que ele fique melhor posicionado.
Repita o processo para o texto de baixo. Clique no menu Text, Reverse
Direction e o posicione na tela.

Para o texto de cima coloque um kerning de 20 e a cor #CA9800.

Para o de baixo um Kerning de 30 a cor #FFF2AA.
59

Selecione agrupe tudo.

06 INTEGRAO ILLUSTRATOR
Primeiramente copie para seu computador o arquivo do mapa em vetor, voc
pode baixa-lo no endereo: http://www.4shared.com/file/Jw48u1fo/world.html.
Inicie um novo arquivo e importe o mapa.
60

Sero importados quatro mapas mundi e mais a tarja. Mantenha apenas o
mapa laranja os demais podem ser apagados bem como a tarja.
Pinte de preto e voc ver que ele possui uam textura de fundo.

Desagrupe de delete todas as camadas at ficar somente a do mapa.
Ainda no preenchimento mude o Edge para HARD.
61

Aplique tambm uma textura Grid 4 com 100%.

Clique em efeitos, Adjust Color, Invert.

62
Novamente na caixa de estilos, Others, Convert to Alpha.
Crie um retngulo e preencha-o com o seguinte gradiente.

Posicione atrs do mapa.

Selecione o mapa e aplique os seguinte.
Mude o Blend Mode para Luminosity.

Aplique um filtro Adjust Color, Color Fill como a imagem.

Um Drop Shadow como a imagem.
63

Experimente mudar a textura do mapa e mudar os blend modes.

64

07 BOTO ESTILO JEWEL
Crie um retngulo com cantos arredondados.

Aplique um gradiente radial de #85C2E8 para #6666FF.

Posicione a rgua de gradiente da seguinte forma.
65

Aplique um efeito de Inner Shadow com as seguintes configuraes.

Copie e cole.
Clique no menu Modify, Transform, Numeric Transform.
Coloque em resize e diminua 2 pixels em relao ao valor atual.

Retire o preenchimento e adicione um contorno de 1 px na cor branca.

Deixe a opacidade do objeto em 35%.
Copie e cole o objeto que possui apenas o contorno.
Preencha a copia de branco e diminua a opacidade para 15%.
66

Com a ferramenta Direct Selection, selecione trs pontos do retngulo Use a
tecla SHIFT.

Pressione DELETE e confirme a caixa.

67
08 GOTA DGUA
Em um novo arquivo importe uma imagem para ficar de background da gora.
No exemplo usei uma folha.
Desenhe uma elipse e com a ferramenta Direct Selection clique nos pontos e
deixe a sua forma como a imagem.

Preencha com a cor #CCCCCC e contorno #B1B1B1.

Mude o preenchimento para um gradiente radial de branco para o cinza j
aplicado. Depois mude a rgua conforme a imagem.
68

Aplique um Inner Shadow com as seguintes configuraes.

Copie e cole a gota e preencha de branco sem contorno e depois diminua o
tamanho. Remova tambm o efeito.

Desenhe um oval grande.

Selecione a gota branca menor e o oval e clique no menu Modify, Combine
Paths Punch.
69

Com a ferramenta Direct Selection, altere um pouco a forma.

Preencha com um gradiente linear de branco para branco pra cinza #CCCCCC
mas com 25% de opacidade.

Deixe a rgua conforme a imagem.
70

Desenhe uma elipse e preencha com preto.
Mantenha a sua layer abaixo da gota.

Preencha com um gradiente radia de preto para branco com um Feather de
valor 4.

Agrupe todos os objetos com exceo do fundo e coloque opacidade de 25%.
71

9 CRIANDO SEU CONE RSS
Inicie um arquivo de 300x300 com fundo branco e desenhe dentro dele um
retngulo de cantos arredondados de 250x250px.
Preencha-o com seguinte gradiente radial de #FFCD57 para #FCA106.

72

Selecione agora a ferramenta Donut e desenhe ela dentro do quadrado.
Ela cria um crculo vazado, ou seja, com um vo, um buraco no meio.

Clique no losango amarelo dentro do circulo e mova-o para deixar a largura da
rosquinha mais curta.
73

Deixe seu circulo com 220 px. Gere uma copia dele e deixe com 150px.

Clique no menu View Rulers para exibir as rguas e trace as seguintes linhas
guias.
74

Desenhe o seguinte retngulo cobrindo o seu objeto.

Selecione o retngulo e as duas formas Donut.
Clique no menu modify, Combine Path Punch.
75

Repita o processo para o lado esquerdo dos semicrculos.

76

Desenhe um pequeno circulo branco.

Aplique um efeito de Drop Shadow com as seguintes configuraes.

77

10 CONE DE CONTATO
Em um novo arquivo do Fireworks, desenhe uma circunferncia e preencha-a
com um gradiente radia azul.
78

Crie um novo circulo menor que o primeiro. Preencha-o com um gradiente de
branco para escuro e o escuro com opacidade em 0%.

Crie agora um sinal de arroba e posicione-o conforme a imagem.
79

Duplique o smbolo de arroba e preencha-o com o mesmo tom de azul escuro
do retngulo maior. Posicione-o abaixo do smbolo branco e mova-o um pouco
para cima e para a direita.

Temos assim o seu cone de smbolo de contato.
CONCLUSO
Com isto finalizamos nossa apostila de Fireworks TRUQUES
MGICOS, se voc quer aprender mais sobre esta fantstica ferramenta e
80
quer aprender a us-la para projetos de criao de web sites conhea nosso
curso Webkit atravs do link: http://apostilando.com/pagina.php?cod=30.

Fireworkstruquesmagicos 130205194459 Phpapp01

Enviado por

Direitos autorais:

Formatos disponíveis

Você também pode gostar

Fireworkstruquesmagicos 130205194459 Phpapp01

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Fireworkstruquesmagicos 130205194459 Phpapp01

Enviado por

Direitos autorais:

Formatos disponíveis

FIREWORKS CS5

Você também pode gostar