Friday, 3 July 2009
As I don't seem to have given this a permanent home, here's the training manual that I wrote/edited on web design:
Dreamweaver for Web Design
The CSS section is a little thinner than I'd like, but at the end of the book there are many links to useful sites to close that gap.
Dreamweaver for Web Design
The CSS section is a little thinner than I'd like, but at the end of the book there are many links to useful sites to close that gap.
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.
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. :)
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.
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.
Wednesday, 16 July 2008
Speed in FCP
While I don't normally linkdump on this blog, you rarely see a) good tips for Final Cut Pro and b) really geeky tips focusing on maximum speed. Get Fast in Final Cut Pro is both. Also, be replaceable.
Friday, 27 June 2008
How big are your users' screens?
Building a web site? One important question, if you're developing (as most do) to a fixed pixel size, is how big your users' screens are. Not just the average user, either; you should keep at least 95% of your potential audience happy. Even 1% of visitors annoyed is a risk: are they the ones deciding if they're going to buy or recommend your product? If you exclude Mac users, for example, you're missing out on a vocal population of important bloggers and pundits.
It's happened to me. In the late 90s I designed a multimedia project called Xstream to use an 800x600 screen, using Director. Of course, the one guy with a 640x480 screen was the guy who had to approve the thing.
So, how big are their screens? Well, it's not even that simple. On Windows, most users browse at full screen. On Mac, few do; the multi-window philosophy has been around too long. As screens get larger and full-screen browsing becomes less practical, browser sizes will become less predictable.
OK, enough waffle. Pretty, interactive distribution graphs for browser width and height from Foldspy.
The bottom line? If you want to please 95% of the global audience, your core content should fit within 787x423 pixels without scrolling. Not scary enough? Only about 50% of the audience can see more than 600 pixels vertically or around 1024 pixels horizontally at once.
Lastly, bear in mind the iPhone's variable sizing and lack of Flash support. It's going to be big and you don't want to be left out.
It's happened to me. In the late 90s I designed a multimedia project called Xstream to use an 800x600 screen, using Director. Of course, the one guy with a 640x480 screen was the guy who had to approve the thing.
So, how big are their screens? Well, it's not even that simple. On Windows, most users browse at full screen. On Mac, few do; the multi-window philosophy has been around too long. As screens get larger and full-screen browsing becomes less practical, browser sizes will become less predictable.
OK, enough waffle. Pretty, interactive distribution graphs for browser width and height from Foldspy.
The bottom line? If you want to please 95% of the global audience, your core content should fit within 787x423 pixels without scrolling. Not scary enough? Only about 50% of the audience can see more than 600 pixels vertically or around 1024 pixels horizontally at once.
Lastly, bear in mind the iPhone's variable sizing and lack of Flash support. It's going to be big and you don't want to be left out.
Monday, 21 April 2008
Illustrator Kaleidoscope Tricks
Wow.Found here, a great trick, if a little uncontrollable. Start drawing a shape, say an arc or an ellipse. While the mouse button is down, keep dragging around and press ` (grave, under tilde, next to 1). Many shapes ensue.
If that's a bit random for you, create a shape, then apply Effect > Distort and Transform > Transform, rotate by 12°, 14 copies. Click the New button in the Graphic Styles panel to save that as a graphic style. You'll want a variation with 29 copies for asymmetrical objects or with 20 for something random in-between. Enjoy!
If that's a bit random for you, create a shape, then apply Effect > Distort and Transform > Transform, rotate by 12°, 14 copies. Click the New button in the Graphic Styles panel to save that as a graphic style. You'll want a variation with 29 copies for asymmetrical objects or with 20 for something random in-between. Enjoy!
