Como posso exportar uma imagem da imagem do Illustrator em vários tamanhos?

29

Eu sou novo no Adobe Illustrator e tenho uma imagem de logotipo que preciso usar em 5 ou 6 tamanhos diferentes. A imagem do logotipo foi criada no Adobe Illustrator, mas quando tento salvar a imagem em PNG ou JPEG, o que deveria ter sido simples acaba sendo muito complicado.

Entendo que o Adobe Illustrator deseja tratar a imagem como um determinado tamanho e depois multiplique esse tamanho por um fator de escala de pixels por polegada para resultar no número real de pixels que ela salva. Ele tem algumas opções limitadas de fator de escala que fornecem um conjunto muito limitado de tamanhos de pixels de saída resultantes.

No entanto, para muitos usos na web, o usuário já conhece as dimensões de pixel de saída necessárias. Existe uma maneira de especificar apenas a largura ou a altura do pixel do gráfico salvo, que é necessário?

Tenho visto sugestões para exportar a imagem e, em seguida, usar o Photoshop para redimensioná-la, mas isso resulta em uma qualidade de imagem inferior à criação da imagem final a partir da imagem vetorial.

Howard
fonte
Há várias maneiras de fazer isso, o meu é selecionar todas as imagens, então você deseja exportar, em seguida, há a opção de largura e altura no cabeçalho, basta alterá-lo, em seguida, exportá-lo

Respostas:

26

Arquivo> Salvar para a Web e insira as dimensões de pixel clicando na Image Sizeguia à direita da janela Salvar para a Web.

Ou não estou entendendo você corretamente?

Scott
fonte
Perfeito, obrigado. Passei cerca de 15 minutos com a função "export", mas como ela se recusa a usar menos de 72ppi, tive que redimensionar a obra de arte e a prancheta para exportações muito pequenas, é provavelmente o que o solicitante também fez.
Kjeld Schmidt
12

Usar File → Save for Webe inserir as dimensões fará o que você procura. Além disso, o Illustrator usa a escala vetorial, portanto, os resultados são melhores do que se você tentasse a mesma coisa no Photoshop - inserir dimensões que não correspondem ao documento no Photoshop significa que a imagem será dimensionada em bitmap.

Observe que você deve clicar em Aplicar após alterar as dimensões, se estiver usando uma versão do Illustrator anterior ao CS6.

Salvar para Web no Illustrator

Ah, e há uma boa chance de você querer Convert to sRGBdesativar - ela converte destrutivamente sua imagem do espaço de cores atual em sRGB, fazendo com que as cores mudem.

insira a descrição da imagem aqui

Marc Edwards
fonte
Não há botão Aplicar no CS6 .... e eu discordo sobre Converter em RGB, você deseja que ATIVADO para imagens destinadas à Web.
Scott
2
Obrigado pela dica do CS6. Deixar o Convert to sRGB ativado é absolutamente a abordagem errada para o trabalho na Web e na interface do usuário. Aqui está um artigo inteiro sobre o porquê: bjango.com/articles/photoshop (Concurso me sobre isso em seu perigo!)
Marc Edwards
2
você realmente leu o artigo? Quando você está trabalhando na Web e na interface do usuário, os valores exatos das cores DEVEM ser mantidos durante todo o processo. Se você digitar # FF0010 como uma cor, DEVE ser exibido no arquivo como # FF0010 se você pretender corresponder a cor no código. Isso significa que Converter para sRGB DEVE estar desativado. Tenho a sensação de que você não faz esse tipo de trabalho e não entende o que está envolvido.
11788 Marc Edwards
1
Scott, por favor, não tome isso como um ataque ad hominem, mas em discussões semelhantes acho que você pode ter recebido algumas idéias erradas sobre a representação de cores RGB. Consulte também graphicdesign.stackexchange.com/questions/7815/… .
e100
3
Converter em sRGB é a escolha errada em quase todas as situações possíveis quando se trabalha para a web. "Há uma razão pela qual a equipe Save for Web implementou a opção Converter em sRGB" - Hora de corrigir isso. feedback.photoshop.com/photoshop_family/topics/…
Marc Edwards
1

Quando preciso oferecer suporte a vários tamanhos de pixel, engano e dimensiono a arte no mesmo arquivo AI. Cada tamanho vai para uma prancheta de tamanho correto separada. Anexo o nome do quadro com o formato do arquivo a ser exportado. Em seguida, executo um jsx que exporta cada prancheta e seleciona o formato do arquivo a partir do nome, usando as últimas configurações inseridas para esse formato nesse arquivo. Isso tudo está no CS5.

Eu uso esse fluxo de trabalho para alguns logotipos, ícones e anúncios gráficos.

roupas comuns
fonte
Por favor, você pode compartilhar o .jsx?
Kelin
@kelin Acho que não posso. Faz muito tempo que não me importo com os produtos da Adobe.
à paisana
1
Não é um problema, eu achei ótimo roteiro aqui: stackoverflow.com/a/28067227/3050403
Kelin
0

Você também pode criar um documento do tamanho apropriado no Photoshop (ou colocar uma área com guias) e depois Arquivo> Colocar a arte vetorial.

Você pode dimensionar o tamanho da forma antes que ela seja renderizada. Obviamente, escalar depois disso reduzirá sua qualidade.

Eu sempre usei essa técnica para logotipos, a fim de fornecer um controle preciso sobre o tamanho, por exemplo, obter a linha de base dos elementos de texto do logotipo em um limite de pixel (uma forma de dica).

e100
fonte
0

Uma adição a este assunto que achei interessante para designers de aplicativos para dispositivos móveis é esse script que cria recursos de retina para iOS e Android em um clique.

numediaweb
fonte