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.

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