Publicidade

Bergs

Exportar ícone no formato SVG

Olá Pessoal,

 

Estou com uma dúvida, queria poder exportar uma imagem no photoshop para o formato SVG, o tipo de imagem que quero fazer dessa forma são icones chapados (de uma única cor) que estão como png dentro no Photoshop CS5.  É possível transformar um png em vetor para exportar no formato SVG pelo Photoshop?

 

 

0

Compartilhar este post


Link para o post
Compartilhar em outros sites

Nas versões mais recentes do PS é possível, no CS5 não diretamente, mas pode tentar esse script:

http://hackingui.com/design/export-photoshop-layer-to-svg/

Apenas certifique-se que possui os gráficos em shapes (vetor), caso contrário, terá que vetorizar (criar os shapes), mas para refazer esse trabalho no PS, seria mais interessante vetorizar diretamente no Illustrator por exemplo e de lá exportar seus SVGs facilmente sem uso de scripts de terceiros. Outra alternativa caso não tenha o Illustrator, seria converter seus pngs em svgs através de ferramentas de conversão online.

 

Att.

1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá Public2004, tentei essa solução mas como não tinha os arquivos em vetor ficou  inviável. Era para criar fonts web com eles. Acabei usando em PNG porque o designer não encontrou os ícones que usou no layout em SVG e para o cliente não reclamar dos ícones deixei em PNG mesmo.

 

Obrigado :smiley:

 

0

Compartilhar este post


Link para o post
Compartilhar em outros sites

E ai Bergs beleza?

 

Apenas complementando a resposta.

Se as imagens estiverem comoo shapes do photoshop você pode fazer o seguinte:

No photoshop

-> File

-> Export

-> Paths to Illustrator

-> Excolha o local para salvar o arquivo.ai

 

No Illustrator

-> Abra o arquivo Salvo

-> As vezes ele aparece transparente no arquivo, dando a impressão que está em branco, se for o caso, use cmd + a (MAC) ou ctrl + a (windows) para localizar o shape convertido.

-> Coloque uma cor nele

-> File

-> Save as...

-> SVG

-> SVG Code (para visualizar o código)

 

Sobre ferramentas online, conheço a http://www.online-convert.com, ela cumpre o serviço muito bem para imagens de uma cor única.

 

Abs,

 

 

0

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 21/04/2017 at 17:27, WilliansS disse:

E ai Bergs beleza?

 

Apenas complementando a resposta.

Se as imagens estiverem comoo shapes do photoshop você pode fazer o seguinte:

No photoshop

-> File

-> Export

-> Paths to Illustrator

-> Excolha o local para salvar o arquivo.ai

 

No Illustrator

-> Abra o arquivo Salvo

-> As vezes ele aparece transparente no arquivo, dando a impressão que está em branco, se for o caso, use cmd + a (MAC) ou ctrl + a (windows) para localizar o shape convertido.

-> Coloque uma cor nele

-> File

-> Save as...

-> SVG

-> SVG Code (para visualizar o código)

 

Sobre ferramentas online, conheço a http://www.online-convert.com, ela cumpre o serviço muito bem para imagens de uma cor única.

 

Abs,

 

 

 

Valeu WilliansS :thumbsup::smiley:

0

Compartilhar este post


Link para o post
Compartilhar em outros sites

Sem sofrimento... gera uma imagem PNG com fundo transparente e usa esse site aqui...

 

https://iconverticons.com/

0

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 15/05/2017 at 18:22, alx disse:

Sem sofrimento... gera uma imagem PNG com fundo transparente e usa esse site aqui...

 

https://iconverticons.com/

 

Olá @alx como era urgente acabei deixando como PNG. obrigado pela resposta. [tópico resolvido]

0

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!


Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.


Entrar Agora

  • Próximos Eventos

  • Conteúdo Similar

    • Por Caio Dom
      Boa tarde, estou usando esse código para fazer com que as imagens carreguem mais rápido, porém só funciona com JPG, gostaria que funcionasse também com PNG, se alguém puder me ajudar agradeço. Segue o código abaixo:
      <?php // The file $qualita = $_REQUEST['q']; if(!$qualita) { $qualita = 1; } $filename = $_GET['img']; $prop = $_REQUEST['scala']; if(!$prop) { $prop = 1; } // Set a maximum height and width // Content type header('Content-Type: image/jpeg'); // Get new dimensions list($width_orig, $height_orig) = getimagesize($filename); //$width = $prop*621; //$height = $prop*502; $width = 1000; $height = 667; //maantem ration $ratio_orig = $width_orig/$height_orig; if ($width/$height > $ratio_orig) { $width = $height*$ratio_orig; } else { $height = $width/$ratio_orig; } // Resample $image_p = imagecreatetruecolor($width, $height); $image = imagecreatefromjpeg($filename); imagecopyresampled($image_p, $image, 0, 0, 0, 0, $width_orig*$prop, $height_orig*$prop, $width_orig, $height_orig); // Output imagejpeg($image_p, null, 100); ?>  
    • Por zetabyte00
      Pessoal,
       
      Qual a diferença desses três WebGL, Canvas ou SVG? Alguma veio para substituir a outra?
    • Por Thaís Smoak
      Existe algo que fixe um determinado ponto para que a svg gire em torno desse ponto usando animate() no jQuery? Por exemplo, os ponteiros de um relógio
    • Por imultimidia
      Olá pessoal,
      Estou com um probleminha que acredito que seja fácil de resolver (não pra mim rs).
       
      Uso uma classe para upload de imagens que redimensiona, até tudo bem, porém em imagens PNG não fica transparente.
      Se os amigos poderem me dá uma força nisso aí agradeço. Segue o código:
       
       
      <?php
      class Redimensiona{

      public function Redimensionar($imagem, $largura, $pasta){

      $name = md5(uniqid(rand(),true));

      if ($imagem['type']=="image/jpeg"){
      $img = imagecreatefromjpeg($imagem['tmp_name']);
      }else if ($imagem['type']=="image/gif"){
      $img = imagecreatefromgif($imagem['tmp_name']);
      }else if ($imagem['type']=="image/png"){
      $img = imagecreatefrompng($imagem['tmp_name']);
      }
      $x = imagesx($img);
      $y = imagesy($img);
      $autura = ($largura * $y)/$x;

      $nova = imagecreatetruecolor($largura, $autura);
      imagecopyresampled($nova, $img, 0, 0, 0, 0, $largura, $autura, $x, $y);

      if ($imagem['type']=="image/jpeg"){
      $local="$pasta/$name".".jpg";
      $imagemName = $name.".jpg";
      imagejpeg($nova, $local);
      }else if ($imagem['type']=="image/gif"){
      $local="$pasta/$name".".gif";
      $imagemName = $name.".gif";
      imagejpeg($nova, $local);
      }else if ($imagem['type']=="image/png"){
      $local="$pasta/$name".".png";
      $imagemName = $name.".png";
      imagejpeg($nova, $local);
      }

      imagedestroy($img);
      imagedestroy($nova);

      return $imagemName;
      }
      }
      ?>
    • Por pedropgomes
      Gostaria de saber se uma imagem .PNG é uma imagem vetorizada :D