What's new

Tutorial How to create vector type in Photoshop (CC 2015 and up)

  • Thread starter Knowledge
  • Start date
  • Views 337
Knowledge

Knowledge

<3
VIP
Retired
Messages
6,768
Reaction score
6,346
Points
2,000
Sin$
0
So in Photoshop you are able to export things as an .svg format. For those of you who are unaware of what a .svg is, svg stands for Scalable Vector Graphics. This means that the graphic you make can scale with no bluring because it uses vector rather than raster to display the image (that's a completely different tutorial and I'll make that soon).

So to start with, make a canvas in Photoshop. Doesn't matter what size to begin with so I'll go with 500px by 500px.
URzVH7v.png

From there, delete the background layer (if you have one), grab the type tool "T" and type out what you want. In this case I'll just use the number seven.
bRNuxxx.png

From here right click on your type layer and click on "Convert to Shape" (highlighted in blue). From here, you will no longer be able to edit what the type says, so make sure to this after you're happy with what it says.
BHMEG5C.png

Once you've done that your type layer will be turned into a shape layer, and is now a vector graphic, rather than a raster one.
Before.
lkghBwT.png


After.
9OGC2fz.png

Now to save the svg. Before saving, make sure that you have only the vector (shape) layers in your PSD. If you have any layers that are not vector (shape) layers in your PSD this will not be a vector! Once you've done that, go to "File > Export > Export as..." This will bring up the following window.
VJwFTr6.png

From here you have a few options:
tjvF0pu.png

With this menu you are able to save your SVG in multiple sizes with the suffix of your choice.
BTtYhOL.png

This is where you will set it to output as an SVG. The drop down menu offers PNG, JPG, GIF and SVG (svg is the one you want for this).
WSJRZwr.png

Allows you to alter the size of your image. Because we're working in vector graphic you can make this as big or as small as you want.
EhDNDeS.png

With this you can crop your canvas to better suit your image. If you wanted to do this I'd use the crop tool as you get better control over it, rather than messing with a few numbers.
UvPuJqb.png

Used to store information in the image. Generally I leave this on None because I have no need for this...

If you want better information on the different options then head to this link.

Once you have everything set up how you're happy with it then click on the Export All button at the bottom and save it.

Here is an example of a vector graphic for you to play with (zoom in and out and you'll notice that the edges don't blur at all as you do so, while regular raster images will blur because of you zooming in.

7_2.svg
 
Top Bottom
Login
Register