Yummygum

6 Photoshop Extension & Scripts that improve our process

Tue, 07 May 2013 10:33:00 +0200

A lot of you designers out there probably already have these installed, but we still wanted to give these plugins an extra hat-tip as they greatly improve our process. We’ll be discussing GuideGuide, CSSHat, Pixel Dropr, Corner Editor & Enigma64, all great productity boosting Photoshop plugins.

1. GuideGuide
We’ve always been a bit inefficient when it comes to grids, as we used to measure an outer-area with the Marquee tool or ⌘⇧4, opened up Alfred and typed a simple calculation like 960/3 to get the width of a column. However, with GuideGuide (by Cameron McAfee) you can easily account for things like margins and quickly see how it looks with the grid as you see the Grid Lines appear.

Download GuideGuide here

2. CSSHat
CSSHat, by abdoc is an extension that turns your Photoshop layer styles into ready-to-use CSS3. The extension will mostly appeal to either designers who don’t like to spend to much time on front-end coding or programmers who like quick prototyping before writing their own handcrafted code. We know what you’re thinking: “Photoshop CS6 has a built in CSS generator, why use CSSHat?”. The CSSHat team wrote an article comparing their code to Photoshop’s output. PS. A nice touch is the finder install screen.

There’s one thing that’s missing in CSSHat which are bevels. Currently, if you’ve applied bevels as a layer style, there’s no CSS being generated for that. Probably due to the complexity of the effect (style, technique, angle, altitude, gloss contour etc.). A quick fix for this is to re-do the bevel with an inner shadow.

Get CSSHat here for $29.99

3. Pixel Dropr
Pixel Dropr by UIParade is an extension which is fairly new to the game but already indispensable for us in our daily designing routine. Pixel Dropr allows you to build or buy galleries (called ‘refills’) of graphics. The extension exists of one main screen that shows 100 spots in which you can store layers or layer groups. A typical situation in which we use Pixel Dropr: when we’ve decided on a specific style for apps, we use Pixel Dropr as a resource container for all the UI elements. We drag our buttons, icons and form elements onto the slots to easily re-use them in other screens.

Download Pixel Dropr

4. Corner Editor
Corner Editor is a script and not an extension, but nonetheless worthy of mentioning. Easily change the radii of your building blocks or even change types. Super handy for easy resizing blocks and re-applying the correct radius.

Check out Corner Editor

5. Enigma64
Enigma64 is another Photoshop extension by the guys who built CSSHat. The extension helps you export images from Photoshop into either image files or Base64 strings. With the rise of CSS3 replacing images more often, using Base64 strings for your patterns or other smaller images is become more popular too. A perfect sidekick to CSSHat.

Buy Enigma64 here for $19.99

6. Layout wrapper
Layout Wrapper is a Photoshop script that’s really great for web designers. It was recently released by Kamil Khadeyev on Dribbble. Layout Wrapper, literally wraps your design with a Safari browser which is great for more realistic showcasing.

Get Layout Wrapper here

Redesign Snapchat in under 10 hours

Mon, 29 Apr 2013 12:01:00 +0200

Snapchat has finally found his way to the Netherlands, at least in our social circle. We were intrigued by the concept and decided to see what the fuss is all about. For us, being designers, it was a terrible experience and we decided to redesign the app. If you’re reading this on an iPhone check out this quick prototype.

Exploring the User Interface
The first thing you see is the icon, which looks a bit childish and cheap. It took a while for us to realize the ghost was actually a mascotte.

Opening up the app wasn’t much better. The UI is filled with rainbow-y colors that feel really random and cheap, we imagine this is what it feels like when you arrive in Vegas. Buttons have odd drop-shadows with incorrect shapes and using the camera, the main action of the app, is a troublesome because a big portion of your screen is blocked by a huge blue block.

Redesign in under 10 hours
As the feature set of Snapchat is rather small, we felt like this would be a neat project to practice our iOS design skills and see what we could do with the UI in under 10 hours. There are some basic principles in iOS that we knew we could apply to make the overall experience a bit more consistent and easy-to-use. We’ve used a lot of the resources from Teehan+Lax’s template for iOS, be sure to check that out to start with basic layouts.

The Camera
If you’re all about capturing the moment, it makes to keep your interface clean and minimal and put focus on what you’re about to capture. We removed the blue block and cleaned up the elements you see. The Camera UI is really similar to the default Camera app, with a slightly transparent bar and a big silver capture-button.

Once you tap the capture-button, everything moves out of sight, except for the capture-button and if you hold it longer a subtle bar in the top of your screen appears that functions as a counter. Much cleaner and more focus on the content you’re capturing.

We also missed the feature to use a photo you’ve taken before as a Snap, the button in the bottom right enables you to use previously taken shots. The ghost in the bottom left shows unread Snaps and takes you to the “normal” interface.

Organization of content
Snapchat has chosen to use a non-conventional approach when it comes to displaying navigation and information, which is hard to get used to. We moved all basic functions of Snapchat to their own Tab with a Tab-bar.

Inbox
The inbox is where you find all the snaps that people sent to you. Much bigger hit areas per Snap and as you can see the Snap is more personalized with an avatar. Tap+Hold is still key and it shows a little timer in the top right if you have “time left to tap+hold”. You might consider making the boxes smaller to have more Snaps on your screen, but for the casual user this might be sufficient. Obviously you can scroll if there are more.

Friends
Nothing fancy here, just a list of your Friends with avatars.

Activity
While all activity was contained in one screen, we separated it from the Snaps and gave it its own tab. Again with avatars to make it more personal.

Settings
Almost the same as the original app, but cleaner.

Conclusion
So there you have it, Snapchat redesigned in under 10 hours. Nothing super innovative in terms of design, but a whole lot clearer to us with better information organization and focus. Keeping it simple. If you’re reading this on an iPhone (5) make sure to check out this quick prototype we put together with Flinto.

Be sure to check out Snapchat though, it can be ton of fun, even with the current UI ;-). DISCLAIMER: All original artwork copyright of Snapchat.

What do you think?

Why Sketch isn't for us (yet)

Wed, 20 Mar 2013 14:24:00 +0100

Sketch by Bohemiancoding seems to be the new thing to endorse and love. Quite a few designers are writing or tweeting about how wonderful Sketch is and summarize numeral reasons why you should leave the Adobe app and come to the young and hip side. While we believe there a few things in Sketch that are superior to Photoshop, we are not yet ready to switch.

Disclosure: We are a design studio that does no coding.

1. Our clients don’t know Sketch
Sketch can be great, but our clients — or their developers — know nothing about this new kid in town. And although it’s inexpensive compared to Photoshop, getting acquainted with Sketch will take developer some time making a project more expensive. Not all clients can appreciate that.

2. No Smart Objects
To keep things flexible, we always create elements like navigation, footer, sidebar and more in a seperate file and include these in main pages like Home or Contact as smart-objects. We can then easily update the objects and re-use the objects. We can’t seem to find a similar feature in Sketch, except for Copy and Paste.

3. Photoshop is also for UI work
There are some people who note that Photoshop is not meant for UI design work. While partially true, you and us have been using the app for years to do UI work and have created beautiful products with it. Don’t write it off just because there is something new and shiny, it still works.

4. Style Preset Management
In Photoshop you can export all your presets to share with fellow designers, or just to stay organized when you are working on multiple projects. No such management in Sketch.

5. Vector icons
In about 95% of our projects we use minimal icons to represent certain sections or actions. The Custom Shape browser in Photoshop is great to find the icons you need and simply drag the size you need. No custom shapes in Sketch (SVG importing doesn’t count as it’s not in-app).

We are excited to see where Sketch is going and their rate of updating the app is really impressive. We also bought a team license, to support the developers. But for now we will keep using Photoshop and hope to see Sketch in the near future with a more complete features set.

Download Sketch

We love to hear your thoughts on Branch.

WhatsApp: Redesign

Fri, 21 Dec 2012 13:52:00 +0100

WhatsApp is one of those apps we always recommend to people that are new smartphone owners and it’s been a very popular app since it launched in 2009. It is however dying for an update, both the UI and the UX.

The Problem
The (iPhone) app is our go-to-app for chatting on our phones (besides iMessage), but we feel it lacks any personality in their UI. It’s all default iOS elements and while that isn’t necessarily a bad thing, in this case we feel it’s a bit boring. We also believe there are some odd UX paths and choices throughout the app.

The Redesign
As designers, we obviously couldn’t resist designing our own vision of the app in our free time. While mostly focussing on design, we also made a few UX choices to improve the experience for the end-user.

The goal was to improve both UI and UX, but we also challenged ourselves to keep enough of the experience recognizable for current users.

Navigation
There are 2 screens with the highest priority for an instant messaging app, “Conversations” and a “Conversation”. Why doesn’t WhatsApp put more focus on these (read: less on others)?

The Tab Bar shows a view that doesn’t need to be there at all times; Status. We’ve never see anyone change their Status. The arrangement of the Tabs (Favorites, Status, Contacts, Chats and Settings) also seems off.

The new Tab Bar contains: Chats, Group Chats, Favorites and Settings. The order of these is also adjusted to amount of usage. Contacts isn’t Conversation-related, so we’ve moved it. Settings is the exception as it adds personality and should be quickly accessible.

A new chat can be created with the striking green plus-button. Your contacts are now found in a left sidebar, similar to Facebook.

Contacts
Pretty straight-forward sidebar style list view. Easily swipe up and down, or search for a person. Green glowing dots indicate an online status.

Chats
Mainly a UI make-over with more subtle colors, the great Proxima Nova and better placement of information.

A Chat
This screen is actually quite well done in terms of UX. We’ve redesigned the UI. Images do not have “View / Forward” anymore, Viewing can be done by tapping the image and Forward is useless.

Group Chats
Very similar to the new Chats, but with a dynamic avatar. The design shows multiple avatars, and the front image will be the person that was the last to send a message.

Settings
A bit more exciting and more focus on what’s important for the user. Easy access to change your name, picture and status.

Thanks WhatsApp
Nonetheless we’re greatful for the existence of WhatsApp as it enables us to send free text messages to all of our friends. To multiple platforms. Awesome. Download WhatsApp

What do you think of the redesign? Leave your comments on Dribbble.

Avatars by Martin Schoeller and Vince’s cat.

Mini wireframing kit

Wed, 28 Nov 2012 11:14:00 +0100

Some time ago Jeff Broderick posted this cute little wireframe on Dribbble which intrigued us. We really liked the idea and wanted to try out working with the little wireframes too. One thing we noticed is that drawing all of those 1px, 2px and 3px lines to represent body text and headings was taking a lot of time. That’s why we decided to create a little font that exists of four – characters which we could use to wireframe paragraphs at a faster pace. Following up some discussions we had as a reaction to yesterdays blogpost about using style boards in the design process we wanted to share our font and a mini wireframe template.

The kit includes

A four-character pixel font
A PSD template you can use for your own mini wireframes
A readme file with some notes

Download the mini wireframing kit

Using style boards in the design process

Tue, 27 Nov 2012 15:43:00 +0100

In marketing / advertising / design it’s not at all uncommon to find people working with mood boards. For those who aren’t familiar with the term, a mood board is a collage of all kinds of images, that basically serves the purpose of inspiration and style determination. For example, in the early stages of product or brand creation a mood board helps determine what feel the product or brand should be associated with.

Mood boards can help getting everyone on the same page. Because they’re used in an early stage of product/brand development you’re able to tackle possible discrepancies in ideas amongst those involved in the actual development. That’s why, for the last couple of our clients we’ve been putting together style boards, our own version of a mood board.

Difference between mood board vs. style boards
The main difference between a regular mood board and the style boards we use is the level of detail we use. Our style boards contain actual existing designs (mostly by other designers, e.g. off of Dribbble.com) whereas a mood board often exists of abstract images that convey an emotion. Also, the style boards we use made on the computer. In other words, we don’t actually made physical boards.

Why use style boards?
The reason we started integrating style boards in our design process might sound familiar to other designers. We found that it’s often easier for clients to actually see and ‘feel’ an intended visual style than to have to described it in words. When you talk about style, there’s a possibility your association with a certain word to describe a style differs from the client’s association with that same word.

Debriefing
When a prospect/client briefs you about the project he or she will most likely also use words to describe the intended style of the final product. By making a style board you’re able to show you’ve clearly understood the briefing. However, if you have doubts whether the client’s idea of the right style matches the product, it allows you to show how you think it could also be done.

Accompanying wireframes
Style boards also serve as a nice anchor for style just like how wireframes serve as an anchor point for layout and composition. As a matter of fact, using both wireframes and style boards is a golden combo as they complement each other very well. Also, just like for wireframes it enables you to refer to the style board as the style anchor point when the client gives feedback which aims to a different style direction.

Things to take into account
We advise every designer to work with style boards. It’s a great way to start of a project and getting yourself and your client on the same page when it comes to the style. Here are some things to take into account when making a style board that you’re going to show client:

make sure the client understands you’re not going to actually replicate the images you use on the style board and that they serve merely as a style direction
consider using 400x300px images as a default size if you’re going to use Dribbble shots often
create a psd template to quickly make new style boards for new projectss
keep in mind that the less images you use, the less nuanced the style board will be (the client will be more likely to think you’re going to replicate the images instead of being inspired by them)
if you use other designer’s images, make sure the client knows these aren’t your designs
pay attention to the way you present the styleboard

In the example style board in this blog post, we used Dribbble shots by the following talented designers:

Custom user style: Basecamp Next

Wed, 21 Nov 2012 11:16:00 +0100

We’ve been using the ‘New’ Basecamp for some time now for our client projects. We pretty much love it, yet there’s one thing that’s bothering us: the yellow hues. That’s why we use a tiny piece of CSS to override the ugly yellow hues and replace them with some nice blue hues. If you like you can apply our custom user style as well.

Get our custom user styles here. Please note we’re no die-hard coders, just trying to make this world a little prettier with some CSS.

PS. On Safari, we use User CSS to override Basecamp Next’s CSS.

2 Safari Extensions to spice up Dribbble

Thu, 18 Oct 2012 11:25:00 +0200

For most designers, a Dribbble account is indispensable. Showing off your work can attract new clients and perhaps even more importantly; it’s a huge source of inspiration. At Yummygum we love browsing and checking out what other designers are up to. We do think usability wise there’s room for improvement on Dribbble.com. Lucky for us there are people out there spending time creating browser extension/plugins to make Dribbble even better.

Endlesss - enables infinite scroll
Dribbble player and designer/developer Matías Martínez (who, by the way also coded up Manu Gamero’s Growl theme) felt the same way and decided to make a Safari Extension called Endlesss. It adds an infinite scrolling functionality to Dribbble. You can find Matías’ Safari Extension here. He also made a Chrome Extension which can be found here.

Dribbb(b)le - shows shot thumbnails on their original 400x300 size
Another nice Dribbb(b)le Safari Extension is ‘Dribbb(b)le’ shows shots on their original 400x300 size on the homepage. An extremely useful extension ‘cause you don’t have to click on each shot’s thumb to see it on a 100% scale. Eren Emre created it, and passed the baton on to Martins Spilners (aka Maarf) who updated the Safari Extension. You can get the latest version of these guys’ Safari extension here.

Ticket, a beautiful Growl style

Thu, 05 Jul 2012 16:54:00 +0200

A while ago we made a list of Growl styles and even designed our very own Growl style named David Leatherman with our friend Patrick van Marsbergen. For David Leatherman, we got inspired by a Dribbble shot by the great Manu Gamero. And even though our Growl style doesn’t look anything like Manu’s, it did inspire us to try something else than the dime-a-dozen opaque black, rounded border, 1px bevel styles Growl styles. Manu’s Growl style looked like something we had never seen before and we instantly fell in love with it. The Growl style is called Ticket and it’s coded up by Matías Martínez.

Download Manu’s Ticket Growl style here

Apps We Use: Kickoff

Fri, 18 May 2012 17:01:00 +0200

Since we started Yummygum we’ve been searching for the ultimate Getting Things Done (GTD) and project management app. We’ve tried Cultured Code’s Things, Metalab’s Flow, 37 Signal’s Basecamp and so on. All (web)apps had one or two really strong points but seemed to lack other functionalities. None of these apps offer the full range of functionalities we’re looking for in a project management app. Kickoff app seems to be doing a pretty good job at combining to-do lists with project management. Since about six months we’ve been using it, and we really like it. Here’s why.

Using Kickoff for projects
On the Kickoff app website the Kickoff team calls their app a collaboration tool for small groups and says it has the right features for team work. That kind of implies the app is meant/made to be used by people who all contribute to a certain project. In other words the app may not be completely suitable for discussing projects with your client.

However, when working together with a (small) team on a project in which all participants work on a collective goal, Kickoff app is absolutely brilliant. Kickoff lets you:

Create, group or check to-do’s, assign them to a team member and add a due date
Discuss to-do’s by using comments per to-do in conversation style
Have group or individual chats
Upload/attach files to a project
Make notes

It’s required all team members are on Mac OSX though, since Kickoff is a native Mac OSX app.

Possible limitations
There are a few things we think could really add value to this product still. For example; discussions categorized by subject that aren’t bound to to-do’s. At the moment there are a couple of ways you can discuss stuff. However, there isn’t any option to create a discussion categorized by subject without it being linked to a to-do. Obviously not everything you would like to discuss is linked to a to-do.

Another thing we would really love to see added in the future is an option to archive projects. Right now you can either keep a project or delete it. However, sometimes you might wanna get back into a project to grab some files or read some notes. An archive function could be a possible solution.

In conclusion
Is Kickoff App perfect? It’s not ‘perfect’ but it is very close to perfect though. It’s a beautifully designed app and it’s really simple to use. There are still some minor features we’d love to see in an update though. In the meantime we’ll keep happily using it. Get Kickoff app here! and see for yourself

Growl style: David Leatherman

Fri, 11 May 2012 12:12:00 +0200

A couple of weeks ago we blogged about Growl styles and listed 10 beautiful styles that you can download for free. We’ve always wanted to try and see what it would be like designing our own Growl style. We wanted to see if we could make something different than most styles. That’s why we made a textured style. We posted one on Dribbble a while ago, and now thanks to the wonderful Patrick van Marsbergen over at Mimbee who did the coding the Growl Style has now seen the light of day! We shall name it: David Leatherman (a little pun ain’t never hurt nobody)

Download the David Leatherman Growl style here

Sweet16s - our new 16x16 icon set

Fri, 04 May 2012 12:46:00 +0200

It took us some time, but it’s finally here; our new 16x16 icon set called Sweet16s. We’ve started with a ten days introduction sale. This means Sweet16s starts at $24 (instead of it’s normal price which is $39).

Big shoutouts go to Johnathan Croom who did all the cool animation and took our design to the next level.

10 beautiful Growl styles

Wed, 11 Apr 2012 11:31:00 +0200

We don’t have to convince any OSX user to install Growl, I think. What we really like about Growl is that it allows you to select a style (theme) for it’s notifications. It even allows you to create your own styles. Growl comes with about a dozen styles by default. But if you’re looking for more styles, here’s a list of of 10 sweet Growl styles.

1. Framed by Rasmus Nielsen. Get Framed Pixels style here

2. iOS5 by Philipp Rappold. Get iOS5 Pixels style here

3. Morning & Evening by Glenn Hitchcock. Get Morning & Evening Growl style here

4. Premium Pixels by Orman Clark. Get Premium Pixels style here

5. Nucleic by Chris Wallace. Get Nucleic Growl style here

6. Starwl by Szabolcs Sz.. Get Starwl Growl style here

7. Wooded by Derek Briggs. Get Wooded Growl style here

8 Chromic by Drew Smith. Get Chromic Growl style here

9. Black Glass by Ryan Collins. Get Black Glass Growl style here

10. Palmstyle by Sam Mularczyk. Get Palmstyle Growl style here

ING Redesigned; Round 2

Thu, 05 Apr 2012 16:51:00 +0200

Just a couple weeks after our blogpost about a redesign for ING’s digital appearance, they released an iPhone app. It works pretty good and you can download it for free.

We love mobile banking and our experience with the ING iOS app has been smooth. But of course, there are a few things that we think can be better, especially in the design. Round 2.

General design thoughts
We feel the design was a bit rushed and lacks personality. It’s inline with their color scheme, but it feels corporate and not personal, which we think it needs on your phone. In our design there are a few things we added like subtle textures to make it more soft and personal.

We think the slide-down with options for a Rekening (account number) can definitely use some work. Oh and yes, that’s a big lion in the background.

Side-menu vs Grid menu
The grid menu ING has used has an unnecessary huge amount of text and contains blown up icons as buttons. It’s not flexible and future proof either. What if they want to add a button to this menu? And I hope we can assume they have more plans for the iOS app.

The icons they’ve used to represent the sections are not helping either. Think away the labels and we would have guessed “Creditcards, Settings, Support Chat & Account”, 1 out of 4 :-)

The side-menu we’ve chosen as a way to navigate at a deeper level is by no means unique. It’s seen in popular apps like Facebook, Path and recently released Sparrow. Nonetheless, we feel it’s a great way to navigate if you’re relying on a vertical layout as your main content.

The Account menu
We would love to have the ability to use multiple accounts inside the app. For example, we have our personal accounts but also our business account for Yummygum. Wouldn’t it be great if you can use both on-the-go and perhaps pay a client right there when you’re meeting them?

A designers urge
So there you have it, another round of redesigning an ING product. It’s fun to do, good practice and we hope they hire better designers for ALL their (online) products in the future.

Here are all our designs in full resolution on click.

Update: Video
Tiny update, we made small video of a prototype with Prototypes app. You can view it here.

Thanks to Mikael Eidenberg for his iPhone template and Bjango for Skala Preview.

Social (Photoshop) gradients

Fri, 30 Mar 2012 12:04:00 +0200

We’ve been busy designing quite a few webapps that involve social sharing. Often times we’re asked to design buttons, icons etc. to indicate what social service something is shared through. We all know a social service’s logo triggers recognition to users. Beside’s the logo’s shape, the use of the social service’s brand color helps in this recognition process. Since we found ourself color-picking the right social brand colors frequently we decided to turn these colors into gradients and share them with you!

Download the Photoshop gradients file here.

Apps We Use: NameChanger

Fri, 16 Mar 2012 16:05:00 +0100

In this times Apps We Use post we’re bigging-up a little app called NameChanger. The app does exactly what you think it does; changing file names. Although NameChanger’s UI won’t win any beauty contest, we love it for it’s features.

We’ve used NameChanger a lot during the creation of iconSweets DELUXE, our premium huge icon pack. For iconSweets DELUXE, we had to export lots of layers from a Photoshop file to separate PNG files. Unfortunately the export-script we used added extra characters. So, we used NameChanger to delete some characters and then prepend a few characters instead.

Download NameChanger for free

Using keyboard shortcuts in Photoshop

Fri, 09 Mar 2012 17:12:00 +0100

Whatever business you’re in, productivity can make or break not only your profit but also your morale. In (web)design we’re constantly looking for little productivity boosts. One thing that has proven itself to be a huge productivity boost for us, is assigning keyboard shortcuts to frequently used functions in Photoshop.

Needless to say; adding keyboard shortcuts only helps if you’ll use them often. If you use an action you’ve assigned a keyboard shortcut to so few times you won’t remember it that will work counterproductive.

Logical keyboard shortcuts
We think the key is to keep the keyboard shortcuts rather simple and logical if possible. For example, Clear Layer Style is pretty similar to cutting in a document. Naturally the Copy & Paste Layer Style are similar to copying and pasting any other elements in a document. Therefor we’ve assigned the following keyboard shortcuts to these frequently used actions:

^+⌘+X for Clear Layer Style
^+⌘+C for Copy Layer Style
^+⌘+V for Paste Layer Style
⌥+⌘+§ for opening Blending Options
^+⌘+T for Trim

Applying a keyboard shortcut to a predefined Layer Style
But these aren’t the only actions where we use keyboard shortcuts. One layer style we find ourself using a lot is a 1px white dropshadow. We used to set the color to white, uncheck the Use Global Light checkbox, set the blending mode to Normal, reset the Distance and Size. In our case we first recorded an action that sets this specific Layer Style and then assigned a keyboard shortcut to this action. A downside of this specific action is that -when applied- it disregards any Layer Style you had before. That means you would have to first apply the predefined Layer Style and after that add other layers styles.

Naturally these keyboard shortcuts are a set of shortcuts that work best for us. If you use different aspects of Photoshop they won’t boost your productivity.

Start using your own keyboard shortcuts
We assume you know your way around Photoshop’s settings, but to be sure: hit ⌥+⇧+⌘+K to go the Keyboard Shortcuts and Menus settings window. Then go nuts! If you like to the keyboard shortcuts we mentioned above feel free to download our settings here

The keyboard image used at the top of this post is made by the skilled Swedish designer Joachim Löfstedt.

Proper layer naming in Photoshop

Fri, 17 Feb 2012 15:30:00 +0100

Now we know there are already numerous blog posts on organizing your Photoshop layers. Most of these tutorial/blog posts talk about the need for using layer groups and how the layer structure should match the visual structure in your Photoshop file. What we like to point out in this post is the future comfort of proper layer naming on a micro level.

When we say ‘future comfort’ we’re talking about that spark of joy you (or a front-end developer that’ll code your design) gets when opening a Photoshop file with properly labeled layers. There are few things more annoying than being confronted with a unorganized Photoshop file that requires hours to understand. It’s a small investment to name your layers properly and you’ll work more efficiently in the long run.

If you haven’t yet read any of the tutorials on graphic design file organization, you should definitely check out: How to Effectively Organize your Photoshop Layers (on Webdesigner Depot), and The Photoshop Etiquette Manifesto for Web Designers.

On a micro level it can be really useful to name layers after both their element type and their specific name. This makes it easy to find elements within a Photoshop file. In the images in this post there are two examples of how we usually name our buttons and form elements. For organization purposes, we think it’s really useful to name an element by both it’s generic name (‘btn’) and it’s specific name (Close). Also, the generic element name should go first as this is taxonomy 101. You’ll see there are a lot of group/generic elements which this principle can be applied to, like: ‘icon’, ‘logo’.

A couple of our favorite labels for layers:

btn (Buttons)
bg (Backgrounds)
— (Dividers)
input & form (Input fields)
shadow & glow (Layers that show only that)
→ (Arrows)

Again, naming your layers properly is at first time consuming but will help you be a) more efficient b) a nicer person to work with for others that’ll open your graphic design file.

Apps We Use: Coda

Wed, 01 Feb 2012 13:53:00 +0100

Panic’s Coda, our favorite code editor
Since 2010 we’ve been focussing more on designing and front end development. And although we haven’t been doing a lot of back end development we still find ourself using Coda almost daily.

We have tried alternatives like CSSEdit, Textmate and Espresso and they all worked nicely. There are however two features in Coda we think are pretttty, pretttttyy, prettyy nice that makes it a winner for us.

Project thumbnails
It’s those little things that are great. Coda shows your sites/projects as little thumbnails which is automatically generated based on the base url you set as remote. It also allows for customization. So if you’d rather have, let’s say a client’s logo on the thumbnail, that’s also possible.

Live team work
In Coda you’re able to ‘invite’ other team members to work in the same file at the same time. It’s also possible to work in the same file together with someone who isn’t on the same network. That makes it super easy to work with someone (e.g. a developer) who’s located somewhere else in the world.

One thing that could use some improvement however is the permissions part of the ‘work as a team’ feature. By default the inviter is always the owner of the open file which leads to the invitee being unable to save the file. The invitee has to depend on the owner to save the file.

Coda obviously has the abilities to set both remote and local settings and the option to upload to FTP, a code snippet library and a browser to show a preview of your work.

Download the free trial and see for yourself.

iconSweets DELUXE, only $8

Thu, 19 Jan 2012 15:33:00 +0100

We released iconSweets DELUXE this week. As you might know we designed iconSweets1 and iconSweets2 earlier. Both are huge minimalist glyph icon sets available for free. The free icon sets both excisted of psd files that contained all the icons. We had taken note of some people’s preference to have the icons available as separate PNG files, Photoshop Custom Shapes (csh) and as a font. That’s why we released iconSweets DELUXE.

Desktop font & @font-face web font
It’s a paid package that contains *all of iconSweets1 & iconSweets2’s icons in quick-n-easy to use file formats. The icons are available as a desktop font and as a @font-face web font. The web font makes it really easy to. It also helps your webapp or website (wherever you’ll be using the font) load faster because there are less HTTP requests. Read more about using icons with @font-face font on Net Tuts+

PNG’s in three styles
The icons in the iconSweets DELUXE pack are also available in png’s. Of each icons, there are three predefined styles to fit your design need. If you can’t find the style you’re looking for, just open up the PSD file in the original iconSweets2 package and style the icons yourself! All PNG’s are organized neatly in well structured folders and subfolders.

CSH
Photoshop Custom Shapes are included as well and they’re really easy to use. The .csh files are the same as the categories used elsewhere in iconSweets resources. That way you don’t have to load the entire set. You can just load the category you need and get started.

Get iconSweets DELUXE now for just $8 !

* We decided not to include brand-depicting icons in iconSweets DELUXE