OK, so now you've had a chance to use Photoshop CS3 beta and you may be interested in how Device Central fits into a designers workflow. I'm going to walk you through a sequence of screens of how a designer can use the integration between Photoshop CS3 and Device Central.
You can download the PSD file for this walkthrough here.
Create an application mockup
Being the designer on this project I've been told to mockup a UI for a Flash Lite application that will play back device video. The only device info I've been told is the application will need to work on a handset that has a screen resolution of 240x320. As you see I've mocked up a UI for the application using the tools in Ps such as layers and filter effects.
File > Save for Web & Devices
Next I select File > Save for Web & Devices. This will bring up the dialog window.
Preview in Device Central
Adujust your export settings and once you're happy with the way it looks, select the Device Central button in the lower right of the window.
Preview your UI mockup using Device Central
In Device Central you can select one of the availalbe device profiles from the left hand side to preview your image. Currently the beta version of Device Central only ships with several generic device profiles which you can test with, the final version will have many more devices available to select from.
Try out the new designer features
On the right hand side you'll notice there are a few options that you can modify such as display attributes, scaling and alignment. These are all non-destructive modifications that you can experiment with to get a sense of what the UI mockup may look like in certain situations or on devices with different sized screens. In this screenshot I've selected to simulate an "indoor" reflection for the display to give me a sense of how my UI may look when viewed on a handset indoors. I encourage you to try out all of these options to get a sense of what you can simulate without having testing your image on an actual handset.
