Overview of Photoshop Templates
The Photoshop template files are organized in a way that makes it easy for you to find the controls you need when creating your Windows Phone design. In this tutorial you find out how the individual .psd files are organized and how you can take advantage of the layers and layer groups. You will also discover where you can access the Adobe Illustrator icons.
What's covered in this video:
- Introduction to Photoshop templates
- Organization of layers and layer groups
- Where assets, such as guides and icons are available
Starting a Windows Phone Application
Keep in mind that as you create your application, it is recommended that you adopt the Windows design style whenever possible. See the Design Language tutorial for more information about the Windows style. You can also reference the Windows sample pages that are in the Windows Phone Design System – Metro.pdf file that is included in the Photoshop_Templates_Assets folder available with this tutorial. By integrating your design with the Windows style you can create a consistent fluid UI experience from the custom and built-in application view. Remember, the goal of the interface is to clearly direct end users to the content they want.
What's covered in this video:
- Start size of an application
- Greenlines and redlines
- Adding imagery
- Adding controls
- Working with the toolbar and Adobe Illustrator icons
- Capitalization guidelines
Using the Photoshop Panorama template
Perhaps you want a user to enter the panorama control once the application is launched. To mock-up the panorama control you can use PanoramaControl.psd. Once opened you only see initial section and the panorama title. Note that you can turn on layers to see sample content that you can edit.
What's covered in this video:
- Guideline for designing panorama s
- Adding a background image and tint
- Creating individual sections
In this video you find out how to start a panorama design for your application. Although there are no official limitations for custom panoramic application, there are some recommendations. The goal of which is to provide a more uniform experience on the phone.
The user interface consists of four layer types that operate with their own independent motion logic; a background image, a panorama title, panorama sections and panorama section titles. It is recommended that the panoramic display have no more than four sections. In this file four sections with sample data and SectionTitles are grouped so that you can easily comp out your design. These sections can be resized as needed, and do not need to follow the dimensions that are included in this template. It is suggested that you allow sections to be slightly visible from one section to the next, informing the user that more information is available.
Conclusion
In this tutorial you used the provided template files to follow along and build simple application design using the Photoshop templates created for Windows Phone. Investigate the other controls that are available in the Photoshop_Templates_Assets folder, including checkboxes, progress bars, information and specifics about theme colors.
