Recently I finished a large redesign project at my company, SimilarWeb. In this project I had to create (and constantly update) an iconfont made out of SVGs that I exported from my Photoshop designs.
In this post I’ll explain how I used the “PSD layers to SVG” script to drastically improve my workflow.
When working on a large design project, I like to create a separate PSD containing all the shapes and icons that I want to export as SVGs.
I recommend putting this PSD in a separate folder inside the main project folder (i.e [projectname]/svgs/svgs.psd). The script will later export the SVGs to this folder, so you’ll want to get something like this at the end:
In the SVG PSD, make sure of the following:
- Name the layers properly (with names that you’d like to export them as), and make sure you have “.svg” at the end.
For renaming multiple layers and adding the “.svg” ending I used a $10 plugin called Renamy.
I made a keyboard shortcut for it. So to rename I chose the layers I wanted, entered the keyboard shortcut (CMD+Alt+R in my case), and then typed *.svg and pressed Enter. There is also a free batch layer renaming tool by captain awesome that came out recently. It really looks awesome but I didn’t try it yet.
- Make sure each vector shape you have is a closed vector.
- Make sure all shapes in the icon are merged.
- All the points of that shape are selected: Choose the vector selection tool (or click A), then choose the shape to see its vector points, then select all of the shapes points by clicking and dragging the tool, and then exit the selection tool. Its not as long as it seems, just a second.
Now the only thing left is to export. I’ve been using the PSD to SVG script that David and I put together. You’re welcome to download it for free.
I made a shortcut for it cmd+alt+e.
Updating and maintaining the doc
You’re probably asking yourself: “Will the script re-export all my SVGs every time I have a new asset?”
Well, after I export all the icons I want, I make sure to remove the “g” at the end of the layer names (i.e “coolicon.svg” –> “coolicon.sv”). I do it by simply going to the top icon and editing its name and then clicking “tab” and “backspace” over and over until I’ve changed all the icon names I need. Once the layer name ending is “.sv” and not “.svg” the script wont recognise it next time I run it.
Creating the iconfont
I save the iconfont each time in a shared “slices” folder. Then I make sure to notify the devs when I’ve updated the iconfont so they can update it in the code.
That’s it. If you have any suggestions or questions about this workflow – feel free to ask here in the comments.
More UX & Frontend goodness
- Master Class #5: Why we should care about avatar embodiment in VR (w/ Ayelet Batist) - April 25, 2017
- Master Class #4: The Soul in The Machine – Developing for Humans (w/ Christian Heilmann) - April 20, 2017
- Master Class #3: How personal AI revolutionized our digital experience (w/ Ori Shaashua) - March 21, 2017
- Intro: How websites actually work - March 13, 2017
- Choose a domain name that will strengthen your brand - March 13, 2017
- Technical tips when buying your domain name (and what mistakes to avoid) - March 13, 2017
- Creative ways to get a website up with no hosting or actual ‘website’ needed - March 13, 2017
- Bought a domain and decided to put up a website? Here’s how you can do that - March 13, 2017
- Master Class #2: Getting Buy-In (w/ Dan Mall) - March 10, 2017
- Master Class #1: This is Our New Robot, He’s Here to Replace You ( w/ Matty Mariansky) - February 16, 2017