The Ultimate Guide To The Best Specs Plugins For Photoshop

image

As you may already know, we’re all about increasing our productivity. This also applies when we’re creating specs files. In the past few months we’ve tried various Photoshop plugins that help us create specs files and wanted to share our findings.

We’ve worked closely with different kinds of development parties in the past. Some of which paid close attention to implementing our designs pixel perfectly. Some of which just did not seem to notice any of the differences between our designs and the final implemented version of our designs. To tackle this problem specs files come in handy.

imageSpecKing at work

An average specs file contains specifications like:

  • margins in between elements
  • styling of elements
  • styling & characteristics of text

At first sight creating these specs files seems very time-consuming. If you really want the product you’ve worked on to look the same as you designed it creating specs files is worth investing time in. We’ve created an ultimate list of Photoshop specs plugins with their own pros and cons. Smaller plugins like the native Copy CSS or CSSHat were also considered but do not offer enough features for this list.

INK (2.1.7)

Ink is a small app created by Chrometaphore with the aim to get designs developed as pixel perfect as they were made by designer.

imageSample specs made using INK

Pros

  • Free
  • Simple UI
  • Makes measuring elements very easy because you can make specs of a selection* Large call-to-action buttons to make specs
  • Compatible with the latest version of Photoshop* Stores all the specs in a Layer Group so you can apply a color overlay to the Layer Group
  • Does measurements and Layer Styles
  • Retina ready

Cons

  • Doesn’t remember the settings you’ve applied. So each time you use the plugin you’ll have to switch the toggles in it’s preferences again.
  • Has no option to make increase canvas size to make room for the specs
  • Doesn’t use annotations on the element you want specs of which results in not being able to move the specs around
  • Adds a background behind the annotation that lays over your design. And because there’s no annotation on the element you want specs of you can’t really place it elsewhere

Pricing Free

Compatible with Adobe Photoshop CS6, CC and CC 2014

Visit website

Specctr Pro

Specctr comes in two versions; a Pro version and Lite version. Obviously the Lite version lacks some of the features the Pro version has.

imageSample specs made using Specctr Pro

Pros (Specctr Pro)

  • Remembers preferences
  • Allows custom options (e.g. ignore certain layer styles, color and font-size)
  • Increases canvas size with the Scale Canvas feature* Multiple color export modes
  • Export CSS

Cons (Specctr Pro)

  • Uses Smart Objects so changing the color of 1 particular annotation takes more time than necessary
  • Can’t measure a selected area* Quite expensive

Pricing

  • free version (Specctr Lite)
  • 1 license $49* 10 licenses $890
  • 20 licenses $1580* 30 licenses $2070

Compatible with: Adobe Photoshop CS6, CC and CC2014

Visit website

SpecKing

SpecKing says that making specs for developers can be very time consuming and we agree. We love their mascotte and their website shows exactly what the plugin offers.

imageSample specs made using SpecKing

Pros

  • The features are placed in different screens
  • Easy to use different colours for things because it uses the background color that you have set in the colour panel of Photoshop
  • You can set the way color codes show up, options are: HEX, RGB and HSL
  • Easily change the design resolution so you can make device specific specs Retina ready

Cons

  • Doesn’t make annotations near the element you want specs of
  • Measurements take quite some space because the amount of pixels is shown in side the area you want to measure so measuring smaller gaps is not possible
  • You can only get Layer Styles of text layers, not for any other type of layers
  • No trial available

Pricing * Single license: $19 * Team Bundle (10 licenses): $149

Compatible with: Adobe Photoshop CS6, CC and CC 2014

Visit website

Assistor PS

Just like SpecKing, Assistor PS claims their plugin (which is actually a stand-alone app) saves valuable time. We found Assistor PS to actually be a pretty decent competitor for our other spec plugins.

imageSample specs made using Assistor PS

Pros

  • Slices layers so you can make assets
  • Has a unit convertor (px to dp)
  • Has a guideguide sort of feature which is nice if you’d use this app for both specs and guides* Free trial available
  • Free for students* You can make an overlay (as shown in the preview)

Cons

  • It’s a stand-alone app which is really slow to startup
  • Doesn’t blend into your PS workflow
  • Only makes specs of Layer Styles for text layers, not for shapes or any other type of layer

Pricing

  • Students: Free
  • License: $9.99 per month (but it’s a free download)

Compatible with: Adobe Photoshop CS6, CC and CC 2014

Visit website

In Conclusion

There you go; a full round-up of the best specs plugins for Photoshop. If you’re looking for a spec plugin that does a great job at making specs yet isn’t too expensive you should definitely go for Ink. When your designs are a little more complex however you’ll probably find Specctr-pro to be most suitable.

Go ahead, download Specctr or Ink.

Say hello to: Davey

image

Whenever a new team member has started reinforcing the Yummygum team not only do they get added to the About Page on the Yummygum website, we also ask them to introduce themselves in a blogpost.

"My name is Davey and I’ve just started out as an intern at Yummygum. Before my internship I had already been working part-time at Yummygum as a Junior Visual Designer during my second year of my study; Communication and Multimedia Design.

Let’s start at the beginning though. I’m not one of those kids that got a computer when they were 3 years old, rather I started messing around with the keyboard when I was around 14 years old and I got connected to the internet. My sister’s boyfriend was into programming so he taught me the basics of web development and that’s where the ba ll started rolling for me. I stayed interested in websites and found my interest in apps when the smartphones were claiming their spot into society.

I learned a bunch by creating websites of all kinds, but most importantly I loved doing it. Back in 2009 I decided to completely focus on User Interface Design because it felt like it was the right thing to do. I spent a lot of time on reading and practicing (mostly trial and error) in that area of expertise. At Yummygum I will be focussing on designing user friendly websites and apps. I will be doing Visual Design but also focus on the other parts of our job, Interaction Design and User Experience.

Apart from design I like to discover new music, watch movies, go out or take beautiful pictures. Last but not least I enjoy cooking food that I preferably eat with company. I’m really looking forward to create great things with the Yummygum team.”

PSD Freebie: Facebook, Twitter & Pinterest buttons

image

PSD Freebie: Facebook, Twitter & Pinterest buttons

As a designer you might be asked to create a design that involves a Facebook follow button, a Pinterest widget or a Tweet button. Making & using proper screenshots of these elements can be a pain in the butt, as the buttons are rounded rectangles and cutting out rasterized border radiuses can be pretty annoying.

We were asked to use a couple of social buttons for a website design so we recreated the official Facebook and Twitter buttons. That’s when we decided to expand the set of buttons while we were at it and share it with you. Everything is done using vector shaped layers which means it’s scalable to retina size without any loss of quality.

So we hereby present to you a PSD freebie that contains:

  • Pinterest buttons & widgets
  • Twitter buttons
  • Facebook buttons and comment widget

Click here to download the freebie.

Disclaimer: the contents of this freebie have been recreated based on existing elements. We do not claim any copyright or intellectual property ownership in regard to neither of the elements nor the brand depicting shapes or colors used in the downlodable Photoshop files.

Work hard play hard: a Yummygum team building trip (gallery)

image

Work hard play hard: a Yummygum team building trip (gallery)

In order to keep improving as a team we believe it’s important for team members to get to know what drives one another.

As of september 2014 we’ll be working full time with a crew of four designers. We’ve expanded a while ago but we never worked with the four of us five days a week. That’s why we wanted to break out of the office vibes for a week and work on some team building, process defining, skill sharing and of course a fair amount of serious maxin’ relaxin’.

We came across this perfect accomodation (near Kortrijk, Belgium) on Airbnb that had a swimming pool, a patio and a jacuzzi. Every morning we would work on client projects until noon and after work on a new Yummygum iPhone app. Naturally we took a bunch of pictures while we there, which we’d love to share with you.

image

image

image

image

image

image

image

image

image

image

image

image

image

Say hello to: Jeffrey

image

Say hello to: Jeffrey

Whenever new team members have started reinforcing the Yummygum team not only do they get added to the About Page on the Yummygum website, they’re also asked to introduce themselves in a blogpost.

Hi! My name is Jeffrey and I’m currently graduating on Progressive Reduction over at Yummygum. If everything goes as planned I’ll be graduating from my study Communication & Multimedia Design late August. After that I’ll be joining the team fulltime as Junior Visual Designer again (before I started doing my thesis I was also a Junior Visual Designer at Yummygum).

As a kid I used to enjoy drawing and designing, which has made me who I am today. Growing up I had to decide what study I wanted to attend but I had no idea what study to choose. It was actually a study information evening that got me into the world of design and problem solving.

Since I didn’t want to start my new study as a complete noob I taught myself how to master Illustrator and Photoshop. I found myself really enjoying digital design and at that time (and still do). I wanted to become the ‘best’ designer ever. I know it’s quite a bold statement, but I do believe one always needs to have something to strive for.

Being a designer makes me realize how fortunate I am. I’m able to do what I love the most and I can make a living doing so. Working at Yummygum makes me realize that even more.

In my spare time I enjoy working on side projects, like sketchshortcuts.com . I really like playing with new techniques, fonts, colors etc. Other than that, you’re likely to find me enjoying some beer or a nice cappuccino. Cheers!

2 Tips For Better Paperwork Management

image

Being an agency that deals solely with digital products, it’s quite odd that we haven’t converted our paperwork and finances to the digital world earlier. Read along for a little insight in our process and how it saves us money.

Our paperwork has increased exponentially over the last 3 years, sending and receiving invoices, signed estimates, paying employees, etc. Organizing this paperwork neatly and making sure you’re on top of your finances became a weekly task, even with a regular trip to our accountant.

Along came a post by @MacStories about Hazel, a small plugin for Mac OS X that automatically organizes your files and folders based on a set of rules. We’ve experimented with the plugin in our personal lives (like photo organization) and quickly figured this could be huge to manage our paper work. But, how do you get your paperwork on your Mac in the first place?

imageHazel App gives you peace of mind.

Tip 1: Scanbot + Dropbox to digitize and cloudify paperwork

To get your paperwork into the digitial world you need to scan your documents. You can use an actual scanner device, but using your phone is much more efficient. The app we prefer to use as a scanner is Scanbot. It has a pretty interface and all the features we require for our workflow like Auto Dropbox Sync, Auto Scan and Multiple Pages.

Give your scanned documents a suitable name like Invoice - Company. We can use the filename later to categorize accordingly.

Once you’ve setup Scanbot to sync with Dropbox, you can start using Hazel.

imageCreate premium quality scans. Easy. Fast. Upload them to your favorite cloud.

Tip 2: Hazel for auto organization

Each year we used to buy a folder with tabs to embed and categorize our paperwork. It’s easy to convert that setup to the skeuomorphic OS that also has folders. Create a folder for the current year and a folder inside for each category like Expenses, Invoices, Estimates, Misc, etc. Make sure you have this setup right and you don’t have to look at it again for quite a while.

Now you’re ready to create rules with Hazel. Hazel can Move, Rename and Tag any file or folder. When your scanned document is synced with Dropbox, Hazel will detect it and applies your rules. Here is our basic setup of rules:

  1. Move file from Scanbot folder to Paperwork → Current Year → Category → Current Quarter
  2. Apply a Tag
  3. Rename to ScanDate - Filename.ext

imageOur Hazel setup

As we now have all our paperwork digital and organized, we don’t have to visit our accountant in person but just send him a (automatically) well-organized zip file. This approach has saved us tons of time and headaches.

Be sure to check out Scanbot and try a free trial of Hazel, and tell us how you’re managing your paperwork.

An Introduction To Photoshop Linked Smart Objects

image

Photoshop CC introduced the Linked Smart Object. Linked Smart Objects kind of behave like what you would’ve wanted Smart Objects to behave; keep the host PSD small in file size and serve as a representation instead of a duplicate.

For those not familiar, Smart Objects are non-destructive files imported into a host PSD. The file imported becomes a Smart Object and is basically a duplicate of its original, yet taking in one single row in your Layers Panel. You can open the Smart Object to make edits, save it and the edits would show in the host PSD. We use this technique regularly for something like a Footer on a Website, or a NavBar in an app.

It all sounds awesome, yet there are two main downsides to using Smart Objects.

1) It’s a duplicate

You’d expect edits to the opened Smart Object to affect the original file. Fact is; this doesn’t happen. The edited Smart Object is duplicate embedded in the host PSD which means it looses its link to the original. Ideally you would want the Smart Object to be a true reference to its file, just like how a PHP include works.

2) Cumulative file size

The second big downside of using Smart Objects is their file size adding up to the file size of the host PSD. Unlike putting a Flattened version of the file you want to use in the host PSD, Smart Objects are full-blown duplicated.

imageSmart Objects work great with elements you use in different PSD files.

Linked Layers to the rescue

Apparently Adobe became aware of these downsides of Smart Objects and created Linked Smart Objects. Using these actually have the pro’s of regular Smart Objects but no longer any of the downsides.

1) It’s the actual file

Placing a Linked Smart Object is an actual representation of the original file. The Linked Smart Object is seemingly flattened, yet still allows you to open it, do edits and overwrite the original.

2) Small file size of host file

Because the placed Linked Smart Object is not a duplicate and just representation of the original file, the host PSD is much smaller.

imagePlace your Linked Layer, save it and your host PSD will automatically update.

Notes regarding Linked Smart Objects

Even though we really love Linked Layers, there are also a couple of things to keep in mind.

1) Update Modified Content

Linked Smart Objects are automatically updated to its latest version in a host PSD if you have the host PSD opened and save changes to your Linked Smart Object.

If you don’t have the Host PSD opened, Photoshop will show a triangle shaped badge with an exclamation mark. You have to manually update the Linked Smart Object and can do so by right mouse clicking the Linked Smart Object in your Layer Panel and you can choose Update Modified Content.

2) Keep an eye on the original file

Although it’s pretty nice a Linked Smart Objects is merely a representation of its original, this does mean you have to be careful not to delete the original. Without the original the image will still be visible within the host PSD but you won’t be able to transform it. You can re-locate and update the link to the original by double-clicking the Linked Smart Object.

Pro Tip #1: Keyboard Shortcuts

To embrace the usage of Linked Smart Objects as a part of our workflow we have created keyboard shortcuts for the two most used actions regarding Linked Smart Objects: a) Place Linked… b) Update All Modified Content. We like using keys that include the initial of the action name. We use ⌘⇧L for Place Linked… and to quickly update the content in your host PSD, we use ⌘⇧U for Update All Modified Content.

Pro Tip #2: Drag with Alt

Drag your files inside a Photoshop Document while holding ⌥ and it will be pasted as a Linked Layer.

imageDrag + Drop while holding alt to paste as a Linked Layer.

Read more on the Linked Smart Objects

Love to read more on the subject, check out these links Linked smart objects, How to link Smart Objects and Smart Objects and Layer Comps in Photoshop CC 2014.