When building an app, you need a variety of images used for the app icon and launch screens for iOS, Android, and Windows devices. Making all the graphics for iOS can be a complicated combination of sizes, whereas Android apps require only a single image, and Windows apps require three images. The Asset Generator.psd file and the Generator feature in Adobe Photoshop CC help to coordinate and automate the production of these files.

Adobe Photoshop CC introduced the Generator feature, which automates the creation of web graphics files based on layer names. The Asset Generator.psd file takes advantage of Generator to create the image files when building apps. Generator will create individual files and a folder structure, which organizes the files for the three platforms.

Using InDesign to create launch images

If you prefer using InDesign instead of Photoshop for design work, Keith Gilbert created an InDesign template that lets you use InDesign to create and export the required PNG files. See Splash Screen Template.

Using the Photoshop asset generator

  1. Dowload, unzip or extract, and move or copy the Asset Generator.psd file to a known location, such as where you store required assets for AEM Mobile publishing.

    Завантажити

  2. Open the Asset Generator.psd file in Adobe Photoshop CC.

  3. To activate Generator, choose File > Generate > Image Assets in Photoshop CC.

    If this option is selected, Photoshop will generate files based on layer and group names defined in the Layers panel. Photoshop will create an assets folder based on the file name in the same location where the Asset Generator file is saved. The asset file type, qualities, dimensions, names, and folder structure are controlled by layer and layer group names in the Photoshop file.

  4. To edit a Smart Object, double-click the layer thumbnail. It opens as another, temporary Photoshop file. It may have layers or additional Smart Objects inside.

    The Asset Generator file uses Photoshop Smart Objects extensively. All the icons are duplicates of a single Smart Object. So, if you edit one icon, all the other icons will be automatically updated. Separate, independent Smart Objects are used for most of the Launch Images.

    Layers with a green label are Smart Objects that you should customize. You will find green layers in the Layers panel and in the Launch Images folder in the Layers panel. When you edit content, the assets will be re-generated.

  5. Make your edits, and then save and close the Smart Object file. When you return to the main Photoshop file, all duplicate Smart Objects update automatically.

    Double-click the thumbnail for any Smart Object to edit its contents. Vector Smart Objects are edited in Adobe Illustrator when opened. After editing a vector Smart Object in Illustrator, save and close the file in Illustrator and then return to Photoshop to see the content update automatically.

    Save and close all Smart Objects until you return to the Asset Generator files, all duplicates of the Smart Object will be updated.

  6. Double-click the thumbnail for any Smart Object to edit its contents. Vector Smart Objects are edited in Adobe Illustrator when opened. After editing a vector Smart Object in Illustrator, save and close the file in Illustrator and then return to Photoshop to see the content update automatically. Save and close all Smart Objects until you return to the Asset Generator files, all duplicates of the Smart Object will be updated.

Цей документ захищено ліцензією Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Публікації Twitter™ і Facebook не підпадають під умови ліцензії Creative Commons.

Юридична інформація   |   Політика мережевої конфіденційності