52 razões para NÃO usar o Photoshop para Web Design

Os usuários geralmente tentam comparar Fireworks com Photoshop. Claro que há um 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.

Escrito pelo Web Designer alemão André Reinegger

1. Alinhamento Preciso com Pixels

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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