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.

 

 

  • May 14 / 2014
  • 0
showcase_thumb
Graphic Design, Inspiration, Showcase, Technology, Web Design

Showcase of Website Transitions

showcase_header

Code And Theory

The more I explore this site the more I love it, from the entertaining animations to the interesting behaviour of elements as you resize the browser.

code-theory
Visit Code And Theory.

Agency Survival Kits

You can tell straight away that this site was built with love, the way every part of it is crafted is a testament to the skill and passion of the team behind it. Passion projects like this always end up looking the best due to the effort that goes into making them perfect.

survival
Visit Agency Survival Kits.

Ondo

This site is art. They have taken code, colour, images, text, and turned it into an interactive visual artwork. The interactions on this site are fun to play with and it’s just wacky and awesome.ondo
Visit Ondo.

Studio Songes

Another site that I would consider an artwork. The transitions as you scroll on this site are so smooth, giving a 3D illusion which is pushing the boundaries of the web. Smooooooth scroll.

le-studio
Visit Studio Songes.

Mobee

Mobee rewards you for scrolling with the fun transitions are throughout this site, I haven’t seen many sites go against the norm like Mobee have, but it’s definitely paid of for them. A great experience.

mobee
Visit Mobee.

  • Apr 16 / 2014
  • 0
thumbnail_home_office
Graphic Design, Inspiration, Resources

The perfect home office

office_feature

Since starting out as a freelancer this year I’ve set up a home office for my design work. Finding the right combination of furniture and accessories to make a creative environment can be tricky, expensive, and rewarding. My current set up is a work in progress and so far is made up of IKEA furniture, design books, and my essential mac hardware. I’ve collected a few items which are on my wish-list which I’ll post here, some of them I have, others are too expensive.

The Desk

artifox
The Artifox Desk

This handcrafted desk not only looks beautiful but is functional and is likely to increase your workflow. With seamless docks for your devices, out-of-sight cable management and even a writable/erasable board to write down those important notes this is a very well considered design and would look nice in any setting.

The iPhone/iPad Cover & Dock

dock
Grovemade iPhone Covers & Docks

These crafted wooden covers for iPhones, iPads, Laptops, Notebooks and docks look great. Grovemade have used good quality steel and wood to create their range of products, have a look at their site for the full range.

The Clock

time_travel
Timetravel Wall Clock by Tobias van Schneider

Probably not the easiest way to tell the time, but who cares. This clock looks great and would get your mind wandering in those daydream moments.

The Artwork

get_shit_done
Get Sh*t Done Poster

For those times that you need reminding to stop procrasinating and get to work, this poster helps kick your ass into gear.

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

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

  • Aug 28 / 2013
  • 0
rams
Graphic Design, Inspiration

Dieter Rams – Less, but better

dieter_cover

Dieter Rams is a German industrial designer who has had a timeless effect on design. His influence can be seen in the iPhone in your hand, your bedroom clock radio and many other products available today. His style of design can be summed up by the phrase he uses, “Weniger, aber besser“, which translates as “Less, but better“.

rams_7

 

 

The Ten Commandments for good design which he created can be applied to all facets of the design industry, he absolutely nails it:

  1. Good design should be innovative — It does not copy existing product forms, nor does it produce any kind of novelty just for the sake of it. The essence of innovation must clearly be seen in all of a product’s functions. Current technological development keeps offering new chances for innovative solutions.
  2. Good design should make a product useful — The product is bought in order to be used. It must serve a defined purpose, in both primary and additional functions. The most important task of design is to optimise the utility of a product’s usability.
  3. Good design is aesthetic design — The aesthetic quality of a product is integral to its usefulness because products we use every day affect our well-being. But only well-executed objects can be beautiful.
  4. Good design will make a product understandable — It clarifies the product’s structure. Better still, it can make the product talk. At best, it is self-explanatory.
  5. Good design is honest — It does not make a product more innovative, powerful or valuable than it really is. It does not attempt to manipulate the consumer with promises that cannot be kept.
  6. Good design is unobtrusive — Products fulfilling a purpose are like tools. They are neither decorative objects nor works of art. Their design should therefore be both neutral and restrained, to leave room for the user’s self-expression.
  7. Good design is long lived — It does not follow trends that become out-dated after a short time. Well designed products differ significantly from short-lived, trivial products in today’s throwaway world.
  8. Good design is consistent in every detail — Nothing must be arbitrary. Thoroughness and accuracy in the design process shows respect towards the user.
  9. Good design should be environmentally friendly — Design must make contributions towards a stable environment and sensible raw material situation. This does not only include actual pollution, but also visual pollution and destruction of our environmet.
  10. Good design is as little design as possible — Less is more – because it concentrates on the essential aspects and the products are not burdened with non-essentials. Back to purity, back to simplicity

rams_2

Dieter creates stylish products which are both functional and aesthetic, he has even been credited for influencing many of apple’s products. His work has been exhibited across the world and even if it was created years ago, still proves to be timeless. I type this as I’m wearing a Braun Watch designed by the man himself.

rams_1

rams_5

rams_3

rams_6

rams_4

For more Dieter Rams inspired work, check out this Tumblr dedicated to his style