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.

  • Jul 17 / 2013
  • 1
freebie_thumb
Freebies, Resources

Freebie – Motivational wallpaper

motivation_wallpaper

‘Train like an athlete, Eat like a nutritionist, Sleep like a baby, Win like a champion.’ – I’ve always been a fan of this saying so I decided to turn it into a wallpaper for my phone to act as extra motivation to head to the gym. This wallpaper is free to download for iPhone 4, iPhone 4s, and  the iPhone 5, if you want it on a different device just let me know the dimensions in the comments section below and I’ll create it for you.

 

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

How and why to make a clickable prototype

proto

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:

wireferame1

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:

design-wireframes

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.

tutorial_1

Step 3 – Insert the image file for that page

tutorial_0

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

tutorial_2

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.

tutorial_3

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.

tutorial_5

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

tutorial_6

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.

tutorial_7

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.

tutorial_8

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

tutorial_9

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!

 

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