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.

 

 

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

  • 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

  • Jul 24 / 2013
  • 0
skuo
Web Design

Skeuomorphism – What is it & does it work?

header

Skeuomorphism is the term used to describe objects that emulate another material or a real world object, in the design industry it’s often referring to interfaces which use things like textures, shadows and effects to make digital things look real.

A perfect example of this is Apple’s notes app which looks like yellow lined paper, people recognise it as a notepad and use it the same as they would in the real world. Using this metaphor in design is getting met with both love and hate, people are turning against it as the trend is starting to get old but there are some which value its use.

notes

I think there’s a place for it in design but it has to be thought about and treated well. The reason I would use skeuomorphism in my work would be to help the user feel more comfortable with my product because it would appear more familiar to them. A button that looks like something you can actually press may scream “Oh, that’s what I’m meant to click on” but may not be the best looking solution. A toggle to turn something on/off can use skeuomorphism to help indicate that the object can be moved similar to a light switch, but doesn’t have to go as far as imitating it exactly. The example below shows how you could treat a toggle without, with, and a hybrid of skeuomorphism.

tabs

 

If you look at most digital magazines and books available now you’ll see that the designer has translated a print piece into the digital format instead of taking the medium and doing something that is appropriate and engaging. Why should we be limited to traditional thinking when it comes to these things? We should be pushing for solutions which enhance the whole experience of reading, get rid of those annoying page flips and add some seemless scrolling.

In saying that, we also need to be careful that we don’t use interactivity for the sake of it, at the end of the day the content is what it’s all about so we shouldn’t let the chrome (the graphical framework and elements surrounding the content) get in the way. Make it more about what you want to do instead of what device you’re currently using.

There are also technical implications of using skeuomorphism in your designs which may negatively impact the usability of your app/site. Adding textures, shadows, text effects, reflections and any other bits of detail which makes something look more realistic adds filesize in most cases, and also makes it take longer for the device to render. A few seconds of loading time in this day and age can loose you an audience, with everything in the world becoming more and more immediate the average attention span is getting smaller and smaller. There are studies that state how little you actually have to capture people’s attention online.

Apple has been a massive trend setter for using skeuomorphism in their designs, Steve Jobs was allegedly a big fan of it and you can see countless examples in their current interfaces. The company seems to be cutting their ties with this trend and moving toward a flatter and more functional look, this is probably due to Jony Ives who wasn’t a fan of it.

apple

The upcoming release of iOS7 is a great example of this, they have ditched all those shiny buttons and replaced them with flat elements.

iphone

 

People aren’t completely stupid, digital has been around long enough for most people to have learnt what a button is. If they can’t figure it out then it’s probably not even their fault, you should look at the UX to make sure everything is in a logical position. A button should be easily recognised as a button no matter how it’s styled.

 

 

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

  • Jul 01 / 2013
  • 0
hungry
Inspiration

Stay Hungry

hungry

I’ve just arrived back in Sydney after a weekend trip away to QLD, one of my work-mates was competing in a Brazilian Jiu Jitsu competition and I went along to support and see what it’s all about. It was great to get out of Sydney and get away from the recurring schedule that life turns into, but most importantly I took away from this trip the drive to commit and improve at certain aspects of life.

 

All the BJJ (brazilian jiu jitsu) crew that I was introduced to were incredibly committed and focused on their art, but still realised the importance of having a work/life balance and enjoying themselves. There is an underlying drive in all of them which is to be the best at what they enjoy, which in this case is BJJ, and which in turn makes them incredibly happy.

 

I found it similar to how I feel about design, I love doing it and want to become as good as I can at it. As a designer you like to try and improve, or at least you like to think you do, so seeing the determination and passion that all these guys/girls in BJJ have has made me hungrier than ever to be better, the best, and to enjoy it a hell of a lot more.

 

The moral of the story…STAY HUNGRY!

 

And a massive well done to my mate Miter for winning two gold medals, and Kit for his massive stash of them too. Ossssssss.

  • Jun 17 / 2013
  • 0
inspiration
Inspiration, Resources

Where to find inspiration

brains

In my previous article I talked about creating an image library of references that can help your design process, this post will share some of my favourite places to find these images.

I find my inspiration online, in real life, and through apps like instagram. Sometimes you can find inspiration from the most random places and in today’s world there’s no excuse not to capture those moments. Most of the population have camera enabled smart phones which can upload within seconds, so it’s getting easier and easier to collect.

There are a few go to sites which I regularly check to get inspired, here are my favourites ones:

Behance
behance

This online community of artists is an awesome way to get inspired and collect example of well-crafted artwork across a variety of disciplines. Most of the portfolios on Behance are of a very high quality and are by the top designers and agencies from around the world.

The Behance network also host some ‘served‘ sites which focus on the best work in specific areas such as Web Design, Typography, Branding and even collections curated by top digital agencies like R/GA called Digital Age Served.

Behance is a great way to gain exposure as a designer, I suggest signing up for free and posting some work to get noticed.

 

Dribbble
Dribbble

If you’re not familiar with Dribbble, it’s a social network that lets designers, illustrators and digital artists post detailed screenshots of whatever they are working on. It’s especially useful for finding reference of pixel perfect interface elements, a search for something like ‘buttons‘ will give you a collection of very highly crafted button styles, which can influence your designs.

Dribbble is strictly invite only, which makes sure that all the work posted is of a high standard. It’s also very community driven and let’s other designer provide feedback on your posts and give suggestions.

 

Designspiration
Designspiration

Designspiration is a way to discover and share your design, architecture, photography and fashion inspiration. The site also has a handy search function, which lets you filter by colours to help you find what you’re looking for.

 

fffound
FFFFOUND

ffffound isn’t just great fun to say, it’s an awesome collection of designs, photography and artwork which is submitted by the community. The more you use this site the more it learns about you and caters what you see to your tastes.

 

Awwwards
Awwwards - Website Awards - Best Web Design Trends

Awwwards is a showcase of the best of the best. It exists to award the best developers, designers and web agencies from around the world. Submissions are reviewed for design, creativity, usability and content which makes sure the sites don’t just look nice, but work well.

 

Site Inspire
siteInspire

Site Inspire is another site which showcases great web design. There are lots of great examples of minimal, clean, and responsive websites.

 

Here are a bunch of others which are also worth checking out:

DeviantART

Smashing Magazine

The Cool Hunter

Pattern Tap

I Love Typography

TheFWA

One Page Love

Pinterest

Stumble Upon

There are so many other sites out there which showcase great work, the above links are just some of my favourites which I regularly browse. I suggest subscribing to their RSS feeds so you can see all the new work in one place.

 

 

 

 

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