Saturday, 23 August 2008

So you want to mock up an iPhone application design 

This may be a cool set of Photoshop widgets, but if you're considering using them, please consider using the Interface Builder app that comes with the iPhone SDK. All free, and it's the actual tool that real iPhone developers use to build interfaces.

Extending an element is as easy as dragging it out; adding another icon to a toolbar automatically redistributes the others. Everything auto-snaps to build a GUI that follows Apple guidelines -- it's easier than Photoshop!

Just as designing a website in Photoshop gives you very little insight into how a website is actually built, designing an iPhone app in Photoshop is not going to help you understand how that's going to work either. Interface Builder can be daunting, but for mockups it's dead easy:

1. File > New... and make a new Cocoa Touch application.
2. Window > Library and drag objects into the window.
3. Double-click on buttons to change their text.
4. Window > Inspector and use the first section (Attributes) to change colours/styles if needed.
5. When you're done, File > Simulate Interface and it'll appear in the iPhone Simulator.
6. Command-shift-4, then press space. Click on the simulator to grab a pixel-accurate screenshot of your iPhone app, with shadow.

Thursday, 14 August 2008

Photoshop Shortcuts 

Photoshop Secret Shortcuts has done a decent job of listing many of the non-menu shortcuts in Photoshop. Here are a few more.

You probably know that command-[ and ] move a layer up and down in the stacking order -- and it's in the menus. However, option-[ and ], while you have a single layer selected, moves your selection (not the layer!) up and down. Handy in recorded actions when you don't know the name of the layer you want to select.

Another: backslash makes the current layer mask visible as a rubylith, like a Quick Mask.

Two other techniques, not just shortcuts:

When you're painting a mask, set the Dodge tool to work only on Highlights and the Burn tool to work only on Shadows. That way you can paint straight over edges to sharpen them up, without destroying them.

If you ever need to fill text with your own painting, don't rasterize the text! Instead, create a new layer above the text and use Layer > Create Clipping Mask. Why Photoshop doesn't do this for you (instead of admonishing you) I just don't know.

Plug: I teach a Photoshop Masterclass at Next Byte Charlotte St in Brisbane. You're welcome to come along. :)

Monday, 11 August 2008

Colour Gamut 

One reason it's a good idea to edit in a colour space with a larger gamut than your target space is that your colour adjustments will have greater fidelity. If you limit your working space early, your colour adjustments and retouching work will be artificially limited, and in some cases this can cause banding. For example, if you adjust contrast by stretching the colours in a small range out to a larger range (as in Levels) then using 16-bit with ProPhoto gives you more information to stretch out, and therefore better quality. Think of colour fidelity as similar to image resolution.

Working with a larger gamut up-front also gives you more options later. In ten years, when we have better quality monitors, all the sRGB images will look flat compared to ProPhoto RGB images. The same applies now if you print to a higher-quality printer. Many layout artists have historically worked directly in CMYK (even less gamut than sRGB) space, but again, this is a device space, not a working space. If you try to print a CMYK image on a 6-color printer or show it on screen, it looks flat. Stick with a higher gamut (like Adobe RGB or better) for as long as you can.

Also remember that dynamic range is one of the important things that you get when you buy professional equipment. You're not going to get truly good results out of any kind of cameraphone, for example.

This page is powered by Blogger. Isn't yours? RSS