Tag Archive for 'design'

Cocoa User Interface Buttons: Previous and Next

I created these years ago, but forgot to post them until now: back forward icons for a Cocoa / Objective-C application. PSD + TIFF files included. They were designed during the snow leopard (possibly the leopard) era, but they still look decent. Should be a good starting point for anyone looking to design a custom previous and next button set for their Mac application.

Download Cocoa UI Previous and Next Images

JPEG + PNG Color Management Strategies for the Web

The first step in the design process of any website is to mockup the design in Photoshop. One of the most frustrating parts of the design process can be converting your mockup into image slices whose colors mix well with native CSS styles. Mark Edwards, over at Bjango, has a great writeup on color profile management and UI design. The basic tenants are: don’t color manage, use native monitor color profile, use RGB, and do not attach color profiles to JPG or PNG images.

However, in my senario, I often work with graphics that have been designed by people who work in print and don’t understand web image generation in the slightest. Often I’ll receive unoptimized PNGs, JPGs in CMYK, images with color profiles, etc. This can cause image display issues in IE, color shifting, and generally hurt the performance of a website.

In order to help myself optimize images for the web I created a small tool with an associated BASH script to convert CYMK images to RGB, strip color profiles, and optimize image file size.

This tool arose from noticing that Preview.app seems to optimize file size pretty well for PNG and JPEG. I tried to mimick the Preview.app export and while looking through the NSImage APIs noticed you could pretty easily strip color profiles and convert CMYK to RGB.