Como automatizar a exportação de vários PNGs com tamanhos diferentes do Photoshop?


18

Eu tenho um arquivo PSD com uma resolução de 96 px × 96 px. Agora eu quero salvar isso como quatro arquivos PNG com diferentes resoluções, como 36 px × 36 px, 48 px × 48 px, 72 px × 72 px e 96 px × 96px. Em vez de ajustar o tamanho da imagem manualmente quatro vezes e salvar como opção, posso automatizar isso de alguma forma?


Por favor, tente a resposta que @NickBeus deu e dê a ele a marca de seleção verde, se funcionar para você. Essa resposta me ajudou muito. Não sei dizer quantas vezes abri a caixa de diálogo "Salvar na Web" apenas para alterar o tamanho da saída MAIS UMA VEZ. A janela "Recursos de imagem" permite adicionar todos os tamanhos e sufixos de nome de arquivo necessários e apenas exportá-los.
rgb_life 3/12

Respostas:


13

Não é uma solução completa, mas isso pode ajudar alguém que veio do Google para cá.

Se você salvar com Arquivo → Salvar para a Web, poderá redimensionar durante o processo de salvamento, as opções estão no lado direito em Tamanho da imagem.

Faço isso com bastante frequência quando preciso de dois tamanhos diferentes para uma imagem, embora, como as outras respostas tenham observado, se você estiver criando ícones, use vetores, sua vida seja muito mais fácil.


3
Estou impressionado. Eu nunca tinha realmente notado a opção re-size em Salvar para Web: o
Yisela

e você também pode usar Alt+Ctrl+Shift+Spara iniciar a Save for Webcaixa de diálogo no CS6.
Muhammad Saqib

5

Com o Photoshop CC, agora existe um recurso chamado Photoshop Generator, projetado para criar várias imagens

Você pode ler sobre o Generator aqui .

Um trecho:

O Generator permite criar ativos de imagem em tempo real enquanto você trabalha, eliminando as etapas tediosas de copiar, fatiar e exportar cada camada manualmente e economizando horas de tempo. Basta adicionar uma extensão de arquivo ao nome da sua camada ou grupo de camadas, e o Photoshop criará automaticamente um JPG, PNG ou GIF a partir do conteúdo dessa camada. Se você fizer uma alteração nessa camada, o arquivo será atualizado imediatamente. Isso significa que agora você tem uma pasta de imagens sempre atualizadas com o design do Photoshop.


4

Quantas vezes você precisa exportar o ícone? Se for apenas o único ícone, sua melhor opção é provavelmente desenhar tudo usando vetores e estilos de camada, redimensionar o documento, fazer os ajustes necessários e salvar o PNG (opcionalmente mantendo o PSD para exportação futura).

Se você precisar repetir o processo várias vezes, recomendo configurar tudo como uma folha de sprite com fatias.

Aqui está uma coisa que escrevi sobre o tópico (inclui muitas técnicas de exportação): Exportando do Photoshop .

Ao criar ícones, você geralmente precisa ajustar manualmente os tamanhos menores individualmente - vale a pena ter isso em mente ao criar todos os tamanhos.


3

Como Marc mencionou acima, provavelmente é melhor dimensionar vetores no documento e usar folhas de sprite.

A única coisa que você deve evitar é escalar durante o Save for Web, como sugere o Maxism. Eu escrevi um post comparando os resultados de diferentes técnicas e o Save for Web produzia consistentemente ativos com artefatos e meio pixels: Reduzindo e exportando ativos no Photoshop .

Também fiz um script do Photoshop que automatiza o processo de exportação desses ativos: EXPORTAÇÃO PARA O SCRIPT DO ANDROID PHOTOSHOP .

Espero que isto ajude.


1

Não há uma boa maneira de passar de 96 para 36 automaticamente. Mesmo aos 48 anos, você verá seu design desmoronar.

O único benefício seria se você tiver muitos ícones para exportar dessa maneira e planeja voltar e limpá-los. Você pode gravá-lo como uma ação ou usar jsx, se desejar.

Para seu design específico, experimentei descer as etapas ou exportar cada versão da versão original de 96px. Normalmente, as etapas são melhores, mas em alguns modelos, pode introduzir quantidades progressivas de distorção.


1

Crie seus ícones em mdpi e use esta ação do Photoshop para exportá-los em ldpi, hdpi e xhdpi. De mdpi a xhdpi, funciona bem, mas ldpi e hdpi parecem um pouco desfocados.

Link para o artigo
Faça o download da ação do Photoshop



1

Há uma nova opção no Photoschop CC 2014. Chama-se "Gerar ativos", está em "arquivo" e você pode escolher 0,25x, 0,5x, 2x, 3x e pode configurar as dimensões automaticamente. Ele exportará suas camadas para qualquer formato de arquivo e em diferentes dimensões (se você desejar).


Esta resposta é MUITO boa. Primeiro você precisa ir em "ARQUIVO> GERAR" e marcar "Ativos de imagem". Em seguida, vá para "ARQUIVO> EXPORTAÇÃO> EXPORTAÇÃO COMO" e você obterá o melhor menu que já usei no Photoshop, onde você pode adicionar tamanhos e dar a cada um deles um sufixo personalizado! Isso está no Adobe Photoshop CC, é claro. Meu CS4 morreu com uma atualização do Mac OSX e, portanto, não tenho idéia de nenhuma versão além da que estou usando agora.
rgb_life 3/12

1

Eu acredito que é exatamente isso que você quer.

https://github.com/austynmahoney/mobile-export-scripts-illustrator

Se você se sente à vontade para abrir cada uma delas .psd, Illustratorpode imprimir facilmente em vários tamanhos, ajustando os fatores de escala no .jsxarquivo.

A imagem de linha de base usada para Android é xhdpi, para iOS é @ 2x. O script aumentará e diminuirá a partir desses tamanhos.



0

Não encontrei nada simples na terra da Adobe para fazer isso por mim. Se você possui ou deseja instalar o ImageMagick e se sente confortável com a linha de comando, a convertferramenta CLI é ótima .

Eu escrevi este shell script que aceita larguras e redimensiona uma imagem até você pressionar enter sem um número:

#!/bin/sh

oot=${1%.*}
while read -p 'width: ' -r && [ "$REPLY" != '' ]; do
    convert "$1" -resize "$REPLY"x "$oot-$REPLY.png"
done

Chamei o meu multi-resize.she coloquei ~/bin/para que fique disponível em qualquer lugar.

Você o executaria em um shell como esse em um PNG da resolução original:

$ multi-resize.sh foo.png
width: 96
width: 72
width: 48
width: 36
width: 
$

Você terá foo-72.png, etc., no mesmo diretório.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.