A blog sharing resources and inspiration for designers

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

Exporting SVG’s Directly from Photoshop


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



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.



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).



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


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.



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.



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.



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.



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.



  • Jul 03 / 2013
  • 1
Resources, Tutorial, Web Design

How and why to make a clickable prototype


When I say clickable prototype I’m talking about a series of flat pages/designs which have basic functionality to let you click through to each page.

When I was first asked to create a clickable prototype I was totally against it, I didn’t want to waste the time which I was allocated for design on creating this clickable HTML file which I didn’t think was even necessary. I’ve since been proven very wrong, I now see a clickable prototypes as an essential tool in the design process to inform the design, help the client understand how the site will work, assist the developers is knowing how you picture the site working, and filling any holes that exist.

There have been countless times that you design a site and then towards the end of the project you realise there are pages which haven’t been created yet, developers will ask ‘where is the Terms page?‘, ‘what does this pop-up look like?‘, so many little elements that you sometimes skip over in design. The prototype helps fix this by showing you exactly what hasn’t been designed yet so you can address it earlier and do it properly instead of rushing to finish those pages in the little remaining time that you have.

To put it simply, the process that I’ve been following has been this:

  1. Clickable wireframes
  2. Look and feel/clickable designs
  3. Development

The first clickable prototype would include wireframes of the site. A wireframe is simply a blueprint of the website, it’s a visual guide (usually black and white) that represents the framework of the website and the hierarchy of content. Here’s an example of a wireframe:


After the wireframes have been approved we move on to design. There’s an initial mood-board and experimental stage when you create your look and feel for the site and work with some typography, buttons styles, colours etc to get a basic style created. I’ll create another post detailing my methods for this soon. Once you have a sweet direction created, you start to design the pages of the website. At the start you won’t have all of the pages designed, but it’s still valuable to update the prototype with your designs.

At this stage the prototype might have one homepage design, and two remaining pages still in wireframe stage:


Having your design in the prototype lets you check that all the buttons are there, all the things like pop-ups & footer links which are often overlooked actually exist and are in an accessible position, and that everything is consistent across different pages. Showing the client at this stage also helps them understand the progress and even allows approval page by page which makes the whole process run smoother and quicker.

Creating the clickable prototype

Step 1 – Save all your wireframes/designs as flat images

Make sure these image files can be viewed online, I usually just use png or jpg files since they are pretty universal and can be seen on most devices. Save them all into a folder and name them properly so you can easily find what you’re looking for, when you start working with more complicated sites the file naming becomes very essential.

Step 2 – Create a HTML document for the first page

I use dreamweaver for this step but feel free to use whatever program you prefer, I find dreamweaver to be easy and quick for what we need to do here. Create a blank HTML file.


Step 3 – Insert the image file for that page


Step 4 – Create the Title of the page

There is box called ‘Title’ which appears at the top of the program, click on the input box and change it from Untitled Document to the name of the page, for example ‘Website – Home’.


Step 5 – Set the margins to 0

We want to set the margins to 0 so there’s no space around the edges of the page, this helps show the most realistic view of how the site will look once built.

Right click on the page and select page properties, enter 0 pixels into all the margin boxes for top, left, right, bottom.


Step 6 – Save your work

Save the page with a corresponding filename. At this stage you should have a folder structure like this if we’ve set up the home page:

  • index.html
  • website_home.jpg
  • website_about.jpg
  • website_contact.jpg

TIP – Name the homepage of your site as ‘index’, when someone enters the main directory of the URL without having a specific page in the URL, the web browser automatically points you to the index page. This is helpful so you can simply tell people to goto your main URL like halaska.com.au instead of halaska.com.au/my_website_homepage.html

Step 7 – Set up the Hotspot links

In Dreamweaver click once on the image, this should bring up the image properties box. Select the rectangle hotspot tool from the Properties panel and then draw a box around your navigation button or whatever element you want to link up.


Enter the link to the page you wish the hotspot to goto, we are going to link our a page called website_about.html.


Leave the Target field empty unless you want the link to open in a new page within the web browser. You would only really want to do this if you are linking to an external Terms and conditions page or if you have another link which goes somewhere like youtube etc. The main focus should be to keep the user on your page, but if you do want it to go externally you can select ‘_blank’ from the dropdown.


Repeat the above steps for every other element on the page which you want to link up. The things I usually link up are the navigation, footer links, text links, buttons, and images if need be.


Step 8 – Set up the remaining pages

You could manually set up every page like above, but if your pages use a similar layout it’s usually beneficial to just duplicate the HTML page you just created and rename it. In our example we are renaming the file to website_about.html. Open the page up in Dreamweaver and click on the image, a ‘SRC’ field will show the location of the image in the Properties panel, change the value to be ‘website_about.jpg’ instead of ‘website_home.jpg’.


Update the page title and move the hotspots around to match the positioning of those elements on your page if needed. To do this just click on the hotspot, make sure the ‘Pointer hotspot tool’ is selected in the properties panel and then drag the boxes around to the new positions.

Click on each hotspot and update any links that need to change, for example since we are on the About page, we would need to set up a hotspot to take us back to the home page.

TIP – You can select multiple hotspots and then copy and paste them onto other images in other pages, this is helpful down the track when you may change something like the navigation menu and want to quickly apply it to multiple pages.

Step 9 – Test it

Open the home page up in your internet browser and test, test test. This is the time when you realise ‘oh crap, I forgot to design the pop-up for that link’, ‘Why do I have a back button on the homepage if it takes me no-where?’ or ‘where does this button take me? There’s no content created yet…we need to chase that up‘.

Step 10 – Upload it

You can upload the site files to either an internal or external server via FTP for review. You can either set up some sort of preview environment or just link to the specific page. For example I’ve uploaded my files to halaska.com.au/tutorials/clickable-prototype/

This link can be shared with client or just the internal team for them to review and see the progress as you go.

Step 11 – Updating it

If you’re just updating an existing page all you have to do is save over the existing image in the folder and then update any links/positions that might have change in the hotspots.

If you’re creating new pages just follow the same process as I went through above. If you’re deleting pages just remove them from the folder. When you add/remove pages make sure that you update all the links throughout every page so there are no dead links.

Make sure you version control your prototype before making any changes. The easiest way to do this would be to duplicate the whole folder and add a ‘v2′ or date to the folder name on your local machine. When uploading to the server you should just replace the items in the main folder so the preview link doesn’t change.

Step 12 – Test it again


Hopefully this tutorial has helped understand how to create a basic clickable prototype for your website. What happens after the prototype is approved will depend on how you’re getting it developed, bot nonetheless it’s going to help you design a website with a thought-out user experience and that will help the developers understand how it works. It’s also great for showing the team/client progress as you go.

I’ll post a follow-up tutorial on how to make a responsive clickable prototype soon, it sounds a lot harder than it actually is, so stay tuned!