Com Creative Cloud não temos mais um ciclo regular de atualizações e cada software segue seu próprio ritmo conforme a demanda do mercado e da Adobe. Neste artigo vou tratar de um “divisor de águas” quando o assunto é produção de imagens para web. O comando Generate acessado pelo menu File > Generate está disponível a partir da versão 14.1 do Photoshop [clique aqui para visualizar a lista completa de novidades do Photoshop CC].
Adobe Generate é um poderoso e produtivo script inserido no Photoshop que elimina a tediosa tarefa de fatiar e exportar cada camada do Photoshop para posterior utilização num site. Basta colocar a extensão do formato que deseja criar – JPG, PNG ou GIF, no nome da camada e o Photoshop irá gerar as imagens necessárias. O primeiro passo para utilizar esse comando é habilitá-lo nas Preferências do programa.
Painel Preferences, na aba Plug-ins, ative a opção Enable Generator
Em destaque camada renomeada para Wallpaper.jpg, gerando uma imagem com 100% da camada nesse formato.
E o melhor vem agora: as imagens produzidas pelo comando Generate possuem um vínculo permanente com o Photoshop, assim toda alteração criada será automaticamente passada para as imagens exportadas.
Outro ponto positivo é que você pode gerar imagens de vários formatos e tamanhos a partir da mesma camada. Veja alguns exemplos de aplicação:
• “200% logo-retina.png, logo.png” – produz uma imagem com o dobro de tamanho e outra com 100% da camada.
• “Image.jpg10” – produz uma imagem no formato jpg com qualidade 10
• “400% Image.png, 250×250 Image2.jpg40%” – produz uma imagem 4x o tamanho da camada e outra com tamanho personalizado e 40% de qualidade no jpg
A camada Wallpaper irá gerar três imagens diferentes em formato ou tamanho.
Uma vez aplicado o comando File > Generate será criada uma nova pasta com o mesmo nome do arquivo e salva no mesmo diretório onde se encontra o arquivo matriz do Photoshop – normalmente no formato PSD. É nesta pasta que as imagens serão salvas. Em nosso exemplo foram geradas três imagens a partir da camada Wallpaper.
Imagens prontas para aplicação num website, por exemplo. No tamanho e formato especificado na própria camada do Photoshop.
Photoshop e Edge Reflow – conectados pelo Generate
O script Generate habilita uma conexão entre o Photoshop e o Edge Reflow [semelhante a integração existente há alguns anos atrás entre o Photoshop e o ImageReady…]. Hoje os tempos são outros e precisamos produzir conteúdo que atenda a diferentes dimensões de tela. E a combinação entre o Photoshop e o Edge Reflow é perfeita. Com apenas um clique podemos levar toda a estrutura de layout para do Photoshop para o Edge Reflow.
Outras novidades interessantes
Produção de CSS
É impressionante a integração continua do Photoshop com a web. Agora podemos criar código CSS a partir de qualquer camada. Basta clicar com botão direito sobre a camada e escolher Copy CSS.
Abaixo exemplo do CSS gerado pela objeto no Photoshop:
.Button_border_copy_3 {
border-style: solid;
border-width: 2px;
border-color: rgb( 0, 1, 1 );
border-radius: 18px;
background-color: rgba( 0, 0, 0, 0 );
opacity: 0.8;
position: absolute;
left: 327px;
top: 658px;
width: 82px;
height: 82px;
z-index: 6;
}
Imagens Vinculadas
Um recurso básico, mas que muda nosso fluxo de trabalho. Semelhante ao InDesign e Illustrator, o Photoshop agora trabalha com imagens vinculadas. Temos duas opções para o comando File > Place: Embedded e Linked. Ambas inicialmente funcionam iguais inserindo a imagem como Smart Object, contudo diferente da opção Place Embedded que trabalha a imagem apenas no documento aberto, escolhendo a opção Place Linked as alterações serão aplicadas na imagem original alterando o arquivo em todos os documentos.
Em destaque imagem inserida pela opção Place Linked. Difere da camada abaixo que segue o padrão visual para Smart Objects.
Assine nosso informativo e receba notícias sobre cursos, promoções e artigos especiais da dualpixel
