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
- Submit your portfolio for The New year’s Portfolio challenge - January 2, 2017
- Join The New year’s Portfolio challenge - December 8, 2016
- Announcing the results of the 2016 Design Tools Survey - December 2, 2016
- Take part in the 2016 Design Tools Survey - November 17, 2016
- How to start public speaking – with Rizwan Javaid (SPA alum) - November 1, 2016
- The man who sold his last name and is now selling his future – Jason Zook - September 28, 2016
- Start building your personal Brand (from my talk at ITWeekend in Kiev) - September 18, 2016
- Bryn Jackson (Spec.fm) on how he built a gigantic podcast network with over 5 million downloads - September 8, 2016
- Victor Yocco (UX researcher & Author) on applying psychological theory to digital design - August 31, 2016
- Running Hacking UI as a full time job & launching the Side Project Accelerator - August 22, 2016