FIREWORKS CS5

Multibrasil Download - www.multibrasil.net

NDICENDICE .......................................................................................................................................... 2 INTRODUO .............................................................................................................................. 4

A srie............................................................................................................. 401 50 VANTAGENS DO FIREWORKS ..................................................................................... 5

1. Alinhamento Preciso com Pixels ................................................................. 5 2. Quick Infos .................................................................................................. 6 3. Retngulos arredondados........................................................................... 6 4. Largura de linha e cor de preenchimento ................................................... 7 5. Gradientes .................................................................................................. 7 6. Dithering gradients ...................................................................................... 8 7. Layer Styles e modos de mistura ............................................................... 8 8. Escala sem distoro .................................................................................. 9 9. Funes Alinhar .......................................................................................... 9 10. Objetos Ocultos ...................................................................................... 10 11. Alinhar texto ao redor de uma imagem ................................................... 11 12. Uso de caracteres especiais ................................................................... 11 13. Modelos para o Layout Grades, banners ........................................ 12 14. Painel Camadas (Layers) ....................................................................... 12 15. States-Panel (para MouseOver e Interatividade) .................................... 13 16. Camadas de compartilhamento entre os estados e as pginas ............. 14 17. Painel Pginas ..................................................................................... 14 18. Master Page (alteraes em todas as sub-pginas) ............................... 15 19. Usando estilos ....................................................................................... 16 20.Elementos de interface do usurio .......................................................... 16 21. Symbols .................................................................................................. 17 22. Propriedades do Smbolo ....................................................................... 18 23. Menus Pop-Up ........................................................................................ 18 24. Behavior................................................................................................. 19 25. Wireframes ............................................................................................. 19 26. Criar fatias .............................................................................................. 20 27. Criar elementos interativos Parte 1 ...................................................... 20 28. Criar elementos interativos Parte 2 ..................................................... 21 29. Otimize grficos web............................................................................... 21 30. Compresso JPEG e compresso seletiva (tambm especialmente para o texto) .......................................................................................................... 22 31. Ferramenta Slice .................................................................................... 22 32. Ferramenta Hotspot ................................................................................ 23 33. URL Library............................................................................................. 23

2

34. Preview ao vivo ....................................................................................... 23 35. Visualizar no navegador ......................................................................... 24 36. Criando PDFs interativos ....................................................................... 25 37. Storyboard Slideshow ............................................................................. 25 38. Criar Mockups HTML .............................................................................. 26 39. AIR Prototype ......................................................................................... 26 40. Exportar grficos para todas as pginas de uma s vez ........................ 27 41. Exportao CSS ..................................................................................... 27 42. Favicon ................................................................................................... 28 43. Gerenciamento de Cores ........................................................................ 28 44. Exportar para a biblioteca do Dreamweaver ........................................... 29 45. Flex Skinning .......................................................................................... 29 46. Exportao MXML .................................................................................. 30 47. Integrao Flash ..................................................................................... 30 48. Flash Copiar e Colar com transparncias ............................................ 31 49. Trabalho em equipe ................................................................................ 31 50. Extenses ............................................................................................... 32 51. PNG: Suporte & Exportao ................................................................... 32 52. Localizar e Substituir............................................................................... 3202 BOTES NO ESTILO IPHONE .......................................................................................... 33 03 BOTAO NO ESTILO NINTENDO WII ................................................................................. 39 04 TEXTO EM 3D .................................................................................................................... 45 05 SELO DE DESTAQUE........................................................................................................ 54 06 INTEGRAO ILLUSTRATOR .......................................................................................... 59 07 BOTO ESTILO JEWEL .................................................................................................... 64 08 GOTA DGUA ................................................................................................................... 67 9 CRIANDO SEU CONE RSS ................................................................................................ 71 10 CONE DE CONTATO ........................................................................................................ 77 CONCLUSO ............................................................................................................................. 79

3

INTRODUOAtualmente muito comum encontrar material que ensine a utilizar um software em seu computador, basta apenas dedicao e voc passa a conhecer sua interface, seus botes e menus. Alguns materiais como os do Apostilando.com casam a explicao com exemplos reais. Mas para quem est comeando muitas vezes isso insuficiente. Ento ns do Apostilando.com, criamos uma srie chamada TRUQUES MGICOS. A composio da srie ser de apostilas para voc que j baixou nossas apostilas e precisa exercitar a criatividade. Cada material da srie trar dentro de um determinado software dicas e exemplos de uso do software, reforando assim seu aprendizado sobre ele e despertando sua criatividade. Obrigado e tenha um bom curso.

A srieA srie em sua primeira edio abordar exemplos para os seguintes softwares: Adobe Photoshop; Adobe Flash Adobe Dreamweaver PHP Microsoft Word Microsoft Excel Adobe Photoshop WEB Corel Draw HTML & CSS Javascript Fireworks Excel Avanado

4

01 50 VANTAGENS DO FIREWORKSO Adobe Fireworks hoje a melhor ferramenta de crio para a Internet. Muitos Web designers opta pelo Photoshop para esta finalidade. Alguns por costume, outros por comodidade e alguns por no conhecerem a ferramenta. O especialista Adobe em Web Designer o alemo Andr Reinegger listou 50 comparaes entre Fireworks e Photoshop e porque usar o Fireworks. Importante, em nenhum momento ele diz que o Photoshop no serve para WEB, ele apenas lista o porqu o Fireworks melhor para esta funo. O texto a seguir foi traduzido por Bruno vila, um dos mais respeitados Web Designers do Brasil.

1. Alinhamento Preciso com Pixels

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

5

2. Quick Infos

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

3. Retngulos arredondados

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

6

4. Largura de linha e cor de preenchimento

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

5. Gradientes

Gradientes simples e preciso facilmente editados de uma maneira confortvel e intuitiva. H tambm vrios tipos de gradiente disponveis. Tempo estimado: alguns segundos A ferramenta Gradiente no muito intuitiva e tem um longo processo para produzir a inclinao desejada. .

7

Tempo estimado: segundos at minutos

6. Dithering gradients

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

7. Layer Styles e modos de mistura

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

8

mais demorado. Tempo estimado: segundos at minutos

8. Escala sem distoro

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

9. Funes Alinhar

A paleta de alinhamento no Fireworks muito extensa Os objetos podem ser alinhados em relao ao outro ou em relao tela. Voc tambm pode

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 No disponvel Photoshop oferece apenas as opes padro 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 subseo. Graas ferramenta de seleo de fundo, ainda possvel selecionar os objetos que so completamente obscurecidos por outros elementos. Tempo estimado: alguns segundos A seleo no to intuitiva como no Fireworks. Mais uma vez, voc deve procurar a paleta de camadas, a fim de encontrar objetos escondidos. No h nenhuma maneira de selecionar objetos ocultos, sem realmente olhar para a paleta de layers. Tempo estimado: segundos at minutos

10

11. Alinhar texto ao redor de uma imagem

muito fcil 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 so necessrias vrias caixas de texto. um processo muito mais complicado. Tempo estimado: segundos at minutos

12. Uso de caracteres especiais

Fireworks contm um recurso especial para criar textos. Fireworks contm uma paleta de caracteres especiais que pode ser facilmente utilizado para inserir caracteres especiais. Muito conveniente! No disponvel

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! No h modelos. Todos os modelos devem ser criados ou baixados atravs de pesquisa na internet.

14. Painel Camadas (Layers)

O painel Layers no Fireworks no uma parte central de trabalho. muito raro que o trabalho deva ser feito utilizando apenas o painel de camadas. Os itens selecionados na tela so mostrados em azul, mudando para vermelho

12

quando selecionado. Tempo estimado: alguns segundos No Photoshop, trabalhar com camadas essencial. Sem o painel de camadas voc no pode fazer praticamente nada. Para cada mudana, precisamos de um estilo de camada ou uma camada de ajuste. Com o tempo, o painel de camadas vai ficando cada vez mais inflado e difcil acompanhar. Muito tempo gasto quando se trabalha com este painel, no sendo a maneira mais eficiente de trabalhar. Tambm difcil obter uma viso geral do documento a partir deste painel j que a cada mudana faz crescer em tamanho. Tempo estimado: segundos at minutos

15. States-Panel (para MouseOver e Interatividade)

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

13

16. Camadas de compartilhamento entre os estados e as pginas

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

17. Painel Pginas

Como os sites so constitudos por vrias subpginas, obviamente importante pensar em pginas na hora da criao tambm. Fireworks oferece um painel de pginas para fazer isso. Isto torna muito fcil alternar entre as pginas durante o processo de design alm de criar links entre as pginas.

14

Usando Fn + seta voc pode mover-se rapidamente entre as pginas tambm. Tempo estimado: alguns segundos No disponvel Photoshop no uma ferramenta de layout, por isso esse recurso est completamente ausente. Usurios tentam resolver isso criando e alterando a visibilidade da camada ou criando vrios arquivos. Tempo estimado: segundos at minutos

18. Master Page (alteraes em todas as subpginas)

No Fireworks h uma pgina principal como no InDesign. possvel levar todos os elementos de design que se repetem em cada pgina. Assim, as mudanas entre pginas fcil de fazer. Tempo estimado: alguns segundos No disponvel Photoshop no uma ferramenta de layout, por isso esse recurso est completamente ausente. cansativo ter que fazer todas as alteraes para cada simples subpgina. Tempo estimado: segundos at minutos

15

19. Usando estilos

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

20.Elementos de interface do usurio

Todos os elementos de interface padro que aparecem em web design esto na biblioteca comum do Fireworks. Alguns podem at mesmo ser exportados

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. Alm disso, seus prprios itens podem ser armazenados permanentemente na biblioteca para ser usado em vrios projetos. Tempo estimado: alguns segundos No Photoshop, o uso de elementos da interface do usurio muito complicado. Voc deve copi-los de outros sites ao tirar screenshots e colar. Ento voc tem que cort-los e traz-los de volta para o tamanho necessrio, tendo que dividir em vrias partes, escalonar e posicionar. Tempo estimado: segundos at minutos

21. Symbols

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

17

que o Smart Objects. No est disponvel

22. Propriedades do Smbolo

Graas s propriedades do smbolo, todos os atributos de um smbolo, como smbolo de valores, o status de cones e elementos da interface do usurio pode ser facilmente alterado. Tempo estimado: alguns segundos No disponvel 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 so baseados em CSS e Javascript. Muito conveniente! No est disponvel

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 navegao podem ser criados. Very convenient! Muito conveniente! No est disponvel

25. Wireframes

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

19

26. Criar fatias

Usando a ferramenta Slice pode-se dividir o projeto em elementos individuais. O painel de propriedades permite posicionar, dimensionar com exatido de pixel e nomear cada slice (fatia). possvel definir estados mouseover para os slices. Voc tambm pode definir os atributos da fatia na transferncia em html, tais como a fixao de metas para o texto alternativo. Antes de exportar voc pode definir cada fatia como imagem em primeiro plano, imagem de fundo ou HTML. 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 opes. Tempo estimado: segundos at minutos

27. Criar elementos interativos Parte 1

Utilizando cortes, estados e pginas facilmente possvel definir reas como elementos interativos com mouseover, Javascript e hiperlinks. Assim,

20

possvel criar o prottipo perfeito de um site para o cliente. Muito conveniente! No est disponvel

28. Criar elementos interativos Parte 2

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

29. Otimize grficos web

muito prtico otimizar utilizando o seu painel. Dentro deste painel, voc tem acesso rpido a todas as opes de otimizao para cada fatia individual.

21

Alm disso voc pode ver imediatamente os resultados na visualizao. Tempo estimado: alguns segundos. "Save for Web & Devices"tem que ser usado um de cada vez. Tempo estimado: segundos at minutos.

30. Compresso JPEG e compresso seletiva (tambm especialmente para o texto)

sabido que o Fireworks gera uma melhor qualidade de JPG em relao a compresso do arquivo. Alm disso, possvel criar compresses

selecionadas para JPG em Fireworks. Existe ainda uma opo especial especificamente para o texto que permite que o texto seja excludo da compresso. Muito conveniente! No est disponvel

31. Ferramenta Slice

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

22

32. Ferramenta Hotspot

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

33. URL Library

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

34. Preview ao vivo

23

Fireworks contm um "preview" onde voc pode visualizar sua pgina web com elementos interativos, incluindo estados, grficos otimizados e

mouseovers. Voc no tem que export-los e abrir no navegador para visualizar esses elementos. Muito conveniente! No est disponvel

35. Visualizar no navegador

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

24

36. Criando PDFs interativos

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

37. Storyboard Slideshow

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

25

38. Criar Mockups HTML

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

39. AIR Prototype

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

26

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

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

41. Exportao CSS

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

27

42. Favicon

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

43. Gerenciamento de Cores

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

28

44. Exportar para a biblioteca do Dreamweaver

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

45. Flex Skinning

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

29

46. Exportao MXML

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

47. Integrao Flash

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

30

48. Flash Copiar e Colar com transparncias

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

49. Trabalho em equipe

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

31

50. Extenses

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

51. PNG: Suporte & Exportao

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

52. Localizar e Substituir

32

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

Como pode ser visto acima, a anlise foi feita por um profissional gabaritado e com experincia para falar sobre o assunto. Nas prximas pginas vamos explorar um pouco mais sobre esta fantstica ferramenta.

02 BOTES NO ESTILO IPHONEInicie um novo arquivo com dimenso de 550x398 px e preencha-o com uma cor #333333.

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

33

Preencha-o com o seguinte gradiente.

34

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

Aplique ao seu boto 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 WIIUma das formas de se chamar ateno na Internet de forma visual sem parecer to diferente. Vamos neste exemplo aprender a criar um boto como o do console de vdeo game Nintendo WII. Inicie um novo arquivo no Fireworks e desenhe uma elipse. Preencha-a com branco Aplique um stroke na cor #999999 e 1 px de largura.

39

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

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

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 diminuda 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 circunferncias 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 rgua de gradiente conforma a imagem abaixo.

Acrescente um texto e aplique um sombra nele.

44

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

Adicione um texto.

45

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

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

46

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

47

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

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

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 DESTAQUEInicie 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 rgua da seguinte forma.

Aplique um efeito Drop Shadow com as seguintes configuraes.

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

55

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

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

56

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

Copie e cole a circunferencia.

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

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 INTEGRAO ILLUSTRATORPrimeiramente copie para seu computador o arquivo do mapa em vetor, voc pode baixa-lo no endereo: http://www.4shared.com/file/Jw48u1fo/world.html. Inicie um novo arquivo e importe o mapa.

59

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

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

60

Aplique tambm uma textura Grid 4 com 100%.

Clique em efeitos, Adjust Color, Invert.

61

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

Posicione atrs do mapa.

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

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

Um Drop Shadow como a imagem.

62

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

63

07 BOTO ESTILO JEWELCrie um retngulo com cantos arredondados.

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

Posicione a rgua de gradiente da seguinte forma.

64

Aplique um efeito de Inner Shadow com as seguintes configuraes.

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

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

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

65

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

Pressione DELETE e confirme a caixa.

66

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

Preencha com a cor #CCCCCC e contorno #B1B1B1.

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

67

Aplique um Inner Shadow com as seguintes configuraes.

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

Desenhe um oval grande.

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

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 rgua 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 exceo do fundo e coloque opacidade de 25%.

70

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

71

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

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

72

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

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

73

Desenhe o seguinte retngulo cobrindo o seu objeto.

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

74

Repita o processo para o lado esquerdo dos semicrculos.

75

Desenhe um pequeno circulo branco.

Aplique um efeito de Drop Shadow com as seguintes configuraes.

76

10 CONE DE CONTATOEm um novo arquivo do Fireworks, desenhe uma circunferncia 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 smbolo de arroba e preencha-o com o mesmo tom de azul escuro do retngulo maior. Posicione-o abaixo do smbolo branco e mova-o um pouco para cima e para a direita.

Temos assim o seu cone de smbolo de contato.

CONCLUSOCom MGICOS isto finalizamos nossa apostila de Fireworks TRUQUES

79

Multibrasil Download - www.multibrasil.net

80