Many times we need to create a high-resolution image for vector graphics purposes. This article will show you how to create an SVG file from a photo in Photoshop. The procedure will consist of the following steps.
- Open the image in Photoshop
- Create a silhouette on a white background
- Use Gaussian blur to blur the edges
- Use Curves to create a precise edge
- Create a Vector Mask
- Save the file as an SVG file
Contents
Open the image in Photoshop
When selecting an image for SVG file purposes, we do not have to worry about dimensions or resolution. The procedure that we will apply allows us to use even small photos with low resolution.
I downloaded an image of a wolf from the internet, which I use to create an SVG file. Let’s open it in Photoshop.
Create a silhouette on a white background
Suppose we want to create a black and white logo or vector image in SVG file format. We will use the Magnetic Lasso tool and make a selection. For more information about selection read this article.
Gradually drag the mouse around the outline of the wolf. If we go around the small details, we can click to force the anchor point where we need it.
When we have the selection done, we will create a new layer and hide all the underneath layers with the original image.
Now we should only see the selection. Fill the selection with black. Let’s enlarge the picture to see how our selection turned out. If we find inequalities, we adjust them using the Brush or Eraser Tool. We make sure that we use a brush (or Eraser tool) with a hardness of 100%.
When we have adjusted all the inequalities, we look at the created silhouette. In my case, I’m not entirely happy, so I’ll adapt the silhouette using Liquify.
Let’s crop the picture as needed. Now let’s create a white background. We can do this in several ways. For example, we can create a new layer below the image layer and turn it off with white.
I will use a Solid Color Adjustment Layer. This layer must be below the layer of our silhouette. We will choose the color – in our case – it will be white.
Use Gaussian blur to blur the edges
Now let’s merge the white background layer and the silhouette layer. Mark both layers with Shift + Click. Right-click and select Merge Layers.
Since we will use Filters, it will be useful to change the newly created layer to Smart Object. Right-click and select Convert To Smart Object. Go to Filters-> Blur-> Gaussian Blur. We set the value visually so that we can blur any inequalities, but the contour line would still be clear.
Use Curves to create a precise edge for SVG file
Then we will create a new Curves Adjustment Layer. Now we move the lower sliders white and black. We move them closer together. We start with white and pull it to the left and watch the edge of the silhouette sharpen. Then we move the black to the right. Usually, we achieve the desired effect when both sliders almost touch or overlap.
Create a Vector Mask
Now let’s create a consolidated layer using the shortcut Shift Ctrl Alt E (Shift Cmd Opt E on Mac). We will remove the white background because we will no longer need it. We can do it again in several ways.
I will use the Magic Wand tool as we have a well-defined contrast between white and black. Click on the white background and delete it. If you want to learn more about how to remove background pls read this article.
Now use Ctrl + Click (Cmd + Click on Mac) and click on the layer icon. This will make a selection of our silhouette. Click on the Rectangular Marquee Tool.
Right-click within the selected area of the silhouette. The submenu will appear and select Make Work Path. This way, we have a path that we can use, for example, in Illustrator. Right-click within the work path area. In the displayed menu, select Create Vector Mask.
Save the file as an SVG file
At this point, we are practically done. We are only missing the last step, which is to save the image as an SVG file. Go to File-> Export-> Export As. A dialog box will open where we will make the following settings. In the File settings section, set the Format to SVG.
This needs to be changed in most cases, and you can leave all other parameters in the default settings. Press the Export button and select the destination on your disk where the SVG file should be saved.
We can test the SVG file saved in this way by opening it in a web browser.
Another available option would be to save the file using the Save as an option. Here we would choose the option to save as Photoshop EPS. The file saved can be opened directly in Illustrator because it is an EPS vector image.
