Trabalho de Fireworks

*Arquivos Suportados
Abre Arquivos nos formatos:

- Fireworks (.png) - Photoshop (.psd) - GIF (.gif) - JPEG (.jpg, .jpe, .jpeg) - WBMP (.wbmp, .wbm) - TIFF (.tif, .tiff) - Targa (.tga) - BMP (.bmp, .dib, .rle) - Adobe Illustrator (.ai, .art) - EPS (.eps) - Texto RTF (.rtf) - Texto ASCII (. txt)

Salva Como:

- Photoshop (.psd) - Fireworks (.png) - JPEG (.jpg, .jpe, .jpeg) - GIF (.gif) - GIF Animado (.gif) - WBMP (.wbmp, .wbm) - TIFF (.tif, .tiff) - BMP (.bmp)

- Illustrator 8 (.ai) - Adobe Flash (.swf) - PNG nivelado (.png)

*Verses:
1998: Macro media Fireworks. 1999: Macro media Fireworks 2. 2000: Macro media Fireworks 3. 2001: Macro media Fireworks 4. 2002: Macro media Fireworks 6 (Macromedia Fireworks MX). 2004: Macro media Fireworks 7 (Macromedia Fireworks MX 2004). 2005: Macro media Fireworks 8. 2007: Adobe Fireworks 9 (Adobe Fireworks CS3). 2008: Adobe Fireworks 10.0 (Adobe Fireworks CS4). 2010: Adobe Fireworks CS5.

*Exemplos de backgrounds:

*Exemplos de layouts:

Exemplos de layouts de blogs

*Fireworks e Photoshop: Comparao

Fireworks teve o seu incio com o Macro media, fundada em 1992, resultado da fuso da Authorware Inc. e da macromind-Paracomp. Em Dezembro de 2005 foi comprada pelo Adobe e integrada nos seus quadros, passando todos os seus produtos a serem denominados por Adobe. O Fireworks uma aplicao grfica, tal como Photoshop, e o que os diferencia o utilizador alvo. O que leva as pessoas a escolher o Fireworks tem a ver com o fato de que foi feito especialmente para Web Designers. leve, trabalha de forma rpida e a curva de aprendizagem melhor e mais rpida que no Photoshop. Como feito especialmente para Web Designers, expectvel que ao longo dos tempos v crescendo e sendo acrescentadas melhorias, para acompanhar a evoluo da indstria. Concluindo, se um novato no Fireworks, no ir ser incomodado com a complexidade e a curva de aprendizagem do Photoshop. Vamos ento analisar todas as principais vantagens de utilizar Fireworks. Photoshop teve o incio do seu desenvolvimento em 1987 atravs de um estudante Universitrio chamado Thomas Knoll, que comeou a criar no seu Macintosh Plus um programa para mostrar imagens a preto e branco num display monocromtico. Chamou a ateno do seu irmo, John Knoll, empregado na Industrial Light & Magic, que recomendou que Thomas tornasse o programa num editor de imagem. Mais tarde nesse ano, e aps uma pausa de 6 meses nos estudos por parte de Thomas para ajudar no desenvolvimento do programa ao qual foi dado o nome primrio de ImagePro, este passou a ser denominado de Photoshop, em finais de 1988. Passado algum tempo os irmos Knoll viajaram at Silicon Valley e fizeram uma demonstrao do programa a engenheiros da Apple e a Russel Brown, diretor grfico do Adobe. O Adobe ficou interessado no programa e adquiriu as licenas. O Photoshop oferece ferramentas rudimentares para trabalhar com vetores, mas Fireworks traz-nos algumas das ferramentas nativas do Ilustrador. Provavelmente a melhor ferramenta para a web designers presente no Fireworks o retngulo arredondado, que inclui pontos de controlo para cada canto, tornando a tarefa mais fcil se pretender fazer alteraes ao retngulo. Pode criar um canto arredondado e os outros no, ou fazer qualquer combinao que satisfaa a sua necessidade enquanto web designer, tirando partido das funcionalidades e particularidades existentes. Em 1990 foi lanado o Photoshop 1.0 exclusivamente para Macintosh. At a data foram lanadas 28 verses do Photoshop, a saber: 1990 Fevereiros: Adobe Photoshop 1.0 (Macintosh apenas) 1991 Junhos: Adobe Photoshop 2.0 (Macintosh apenas) 1992 Janeiros: Adobe Photoshop 2.0.1 (Macintosh apenas) 1992 Novembros: Adobe Photoshop 2.5 1993 Julhos: Adobe Photoshop 2.5.1 (Macintosh apenas) 1994 Setembros: Adobe Photoshop 3.0 1996 Novembros: Adobe Photoshop 4.0

1997 Agostos: Adobe Photoshop 4.0.1 1998 Maios: Adobe Photoshop 5.0 1998 Junhos: Adobe Photoshop 5.0.1 1999 Fevereiros: Adobe Photoshop 5.5 2000 Setembros: Adobe Photoshop 6.0 2001 Maros: Adobe Photoshop 6.1 2001 Maros: Adobe Photoshop 7 ( Introduo do suporte a Mac OS X ) 2001 Abris: Adobe Elements 1 2002 Agostos: Adobe Photoshop 7.0.1 2002 Agostos: Adobe Elements 2 2003 Outubros: Adobe Photoshop CS (8.0) 2004 Outubros: Adobe Elements 3 2005 Abris: Adobe Photoshop CS2 (9.0) 2005 Outubros: Adobe Elements 4 2006 Outubros: Adobe Elements 5 (Apenas para Windows) 2007 Abris: Adobe Photoshop CS3 (10.0) 2007 Outubros: Adobe Elements 6 2008 Outubros: Adobe Elements 7 (Apenas para Windows) 2008 Outubros: Adobe Photoshop CS4 (11.0) 2009 Setembros: Adobe Elements 8 2010 Abris: Adobe Photoshop CS5 (12.0)

*Dreamweaver e Fireworks: Relao

Quem nunca se deparou com aquela situao contundente, com um site praticamente pronto, desenvolvido em HTML, com as imagens todas recortadas em tabelas, muito bem divididas e nomeadas, e de repente, seu cliente faz aquela declarao: "Eu gostei do azul... mas no dava para ser um pouco mais clarinho? ... e se fosse verde?!", e d-lhe voc passando 2 dias alterando todos os blocos de imagens criados, caando nome de imagens em tabelas, aquele trabalho j conhecido por muitos. Neste novo artigo da srie Fireworking, exemplifico a utilizao lgica da ferramenta de multi desenvolvimento Fireworks com o Dreamweaver ou Ultradev, com destaque criao de imagens e insero delas em tabelas diretamente dentro do Fireworks, posteriormente com a exportao do arquivo para HTML e ps-editado no Dreamweaver e implementado com behaviors e componentes Java script no existentes no Fireworks. Logo ser feita a alterao de todo contedo bitmap do site, mantendo as tabelas e HTML j alterados intactos aps a troca de todas as imagens de uma forma muito simples e rpida, mos obra!

Vamos seguir os passos:

1. Slides - Com a arte j construda no Fireworks, o procedimento agora a criao das tabelas, que so representadas por "slices", e que vo automaticamente "repicando e otimizando" a criao das tabelas, cada slide (fatia) tem um nome prprio, nas prximas matrias acompanhe como ele pode ser configurado para exportar determinada faco do arquivo em JPG, outra parte em GIF, outra em PNG, isso, num s procedimento de exportao. 2. Exportar ou publicar - Com os slices configurados, a exportao feita pelo comando "File/Export preview", nessa tela agora demonstrada, o principal comando o formato de sada do arquivo (JPG, GIF...), configure o documento de acordo com a necessidade de cores, d sempre preferncia ao formato GIF com a mdia de 64 cores para no sobrecarregar o arquivo, em seguida clique no boto "Export". Nessa ltima tela, temos as referncias de salvamento, escolha um local de fcil acesso para o salvamento e selecione os seguintes parmetros: a. Nome do arquivo: teste.html; b. Salvar como: HTML and images; c. HTML: export HTML files; d. Slices: export slices; e. Include reas without slices; f. Put images in subfolder. O diretrio padro de salvamento das imagens "images". Importante: Caso nunca tenha clicado no boto "options" ao lado direito dessa janela e configurado as opes, deve faz-lo agora para gravar algumas configuraes avanadas permanentemente e extremamente necessrias, so elas: GENERAL extension = .HTML TABLE Space with = Nested Tables - no spacers Cell color = nada Contents = Non-breaking spacer DOCUMENT ESPECIFIC Boto "SET DEFAULTS" (para gravar permanentemente as configuraes) Essas configuraes, modificam completamente a forma de que o documento ser exportado e gerado em HTML, no modo original do Fireworks, ele cria pequenas

imagens de 1px de espaamento, utilizadas para controlar o tamanho das tabelas geradas, mas que tem um resultado terrvel na reedio do HTML no Dreamweaver. - Com as novas configuraes, o problema eliminado, so geradas tabelas puras, sem empecilhos para reedio e manipulao de objetos no HTML. - Clique no boto "salvar" para finalizar a exportao e no feche o Fireworks. 3. No Dreamweaver Abra o arquivo "teste.html" gerado anteriormente... ... Atribua na imagem "fireworking", um behavior (comportamento) de "open browser Windows", configure-o para abrir "teste2.html, 200px de largura e altura, nome da janela teste2... - O evento do behavior deve ser no "onMouseUp" (quando o mouse subir). - Salve o documento e teste o arquivo no navegador pressionando F12. 4. Trocar a cor Mantenha seu Browser de Internet aberto, e feche o Dreamweaver. - Retorne ao Fireworks, e troque a cor do fundo do trabalho seu gosto "Modify/canvas color". 5. Exportar novamente: - Novamente vamos Exportar o arquivo, "File/Export. Preview" configure o tipo de sada de imagens, clique no boto "Export" novamente, e na ltima tela, onde se configura o local da exportao, vamos alterar os seguintes itens: a. Salvar: selecione a pasta "images" desta vez; b. Nome do arquivo: teste; c. Salvar como: images; d. Slides: export slices; e. Include reas without slides. O que foi feito acima, dizer ao Fireworks exportar somente as imagens recortadas nos slices diretamente dentro da pasta "images", substituindo com absoluta exatido de nomes um nmero ilimitado de imagens simultaneamente. 6. O navegador: - Na tela de seu navegador ainda aberto: - Simplesmente atualize a tela (Ctrl+R) e veja o resultado. - Uma ao que demoraria horas, no foi suficiente nem para ocupar mais do que 5 minutos de seu dia, isso foi possvel graas aos recursos disponveis no Fireworks. - Caso queira tirar a prova, abra o arquivo novamente no Dreamweaver e constate o boto "fireworking" ainda contm o behavior intacto.