When creating an Interface Design on the computer, use an Adobe Photoshop .psd native file, which saves layered information. Make use of the different Layers or Groups for different screens and content.
Use the text tool to accurately render all of the text you want to use. With the exact font face, sizes, colours, etc. Also apply any digital imaging based on your theme or metaphor for each screen.
The design is divided up with guides, to create areas that will be selected using the marquee or slice tool. This will include Navigation Buttons, Interface Design components and Content Areas. Remember, each piece can only be a rectangular shape, so any rollover states for Navigation Systems must occur inside these areas. Button states are created by turning layers or layer styles on or off, to display any changes.
At the end you will have created a single Adobe Photoshop file that contains all the screens for your Web Site or Interactive Presentation.
Create a series of Screenshots using jpeg
To create a series of jpeg files of each of the screens/pages of the Interface Design, turn on the appropriate Layer/Group in the Adobe Photoshop file so that the desired screen/page is displayed, along with any changes to the Navigation System. Then go to the File Menu > Save As > Select JPEG as the format.
When saving your final design as a jpeg set the Image Options to the highest setting. This saves the file at the best possible quality, with a small file size. Also set the Format Options to Baseline ("Standard").
Create a PDF Presentation
Once you have created a series of jpeg files of each of the screens/pages of the Interface Design in a separate folder, you can use Adobe Photoshop to create a PDF presentation that can be used to show the client for final approvals.
