Você está na página 1de 35

10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

52 razões para NÃO usar o Photoshop para
Web Design
Em Fireworks,  Photoshop Por Bruno Ávila

  8722
Comp art ilhe!   90   8

Seus amigos photoshopeiros ficam tirando onda com sua cara por
você usar o Fireworks? Quando questionado o porquê de você
preferir o Fireworks ao invés do Photoshop, não sabe responder?
Você sempre achou o Fireworks melhor que o Photoshop para
fazer layouts web mas nunca parou para pensar o porquê disso?

Pois passeando pela internet encontrei um artigo que me fez
lembrar você, amigo amante do Fireworks. Escrito pelo Web
Designer alemão André Reinegger, ele enumera 50 razões para
preferir o Fireworks ao invés de Photoshop na hora de criar
layouts. O mais interessante é que André tem gabarito para
enumerar essas razões, já que ele trabalha para a Adobe Systems
como especialista nos produtos Web Suite da empresa.Logo, o
rapaz sabe do que está falando.

Para facilitar a sua vida, ao invés de simplesmente mandar você
para o texto todo escrito em alemão, vou traduzir os pontos mais
importantes e comentar aqui em nosso blog.

Reinegger começa o texto dizendo que AMA o Photoshop.
Segundo ele (e eu concordo), o Photoshop é o melhor programa
do mundo para edição de imagens e que de forma alguma o post
diz que o Photoshop é um software ruim. O que ele gostaria de
esclarecer é o mal­entendido ao achar que o Photoshop é a
ferramenta certa para criação de layouts web.

data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%200… 1/35
10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

Photoshop foi projetado para ser usado em manipulação de
imagens.  Ele não foi projetado para criar layouts eficazes para
telas de computador ou para fazer mudanças rápidas em layouts
web. Photoshop tende a ser usado para essa finalidade mas
Reinegger acredita que isso ocorre porque os usuários estão
familiarizados com o programa e não estão conscientes de que o
Fireworks foi projetado para esta finalidade específica.

Os usuários geralmente tentam comparar Fireworks com
Photoshop. Claro que há monte de coisas que podem ser feitas no
Fireworks e de alguma forma no Photoshop. Também é possível
fazer as mesmas tarefas no InDesign como você pode fazer no
Photoshop, mas será que essa é a forma mais eficiente de se fazer
o mesmo trabalho? No caso do InDesign (layout de impressão),
cada designer sabe que seria extremamente ineficiente criar todo o
layout de uma revista no Photoshop. Por que isso é diferente para
Fireworks (layout de tela)?  Esta não é uma forma eficiente de
trabalho, porém os usuários tendem a pensar dessa forma.

Fireworks pode ser pensado mais em termos de um programa
como o InDesign. O InDesign cria layouts de impressão e
Fireworks cria layouts de tela. Photoshop e Illustrator nesse caso
deve ser usado apenas como um complemento de criação.  Você
cria gráficos no Photoshop e Illustrator para ser trazido para o
Fireworks para criar um projeto de diagramação voltado para web.

A lista a seguir criada por Reinegger oferece uma comparação com
uma indicação aproximada da economia de tempo ao usar
Fireworks.

1. Alinhamento Preciso com Pixels

data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%200… 2/35
10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

 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

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

data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%200… 3/35
10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

  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

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.

data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%200… 4/35
10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

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. 

Tempo estimado: segundos até minutos

6. Dithering gradients

data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%200… 5/35
10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

 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.

data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%200… 6/35
10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

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

data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%200… 7/35
10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

 A paleta de alinhamento no Fireworks é muito extensa Os
objetos podem ser alinhados em relação ao outro ou em relação a
tela. Você também 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

  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 sub­seleção.
Graças à ferramenta de seleção de fundo, ainda é possível
selecionar os objetos que são completamente obscurecidos por
outros elementos.

data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%200… 8/35
10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

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

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

data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%200… 9/35
10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

  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

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.

data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%20… 10/35
10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

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

data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%20… 11/35
10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

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

16. Camadas de compartilhamento
entre os estados e as páginas

data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%20… 12/35
10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

  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 sub­pá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.  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

data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%20… 13/35
10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

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 sub­pá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 sub­página.

Tempo estimado: segundos até minutos

19.  Usando estilos

data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%20… 14/35
10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

 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

data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%20… 15/35
10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

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

data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%20… 16/35
10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

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

data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%20… 17/35
10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

 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

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

data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%20… 18/35
10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

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

26. Criar fatias

data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%20… 19/35
10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

  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, é possível criar o protótipo perfeito
de um site para o cliente.

Muito conveniente!

 Não está disponível

28.  Criar elementos interativos –
data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%20… 20/35
10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

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. Além disso você pode ver imediatamente
os resultados na visualização.

data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%20… 21/35
10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

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
data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%20… 22/35
10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

específicas dentro de um documento do Fireworks.

Muito conveniente!

 Não está disponível

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

data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%20… 23/35
10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

rapidamente em caso de reutilização.

Muito conveniente!

 Não está disponível

34. Preview ao vivo

  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
data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%20… 24/35
10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

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

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
data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%20… 25/35
10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

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

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.

data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%20… 26/35
10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

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

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

data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%20… 27/35
10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

  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!

data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%20… 28/35
10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

 Não está disponível

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.

data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%20… 29/35
10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

44. Exportar para a biblioteca do
Dreamweaver

 Freqüentemente 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.

data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%20… 30/35
10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

Muito conveniente!

 Não está disponível

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
data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%20… 31/35
10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

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

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

data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%20… 32/35
10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

  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

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

data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%20… 33/35
10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

 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

  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

Conclusão: Reinegger disse e eu assino embaixo. A comparação
utilizada para este artigo foi baseado em estimativas de tempo
aproximado para as várias tarefas mencionadas.  Criar e modificar
gráficos e layouts no Fireworks demora apenas alguns segundos,
enquanto que todas as tarefas dentro do Photoshop leva muito
mais tempo.  Um problema muitas vezes negligenciado durante a

data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%20… 34/35
10/7/2015 52 razões para NÃO usar o Photoshop para Web Design |  Blog do Bruno Ávila ­ Avante!

criação de gráficos na tela é o número de vezes que um cliente
deseja modificar os gráficos.  Apenas usando a página mestre, os
estados, estilos e biblioteca do Fireworks, você pode alterar o
layout geral do site inteiro em segundos.  Este processo iria
demorar várias horas no Photoshop.  Como mencionado
anteriormente, a comparação Fireworks x Photoshop  é semelhante
ao uso de Photoshop para layouts de revista em vez do InDesign. 
Em Web Design, o Photoshop deve ser visto como um fornecedor
de gráficos individuais e deve ser usado para fazer cortes perfeitos,
tratamento de fotos e trabalhos com pincéis e filtros.

Tente usar o Fireworks em seu próximo projeto de layout web.
Você vai perceber como o programa é fácil de usar se você já está
familiarizado com o Photoshop. Você vai trabalhar de forma muito
mais eficaz e eficiente, poupando­lhe tempo para se dedicar a
outros projetos.

Agora sim, você tem 52 argumentos para dizer ao seu amigo
photoshopeiro que Fireworks é o software mais adequado para se
criar layouts web. Sorria!

Para o alto e Avante!

data:text/html;charset=utf­8,%3Cdiv%20class%3D%22theme­content­header%22%20style%3D%22max­width%3A%20100%25%3B%20border%3A%20… 35/35