Como faço para que meus logotipos vetoriais fiquem super nítidos na Web?

13

Trabalho muito com o Illustrator, mas nunca fiquei super feliz com a aparência do meu trabalho em nosso site. Eu tentei várias técnicas - salvar no Illustrator, abrir no Photoshop e salvar -, mas ainda estou perdendo alguma coisa.

Ed. O logotipo só foi fornecido como IA. Eu recebo o mesmo resultado um pouco confuso, seja economizando para a Web e dispositivos do Illustrator ou levando o vetor para o Photoshop. Costumo dimensionar o Illustrator no tamanho necessário e, em seguida, salvar na web (tipo de otimização - há texto no logotipo).

Possikiem
fonte
Você está tentando salvá-lo no formato png / gif? A borda nebulosa da imagem está incomodando você?
Hello_world # 24/13
1
Seu site foi criado em um CMS como o Wordpress, porque o Wordpress (e provavelmente outros) tritura automaticamente a qualidade da imagem para reduzir o tamanho do arquivo.
deecemobile
Você está dimensionando a imagem no navegador, para cima ou para baixo? Se sim, não faça isso :) Como há três pessoas com dúvidas, talvez você possa editar sua pergunta para vincular à sua exportação ou algo semelhante? Isso nos ajudaria a responder.
Brendan
Se uma das respostas abaixo respondeu à sua pergunta, aceite-a.
D AprVᴀᴅᴇʀ

Respostas:

11

Ao rasterizar gráficos vetoriais, as linhas ficam nítidas se caírem nos limites de pixels. Isso pode ser feito pelo rasterizador (arredondamento), mas a maioria dos programas de gráficos vetoriais que conheço não suporta isso. Uma estratégia para combater isso será usar uma grade cujas células abranjam e número inteiro de pixels (uma célula 1x1 ou 2x2 ou 3x3, ... pixel).

Para ícones, uma grade 16x16 é um bom começo, pois permite que ícones nítidos de 16x16, 32x32, 48x84 etc. sejam produzidos a partir do mesmo gráfico vetorial.

Para um logotipo, uma grade de pixels com 1 célula = 1 pixel na menor representação do logotipo é um bom começo.

Aqui está um tutorial que explica esta técnica: Ícone de lâmpada de vetor no Inkscape

Peter Walser
fonte
5

Há muitas coisas que você pode fazer.

  1. Use o formato de imagem com compactação sem perdas, como PNG
  2. Verifique se o caminho do vetor está alinhado à grade de pixels o máximo possível
  3. Aprimore o contraste entre a imagem e o plano de fundo (por cor, brilho ou ambos)
  4. Aplique filtro de nitidez no seu software de edição de imagens
  5. Use uma combinação de efeitos, borda mais escura + brilho mais claro (em um fundo claro) OU borda mais ligeira + brilho mais escuro (em um fundo escuro), assim:

insira a descrição da imagem aqui

  1. Outra técnica é redimensionar o logotipo do vetor para 200%, mesclar com o plano de fundo, achatar para bitmap e redimensionar o bitmap para 100%. Às vezes faz diferença.

Como um software de gráficos da web, recomendo fortemente o Adobe Fireworks, pois é mais adequado para o design com pixel perfeito, além de outros motivos.

Alph.Dev
fonte
Obrigado. Eu acho que alinhar com a grade de pixels é onde eu estou errado. Ouvi coisas boas sobre o Fireworks, mas nunca o usei. Felicidades.
Possikiem 28/09
Tente Modify > Snap to pixelopção. Você também pode permitir que o fogo de artifício alinhe pixels individuais para você no canto superior esquerdo ou no centro de um pixel. PathPainel interno , sob Edit pointsetiqueta. Boa sorte.
Alph.Dev
5

Você não forneceu muitas informações sobre o seu processo e isso não foi mencionado, mas pensei em lançar essa opção para você. Se você está projetando com frequência no Illustrator e está procurando uma maneira de exibir seus gráficos, existe uma alternativa que pode ser feita no Illustrator, conhecida como SVG.

insira a descrição da imagem aqui

O SVG está se tornando frequente nos planos de fundo do site e com recursos de redimensionamento sem perda de detalhes. Eu já vi mais usá-lo com ícones. Eu incluí alguns recursos que você talvez possa ler sobre o uso do SVG aqui:

DᴀʀᴛʜVᴀᴅᴇʀ
fonte
1

Você pode redimensionar seu arquivo vetorial no Illustrator. Salve-o como PDF, com predefinição: compactação - imagens bitmap coloridas - downsample bicúbica para: qualquer tamanho que você desejar - compactação: 'JPEG' - qualidade da imagem: 'máximo'. Salve-o e coloque o arquivo PDF no Photoshop em um arquivo PPI de 300 tamanhos (por exemplo, 125 x 125 pixels). Salve como PNG. Isso você pode colocar em um site. É bem afiado.

user49293
fonte