Created
Updated
General Overview
This overview section, will allow you to become familiar with the entire “Design Practices” collection of articles, by providing a brief summary of each section, as well as an article link.
The series of “Design Practices” articles will give you an overview of all the steps that will help you to quickly setup documents and generate assets for SmartStudio applets, using Adobe Photoshop and Illustrator. If you are new to our platform, we recommend reading all the articles, in the order they are listed, as each topic builds upon the previous one.
Start with the Prerequisites list to ensure you are familiar with basic concepts. Each topic is a clickable link which will take you to an outside source. If one of the topics in the list sounds unfamiliar, simply click the link and learn more about the subject.
The “Resolution, Pixels, and Pixel Dimensions” article explains the concepts of resolution and interpolation and how they directly affect the content displayed on Retina and Non-Retina displays.
Resolution Pixels and Pixel Dimensions
The Vector and Bitmap Graphics article explains the differences between these two category of graphics. Vector graphics are made up of mathematically defined lines and shapes called vectors. Their major advantage is the fact that they scale without loss in quality. The building block of Bitmap images is a pixel which is defined as the smallest picture element. The disadvantage of bitmap images is the fact that they are resolution dependent, and they lose quality when scaled.
The “Document Setup - Adobe Photoshop” article, explains how to set up a new document in Photoshop for an iPad applet, together with all of its settings. Photoshop document should have pixel dimensions of 1024px x 768px for 1x canvas, which matches the dimensions of the SmartStudio canvas for an iPad applet.
Document Setup-Adobe Photoshop
The Non-Destructive Image Scaling article, explains the importance of working with vector graphics in Photoshop, whenever possible, since vector content scales without loss in quality. All bitmap images should be converted to Smart Objects. SmartObject is like a “protective container” which houses the original. Any transformations you apply to the Smart Object, are applied to the “protective container”, leaving the original unharmed.
The series of Adobe Generator articles, explain how to, automatically export all the assets, generate folders and sub-folders in a layered .psd file. The core idea behind Adobe Generator is its ability to export Photoshop layers as actual files on disk. This is a time saving feature, which will save you lots of valuable time. Adobe Generator listens for file format extensions in layer names (eg. .png, .jpg) - formats used in SmartStudio workflow. The last article in this series “Automated Asset Generation” puts together the entire automated workflow.
Introduction to Adobe Generator
Folder/Sub-Folder Creation and Naming
The Importance of File Format Extensions
Generator Errors - What not to do