Académique Documents
Professionnel Documents
Culture Documents
NDICE
NDICE .......................................................................................................................................... 2 INTRODUO .............................................................................................................................. 4
A srie............................................................................................................. 4
01 50 VANTAGENS DO FIREWORKS ..................................................................................... 5
1. Alinhamento Preciso com Pixels ................................................................. 5 2. Quick Infos .................................................................................................. 6 3. Retngulos arredondados........................................................................... 6 4. Largura de linha e cor de preenchimento ................................................... 7 5. Gradientes .................................................................................................. 7 6. Dithering gradients ...................................................................................... 8 7. Layer Styles e modos de mistura ............................................................... 8 8. Escala sem distoro .................................................................................. 9 9. Funes Alinhar .......................................................................................... 9 10. Objetos Ocultos ...................................................................................... 10 11. Alinhar texto ao redor de uma imagem ................................................... 11 12. Uso de caracteres especiais ................................................................... 11 13. Modelos para o Layout Grades, banners ........................................ 12 14. Painel Camadas (Layers) ....................................................................... 12 15. States-Panel (para MouseOver e Interatividade) .................................... 13 16. Camadas de compartilhamento entre os estados e as pginas ............. 14 17. Painel Pginas ..................................................................................... 14 18. Master Page (alteraes em todas as sub-pginas) ............................... 15 19. Usando estilos ....................................................................................... 16 20.Elementos de interface do usurio .......................................................... 16 21. Symbols .................................................................................................. 17 22. Propriedades do Smbolo ....................................................................... 18 23. Menus Pop-Up ........................................................................................ 18 24. Behavior................................................................................................. 19 25. Wireframes ............................................................................................. 19 26. Criar fatias .............................................................................................. 20 27. Criar elementos interativos Parte 1 ...................................................... 20 28. Criar elementos interativos Parte 2 ..................................................... 21 29. Otimize grficos web............................................................................... 21 30. Compresso JPEG e compresso seletiva (tambm especialmente para o texto) .......................................................................................................... 22 31. Ferramenta Slice .................................................................................... 22 32. Ferramenta Hotspot ................................................................................ 23 33. URL Library............................................................................................. 23
34. Preview ao vivo ....................................................................................... 23 35. Visualizar no navegador ......................................................................... 24 36. Criando PDFs interativos ....................................................................... 25 37. Storyboard Slideshow ............................................................................. 25 38. Criar Mockups HTML .............................................................................. 26 39. AIR Prototype ......................................................................................... 26 40. Exportar grficos para todas as pginas de uma s vez ........................ 27 41. Exportao CSS ..................................................................................... 27 42. Favicon ................................................................................................... 28 43. Gerenciamento de Cores ........................................................................ 28 44. Exportar para a biblioteca do Dreamweaver ........................................... 29 45. Flex Skinning .......................................................................................... 29 46. Exportao MXML .................................................................................. 30 47. Integrao Flash ..................................................................................... 30 48. Flash Copiar e Colar com transparncias ............................................ 31 49. Trabalho em equipe ................................................................................ 31 50. Extenses ............................................................................................... 32 51. PNG: Suporte & Exportao ................................................................... 32 52. Localizar e Substituir............................................................................... 32
02 BOTES NO ESTILO IPHONE .......................................................................................... 33 03 BOTAO NO ESTILO NINTENDO WII ................................................................................. 39 04 TEXTO EM 3D .................................................................................................................... 45 05 SELO DE DESTAQUE........................................................................................................ 54 06 INTEGRAO ILLUSTRATOR .......................................................................................... 59 07 BOTO ESTILO JEWEL .................................................................................................... 64 08 GOTA DGUA ................................................................................................................... 67 9 CRIANDO SEU CONE RSS ................................................................................................ 71 10 CONE DE CONTATO ........................................................................................................ 77 CONCLUSO ............................................................................................................................. 79
INTRODUO
Atualmente muito comum encontrar material que ensine a utilizar um software em seu computador, basta apenas dedicao e voc passa a conhecer sua interface, seus botes e menus. Alguns materiais como os do Apostilando.com casam a explicao com exemplos reais. Mas para quem est comeando muitas vezes isso insuficiente. Ento ns do Apostilando.com, criamos uma srie chamada TRUQUES MGICOS. A composio da srie ser de apostilas para voc que j baixou nossas apostilas e precisa exercitar a criatividade. Cada material da srie trar dentro de um determinado software dicas e exemplos de uso do software, reforando assim seu aprendizado sobre ele e despertando sua criatividade. Obrigado e tenha um bom curso.
A srie
A srie em sua primeira edio abordar exemplos para os seguintes softwares: Adobe Photoshop; Adobe Flash Adobe Dreamweaver PHP Microsoft Word Microsoft Excel Adobe Photoshop WEB Corel Draw HTML & CSS Javascript Fireworks Excel Avanado
01 50 VANTAGENS DO FIREWORKS
O Adobe Fireworks hoje a melhor ferramenta de crio para a Internet. Muitos Web designers opta pelo Photoshop para esta finalidade. Alguns por costume, outros por comodidade e alguns por no conhecerem a ferramenta. O especialista Adobe em Web Designer o alemo Andr Reinegger listou 50 comparaes entre Fireworks e Photoshop e porque usar o Fireworks. Importante, em nenhum momento ele diz que o Photoshop no serve para WEB, ele apenas lista o porqu o Fireworks melhor para esta funo. O texto a seguir foi traduzido por Bruno vila, um dos mais respeitados Web Designers do Brasil.
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
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
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. .
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
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
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
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
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
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
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
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.
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
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
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
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
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
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
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
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
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
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
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
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
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.
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
possvel exportar fatias individuais ou apenas reas especficas dentro de um documento do Fireworks. Muito conveniente! No est disponvel
22
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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.
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
Fireworks suporta 8, 24 e 32 Bit PNG com transparncia alfa. Conveniente Photoshop suporta apenas PNG 8 e 24 bits.
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.
Depois desenhe um retngulo com 100px de altura e com a mesma largura do palco de seu projeto.
33
34
35
36
37
38
39
40
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.
42
Usando a ferramenta elipse desenhe uma elipse muito grande para que ela forme um arco sobre o objeto duplicado.
43
Aplique um gradiente no objeto de branco com 50% de opacidade na esquerda e 25% de opacidade na direita.
44
04 TEXTO EM 3D
Crie um novo arquivo, desenhe um retngulo e preencha-o com um gradiente linear de cinza para branco.
Adicione um texto.
45
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.
48
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.
52
53
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
Agora preencha a sua forma com seguinte gradiente linear de #DDA600 para #FFEB77.
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.
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.
58
06 INTEGRAO ILLUSTRATOR
Primeiramente copie para seu computador o arquivo do mapa em vetor, voc pode baixa-lo no endereo: http://www.4shared.com/file/Jw48u1fo/world.html. Inicie um novo arquivo e importe o mapa.
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
61
Novamente na caixa de estilos, Others, Convert to Alpha. Crie um retngulo e preencha-o com o seguinte gradiente.
62
63
64
Copie e cole. Clique no menu Modify, Transform, Numeric Transform. Coloque em resize e diminua 2 pixels em relao ao valor atual.
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.
66
08 GOTA DGUA
Em um novo arquivo importe uma imagem para ficar de background da gora. No exemplo usei uma folha. Desenhe uma elipse e com a ferramenta Direct Selection clique nos pontos e deixe a sua forma como a imagem.
Mude o preenchimento para um gradiente radial de branco para o cinza j aplicado. Depois mude a rgua conforme a imagem.
67
Copie e cole a gota e preencha de branco sem contorno e depois diminua o tamanho. Remova tambm o efeito.
Selecione a gota branca menor e o oval e clique no menu Modify, Combine Paths Punch.
68
Preencha com um gradiente linear de branco para branco pra cinza #CCCCCC mas com 25% de opacidade.
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.
70
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
Selecione o retngulo e as duas formas Donut. Clique no menu modify, Combine Path Punch.
74
75
76
10 CONE DE CONTATO
Em 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%.
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.
CONCLUSO
Com MGICOS isto finalizamos nossa apostila de Fireworks TRUQUES
79
80