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.

 

 

  • Feb 19 / 2014
  • 0
ps
Designer Tips, Graphic Design, Web Design

Photoshop Etiquette

photoshop

When working with photoshop files the chances of someone else having to use them is pretty high, either a developer to get assets, another designer to make a copy change while you’re home sick, or another agency to use your design. This is why it’s important to keep your .psd file organised, keeping it clean also makes moving around inside your file quicker.

There’s nothing more painful then having to make changes to someone else’s unorganised files, don’t be the designer who has left the file a mess. It’s unprofessional and a massive pain, I know that personally it’s changed my opinion of other designers, sometimes good and sometimes very bad.

Here are some simple tips you can follow to keep your files organised:

1 – Name your layers

Spending that extra few seconds naming your layers at the start of a project will save you valuable time later on.

2 – Group layers logically

When working with layers from a similar area of your design place those layers into a group. This not only helps keep it organised, it makes it easy to move that section around.

3 – Panel Options

A hidden gem of photoshop is the ‘Panel Options’ setting which can be accessed via the menu drop down on the top right of the layers panel. By default ‘Expand New Effects’ and ‘Add copy to copied layers and groups’ will be selected, turn them off!

When working with files that have lots of layers, the expanded effects panels take up a lot of room. The ‘add copy’ gives you layers called ‘BGFILL copy copy copy’ which doesn’t help anyone.

4 – Use smart objects

When working with images you’re likely to have to resize them at some point, when adding them to your file just right click on the layer and click ‘Convert to smart object’ before you scale it down, this way if it has to be made larger later on the image will still appear crisp.

5 – Keep smart objects at a manageable size

Even though smart objects are great for maintaining a high quality design, they also bump the file size up a lot if you’re using huge images. When making them in your file just make sure they aren’t at an unmanageable size before converting to a smart object.

6 – Use version numbers in the file name

Numbering your files makes it easier to find the latest designs.

7 – Avoid layer comps

Some people love them, some people hate them. I hate them. Either way, if you jump into a file which has layer comps and you’re not aware of them, you’re going to end up messing it up. Grouping your layers is a better standard to work to.

8 – Delete unused assets

Throughout your design process you’re bound to have layers in there which are no longer needed, delete them. If you have to go back to a previous version when that layer was needed, you should have it backed up in a previous psd, right?

They might seem like a pain now, but before you know it they will become second nature to you and will save you a world of pain later on.

  • Jul 10 / 2013
  • 2
learn_to_code
Designer Tips, Web Design

Designer Tip – Learn to code

learn_code

The way digital designers work is constantly evolving, photoshop is not enough anymore. Gone are the days where we can just design a beautiful psd file and hand it over to the developers to build, there are so many things which need to be considered and tested when working on a digital project that it requires designers to think beyond the flat image.

One thing that has always helped me understand how the web works is to have a basic understanding of code. My knowledge isn’t too advanced, I can do simple html/CSS and used to be able to get some mad particle animations going using actionscript, but it’s always helped me when designing to know how that element will be built. At the very least I think designers should know how to create a basic html site, in my current role I have to work with html to create prototypes, emails and updating things like preview sites for clients.

Tip – When browsing the internet try right clicking on any element and selecting ‘inspect element’, this will bring up the code for the site which you can play around with. This will help you understand how everything is put together.

You might have also heard the of term ‘designing in browser’ lately, which basically suggests that photoshop many not even be essential for layouts anymore. The designer will create their design elements in html and work out how to set the positions and styles themselves before passing onto the developers. There are good arguments for and against this method which I’ll touch on in another post, but I do know this is already happening in the industry which is evidence that you need to learn how to do some basic code.

Everyone has their own way of learning so I’ll leave it up to you how to go about doing so. I personally learn by doing and jumping in the deep end, I try and code my personal sites and when I run into a problem I just google it. There are many online tutorials and websites dedicated to teaching others, there are even online courses you can do. If you want somewhere to start, try googling introduction to html, there are so many resources out there to pick from.

  • Jun 14 / 2013
  • 2
library
Designer Tips

Designer Tip – Create an image library

library

This is my first tip for anyone who is a designer or works in the creative field, make an image library.

As you develop your design process you’ll come to realise how important the initial research/mood-boarding stage is. You’ll spend hours and sometimes days searching the net for references that could help influence your final design or even just help the client understand where you picture the design going. Instead of heading to google, dribbble, designspiration or wherever you look for reference, why don’t you start off on your local computer. If you have a library of inspirational images/photo/videos/typography/whatever it will save you a heap of time and let you spend more time crafting the work.

I have broken my library down into categories to make finding what I’m looking for even easier, here is my structure:

folder structure

 

I use adobe bridge to browse through my images, I like how you can customise the background colour and change the thumbnail sizes etc. This is my personal preference so feel free to use any other image browser out there which may suit your better.

Adobe Bridge

Having my own image library has been a vital part in improving my design skills, the more reference you can find the better. So if you find something that you like, SAVE IT!

I’ll be posting an article about where you can find nice designs soon, this should help you build up your library in the future.