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

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 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
    • Por sergionpinheiro
      Bom dia Galera,
       
      Estou com uma pequena dúvida. Estou usando uma classe para fazer redimensionamento de imagens. Ela está funcionando perfeitamente, o meu problema é que quanto redimensiono uma imagem .png, a nova imagem fica com fundo PRETO. Alguém sabe dizer como faço para ficar com fundo transparente?
       
      Segue a classe:
       
      <?php # ========================================================================# # # Author: Jarrod Oberto # Version: 1.0 # Date: 17-Jan-10 # Purpose: Resizes and saves image # Requires : Requires PHP5, GD library. # Usage Example: # include("classes/resize_class.php"); # $resizeObj = new resize('images/cars/large/input.jpg'); # $resizeObj -> resizeImage(150, 100, 0); # $resizeObj -> saveImage('images/cars/large/output.jpg', 100); # # # ========================================================================# Class resize { // *** Class variables private $image; private $width; private $height; private $imageResized; function __construct($fileName) { // *** Open up the file $this->image = $this->openImage($fileName); // *** Get width and height $this->width = imagesx($this->image); $this->height = imagesy($this->image); } ## -------------------------------------------------------- private function openImage($file) { // *** Get extension $extension = strtolower(strrchr($file, '.')); switch($extension) { case '.jpg': case '.jpeg': $img = @imagecreatefromjpeg($file); break; case '.gif': $img = @imagecreatefromgif($file); break; case '.png': $img = @imagecreatefrompng($file); break; default: $img = false; break; } return $img; } ## -------------------------------------------------------- public function resizeImage($newWidth, $newHeight, $option="auto") { // *** Get optimal width and height - based on $option $optionArray = $this->getDimensions($newWidth, $newHeight, $option); $optimalWidth = $optionArray['optimalWidth']; $optimalHeight = $optionArray['optimalHeight']; // *** Resample - create image canvas of x, y size $this->imageResized = imagecreatetruecolor($optimalWidth, $optimalHeight); imagecopyresampled($this->imageResized, $this->image, 0, 0, 0, 0, $optimalWidth, $optimalHeight, $this->width, $this->height); // *** if option is 'crop', then crop too if ($option == 'crop') { $this->crop($optimalWidth, $optimalHeight, $newWidth, $newHeight); } } ## -------------------------------------------------------- private function getDimensions($newWidth, $newHeight, $option) { switch ($option) { case 'exact': $optimalWidth = $newWidth; $optimalHeight= $newHeight; break; case 'portrait': $optimalWidth = $this->getSizeByFixedHeight($newHeight); $optimalHeight= $newHeight; break; case 'landscape': $optimalWidth = $newWidth; $optimalHeight= $this->getSizeByFixedWidth($newWidth); break; case 'auto': $optionArray = $this->getSizeByAuto($newWidth, $newHeight); $optimalWidth = $optionArray['optimalWidth']; $optimalHeight = $optionArray['optimalHeight']; break; case 'crop': $optionArray = $this->getOptimalCrop($newWidth, $newHeight); $optimalWidth = $optionArray['optimalWidth']; $optimalHeight = $optionArray['optimalHeight']; break; } return array('optimalWidth' => $optimalWidth, 'optimalHeight' => $optimalHeight); } ## -------------------------------------------------------- private function getSizeByFixedHeight($newHeight) { $ratio = $this->width / $this->height; $newWidth = $newHeight * $ratio; return $newWidth; } private function getSizeByFixedWidth($newWidth) { $ratio = $this->height / $this->width; $newHeight = $newWidth * $ratio; return $newHeight; } private function getSizeByAuto($newWidth, $newHeight) { if ($this->height < $this->width) // *** Image to be resized is wider (landscape) { $optimalWidth = $newWidth; $optimalHeight= $this->getSizeByFixedWidth($newWidth); } elseif ($this->height > $this->width) // *** Image to be resized is taller (portrait) { $optimalWidth = $this->getSizeByFixedHeight($newHeight); $optimalHeight= $newHeight; } else // *** Image to be resizerd is a square { if ($newHeight < $newWidth) { $optimalWidth = $newWidth; $optimalHeight= $this->getSizeByFixedWidth($newWidth); } else if ($newHeight > $newWidth) { $optimalWidth = $this->getSizeByFixedHeight($newHeight); $optimalHeight= $newHeight; } else { // *** Sqaure being resized to a square $optimalWidth = $newWidth; $optimalHeight= $newHeight; } } return array('optimalWidth' => $optimalWidth, 'optimalHeight' => $optimalHeight); } ## -------------------------------------------------------- private function getOptimalCrop($newWidth, $newHeight) { $heightRatio = $this->height / $newHeight; $widthRatio = $this->width / $newWidth; if ($heightRatio < $widthRatio) { $optimalRatio = $heightRatio; } else { $optimalRatio = $widthRatio; } $optimalHeight = $this->height / $optimalRatio; $optimalWidth = $this->width / $optimalRatio; return array('optimalWidth' => $optimalWidth, 'optimalHeight' => $optimalHeight); } ## -------------------------------------------------------- private function crop($optimalWidth, $optimalHeight, $newWidth, $newHeight) { // *** Find center - this will be used for the crop $cropStartX = ( $optimalWidth / 2) - ( $newWidth /2 ); $cropStartY = ( $optimalHeight/ 2) - ( $newHeight/2 ); $crop = $this->imageResized; //imagedestroy($this->imageResized); // *** Now crop from center to exact requested size $this->imageResized = imagecreatetruecolor($newWidth , $newHeight); imagecopyresampled($this->imageResized, $crop, 0, 0, $cropStartX, $cropStartY, $newWidth, $newHeight , $newWidth, $newHeight); } ## -------------------------------------------------------- public function saveImage($savePath, $imageQuality="100") { // *** Get extension $extension = strrchr($savePath, '.'); $extension = strtolower($extension); switch($extension) { case '.jpg': case '.jpeg': if (imagetypes() & IMG_JPG) { imagejpeg($this->imageResized, $savePath, $imageQuality); } break; case '.gif': if (imagetypes() & IMG_GIF) { imagegif($this->imageResized, $savePath); } break; case '.png': // *** Scale quality from 0-100 to 0-9 $scaleQuality = round(($imageQuality/100) * 9); // *** Invert quality setting as 0 is best, not 9 $invertScaleQuality = 9 - $scaleQuality; if (imagetypes() & IMG_PNG) { imagepng($this->imageResized, $savePath, $invertScaleQuality); } break; // ... etc default: // *** No extension - No save. break; } imagedestroy($this->imageResized); } ## -------------------------------------------------------- } ?>