fireworks truquesmagicos

5/10/2018 Fireworks Truquesmagicos - slidepdf.com

http://slidepdf.com/reader/full/fireworks-truquesmagicos-55a0cbbc0ea42 1/80

FIREWORKS CS5



2

ÍNDICEÍNDICE .......................................................................................................................................... 2 INTRODUÇÃO .............................................................................................................................. 4

A série............................................................................................................. 4 01 – 50 VANTAGENS DO FIREWORKS ..................................................................................... 5

1. Alinhamento Preciso com Pixels ................................................................. 5 2. Quick Infos .................................................................................................. 6 3. Retângulos 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 distorção .................................................................................. 9 9. Funções 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 páginas ............. 14 17. Painel “Páginas” ..................................................................................... 14 18. Master Page (alterações em todas as sub-páginas) ............................... 15 19. Usando estilos ....................................................................................... 16 20.Elementos de interface do usuário .......................................................... 16 21. Symbols .................................................................................................. 17 22. Propriedades do Símbolo ....................................................................... 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 gráficos web............................................................................... 21 30. Compressão JPEG e compressão seletiva (também especialmente parao 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 PDF‟s interativos ....................................................................... 25 37. Storyboard Slideshow ............................................................................. 25 38. Criar Mockups HTML .............................................................................. 26 39. AIR Prototype ......................................................................................... 26 40. Exportar gráficos para todas as páginas de uma só vez ........................ 27 41. Exportação CSS ..................................................................................... 27 42. Favicon ................................................................................................... 28 43. Gerenciamento de Cores ........................................................................ 28 44. Exportar para a biblioteca do Dreamweaver ........................................... 29 45. Flex Skinning .......................................................................................... 29 46. Exportação MXML .................................................................................. 30 47. Integração Flash ..................................................................................... 30 48. Flash – Copiar e Colar com transparências ............................................ 31 49. Trabalho em equipe ................................................................................ 31 50. Extensões ............................................................................................... 32 51. PNG: Suporte & Exportação ................................................................... 32 52. Localizar e Substituir............................................................................... 32

02 – BOTÕES NO ESTILO IPHONE .......................................................................................... 33 03 – BOTAO NO ESTILO NINTENDO WII ................................................................................. 39 04 – TEXTO EM 3D .................................................................................................................... 45 05 – SELO DE DESTAQUE ........................................................................................................ 54 06 – INTEGRAÇÃO ILLUSTRATOR .......................................................................................... 59 07 – BOTÃO ESTILO JEWEL .................................................................................................... 64 08 – GOTA D’ÁGUA................................................................................................................... 67 9 – CRIANDO SEU ÍCONE RSS ................................................................................................ 71 10 – ÍCONE DE CONTATO ........................................................................................................ 77 CONCLUSÃO ............................................................................................................................. 79



4

INTRODUÇÃO

Atualmente é muito comum encontrar material que ensine a utilizar um softwareem seu computador, basta apenas dedicação e você passa a conhecer sua

interface, seus botões e menus.

Alguns materiais como os do Apostilando.com “casam” a explicação com

exemplos reais. Mas para quem está começando muitas vezes isso é

insuficiente.

Então nós do Apostilando.com, criamos uma série chamada TRUQUES

MÁGICOS. A composição da série será de apostilas para você que já baixounossas apostilas e precisa exercitar a criatividade.

Cada material da série trará dentro de um determinado software dicas e

exemplos de uso do software, reforçando assim seu aprendizado sobre ele e

despertando sua criatividade. Obrigado e tenha um bom curso.

A série

A série em sua primeira edição 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 Avançado



5

01 – 50 VANTAGENS DO FIREWORKSO Adobe Fireworks é hoje a melhor ferramenta de crição para a Internet.

Muitos Web designers opta pelo Photoshop para esta finalidade. Alguns por

costume, outros por comodidade e alguns por não conhecerem a ferramenta.

O especialista Adobe em Web Designer o alemão André Reinegger listou 50

comparações entre Fireworks e Photoshop e porque usar o Fireworks.

Importante, em nenhum momento ele diz que o Photoshop não serve para

WEB, ele apenas lista o porquê o Fireworks é melhor para esta função.

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 posição X e Y, bem como a largura e a altura de

um objeto são mostrados. Isso permite a fácil edição de qualquer objeto na

página com precisão de pixel. Primeiro, as mudanças podem ser feitas

rapidamente e com precisão até 1 pixel. Esses valores podem ser lidos

facilmente na hora da montagem e criação do CSS e HTML

Tempo estimado: alguns segundos

Os valores no painel de propriedades só podem ser vistos, mas não editados

diretamente. As mudanças podem ser imprecisas utilizando apenas o mousemovimentando o objeto.

Tempo estimado: segundos até minutos



6

2. Quick Infos

Uma dica com informações é exibido quando passamos o cursor sobre o

objeto. Ao trabalhar com guias, mantenha pressionada a tecla shift para

mostrar as distâncias entre as guias.

Muito conveniente!Não está disponível.

3. Retângulos arredondados

Afora o fato de que os retângulos são 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.Tempo estimado: alguns segundos

Há uma ferramenta retângulo arredondado, onde o valor do raio deve ser

definido primeiro. Você só vê o resultado depois de desenhar o retângulo. 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, traçado e largura de linha do contorno pode ser

ajustada rapidamente no painel de propriedades. O mesmo se aplica texturas /

padrões.

Tempo estimado: alguns segundosTodas as mudanças para a cor de preenchimento, cor de contorno, peso da

linha, textura, etc., devem ser adicionados e alterados em caixas de diálogo

adicionais. Essas caixas de diálogo são confusas, não são tão eficientes,

requerem mais cliques do mouse e cada seleção complica ainda mais a paleta

de camadas.


5. Gradientes

Gradientes é simples e preciso facilmente editados de uma maneira

confortável e intuitiva. Há também vários tipos de gradiente disponíveis.


A ferramenta „Gradiente‟ não é muito intuitiva e tem um longo processo para

produzir a inclinação desejada. .



8


6. Dithering gradients

No Fireworks é possível ativar a função dithering para gradientes. Isso

aumenta a qualidade do JPG, PNG e GIF de forma significativa.

Muito conveniente!

Somente disponível para a ferramenta de gradiente, o que não é intuitivo.

Não disponível para o layer effects gradient.

Não está disponível

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 também são bastante fáceis de selecionar assim

como a mudança na paleta de propriedades.


Estilos de camada devem ser selecionados na paleta camadas. Um ajuste

das configurações só pode ser feito com uma caixa de diálogo extra. Você

deve usar o painel Camadas para acessar essas configurações, o que torna



9

mais demorado.


8. Escala sem distorção

O Fireworks oferece a ferramenta de dimensionamento de 9 fatias em

escala, sem a distorção de objetos. Você também pode dimensionar objetoscom bordas arredondada, ou áreas protegidas usando a ferramenta de

dimensionamento.


Para dimensionar objetos, sem distorção, eles devem primeiro ser cortados

em vários pedaços, em seguida, a parte do meio é escalonado e em seguida

as camadas individuais são empilhadas.


9. Funções Alinhar

A paleta de alinhamento no Fireworks é muito extensa Os objetos podem ser

alinhados em relação ao outro ou em relação à tela. Você também pode



10

facilmente redimensionar, combinar altura e largura entre objetos, organizar os

objetos horizontalmente e verticalmente com base em percentual ou valor de

pixel.


Não disponível – Photoshop oferece apenas as opções padrão 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 subseção. Graças à ferramenta de seleção de fundo,

ainda é possível selecionar os objetos que são completamente obscurecidospor outros elementos.


A seleção não é tão intuitiva como no Fireworks. Mais uma vez, você deve

procurar a paleta de camadas, a fim de encontrar objetos escondidos. Não 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 fácil anexar texto em um vetor alinhando o texto em torno de uma

imagem.

Tempo estimado: alguns segundosPara colocar o texto ao redor uma imagem são necessárias várias caixas de

texto. É um processo muito mais complicado.


12. Uso de caracteres especiais

Fireworks contém um recurso especial para criar textos. Fireworks contém

uma paleta de caracteres especiais que pode ser facilmente utilizado parainserir caracteres especiais.

Muito conveniente!

Não disponível



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!

Não há modelos. Todos os modelos devem ser criados ou baixados através

de pesquisa na internet.

14. Painel Camadas (Layers)

O painel Layers no Fireworks não é uma parte central de trabalho. É muito

raro que o trabalho deva ser feito utilizando apenas o painel de camadas. Os

itens selecionados na tela são mostrados em azul, mudando para vermelho



13

quando selecionado.


No Photoshop, trabalhar com camadas é essencial. Sem o painel de

camadas você não pode fazer praticamente nada. Para cada mudança,

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 é difícil acompanhar.

Muito tempo é gasto quando se trabalha com este painel, não sendo a maneira

mais eficiente de trabalhar. Também é difícil obter uma visão geral do

documento a partir deste painel já que a cada mudança faz crescer em

tamanho.


15. States-Panel (para MouseOver e Interatividade)

Isto é especialmente importante para os elementos de navegação 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 são posteriormente exportados, ao

mesmo tempo.


Não disponível – Photoshop não é uma ferramenta de layout, por isso esse

recurso está completamente ausente. Para isso é feito uma gambiarra pelo

usuário, criando o estado em diferente camadas e alterando a visibilidade das

camadas.




14

16. Camadas de compartilhamento entre os estados e as páginas

Outra característica legal do Fireworks é a capacidade de compartilhar

camadas entre os estados ou páginas. Isso permite que você transfira uma

nova camada criada com alguns cliques do mouse em páginas selecionadas ou

estados. Se o elemento é alterado depois, ele é automaticamente ajustado em

todas as páginas ou estados.


Não disponível


17. Painel “Páginas”

Como os sites são constituídos por várias subpáginas, é obviamente

importante pensar em páginas na hora da criação também. Fireworks oferece

um painel de páginas para fazer isso. Isto torna muito fácil alternar entre as

páginas durante o processo de design além de criar links entre as páginas.



15

Usando Fn + seta você pode mover-se rapidamente entre as páginas também.



recurso está completamente ausente. Usuários tentam resolver isso criando e

alterando a visibilidade da camada ou criando vários arquivos.


18. Master Page (alterações em todas as subpáginas)

No Fireworks há uma página principal como no InDesign. É possível levar

todos os elementos de design que se repetem em cada página. Assim, as

mudanças entre páginas é fácil de fazer.



recurso está completamente ausente. É cansativo ter que fazer todas as

alterações para cada simples subpágina.




16

19. Usando estilos

Para repetidos elementos de layout você pode definir estilos. Semelhante a

CSS, é possível alterar a aparência de um estilo alterando diversos elementos

repetidos de uma vez só. Além disso, já existe uma ampla gama de bonitos

estilos pré-definidos que você pode adaptar e usar.


Há também uma variedade de estilos, mas as funções são muito

rudimentares. Para resolver esse problema Smart-objects pode ser usado. Osobjetos inteligentes são semelhantes aos símbolos do Fireworks.


20.Elementos de interface do usuário

Todos os elementos de interface padrão que aparecem em web design estão

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. Além disso, seus

próprios itens podem ser armazenados permanentemente na biblioteca para

ser usado em vários projetos.


No Photoshop, o uso de elementos da interface do usuário é muito

complicado. Você deve copiá-los de outros sites ao tirar screenshots e colar.

Então você tem que cortá-los e trazê-los de volta para o tamanho necessário,tendo que dividir em várias partes, escalonar e posicionar.


21. Symbols

Symbols (Símbolos) no Fireworks são como o Symbols do Flash. Elas são

criadas através de F8, há opção de escolher entre gráficos, animação e

símbolos de botão, e eles também acabam na biblioteca de documentos. Os

símbolos são bem adaptados para o uso de ícones e elementos da interface do

usuário. Além disso, estes símbolos podem ser levados facilmente com copiar

e colar para o Flash.

Muito conveniente!

O recurso comparável de símbolos em PS se chama Smart Objects. Em

termos de screendesign, os Symbols têm uma gama muito maior de recursos



18

que o Smart Objects.


22. Propriedades do Símbolo

Graças às propriedades do símbolo, todos os atributos de um símbolo, comosímbolo de valores, o status de ícones e elementos da interface do usuário

pode ser facilmente alterado.


Não disponível


23. Menus Pop-Up

Ambos os menus horizontal e vertical do tipo drop-down podem ser criados

no Fireworks com poucos cliques. Estes são baseados em CSS e Javascript.

Muito conveniente!




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 denavegação podem ser criados.

Very convenient! Muito conveniente!


25. Wireframes

No Fireworks é possível criar wireframes. O Fireworks oferece modelos para

wireframes, podendo adicionar à biblioteca comum manualmente para poder

usar em documentos.

Muito conveniente!




20

26. Criar fatias

Usando a ferramenta Slice pode-se dividir o projeto em elementos

individuais. O painel de propriedades permite posicionar, dimensionar com

exatidão de pixel e nomear cada slice (fatia). Ë possível definir estados

mouseover para os slices. Você também pode definir os atributos da fatia na

transferência em html, tais como a fixação 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 opções.


27. Criar elementos interativos – Parte 1

Utilizando cortes, estados e páginas é facilmente possível definir áreas como

elementos interativos com mouseover, Javascript e hiperlinks. Assim, é



21

possível criar o protótipo perfeito de um site para o cliente.

Muito conveniente!


28. Criar elementos interativos – Parte 2

Fatias pode ser definidas como HTML, que permite que elementos interativos

sejam inseridos. Isto permite criar protótipos totalmente funcionais, websites

completos com animações em Flash, vídeo, Google Maps e assim por diante.

Muito conveniente!


29. Otimize gráficos web

É muito prático otimizar utilizando o seu painel. Dentro deste painel, você

tem acesso rápido a todas as opções de otimização para cada fatia individual.



22

Além disso você pode ver imediatamente os resultados na visualização.

Tempo estimado: alguns segundos.

"Save for Web & Devices"tem que ser usado um de cada vez.

Tempo estimado: segundos até minutos.

30. Compressão JPEG e compressão seletiva (também especialmente para o texto)

É sabido que o Fireworks gera uma melhor qualidade de JPG em relação a

compressão do arquivo. Além disso, é possível criar compressões

selecionadas para JPG em Fireworks. Existe ainda uma opção especial

especificamente para o texto que permite que o texto seja excluído da

compressão.Muito conveniente!


31. Ferramenta Slice

É possível exportar fatias individuais ou apenas áreas específicas dentro de

um documento do Fireworks.

Muito conveniente!




23

32. Ferramenta Hotspot

A ferramenta Hotspot permite ao usuário criar vários links em uma única

imagem, desenhando áreas de hotspot retangular, circular ou poligonal.

Muito conveniente!


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 reutilização.

Muito conveniente!


34. Preview ao vivo



24

Fireworks contém um "preview" onde você pode visualizar sua página web

com elementos interativos, incluindo estados, gráficos otimizados e

mouseovers. Você não tem que exportá-los e abrir no navegador para

visualizar esses elementos.

Muito conveniente!


35. Visualizar no navegador

F12 (Alt + F12 no Mac) irá gerar uma versão HTML da página e apresentá-

lo com todos os gráficos otimizados no Browser. A combinação de teclas Shift

+ Alt + F12 vai além e cria um preview de todas as páginas no navegador.Assim, você pode clicar em links, testar MouseOver e verificar todas as

características de suas páginas web.

Muito conveniente!




25

36. Criando PDF’s interativos

Com um único clique do mouse todas as páginas vinculadas podem ser

exportadas como um PDF interativo. Você pode fornecer a seus clientes um

PDF interativo, com navegação completa. Isso permite um rápido feedback dos

clientes ao desenvolver um projeto.


Como não é possível trabalhar com várias páginas no Photoshop, cada

página deve ser exportada individualmente e combinadas em um arquivo PDF

como um processo separado. Em seguida, as ligações entre as páginas

devem ser criadas manualmente, o que é muito demorado.Tempo estimado: segundos até minutos

37. Storyboard Slideshow

Imagens de páginas web podem ser convertidos para serem mostrados

como uma apresentação em Flash. Isto torna mais fácil criar uma apresentação

do site.

Muito conveniente!




26

38. Criar Mockups HTML

O Fireworks pode criar páginas HTML usando o recurso de exportação de

HTML. Ele cria páginas web com base em tabelas que podem ser enviados

para um servidor. Você pode, então, enviar ao cliente um hiperlink, para

visualizar o site durante o processo de desenvolvimento. Este processo

funciona tão bem, que você vai ter que lembrar o cliente que este é

simplesmente um protótipo, não é o site concluído.

Muito conveniente!


39. AIR Prototype

Protótipos AIR (Adobe Integrated Runtime) podem ser gerados facilmente.Eles podem se comportar como widgets já incluindo livre flutuação no desktop

com elementos interativos.

Muito conveniente!




27

40. Exportar gráficos para todas as páginas de uma só vez

Usando as várias opções, como "Somente imagens", "Camada dearquivos", "Estados de arquivos" e "Páginas de arquivos", você pode exportar

todos os gráficos que você precisa para o seu site ao mesmo tempo.



41. Exportação CSS

Usando a exportação, é possível exportar HTML e completar arquivos CSS

para seu site. Esta função é um pouco complicada e deve ser otimizada pela

Adobe.

Muito conveniente!




28

42. Favicon

É possível salvar um gráfico diretamente no formato favicon, que pode ser

usado como ícone de favoritos no seu site.

Muito conveniente!


43. Gerenciamento de Cores

Não disponível, pois não é necessário. No Fireworks você cria gráficos no

monitor para o monitor e não para impressos.

Não Disponível

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 edição de websites, os componentes podem ser

exportados para uso no Dreamweaver como itens da Biblioteca-DW.Muito conveniente!


45. Flex Skinning

O Fireworks oferece uma categoria de "flex-componentes" em sua biblioteca

geral. Esta biblioteca contém componentes padrão do Flex adequado para Flex

Skinning.Muito conveniente!




30

46. Exportação MXML

Nas configurações de exportação, existe a opção de exportar MXML.

Juntamente com a capacidade de criar componentes Flex, você pode exportar

diretamente do código MXML, facilitando a transformação para Rich InternetApplications em Flex.

Muito conveniente!


47. Integração Flash

É possível trazer gráficos, animações e botões criados no Fireworks, através

do copiar e colar ou arrastar e soltar diretamente para o Flash. Isto também se

aplica a qualquer outro elemento gráfico. Fireworks também pode armazenararquivos nativos SWF.

Muito conveniente!




31

48. Flash – Copiar e Colar com transparências

Os gráficos criados no Fireworks pode ser facilmente copiados, colados ou

arrastados do Fireworks para o Flash. Todas as transparências e efeitos sãopreservados.

Muito conveniente!

Não disponível. As imagens podem ser copiadas e coladas para o Flash,

mas toda a transparência é perdida.

49. Trabalho em equipe

Quando se trabalha em projetos de equipe você pode substituir a biblioteca

de documentos, símbolos 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!Não está disponível



32

50. Extensões

Para o Fireworks, existem inúmeras extensões que ampliam o programa

permitindo funções adicionais

Apenas algumas extensões disponíveis na Web

51. PNG: Suporte & Exportação

Fireworks suporta 8, 24 e 32 Bit PNG com transparência 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 página atual, uma

seleção especial ou vários arquivos e substituir o texto, a fonte, uma cor, uma

URL e assim por diante. Isto torna possível pesquisar um monte de arquivos

de uma só vez e fazer alterações ou substituir os elementos.

Muito conveniente – economiza muito tempo!


Como pode ser visto acima, a análise foi feita por um profissional gabaritado e

com experiência para falar sobre o assunto. Nas próximas páginas vamos

explorar um pouco mais sobre esta fantástica ferramenta.

02 – BOTÕES NO ESTILO IPHONEInicie um novo arquivo com dimensão de 550x398 px e preencha-o com uma

cor #333333.

Depois desenhe um retângulo 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 retângulo de cantos arredondados com90x40 pixels e 6 de

arredondamento.

Aplique ao seu botão 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 WIIUma das formas de se chamar atenção na Internet é de forma visual sem

parecer tão diferente. Vamos neste exemplo aprender a criar um botão como o

do console de vídeo 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 circunferência, a cópia 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 diminuída 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 circunferências 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 régua de gradiente conforma a imagem abaixo.

Acrescente um texto e aplique um sombra nele.



45

04 – TEXTO EM 3DCrie um novo arquivo, desenhe um retângulo e preencha-o com um gradiente

linear de cinza para branco.

Adicione um texto.



46

Com a ferramenta de distorção 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 botão direito do mouse e escolha Convert to

Paths.

Selecione todo seu texto e com botão direito escolha a opção Ungroup.



48

Clique no botão para escolha de estilos, escolha Shadows e depois Solid

Shadow. Configure conforme a imagem.

Será necessário 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 régua da seguinte forma.

Aplique um efeito Drop Shadow com as seguintes configurações.

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 através no menu Modify Arrange o posicione um para trás

ou mude através do painel Layers.

Selecione o texto colorido copie e cole, depois preencha de branco e mova dois

para baixo. Depois mova para trás.

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 necessário 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 circunferência 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 – INTEGRAÇÃO ILLUSTRATORPrimeiramente copie para seu computador o arquivo do mapa em vetor, você

pode baixa-lo no endereço: http://www.4shared.com/file/Jw48u1fo/world.html.

Inicie um novo arquivo e importe o mapa.

http://www.4shared.com/file/Jw48u1fo/world.html






60

Serão 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 também uma textura Grid 4 com 100%.

Clique em efeitos, Adjust Color, Invert.



62

Novamente na caixa de estilos, Others, Convert to Alpha.

Crie um retângulo e preencha-o com o seguinte gradiente.

Posicione atrás 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 – BOTÃO ESTILO JEWELCrie um retângulo com cantos arredondados.

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

Posicione a régua de gradiente da seguinte forma.



65

Aplique um efeito de Inner Shadow com as seguintes configurações.

Copie e cole.

Clique no menu Modify, Transform, Numeric Transform.

Coloque em resize e diminua 2 pixels em relação 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 três pontos do retângulo Use a

tecla SHIFT.

Pressione DELETE e confirme a caixa.



67

08 – GOTA D’ÁGUA 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 régua conforme a imagem.



68

Aplique um Inner Shadow com as seguintes configurações.

Copie e cole a gota e preencha de branco sem contorno e depois diminua o

tamanho. Remova também 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 régua 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 exceção do fundo e coloque opacidade de 25%.



71

9 – CRIANDO SEU ÍCONE RSSInicie um arquivo de 300x300 com fundo branco e desenhe dentro dele um

retângulo 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 círculo vazado, ou seja, com um vão, um buraco no meio.

Clique no losango amarelo dentro do circulo e mova-o para deixar a largura darosquinha 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 réguas e trace as seguintes linhas

guias.



74

Desenhe o seguinte retângulo cobrindo o seu objeto.

Selecione o retângulo e as duas formas Donut.

Clique no menu modify, Combine Path Punch.



75

Repita o processo para o lado esquerdo dos semicírculos.



76

Desenhe um pequeno circulo branco.

Aplique um efeito de Drop Shadow com as seguintes configurações.



77

10 – ÍCONE DE CONTATOEm um novo arquivo do Fireworks, desenhe uma circunferência 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 símbolo de arroba e preencha-o com o mesmo tom de azul escuro

do retângulo maior. Posicione-o abaixo do símbolo branco e mova-o um pouco

para cima e para a direita.

Temos assim o seu ícone de símbolo de contato.

CONCLUSÃO

Com isto finalizamos nossa apostila de Fireworks TRUQUES

MÁGICOS, se você quer aprender mais sobre esta fantástica ferramenta e



80

quer aprender a usá-la para projetos de criação de web sites conheça nosso

curso Webkit através do link: http://apostilando.com/pagina.php?cod=30.

http://apostilando.com/pagina.php?cod=30




fireworks truquesmagicos

Documents