logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Autism Spectrum Disorders: 4:00 PM

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

Adobe Generator and Photoshop CC


Once you have completed your webpage mockup in PhotoshopR, your next step is to translate that design into a responsive HTML5/CSS3 webpage and to save all design elements as web graphics. Previously, this was a time consuming process. But with the new Adobe Generator technology, this process has become almost automatic. This new technology bridges the gap between design in Photoshop CC and design in Edge Reflow CC.

Letís take a look at the new real-time image generation process in Photoshop CC. Once you turn on Generator (File - Generate - Image Assets), this process will automatically generate images in the chosen format, scale, image quality and compression needed for your project and place the assets into a new folder named with the same name as the Photoshop image file but including an "-assets" added to the end.

How does this work? This process relies heavily on the name, or tag, given to layers in the Layers panel. The name given to each layer will give instructions to Generator for how to generate the image assets, which will be placed into a dedicated folder corresponding to the name of the Photoshop .psd file. Generator also updates these asset files when you edit your image in Photoshop. This works for layers, smart objects and layer groups. If you tag a group, Generator will process both the group and the individual layers within that group.

To add a tag to a layer, you change the layer name. For example, the layer named HeaderImage can be tagged to HeaderImage.jpg and Generator will generate that image as a .jpg image. For a layer group tagged FooterIcons.png and which contains layers named icon1 through icon4, Generator will create a composite image containing all four icon images into one image file. The individual icons in this composite file can then be accessed and display via code. This is a common process for mobile apps. If this doesnít fit your needs and you need the individual icon images as separate image files, you just add a file extension to each icon layer tag such as icon1.png - icon4.png.

Tip: Be careful with the Visibility icon on the Layers panel. When a layerís visibility is turned off, the corresponding image asset on that layer is removed from the asset folder. Of course, turning the visibility back on will create the image again.

Are you limited to only one asset per layer? No, for example, you can tell Generator to create a .jpg and a .png version of the same image on a layer tagged with the name cat (cat.jpg, cat.png). Notice that there is a comma and space between the two names that make up the layer tag.

Generator will use the default compression setting when exporting the image assets unless you tell it to do otherwise. You can customize the compression value by adding a number after the file extension such as cat.jpg10 which will tell Generator to us the high-quality compression value.

What about scale? Can you tell Generator to export the layer graphic at a custom scale? Yes, by adding a percentage value to the tag. Note that going above 100% is only for vector, text and shape layers. As always, you will lose image quality when increasing the percentage value of raster images above 100%, unless you use the new Upsampling feature in Photoshop CC. So to export the cat.jpg image at 200% we would add the percentage value to the front of the tag, such as 200% cat.jpg.



Disclosure: I was not financially compensated for this article. Adobe supplied a Creative Cloud membership for the purpose of this review. The opinions are completely my own based on my experience.

Join us in the Animation forum. | Join us in the Digital Art forum.

|



Add Adobe+Generator+and+Photoshop+CC to Twitter Add Adobe+Generator+and+Photoshop+CC to Facebook Add Adobe+Generator+and+Photoshop+CC to MySpace Add Adobe+Generator+and+Photoshop+CC to Del.icio.us Digg Adobe+Generator+and+Photoshop+CC Add Adobe+Generator+and+Photoshop+CC to Yahoo My Web Add Adobe+Generator+and+Photoshop+CC to Google Bookmarks Add Adobe+Generator+and+Photoshop+CC to Stumbleupon Add Adobe+Generator+and+Photoshop+CC to Reddit



 



RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the Digital Art and Design Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

g


g features
Pixelmator 3 for the Mac

Pixelmator 3 Photoshop Alternative

Pixelmator 3 Review

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor