The Blog

Photoshop Tip: Keyboard Kerning

A simple time saving trick that most of you pro Photoshop users probably already know about. For those that don’t, clicking in between two letters and tapping the Left or Right keys while holding Option (Alt) adjusts kerning without having to use the Character palette.

You can also select the entire word and use the same technique to adjust the tracking, and multiple line spacing with the Up and Down arrows.

Handy OS X Lion Features

After the rush to install Lion, Twitter seemed to be full of natural scrolling woes and really not much else. There are some handy new features that you probably already know about — but here’s a few I discovered by accident.

New Folder with Selection
Pre-Lion, if you wanted to move files in to a folder that didn’t yet exist, you’d have to make the folder first and move the files afterwards. In Lion, they’ve fixed this flaw and it now allows you to create a ‘New Folder with Selection’. Simply select your files or folders, right click and its the first option. You can also do the same thing from the File menu.

 

Zoom in Window
I tend to zoom in to examine inspirational pixels using Control + Scroll on the mouse. In Lion, you can ‘Zoom in Window’ by checking the box in Universal Access Preferences.

Window Resizing
You can resize a window from any edge or corner. Max Rudberg tweeted: ’hold alt while resizing any side or corner to have the window expand in the opposite direction as well’ followed by Max Steenbergen noting that holding Shift keeps a consistent aspect ratio.

If you know of any other useful features, or you realise that I’ve mentioned features available pre-Lion, let me know in the comments.

Useful Apps for Interface Designers

Finding the really useful apps out there is time consuming, so I thought I’d share some of the apps that I find benefit my workflow.

LiveView for iPhone & iPad
In a previous post I mentioned syncing PNG versions of designs for viewing on devices. There’s nothing more accurate than seeing your designs on the actual devices they’re intended for. It’s relatively easy, but syncing an iPhone fifty times a day can get tedious. Cue LiveView.

It allows you to send a snap of any part of your screen directly to your iPhone or iPad over Wi-Fi. All you need to do is zoom your design to 100%, line up the LiveView Screencaster window and voila — you’re previewing your designs in half the time it took to sync. Plus, you don’t have to constantly save files and sort through them afterwards. You can then take a screenshot of your iPhone if you want to save the preview to your Camera Roll.

Unretiner 
Designing for iPhone requires two sets of images — hi-res images usually indicated by ‘@2x’ in the filename for iPhone 4 and half size to suit the earlier iPhone models.

As the name suggests, if you need to quickly half the size of your 960×640 designs, Unretiner lets you batch resize using a simple UI.

CloudApp / Droplr
If I had a penny for every screenshot I shared, I wouldn’t need the clients I share them with.

CloudApp & Droplr are both very similar. You upload a file or link and get a short link copied to your clipboard that you can post in to Twitter, chat windows, email clients etc.

After using Droplr for a while (which is Free), I found the icon of the app became buggy or slow and upload times resulted in yet another excuse to check my Twitter timeline. If there’s anything I hate more than my excuses to waste time, it’s an app that gives me an excuse to waste time.

I recently started using CloudApp and I can say it’s a lot faster than Droplr. Not only can you upload larger files quickly and easily, you can choose to view the files on their web interface or by using Stratus on your iPhone. It also has a couple extra features such as auto-uploading screenshots and file view counts. You do have to pay for CloudApp and at the moment it’s $45/£27 per year.

 

Thanks for reading — I’ll be adding to this list as I discover more. If you know of any other timesaving apps, let me know in the comments.

Spotify Playlists for Designers

What music do you listen to while you work?

If you’re in search of something new to work to, you should subscribe to my playlist.

Featuring Boards of Canada, Tycho, Helios, Air, Massive Attack, The xx, Hans Zimmer and more

If you love the score more than the movie — Scores. These playlists are constantly updated!

Resource // Mac OS Cursors

When designing web apps / interfaces, I show rollovers using a cursor. It’s a really simple way of displaying user interactivity on a static design.

For a while I was using the black Mac OS X cursor for buttons and links, but in reality the OS shows a pointing finger for clickable links. I couldn’t find an accessible file on the system or online, so I modified the pointing finger and text selection cursor (with help from Grab) and I thought I’d share.

I might update these with more cursors, but for now you can download these below.

Download

Designing for Android

Whether it’s for Android or iOS, one of the most important things to get right is the physical size of UI elements on the screen.

Whenever I design Android UIs, I hook up my phone via USB and transfer PNGs of the interface to view in Full Screen on the phone. This gives a really good indication of the size, clarity and legibility of all the elements straight away. You can probably do this with the emulator too, but I like to hold the phone in my hand and tap at the static image to test how it feels. It can actually lead to developments in the flow of the app, even though it doesn’t actually work. It’s a good idea to use this alongside wireframes to think about your user experience.

I don’t own an iPhone – yet. For now, I use an HTC Hero (T-Mobile UK) with a 3.2″ screen at 320×480. The screen is actually pretty good at displaying small elements and text that other devices such as the Wildfire struggle to show (bear this in mind when designing for Android).

It might sound a pain to plug in your phone and move files about, but the Android OS has Developer settings to stop the screen going to sleep when connected and a handy Connection Type toggle screen to revert back to charge once you’ve finished copying your files. You don’t actually need to unplug it everytime. Once the Memory Card has mounted, you can view your images and make sure your UI is pixel perfect.

Don’t forget that due to the different resolutions of devices, this is really just a test to see how small or large your elements can go before they become unusable.