How to Resize and Export Vector Icons (SVG) in GIMP

Описание

A demo and tutorial on how to use and edit vector icons in GIMP.

Full tutorial coming soon on the blog (http://medialoot.com/blog)

View our collection of icons here: http://medialoot.com/icons/

Become a Medialoot member at http://medialoot.com/join and get unlimited access to all of our resources for just $14/month.

-------

Transcript:

Hey guys, it's Jenn Coyle. The Community Manager at Medialoot.com.

Today we're going to be working with some of our icons in the software GIMP which is a free alternative to Photoshop. We've gotten a question on how to use and work with vector icons within GIMP with a Medialoot resource. Just make sure that you're going to choose something with a SVG file type.

Make sure you're logged into Medialoot. Or if you're downloading a freebie you can go ahead and click download. The Vector Science Icons are a premium resource so I'm going to go ahead and click download here.

Unzip the file.

Notice that it's in my downloads file when I need to access it there.

Next step we're going to go ahead and open GIMP.

If you wanted to use one icon from our icon set you can see that there are a lot of icons within this Science Vector Icons set. There are even more if you click on the extra preview.

Switch back over to GIMP. What I'm going to do is work with this in Paths. First we need to create a new file.

Say I want to have my end product be about 500x500px. I'm going to click on Advanced Options and I want to make sure that it's going to have a transparent background that way it can be exported as a PNG with a transparent background. Go ahead and click OK.

And next step is to IMPORT (I said export by accident) the SVG's. Within the Layers dialogue I'm going to click on the Paths tab here. Then this little button is the configuration. Hover over Paths Menu. Scroll down to Import Path.

I'm going to locate the files I just downloaded. Here are the Vector Science Icons, and the SVG file type is going to show up because that is what you can import. Click open.

I know the icon I want is in here somewhere. What I'm going to do is click around until I find it.

Say I wanted to use the telescope. Now that I've found it, I can click on this path and hide the rest.

Next what I want to do is move it towards the center of the document so when I go to scale it up it will be in the center and it'll be easier to work with.

First click on the Move tool. You can also use the shortcut "M" on your keyboard. This is an important part: what I'm going to do is make sure to click on Move Path, because if I try to move it as a layer it'll just get incredibly frustrating and then it will not work. So make sure to click on Move Path and then you want to click on Move the Active Path.

Within here I can go ahead and click and move just like you would with any other tool.

Now it's time to resize this telescope.

I'm going to click on the Transform Tool or as known in GIMP as the Scale Tool. You can either click on the toolbox here or you can click SHIFT + T for Transform.

There are a couple of things you want to do here. You also want to transform the path and not the layer. And then within the Scale Dialogue box, click on the lock button so you can make sure to keep the aspect ratio so it doesn't get all stretched out.

Now from here, it's a little not-graceful. Go ahead and drag out towards the diagonals until you get the correct size. That's close enough.

Now what I'm going to do is lock that in place by clicking Scale. And from here we have the path that's resized. What I'm going to do now is select the path so I can go ahead and fill it in in the next step. You can do this a couple of ways. You can do this by clicking the Path to selection choice right here or you can go up to Select and then Select from Path and you can see the shortcut is SHIFT + V.

You can see the path is selected.

From here I'm going to choose the foreground color that I'm going to eventually have. Black is okay, so I'll click OK. And the shortcut now is to click CMD/CTRL + "comma" which will fill in the path with your color.

To deselect everything so you don't have a bunch of marching ants, you can do CMD/CTRL + SHIFT + A. You can also do this by going up to Select, None.

From here our path and icon is resized to a much larger size. Whatever you need to use it for you can now use it, and you've done it all in GIMP.

The last step is to export the file. Go up to File, Export or just click CMD/CTRL + E.

And I'm going to rename this as "telescope" and make sure to scroll down and select the PNG filetype.

Click Export. Click Export again.

Now if I go to my documents where I've exported it, you can see the PNG file and that is all set with very clean lines and no raggedy edges from trying to scale up a bitmap resource.

So there you have it. You've now exported an icon and scaled it up within GIMP.

I hope you enjoyed this tutorial.

Make sure you subscribe to our channel to learn how to use Medialoot resources.