A blog sharing resources and inspiration for designers

  • Jun 03 / 2014
  • 0
SVG_thumb
Designer Tips, Graphic Design, Resources, Technology, Tutorial, Uncategorized, Web Design

Exporting SVG’s Directly from Photoshop

SVG_feature

I’m always trying to streamline my design process to make the transition from design to build much easier, one particular part of this process which seems to be getting more common is exporting SVG object for the Front End Developers. This post is about exporting icons or objects used in your Photoshop file as SVG files without having to re-create anything in other programs.

When working with icons I usually copy and paste from Adobe Illustrator to Photoshop as a Smart Object, allowing me to scale and change the layer style to suit my design. When it comes to exporting these icons either the FED (Front End Developer) or myself would double click on the smart object which would open it up in Illustrator, and export it from there. One of the main issues with this method is that if I’ve resized the element in photoshop it doesn’t change the original object, so when it’s saved out we would have to manually change it either in Illustrator or in the build, both of which take time.

There doesn’t seem to be an in-built way in photoshop to export a smart object as SVG without having to export the paths to illustrator and then saving it out as a SVG from there, which I hope is incorporated into the next release.

There is, however, a script that I’ve stumbled upon which allows you to export shape layers to SVG directly from Photoshop. I’ve tested this out and it works well for your files as long as you’ve set them up properly. The script can be found here – http://hackingui.com/design/export-photoshop-layer-to-svg/

Install the Script

Place the script file in your photoshop scripts folder as instructed on the download page here.

Copy your vector file

SVG_1

 

Paste as a Shape Layer

All you have to do is paste those icons/elements into your photoshop file as Shape Layers instead of Smart Objects. This still allows you to scale them without loosing quality and also lets you fill it with a colour and apply layer effects easily. You do loose the ability to have it as a global element but it’s a sacrifice that is needed for this script to work.

SVG_2

 

Add .svg to your layer name

Add ‘.svg’ to the end of the layer name of your object and then run the script. All the Shape Layers which have .svg on the end  will be exported as an SVG files into the same folder as your psd, with the artboard cropped to the element (which is also something that normally has to be manually done in Illustrator).

SVG_3

 

Problem solved! In some cases…

In other cases you will find that only part of your icon was exported as per my example below.

 

Broken SVG

SVG_4

The way around this is to make sure the file which you’re copying from Illustrator is a compound shape that has no unnecessary elements in it. After lots of trial and error I’ve come up with a simple fix that should make sure your file exports properly.

 

Merge your vector file

First step is to merge the icon in illustrator using the Pathfinder > Merge tool.

SVG_5

 

Delete unnecessary layers

After you have merged the file, expand the layers panel to see every element of the icon. You need to delete any unnecessary layers like the empty paths highlighted in the example below.

SVG_6

 

Make Compound Path

After the empty layers are deleted, select your whole file and then use Object > Compound Path > Make. This will convert the icon into a compound shape which you can then use in Adobe Photoshop.

SVG_7

 

Paste as shape layer, add .svg, run the script

After you’ve pasted it in Photoshop as a shape layer and added .svg to the layer,  run the script as I’ve outlined above and you should get a beautiful SVG file like the example below.

SVG_8

 

This method is one that has worked for me, you may need to play around with the shape in illustrator to make a proper compound shape depending on your file.

SVG’s are becoming widely used in website design and I’m sure there will be more solutions for creating these assets in the future, but for now there seems to be only a few options so hopefully this quick fix helps in the mean-time.

 

 

  • Nov 21 / 2013
  • 0
tripview
Graphic Design, Redesign, Uncategorized

Redesign – Transport App

After becoming frustrated with the UX and look of the TripView app I use to check my train timetable I decided to give it a visual and User Experience make-over. The old app had too many steps to get to the trip view, had features hidden away and icons which were very unclear.

trip_01

The above screen is a gateway to the type of transport you wish to look up. The existing app only had a welcome message and required you to click on a + button to get to another screen which had these options. I’ve added a menu button to house all the tools and settings pages since they were too hidden and unclear in the previous app.

 

trip_02

This screen gives you the option to start a new trip or choose from some of the other handy tools, in this case the network map and locator.

 

trip_03

I’ve created the Trip View screen in a clean and clear way, allowing you to easily see the information you need. The secondary information has been left small and out of the way so it doesn’t distract you from what the user would need to see. I’ve also added a ‘view’ toggle to choose from options which were previously hidden in an obscure button.

 

trip_04

I also created a new set of icons for the app with a clean style to help you easily find what you’re after.