trabalho de fireworks

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)

*Versões:

1998: Macro media Fireworks. 1999: Macro media Fireworks 2.

2000: Macro media Fireworks 3.


2002: Macro media Fireworks 6 (Macromedia Fireworks MX).

2004: Macro media Fireworks 7 (Macromedia Fireworks MX 2004).


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: Comparação Fireworks teve o seu início com o Macro media, fundada em 1992, resultado da fusão 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 aplicação gráfica, 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 rápida e a curva de aprendizagem é melhor e mais rápida que no Photoshop. Como é feito especialmente para Web Designers, é expectável que ao longo dos tempos vá crescendo e sendo acrescentadas melhorias, para acompanhar a evolução da indústria. Concluindo, se é um novato no Fireworks, não irá ser incomodado com a complexidade e a curva de aprendizagem do Photoshop. Vamos então analisar todas as principais vantagens de utilizar Fireworks.

Photoshop teve o início do seu desenvolvimento em 1987 através de um estudante Universitário chamado Thomas Knoll, que começou a criar no seu Macintosh Plus um programa para mostrar imagens a preto e branco num display monocromático. Chamou a atenção do seu irmão, John Knoll, empregado na Industrial Light & Magic, que recomendou que Thomas tornasse o programa num editor de imagem. Mais tarde nesse ano, e após uma pausa de 6 meses nos estudos por parte de Thomas para ajudar no desenvolvimento do programa ao qual foi dado o nome primário de ImagePro, este passou a ser denominado de Photoshop, em finais de 1988. Passado algum tempo os irmãos Knoll viajaram até Silicon Valley e fizeram uma demonstração do programa a engenheiros da Apple e a Russel Brown, diretor gráfico do Adobe. O Adobe ficou interessado no programa e adquiriu as licenças. 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 retângulo arredondado, que inclui pontos de controlo para cada canto, tornando a tarefa mais fácil se pretender fazer alterações ao retângulo. Pode criar um canto arredondado e os outros não, ou fazer qualquer combinação que satisfaça a sua necessidade enquanto web designer, tirando partido das funcionalidades e particularidades existentes. Em 1990 foi lançado o Photoshop 1.0 exclusivamente para Macintosh. Até a data foram lançadas 28 versões 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 Marços: Adobe Photoshop 6.1

2001 Marços: Adobe Photoshop 7 ( Introdução 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)


2006 Outubros: Adobe Elements 5 (Apenas para Windows)



2008 Outubros: Adobe Elements 7 (Apenas para Windows)

2008 Outubros: Adobe Photoshop CS4 (11.0)

2009 Setembros: Adobe Elements 8


*Dreamweaver e Fireworks: RelaçãoQuem nunca se deparou com aquela situação 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 declaração: "Eu gostei do azul... mas não 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, caçando nome de imagens em tabelas, aquele trabalhão já conhecido por muitos.

Neste novo artigo da série Fireworking, exemplifico a utilização lógica da ferramenta de multi desenvolvimento Fireworks com o Dreamweaver ou Ultradev, com destaque à criação de imagens e inserção delas em tabelas diretamente dentro do Fireworks, posteriormente com a exportação do arquivo para HTML e pós-editado no Dreamweaver e implementado com behaviors e componentes Java script não existentes no Fireworks.

Logo será feita a alteração de todo conteúdo bitmap do site, mantendo as tabelas e HTML já alterados intactos após a troca de todas as imagens de

http://www.plugmasters.com.br/sys/materias/44/1/Intera%E7%E3o-Fireworks-x-Dreamweaver


uma forma muito simples e rápida, mãos à obra!

Vamos seguir os passos:

1. Slides - Com a arte já construída no Fireworks, o procedimento agora é a criação das tabelas, que são representadas por "slices", e que vão automaticamente "repicando e otimizando" a criação das tabelas, cada slide (fatia) tem um nome próprio, nas próximas matérias acompanhe como ele pode ser configurado para exportar determinada facção do arquivo em JPG, outra parte em GIF, outra em PNG, isso, num só procedimento de exportação.

2. Exportar ou publicar - Com os slices configurados, a exportação é feita pelo comando "File/Export preview", nessa tela agora demonstrada, o principal comando é o formato de saída do arquivo (JPG, GIF...), configure o documento de acordo com a necessidade de cores, dê sempre preferência ao formato GIF com a média de 64 cores para não sobrecarregar o arquivo, em seguida clique no botão "Export".

Nessa última tela, temos as referências de salvamento, escolha um local de fácil acesso para o salvamento e selecione os seguintes parâmetros:

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 diretório padrão de salvamento das imagens é "images".

Importante: Caso nunca tenha clicado no botão "options" ao lado direito dessa janela e configurado as opções, deve fazê-lo agora para gravar algumas configurações avançadas permanentemente e extremamente necessárias, são elas:

GENERAL extension = .HTML TABLE Space with = Nested Tables - no spacers Cell color = nada Contents = Non-breaking spacer DOCUMENT ESPECIFIC Botão "SET DEFAULTS" (para gravar permanentemente as configurações)

Essas configurações, 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 espaçamento, utilizadas para controlar o tamanho das tabelas geradas, mas que tem um resultado


terrível na reedição do HTML no Dreamweaver.

- Com as novas configurações, o problema é eliminado, são geradas tabelas puras, sem empecilhos para reedição e manipulação de objetos no HTML. - Clique no botão "salvar" para finalizar a exportação e não 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 saída de imagens, clique no botão "Export" novamente, e na última tela, onde se configura o local da exportação, 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 exatidão de nomes um número 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 ação que demoraria horas, não foi suficiente nem para ocupar mais do que 5 minutos de seu dia, isso foi possível graças aos recursos disponíveis no Fireworks. - Caso queira tirar a prova, abra o arquivo novamente no Dreamweaver e constate o botão "fireworking" ainda contém o behavior intacto.

trabalho de fireworks

Documents