52 Razões para NÃO Usar o Photoshop para Web Design - Firewoks

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 malentendido ao achar que o Photoshop é a
ferramenta certa para criação de layouts web.
data:text/html;charset=utf8,%3Cdiv%20class%3D%22themecontentheader%22%20style%3D%22maxwidth%3A%20100%25%3B%20border%3A%200… 1/35
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
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.
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
DirectSelectionTool.
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.
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.
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.
A ferramenta ‘Gradiente’ não é muito intuitiva e tem um longo
processo para produzir a inclinação desejada.
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.
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.
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.
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.
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.
Não disponível – Photoshop oferece apenas as opções padrão
para alinhar e organizar.
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 subseleção.
Graças à ferramenta de seleção de fundo, ainda é possível
selecionar os objetos que são completamente obscurecidos por
outros elementos.
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.
11. Alinhar texto ao redor de uma
imagem
É muito fácil anexar texto em um vetor alinhando o texto em
torno de uma imagem.
Para colocar o texto ao redor uma imagem são necessárias
várias caixas de texto. É um processo muito mais complicado.
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.
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.
15. StatesPanel (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.
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.
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.
Não disponível
17. Painel “Páginas”
Como os sites são constituídos por várias subpá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 moverse rapidamente entre as páginas também.
por isso esse recurso está completamente ausente. Usuários tentam
resolver isso criando e alterando a visibilidade da camada ou
criando vários arquivos.
18. Master Page (alterações em
todas as subpá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.
por isso esse recurso está completamente ausente. É cansativo ter
que fazer todas as alterações para cada simples subpágina.
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.
Há também uma variedade de estilos, mas as funções são
muito rudimentares. Para resolver esse problema Smartobjects
pode ser usado. Os objetos inteligentes são semelhantes aos
símbolos do Fireworks.
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.
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.
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.
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.
Não disponível
23. Menus PopUp
Ambos os menus horizontal e vertical do tipo dropdown
podem ser criados no Fireworks com poucos cliques. Estes são
baseados em CSS e JavaScript.
Muito conveniente!
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!
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!
26. Criar fatias
Usando a ferramenta Slice podese 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.
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.
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!
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!
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.
"Save for Web & Devices"tem que ser usado um de cada vez.
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!
31. Ferramenta Slice
É possível exportar fatias individuais ou apenas áreas
específicas dentro de um documento do Fireworks.
Muito conveniente!
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!
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!
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!
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!
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.
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.
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!
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!
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!
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.
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!
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!
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 BibliotecaDW.
Muito conveniente!
45. Flex Skinning
O Fireworks oferece uma categoria de "flexcomponentes" em
sua biblioteca geral. Esta biblioteca contém componentes padrão
do Flex adequado para Flex Skinning.
Muito conveniente!
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!
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!
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!
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!
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, poupandolhe 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!

52 Razões para NÃO Usar o Photoshop para Web Design - Firewoks

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

52 Razões para NÃO Usar o Photoshop para Web Design - Firewoks

Enviado por

Direitos autorais:

Formatos disponíveis

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

Você também pode gostar

52 Razões para NÃO Usar o Photoshop para Web Design - Firewoks

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

52 Razões para NÃO Usar o Photoshop para Web Design - Firewoks

Enviado por

Direitos autorais:

Formatos disponíveis

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

Você também pode gostar

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