Photoshop vs. Illustrator para desenvolvimento de ícones

7

Meu cliente está solicitando arquivos SVG (salvar como um SVG exigiria que eu construísse o ícone no Illustrator), mas eu sempre projetei ícones no Photoshop (importando arte vetorial do Illustrator e colocando como objeto inteligente, + aplicando estilos de camadas) - I descubra que o Photoshop permite maior flexibilidade nos efeitos de camadas (para sombras, gradientes ... para uma aparência em relevo).

Alguém já teve alguma experiência na criação de ícones no Illustrator e na criação do mesmo efeito que o Photoshop fornece?

Espero apresentar meu caso, para que eu possa criar os ícones no Photoshop e dimensioná-los facilmente para os tamanhos necessários - mas fico feliz em construí-los no Illustrator se eu puder criar os mesmos efeitos.

icon workflow effects svg Leslie
fonte
3
Parece que eles têm algumas tarefas específicas que exigem SVG; você pode perguntar ao seu cliente por que ele deseja arquivos SVG em particular?
lawndartcatcher

Respostas:

5

Se SVG é a saída desejada, sugiro que experimente o InkScape. É soure aberto. Embora a interface do usuário não seja tão refinada quanto a IA, é bastante robusta e o formato de arquivo nativo é SVG, sendo ideal para o trabalho SVG.

Quanto aos 'efeitos', você pode emular efeitos de varredura com arquivos vetoriais e vice-versa. Pode ser complicado, dependendo do tipo de efeito, mas certamente factível.

DA01
fonte
Ainda estou tendo problemas para criar os mesmos efeitos de estilo na IA (mesmo que eu possa, os efeitos não estão realmente traduzindo em exportação> SVG). Fiz o download do Inkscpae entre (Bolota, Esboço, Opacidade etc.) - sem sucesso. Não ache nenhum deles muito intuitivo e, se eu fosse usar um, seria necessário importar um EPS e poder exportar como SVG. Também tentei carregar um plug-in de exportação SVG no Fireworks, mas ele não é importado como um arquivo incorporado (cria vários arquivos) + os plug-ins atualizados do CS5 carregados para suporte adicional ao SVG (para atualizações do HTML5) ... por isso estou perdido para a solução SVG ...
Leslie
O Inkscape é a melhor opção para um trabalho SVG puro. Como qualquer software, leva um tempo para se acostumar com a interface do usuário ... isso não acontece em uma hora. Mas é razoavelmente bem feito. Eu o comparo mais à Macromedia Freehand do que ao Adobe Illustrator. Dito isso, espero que a IA esteja melhorando com o suporte SVG. Com o Flash em vias de sair, a Adobe precisa voltar a acelerar o SVG e similares.
DA01 08/02
4

Depende muito da arte e do seu nível de habilidade com o Illustrator.

O Illustrator possui sombras projetadas, gradientes, brilhos, etc. Portanto, tudo isso pode ser feito no Illustrator. É apenas uma questão de proficiência.

O SVG oferece muito mais do que qualquer formato do Photoshop. O SVG pode ser dimensionado em tempo real e manter a aparência ... png / gif / etc. não posso.

Scott
fonte
Já faz muito tempo desde o uso do Illustrator, então talvez seja diferente agora, mas no passado, coisas como sombras projetadas eram baseadas em varredura, portanto, não tenho certeza se elas funcionariam no SVG ou não.
DA01 7/02
11
@ DA01 São rasterizados e depois incorporados no SVG. Que tipo de derrota o propósito do SVG, mas pode ser feito. <image xlink:href="data:image/png;base64,{bytes}">. Não tenho certeza de quais outros programas consomem SVG, mas acredito que seja compatível com todos os principais navegadores.
Farray
Suponho que se os SVGs forem usados ​​apenas em um tamanho, isso funcionaria. Mas, como você aponta, esse tipo de derrota o ponto de usar SVG para começar.
DA01 07/02
@ DA01: Sim e não. O SVG sempre foi projetado para suportar a incorporação de imagens raster. Mas isso ainda permite que você use vetores sempre que possível. Se você preservar as habilidades de edição do Illustrator, poderá sempre renderizar sombras, etc., novamente em uma resolução mais alta. Como alternativa, para efeitos mais simples, como desfoque e sombreamento, você pode simplesmente usá-los no menu de filtros SVG.
Lèse majesté
3

Sou um artista de vetores, sempre faço coisas vetoriais e depois rasterizo-as no tamanho necessário. É desejável fazer um ícone em vetor, pois você pode dimensioná-los para qualquer tamanho depois, sim, mesmo para o tamanho A0 sem perder a qualidade.

Minha solução para você é essa. Faça no Photoshop como raster, faça-o em um tamanho um pouco maior, digamos 256 x 256 com detalhes e espessura de linha suficientes que ficariam bem mesmo em 64 x 64.

Quando estiver satisfeito com o resultado rasterizado, converta para .svg usando o Inkscape (sim, existe uma função para rastrear bitmap!) Ou Vectormagic . E você terminará com um .svg agradável para fazer seu cliente feliz.

Dependendo do seu efeito, você pode acabar com um arquivo vetorial maior, de qualquer forma, não exagere em efeitos especiais, pois esses programas levarão tempo para traduzir sua varredura em regiões (vetores) de cores.

Posteriormente, você pode usar o Illustrator ou o Inkscape para ajustar seu arquivo .svg.

Deixe-me saber se esta solução é viável para você. Muito bem sucedida.

ikel
fonte
2
isso pode funcionar dependendo do estilo da ilustração, mas observe que o rastreamento automático raramente produz resultados de qualidade ... especialmente quando se inicia com um arquivo raster de baixa resolução.
DA01 08/02/12
É verdade, dependendo da obra de arte e de sua complexidade. A pintura de Rembrandt está definitivamente fora do alcance do traço auto ^ _ ^
ikel
IME, o rastreamento automático pode funcionar bem se você estiver iniciando em algo como uma digitalização de alta resolução de um desenho em preto e branco, mas eu realmente não esperaria obter algo útil ao rastrear um bitmap de 256 x 256 pixels com cores e gradientes complexos. Claro, isso depende muito do programa que você usa; O Vector Magic parece muito bom à primeira vista, mas parece revelador que a maioria das imagens de amostra em seu site ainda consiste em apenas figuras de cores sólidas com contornos simples.
Ilmari Karonen
0

Muitas ótimas respostas aqui já. Eu recomendaria conferir o Icon Handbook de Jon Hicks http://iconhandbook.co.uk/ para ler mais. Pessoalmente, eu usaria o illustrator, a menos que fizesse um favicon 16x16

C3Lawrence
fonte