SlideShare una empresa de Scribd logo
1 de 80
Descargar para leer sin conexión
FIREWORKS CS5
Í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 para
    o texto) .......................................................................................................... 22
    31. Ferramenta Slice .................................................................................... 22
    32. Ferramenta Hotspot ................................................................................ 23
    33. URL Library............................................................................................. 23




                                                                                                                                                2
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




                                                                                                                                        3
INTRODUÇÃO
Atualmente é muito comum encontrar material que ensine a utilizar um software
em 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á baixou
nossas 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




                                                                           4
01 – 50 VANTAGENS DO FIREWORKS
O 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 mouse
movimentando o objeto.
Tempo estimado: segundos até minutos




                                                                           5
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.
Tempo estimado: segundos até minutos




                                                                            6
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 segundos
   Todas 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.
Tempo estimado: segundos até minutos

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.
Tempo estimado: alguns segundos
   A ferramenta „Gradiente‟ não é muito intuitiva e tem um longo processo para
produzir a inclinação desejada. .




                                                                            7
Tempo estimado: segundos até minutos

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.
Tempo estimado: alguns segundos
  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



                                                                          8
mais demorado.
Tempo estimado: segundos até minutos

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 objetos
com bordas arredondada, ou áreas protegidas usando a ferramenta de
dimensionamento.
Tempo estimado: alguns segundos
   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.
Tempo estimado: segundos até minutos

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




                                                                          9
facilmente redimensionar, combinar altura e largura entre objetos, organizar os
objetos horizontalmente e verticalmente com base em percentual ou valor de
pixel.
Tempo estimado: alguns segundos
    Não disponível – Photoshop oferece apenas as opções padrão para alinhar
e organizar.
Tempo estimado: segundos até minutos

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 obscurecidos
por outros elementos.
Tempo estimado: alguns segundos
  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.
Tempo estimado: segundos até minutos




                                                                            10
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 segundos
  Para colocar o texto ao redor uma imagem são necessárias várias caixas de
texto. É um processo muito mais complicado.
Tempo estimado: segundos até minutos

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 para
inserir caracteres especiais.
Muito conveniente!
  Não disponível




                                                                        11
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



                                                                         12
quando selecionado.
Tempo estimado: alguns segundos
  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.
Tempo estimado: segundos até minutos

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.
Tempo estimado: alguns segundos
  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.
Tempo estimado: segundos até minutos




                                                                             13
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.
Tempo estimado: alguns segundos
   Não disponível
Tempo estimado: segundos até minutos

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.



                                                                           14
Usando Fn + seta você pode mover-se rapidamente entre as páginas também.
Tempo estimado: alguns segundos
  Não disponível – Photoshop não é uma ferramenta de layout, por isso esse
recurso está completamente ausente. Usuários tentam resolver isso criando e
alterando a visibilidade da camada ou criando vários arquivos.
Tempo estimado: segundos até minutos

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.
Tempo estimado: alguns segundos
  Não disponível – Photoshop não é uma ferramenta de layout, por isso esse
recurso está completamente ausente. É cansativo ter que fazer todas as
alterações para cada simples subpágina.
Tempo estimado: segundos até minutos




                                                                        15
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.
Tempo estimado: alguns segundos
    Há também uma variedade de estilos, mas as funções são muito
rudimentares. Para resolver esse problema Smart-objects pode ser usado. Os
objetos inteligentes são semelhantes aos símbolos do Fireworks.
Tempo estimado: segundos até minutos

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




                                                                          16
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.
Tempo estimado: alguns segundos
  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.
Tempo estimado: segundos até minutos

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




                                                                             17
que o Smart Objects.
Não está disponível

22. Propriedades do Símbolo




  Graças às propriedades do símbolo, todos os atributos de um símbolo, como
símbolo de valores, o status de ícones e elementos da interface do usuário
pode ser facilmente alterado.
Tempo estimado: alguns segundos
  Não disponível
Tempo estimado: segundos até minutos

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!
   Não está disponível




                                                                        18
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
navegação podem ser criados.
Very convenient! Muito conveniente!
  Não está disponível

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!
  Não está disponível




                                                                          19
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.
Tempo estimado: alguns segundos
  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.
Tempo estimado: segundos até minutos

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, é



                                                                            20
possível criar o protótipo perfeito de um site para o cliente.
Muito conveniente!
  Não está disponível

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!
  Não está disponível

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.




                                                                           21
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!
  Não está disponível

31. Ferramenta Slice




  É possível exportar fatias individuais ou apenas áreas específicas dentro de
um documento do Fireworks.
Muito conveniente!
  Não está disponível




                                                                           22
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!
  Não está disponível

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!
  Não está disponível

34. Preview ao vivo




                                                                         23
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!
  Não está disponível

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!
  Não está disponível




                                                                                   24
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.
Tempo estimado: alguns segundos
  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!
  Não está disponível



                                                                         25
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!
  Não está disponível

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!
   Não está disponível




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




    Usando as várias opções, como "Somente imagens", "Camada de
arquivos", "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.
Tempo estimado: alguns segundos
  Não está disponível



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!
  Não está disponível




                                                                         27
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!
  Não está disponível

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.




                                                                          28
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!
  Não está disponível

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!
  Não está disponível




                                                                        29
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 Internet
Applications em Flex.
Muito conveniente!
  Não está disponível



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 armazenar
arquivos nativos SWF.
Muito conveniente!
   Não está disponível




                                                                            30
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ão
preservados.
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




                                                                           31
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




                                                                   32
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!
   Não está disponível


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 IPHONE
Inicie 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.




                                                                            33
Preencha-o com o seguinte gradiente.




                                       34
Crie agora um retângulo de cantos arredondados com90x40 pixels e 6 de
arredondamento.




Aplique ao seu botão o seguinte gradiente.




                                                                  35
Vamos agora aplicar os seguintes efeitos Photoshop Live effects.




                                                                   36
Colocar a cor do stroke como #222222.




                                        37
Adicione sue texto.




Aplique o seguinte efeito.




                             38
03 – BOTAO NO ESTILO NINTENDO WII
Uma 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.




                                                                        39
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%.




                                                                      40
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.




                                                                 41
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.




                                                                42
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.




                                                                       43
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.




                                                                      44
04 – TEXTO EM 3D
Crie um novo arquivo, desenhe um retângulo e preencha-o com um gradiente
linear de cinza para branco.




Adicione um texto.




                                                                     45
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.




                                                                       46
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.




                                                                        47
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.




                                                                    48
Deixe da seguinte forma.




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




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




                                                                        51
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.




                                                                          52
Aplique nele um Gaussian Blur com valor 5.




Diminua sua opacidade para 50%




                                             53
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.




                                                                        54
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.




                                                                     55
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.




                                                                           56
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




                                                                      57
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.




                                                                  58
Selecione agrupe tudo.




06 – INTEGRAÇÃO ILLUSTRATOR
Primeiramente 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.




                                                                          59
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.




                                                                    60
Aplique também uma textura Grid 4 com 100%.




Clique em efeitos, Adjust Color, Invert.




                                              61
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.



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




                                                              63
07 – BOTÃO ESTILO JEWEL
Crie um retângulo com cantos arredondados.




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




Posicione a régua de gradiente da seguinte forma.




                                                       64
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%.



                                                                       65
Com a ferramenta Direct Selection, selecione três pontos do retângulo Use a
tecla SHIFT.




Pressione DELETE e confirme a caixa.




                                                                        66
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.




                                                                       67
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.



                                                                     68
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.




                                                                     69
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%.




                                                                       70
9 – CRIANDO SEU ÍCONE RSS
Inicie 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.




                                                                    71
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 da
rosquinha mais curta.




                                                                          72
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.




                                                                         73
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.




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




                                                           75
Desenhe um pequeno circulo branco.




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




                                                                   76
10 – ÍCONE DE CONTATO
Em um novo arquivo do Fireworks, desenhe uma circunferência e preencha-a
com um gradiente radia azul.




                                                                     77
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.




                                                                      78
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




                                                                            79
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.




                                                                          80

Más contenido relacionado

La actualidad más candente (15)

Vindula smart enterprise edition
Vindula smart enterprise editionVindula smart enterprise edition
Vindula smart enterprise edition
 
Apostila de excel avançado com vba
Apostila de excel avançado com vbaApostila de excel avançado com vba
Apostila de excel avançado com vba
 
Fenix Nox 199
Fenix Nox 199Fenix Nox 199
Fenix Nox 199
 
Teste
TesteTeste
Teste
 
Apostila de excel 2007 ok perfeita
Apostila de excel 2007 ok perfeitaApostila de excel 2007 ok perfeita
Apostila de excel 2007 ok perfeita
 
Apostila excel vba completa portugues
Apostila excel vba completa portuguesApostila excel vba completa portugues
Apostila excel vba completa portugues
 
BrOffice - Apostila completa
BrOffice - Apostila completaBrOffice - Apostila completa
BrOffice - Apostila completa
 
Apostila completa de access
Apostila completa de accessApostila completa de access
Apostila completa de access
 
Curso delphi 7 nova
Curso delphi 7 novaCurso delphi 7 nova
Curso delphi 7 nova
 
Photoshop cs3
Photoshop cs3Photoshop cs3
Photoshop cs3
 
Apostila UML
Apostila UML Apostila UML
Apostila UML
 
Br Office Writer
Br Office WriterBr Office Writer
Br Office Writer
 
Flash
Flash Flash
Flash
 
Apostila introducao informatica
Apostila introducao informaticaApostila introducao informatica
Apostila introducao informatica
 
Windows Movie Maker
Windows Movie MakerWindows Movie Maker
Windows Movie Maker
 

Similar a Fireworks truquesmagicos

Dreamweaver cs5 apostila dreamweaver cs5 apostilando.com
Dreamweaver cs5   apostila dreamweaver cs5 apostilando.comDreamweaver cs5   apostila dreamweaver cs5 apostilando.com
Dreamweaver cs5 apostila dreamweaver cs5 apostilando.com
robinhoct
 
Dream weaver 8
Dream weaver 8Dream weaver 8
Dream weaver 8
luizgcruz
 
Apostila dreamweaver-cs5
Apostila dreamweaver-cs5Apostila dreamweaver-cs5
Apostila dreamweaver-cs5
aulaemvideo
 
Tcc fábio oliveira_produção enxuta e layout aplicações de ferramentas computa...
Tcc fábio oliveira_produção enxuta e layout aplicações de ferramentas computa...Tcc fábio oliveira_produção enxuta e layout aplicações de ferramentas computa...
Tcc fábio oliveira_produção enxuta e layout aplicações de ferramentas computa...
Louise Lage
 

Similar a Fireworks truquesmagicos (20)

Dreamweaver cs5 apostila dreamweaver cs5 apostilando.com
Dreamweaver cs5   apostila dreamweaver cs5 apostilando.comDreamweaver cs5   apostila dreamweaver cs5 apostilando.com
Dreamweaver cs5 apostila dreamweaver cs5 apostilando.com
 
Dreamweaver cs5 -_apostilando_com
Dreamweaver cs5 -_apostilando_comDreamweaver cs5 -_apostilando_com
Dreamweaver cs5 -_apostilando_com
 
Apostila fireworks-cs5
Apostila fireworks-cs5Apostila fireworks-cs5
Apostila fireworks-cs5
 
Dream weaver 8
Dream weaver 8Dream weaver 8
Dream weaver 8
 
Aprendendo action script 3.0
Aprendendo action script 3.0Aprendendo action script 3.0
Aprendendo action script 3.0
 
Apostila quiz faber
Apostila quiz faberApostila quiz faber
Apostila quiz faber
 
Caelum html-css-javascript-php
Caelum html-css-javascript-phpCaelum html-css-javascript-php
Caelum html-css-javascript-php
 
Autodesk civil 3 d português (1)
Autodesk civil 3 d português (1)Autodesk civil 3 d português (1)
Autodesk civil 3 d português (1)
 
Aprendendo Action Script 2.0
Aprendendo  Action Script 2.0Aprendendo  Action Script 2.0
Aprendendo Action Script 2.0
 
Apostila dreamweaver-cs5
Apostila dreamweaver-cs5Apostila dreamweaver-cs5
Apostila dreamweaver-cs5
 
Apostila completa actionscript
Apostila completa actionscriptApostila completa actionscript
Apostila completa actionscript
 
Apostila Coreldraw Melhor Free
Apostila Coreldraw   Melhor FreeApostila Coreldraw   Melhor Free
Apostila Coreldraw Melhor Free
 
Manual completo CorelDraw
Manual completo CorelDrawManual completo CorelDraw
Manual completo CorelDraw
 
Come si fa a promuovere con Google - Indice
Come si fa a promuovere con Google - IndiceCome si fa a promuovere con Google - Indice
Come si fa a promuovere con Google - Indice
 
Tcc fábio oliveira_produção enxuta e layout aplicações de ferramentas computa...
Tcc fábio oliveira_produção enxuta e layout aplicações de ferramentas computa...Tcc fábio oliveira_produção enxuta e layout aplicações de ferramentas computa...
Tcc fábio oliveira_produção enxuta e layout aplicações de ferramentas computa...
 
Arduhack rev2
Arduhack rev2Arduhack rev2
Arduhack rev2
 
Photoshop cs3
Photoshop cs3Photoshop cs3
Photoshop cs3
 
Photoshop cs3
Photoshop cs3Photoshop cs3
Photoshop cs3
 
Manual de instalação do software emae setores público, comercial e servi‡os
Manual de instalação do software emae   setores público, comercial e servi‡osManual de instalação do software emae   setores público, comercial e servi‡os
Manual de instalação do software emae setores público, comercial e servi‡os
 
Apostila Android Gratuita
Apostila Android GratuitaApostila Android Gratuita
Apostila Android Gratuita
 

Más de Lucas Cruz

Más de Lucas Cruz (7)

Intro ao eclipse
Intro ao eclipseIntro ao eclipse
Intro ao eclipse
 
Eclipse user guide
Eclipse user guideEclipse user guide
Eclipse user guide
 
Aplicações java com net beans
Aplicações java com net beansAplicações java com net beans
Aplicações java com net beans
 
3294 lógica de programação
3294 lógica de programação3294 lógica de programação
3294 lógica de programação
 
1213 java
1213 java1213 java
1213 java
 
Apostila 1 pc i - estrutura da linguagem
Apostila 1   pc i - estrutura da linguagemApostila 1   pc i - estrutura da linguagem
Apostila 1 pc i - estrutura da linguagem
 
Apostila c++
Apostila c++Apostila c++
Apostila c++
 

Último

Expansão Marítima- Descobrimentos Portugueses século XV
Expansão Marítima- Descobrimentos Portugueses século XVExpansão Marítima- Descobrimentos Portugueses século XV
Expansão Marítima- Descobrimentos Portugueses século XV
lenapinto
 
O estudo do controle motor nada mais é do que o estudo da natureza do movimen...
O estudo do controle motor nada mais é do que o estudo da natureza do movimen...O estudo do controle motor nada mais é do que o estudo da natureza do movimen...
O estudo do controle motor nada mais é do que o estudo da natureza do movimen...
azulassessoria9
 
A EDUCAÇÃO FÍSICA NO NOVO ENSINO MÉDIO: IMPLICAÇÕES E TENDÊNCIAS PROMOVIDAS P...
A EDUCAÇÃO FÍSICA NO NOVO ENSINO MÉDIO: IMPLICAÇÕES E TENDÊNCIAS PROMOVIDAS P...A EDUCAÇÃO FÍSICA NO NOVO ENSINO MÉDIO: IMPLICAÇÕES E TENDÊNCIAS PROMOVIDAS P...
A EDUCAÇÃO FÍSICA NO NOVO ENSINO MÉDIO: IMPLICAÇÕES E TENDÊNCIAS PROMOVIDAS P...
PatriciaCaetano18
 
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...
azulassessoria9
 
Os editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptxOs editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptx
TailsonSantos1
 

Último (20)

Apresentação ISBET Jovem Aprendiz e Estágio 2023.pdf
Apresentação ISBET Jovem Aprendiz e Estágio 2023.pdfApresentação ISBET Jovem Aprendiz e Estágio 2023.pdf
Apresentação ISBET Jovem Aprendiz e Estágio 2023.pdf
 
Sistema de Bibliotecas UCS - Cantos do fim do século
Sistema de Bibliotecas UCS  - Cantos do fim do séculoSistema de Bibliotecas UCS  - Cantos do fim do século
Sistema de Bibliotecas UCS - Cantos do fim do século
 
Polígonos, Diagonais de um Polígono, SOMA DOS ANGULOS INTERNOS DE UM POLÍGON...
Polígonos, Diagonais de um Polígono, SOMA DOS ANGULOS INTERNOS DE UM  POLÍGON...Polígonos, Diagonais de um Polígono, SOMA DOS ANGULOS INTERNOS DE UM  POLÍGON...
Polígonos, Diagonais de um Polígono, SOMA DOS ANGULOS INTERNOS DE UM POLÍGON...
 
Expansão Marítima- Descobrimentos Portugueses século XV
Expansão Marítima- Descobrimentos Portugueses século XVExpansão Marítima- Descobrimentos Portugueses século XV
Expansão Marítima- Descobrimentos Portugueses século XV
 
O estudo do controle motor nada mais é do que o estudo da natureza do movimen...
O estudo do controle motor nada mais é do que o estudo da natureza do movimen...O estudo do controle motor nada mais é do que o estudo da natureza do movimen...
O estudo do controle motor nada mais é do que o estudo da natureza do movimen...
 
Aula prática JOGO-Regencia-Verbal-e-Nominal.pdf
Aula prática JOGO-Regencia-Verbal-e-Nominal.pdfAula prática JOGO-Regencia-Verbal-e-Nominal.pdf
Aula prática JOGO-Regencia-Verbal-e-Nominal.pdf
 
A EDUCAÇÃO FÍSICA NO NOVO ENSINO MÉDIO: IMPLICAÇÕES E TENDÊNCIAS PROMOVIDAS P...
A EDUCAÇÃO FÍSICA NO NOVO ENSINO MÉDIO: IMPLICAÇÕES E TENDÊNCIAS PROMOVIDAS P...A EDUCAÇÃO FÍSICA NO NOVO ENSINO MÉDIO: IMPLICAÇÕES E TENDÊNCIAS PROMOVIDAS P...
A EDUCAÇÃO FÍSICA NO NOVO ENSINO MÉDIO: IMPLICAÇÕES E TENDÊNCIAS PROMOVIDAS P...
 
6ano variação linguística ensino fundamental.pptx
6ano variação linguística ensino fundamental.pptx6ano variação linguística ensino fundamental.pptx
6ano variação linguística ensino fundamental.pptx
 
Poesiamodernismo fase dois. 1930 prosa e poesiapptx
Poesiamodernismo fase dois. 1930 prosa e poesiapptxPoesiamodernismo fase dois. 1930 prosa e poesiapptx
Poesiamodernismo fase dois. 1930 prosa e poesiapptx
 
Monoteísmo, Politeísmo, Panteísmo 7 ANO2.pptx
Monoteísmo, Politeísmo, Panteísmo 7 ANO2.pptxMonoteísmo, Politeísmo, Panteísmo 7 ANO2.pptx
Monoteísmo, Politeísmo, Panteísmo 7 ANO2.pptx
 
Cópia de AULA 2- ENSINO FUNDAMENTAL ANOS INICIAIS - LÍNGUA PORTUGUESA.pptx
Cópia de AULA 2- ENSINO FUNDAMENTAL ANOS INICIAIS - LÍNGUA PORTUGUESA.pptxCópia de AULA 2- ENSINO FUNDAMENTAL ANOS INICIAIS - LÍNGUA PORTUGUESA.pptx
Cópia de AULA 2- ENSINO FUNDAMENTAL ANOS INICIAIS - LÍNGUA PORTUGUESA.pptx
 
Tema de redação - As dificuldades para barrar o casamento infantil no Brasil ...
Tema de redação - As dificuldades para barrar o casamento infantil no Brasil ...Tema de redação - As dificuldades para barrar o casamento infantil no Brasil ...
Tema de redação - As dificuldades para barrar o casamento infantil no Brasil ...
 
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...
Considerando as pesquisas de Gallahue, Ozmun e Goodway (2013) os bebês até an...
 
Aula 25 - A america espanhola - colonização, exploraçãp e trabalho (mita e en...
Aula 25 - A america espanhola - colonização, exploraçãp e trabalho (mita e en...Aula 25 - A america espanhola - colonização, exploraçãp e trabalho (mita e en...
Aula 25 - A america espanhola - colonização, exploraçãp e trabalho (mita e en...
 
Pesquisa Ação René Barbier Livro acadêmico
Pesquisa Ação René Barbier Livro  acadêmicoPesquisa Ação René Barbier Livro  acadêmico
Pesquisa Ação René Barbier Livro acadêmico
 
Introdução às Funções 9º ano: Diagrama de flexas, Valor numérico de uma funçã...
Introdução às Funções 9º ano: Diagrama de flexas, Valor numérico de uma funçã...Introdução às Funções 9º ano: Diagrama de flexas, Valor numérico de uma funçã...
Introdução às Funções 9º ano: Diagrama de flexas, Valor numérico de uma funçã...
 
Os editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptxOs editoriais, reportagens e entrevistas.pptx
Os editoriais, reportagens e entrevistas.pptx
 
Camadas da terra -Litosfera conteúdo 6º ano
Camadas da terra -Litosfera  conteúdo 6º anoCamadas da terra -Litosfera  conteúdo 6º ano
Camadas da terra -Litosfera conteúdo 6º ano
 
TCC_MusicaComoLinguagemNaAlfabetização-ARAUJOfranklin-UFBA.pdf
TCC_MusicaComoLinguagemNaAlfabetização-ARAUJOfranklin-UFBA.pdfTCC_MusicaComoLinguagemNaAlfabetização-ARAUJOfranklin-UFBA.pdf
TCC_MusicaComoLinguagemNaAlfabetização-ARAUJOfranklin-UFBA.pdf
 
Renascimento Cultural na Idade Moderna PDF
Renascimento Cultural na Idade Moderna PDFRenascimento Cultural na Idade Moderna PDF
Renascimento Cultural na Idade Moderna PDF
 

Fireworks truquesmagicos

  • 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 para o texto) .......................................................................................................... 22 31. Ferramenta Slice .................................................................................... 22 32. Ferramenta Hotspot ................................................................................ 23 33. URL Library............................................................................................. 23 2
  • 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 3
  • 4. INTRODUÇÃO Atualmente é muito comum encontrar material que ensine a utilizar um software em 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á baixou nossas 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 4
  • 5. 01 – 50 VANTAGENS DO FIREWORKS O 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 mouse movimentando o objeto. Tempo estimado: segundos até minutos 5
  • 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. Tempo estimado: segundos até minutos 6
  • 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 segundos Todas 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. Tempo estimado: segundos até minutos 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. Tempo estimado: alguns segundos A ferramenta „Gradiente‟ não é muito intuitiva e tem um longo processo para produzir a inclinação desejada. . 7
  • 8. Tempo estimado: segundos até minutos 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. Tempo estimado: alguns segundos 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 8
  • 9. mais demorado. Tempo estimado: segundos até minutos 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 objetos com bordas arredondada, ou áreas protegidas usando a ferramenta de dimensionamento. Tempo estimado: alguns segundos 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. Tempo estimado: segundos até minutos 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 9
  • 10. facilmente redimensionar, combinar altura e largura entre objetos, organizar os objetos horizontalmente e verticalmente com base em percentual ou valor de pixel. Tempo estimado: alguns segundos Não disponível – Photoshop oferece apenas as opções padrão para alinhar e organizar. Tempo estimado: segundos até minutos 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 obscurecidos por outros elementos. Tempo estimado: alguns segundos 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. Tempo estimado: segundos até minutos 10
  • 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 segundos Para colocar o texto ao redor uma imagem são necessárias várias caixas de texto. É um processo muito mais complicado. Tempo estimado: segundos até minutos 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 para inserir caracteres especiais. Muito conveniente! Não disponível 11
  • 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 12
  • 13. quando selecionado. Tempo estimado: alguns segundos 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. Tempo estimado: segundos até minutos 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. Tempo estimado: alguns segundos 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. Tempo estimado: segundos até minutos 13
  • 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. Tempo estimado: alguns segundos Não disponível Tempo estimado: segundos até minutos 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. 14
  • 15. Usando Fn + seta você pode mover-se rapidamente entre as páginas também. Tempo estimado: alguns segundos Não disponível – Photoshop não é uma ferramenta de layout, por isso esse recurso está completamente ausente. Usuários tentam resolver isso criando e alterando a visibilidade da camada ou criando vários arquivos. Tempo estimado: segundos até minutos 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. Tempo estimado: alguns segundos Não disponível – Photoshop não é uma ferramenta de layout, por isso esse recurso está completamente ausente. É cansativo ter que fazer todas as alterações para cada simples subpágina. Tempo estimado: segundos até minutos 15
  • 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. Tempo estimado: alguns segundos Há também uma variedade de estilos, mas as funções são muito rudimentares. Para resolver esse problema Smart-objects pode ser usado. Os objetos inteligentes são semelhantes aos símbolos do Fireworks. Tempo estimado: segundos até minutos 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 16
  • 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. Tempo estimado: alguns segundos 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. Tempo estimado: segundos até minutos 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 17
  • 18. que o Smart Objects. Não está disponível 22. Propriedades do Símbolo Graças às propriedades do símbolo, todos os atributos de um símbolo, como símbolo de valores, o status de ícones e elementos da interface do usuário pode ser facilmente alterado. Tempo estimado: alguns segundos Não disponível Tempo estimado: segundos até minutos 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! Não está disponível 18
  • 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 navegação podem ser criados. Very convenient! Muito conveniente! Não está disponível 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! Não está disponível 19
  • 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. Tempo estimado: alguns segundos 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. Tempo estimado: segundos até minutos 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, é 20
  • 21. possível criar o protótipo perfeito de um site para o cliente. Muito conveniente! Não está disponível 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! Não está disponível 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. 21
  • 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! Não está disponível 31. Ferramenta Slice É possível exportar fatias individuais ou apenas áreas específicas dentro de um documento do Fireworks. Muito conveniente! Não está disponível 22
  • 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! Não está disponível 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! Não está disponível 34. Preview ao vivo 23
  • 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! Não está disponível 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! Não está disponível 24
  • 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. Tempo estimado: alguns segundos 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! Não está disponível 25
  • 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! Não está disponível 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! Não está disponível 26
  • 27. 40. Exportar gráficos para todas as páginas de uma só vez Usando as várias opções, como "Somente imagens", "Camada de arquivos", "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. Tempo estimado: alguns segundos Não está disponível 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! Não está disponível 27
  • 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! Não está disponível 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. 28
  • 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! Não está disponível 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! Não está disponível 29
  • 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 Internet Applications em Flex. Muito conveniente! Não está disponível 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 armazenar arquivos nativos SWF. Muito conveniente! Não está disponível 30
  • 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ão preservados. 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 31
  • 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 32
  • 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! Não está disponível 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 IPHONE Inicie 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. 33
  • 34. Preencha-o com o seguinte gradiente. 34
  • 35. Crie agora um retângulo de cantos arredondados com90x40 pixels e 6 de arredondamento. Aplique ao seu botão o seguinte gradiente. 35
  • 36. Vamos agora aplicar os seguintes efeitos Photoshop Live effects. 36
  • 37. Colocar a cor do stroke como #222222. 37
  • 38. Adicione sue texto. Aplique o seguinte efeito. 38
  • 39. 03 – BOTAO NO ESTILO NINTENDO WII Uma 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. 39
  • 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%. 40
  • 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. 41
  • 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. 42
  • 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. 43
  • 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. 44
  • 45. 04 – TEXTO EM 3D Crie um novo arquivo, desenhe um retângulo e preencha-o com um gradiente linear de cinza para branco. Adicione um texto. 45
  • 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. 46
  • 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. 47
  • 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. 48
  • 49. Deixe da seguinte forma. 49
  • 50. Selecione todas as letras, clique na galeria de filtros Shadow and Glow, escolha Inner Shadow. 50
  • 51. Duplique o texto, Aplique um efeito de brilho de -50% e diminua a opacidade para 10%. 51
  • 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. 52
  • 53. Aplique nele um Gaussian Blur com valor 5. Diminua sua opacidade para 50% 53
  • 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. 54
  • 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. 55
  • 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. 56
  • 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 57
  • 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. 58
  • 59. Selecione agrupe tudo. 06 – INTEGRAÇÃO ILLUSTRATOR Primeiramente 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. 59
  • 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. 60
  • 61. Aplique também uma textura Grid 4 com 100%. Clique em efeitos, Adjust Color, Invert. 61
  • 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. 62
  • 63. Experimente mudar a textura do mapa e mudar os blend modes. 63
  • 64. 07 – BOTÃO ESTILO JEWEL Crie um retângulo com cantos arredondados. Aplique um gradiente radial de #85C2E8 para #6666FF. Posicione a régua de gradiente da seguinte forma. 64
  • 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%. 65
  • 66. Com a ferramenta Direct Selection, selecione três pontos do retângulo Use a tecla SHIFT. Pressione DELETE e confirme a caixa. 66
  • 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. 67
  • 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. 68
  • 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. 69
  • 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%. 70
  • 71. 9 – CRIANDO SEU ÍCONE RSS Inicie 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. 71
  • 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 da rosquinha mais curta. 72
  • 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. 73
  • 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. 74
  • 75. Repita o processo para o lado esquerdo dos semicírculos. 75
  • 76. Desenhe um pequeno circulo branco. Aplique um efeito de Drop Shadow com as seguintes configurações. 76
  • 77. 10 – ÍCONE DE CONTATO Em um novo arquivo do Fireworks, desenhe uma circunferência e preencha-a com um gradiente radia azul. 77
  • 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. 78
  • 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 79
  • 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. 80