Etiqueta do Photoshop para Web Design Responsivo

Publicados: 2022-03-10

Resumo rápido ↬ Já se passaram quase cinco anos desde o lançamento do Photoshop Etiquette, o que o torna oficialmente uma relíquia na web. Muita coisa pode acontecer na web em poucos anos, e esses cinco últimos ilustraram isso melhor do que a maioria.

Já se passaram quase cinco anos desde o lançamento do Photoshop Etiquette, o que o torna oficialmente uma relíquia na web. Muita coisa pode acontecer na web em poucos anos, e esses cinco últimos ilustraram isso melhor do que a maioria.

Em 2011, todo mundo estava começando a se acostumar com o web design responsivo. O fluxo de trabalho tradicional de comp-to-HTML estava apenas começando a ser criticado e, desde então, vimos uma infinidade de alternativas. Blocos de estilo, protótipos de estilo, inventários visuais, colagens de elementos, guias de estilo e até mesmo o design no navegador têm sido abordagens adequadas para o design de vários dispositivos. Com a mudança do design baseado em página para a construção de um sistema de design, é realmente um momento emocionante.

Leitura adicional no SmashingMag:

Projetando para Retina no Photoshop
Animações avançadas no Photoshop
Fluxo de trabalho de ativos do Photoshop Retina
Gerador de pontos de interrupção de imagem responsiva

Também houve uma explosão de ferramentas tentando tornar um fluxo de trabalho responsivo mais eficiente. Aplicativos como o Webflow e o Macaw tornaram a visualização de ponto de interrupção digerível para os avessos ao código. Muitos designers migraram do Photoshop para o Sketch, Affinity Designer ou similar. Outros adotaram aplicativos como o Keynote para prototipagem.

Mais depois do salto! Continue lendo abaixo ↓

Uma enxurrada de novas ferramentas e técnicas aparentemente colocou a boa e velha etiqueta em segundo plano.

A 'etiqueta' ainda é relevante?

Com alternativas ao Photoshop pesado com o qual podemos estar familiarizados, é justo questionar se ainda precisamos de etiqueta. Para este artigo, definiremos etiqueta como a transferência de arquivos de maneira organizada, clara e discernível. O design responsivo normalmente vem com muitas peças em movimento, desde imagens @2x, arquivos CSS concatenados e muito mais. Com aparentemente mais a fazer para publicar um site, ser eficiente é inquestionavelmente alta prioridade, se quisermos ser rentáveis.

Muitas vezes mascarados como eficiência, má organização e comunicação são produtos da pressa para entregar um projeto. Com o Photoshop assumindo diferentes funções em nossos fluxos de trabalho, camadas e arquivos exportados são alvos fáceis para cortar custos. O fato permanece: qualquer coisa que valha a pena fazer vale a pena fazer bem.

Se queremos economizar tempo, precisamos investir um pouco antecipadamente em nos manter organizados e claros. Ineficiência é herdar um arquivo de um colega de trabalho e gastar um tempo valioso tentando descobrir por onde começar porque não está claramente rotulado. É ter que corrigir imagens que já foram exportadas. Na pior das hipóteses, é não conseguir encontrar o arquivo que você precisa em primeiro lugar.

O que há de novo na etiqueta do Photoshop?

O Photoshop Etiquette recebeu uma nova camada de tinta da Adjacent, um estúdio de design em Syracuse, NY. Para quem é novo no conceito, o Photoshop Etiquette é um guia de práticas recomendadas que promove a eficiência por meio da clareza no design da web. Embora projetados para o Photoshop, muitos desses princípios se aplicam ao Sketch e a ferramentas de design semelhantes baseadas em camadas.

O guia está dividido nas seguintes seções:

Organização de arquivos
Estrutura da camada
Exportação de ativos
Execução do tipo
Aplicação de efeito
Verificação de qualidade

Aqueles familiarizados com o site verão muitas diretrizes familiares, como dicas essenciais como 'Nomeie suas camadas' e 'Nomeie arquivos com precisão', cada uma tentando livrar a Terra de práticas como 'Cópia de camada 5' e 'cópia de cliente- final-v3.psd', respectivamente. Se você se aprofundar um pouco mais, encontrará muitos recursos responsivos vinculados a várias diretrizes e algumas dicas para projetar para vários dispositivos.

1. Consolide seus PSDs

Se você estiver fazendo várias composições para várias páginas, o Photoshop agora tem pranchetas que podem ajudá-lo a manter um único documento. Isso ajuda a eliminar a confusão sobre qual PSD é o PSD certo .

Se você pode balançar, tente usar pranchetas, composições de camada ou objetos inteligentes em vez de gerenciar toneladas de PSDs.

2. Trabalhe de forma colaborativa

Com a adição das Bibliotecas da Creative Cloud e Objetos inteligentes vinculados, os designers podem compartilhar ativos com bastante facilidade. Por exemplo, se você estiver criando um guia de padrão ou componente no Photoshop, um designer pode trabalhar em um componente enquanto outro designer trabalha simultaneamente em um diferente. Esses componentes podem ser compartilhados em uma biblioteca ou como objetos inteligentes vinculados que são inseridos em um PSD mestre.

Entre Linked Smart Objects e CC Libraries, há muitas opções para ser colaborativo.

3. Não projete para o dispositivo

Isso pode ser discutido, mas se o design responsivo abrange todos os dispositivos, talvez não devêssemos usar predefinições de dispositivos Apple populares como tamanhos de documentos no Photoshop. Em vez disso, permita que seu design dite pontos de interrupção devido ao estresse do layout, onde quer que ele caia. A exceção é se você estiver projetando um dispositivo ou aplicativo específico de plataforma, em que direcionar essas predefinições é útil.

Permita que seu design dite pontos de interrupção, não larguras de dispositivos populares no momento.

4. Seja Não Destrutivo

Com a crescente implementação e suporte para SVG, é importante que os designers mantenham ativos vetoriais no Photoshop e não os nivelem. O Photoshop agora permite que você salve SVGs, dando-nos mais uma razão para não sermos destrutivos com nossos pixels.

5. Esteja ciente da resolução da tela

Falando em SVG, ele realmente se tornou uma ótima abordagem para atender a um ativo que pode se adaptar a qualquer tamanho e não perder a fidelidade. Ter um fluxo de trabalho de ativos Retina, sejam imagens SVG ou @2x/@3x, tornou-se parte do fluxo de trabalho de um profissional responsivo.

6. Comprimir

O desempenho é uma causa digna, não apenas para um desenvolvedor, mas para um designer. Muitas vezes racionalizo que, se eu quiser incluir fontes pesadas da Web e seus recursos Open Type em meus projetos, precisarei compensar a diferença compactando agressivamente minhas imagens para ficar dentro de um orçamento de desempenho. Ferramentas de terceiros, como o TinyPNG, tornaram a compactação de imagens muito fácil.

Performance é tarefa do designer. Certifique-se de espremer qualquer tamanho de arquivo extra de suas imagens.

À medida que nossos fluxos de trabalho de web design e o uso do Photoshop continuam mudando, o site também mudará. Embora englobe um fluxo de trabalho centrado no Photoshop, também há algumas dicas para aqueles em que o Photoshop é usado com moderação. O guia apenas defende que, se e quando você usar o Photoshop, comunique sua intenção da maneira mais clara possível.

Alimentado pela Comunidade

Um dos principais focos da etiqueta do Photoshop é o crescimento, manifestado em mais diretrizes, mais recursos e mais perspectivas. Um recurso foi adicionado ao site fornecendo acesso mais fácil para enviar uma nova diretriz para revisão, algo que centenas de designers e desenvolvedores fizeram ao longo dos anos me rastreando no Twitter ou procurando um endereço de e-mail.

Na esteira das imprecisões do Google Tradutor, também há uma chamada aberta para traduções por voluntários da comunidade.

É emocionante ver como o Photoshop Etiquette ressoou com tantas organizações e indivíduos. Como ele pode ajudar você e sua equipe?