N.S.L: WEEK 113 – Adobe Photoshop CC: “Generator” New Feature 14.1

The big news this week!!! “Generator” for Adobe Photoshop 14.1. Everywhere I went, people were asking me what I thought of this new feature. I decided to check out a couple videos and give it a try today. Here’s my first run at it:

****

What is it and what does it do???

It’s more Adobe Magic =D The way I understand it is, it’s a great tool for web designers or basically anybody that needs to export assets from a large Photoshop File/Image in REAL TIME. If I’m using Photoshop to design a website or an app, I would need to eventually export the different logos, buttons, menus, etc or in other words “Assets” in various formats and sizes.

Adobe Photoshop CC 14.1 Genorator

Webpage mockup for Adobe Photoshop CC 14.1 New Feature “Generator”

****

How does it work?

First you have to turn it on (Instructions below) and Photoshop will begin to monitor your Layers Panel. If you’re ready to export a layer as it’s own file, just change the name of the layer using designated tags.

Example: Layer Name.jpg

That will create a Jpeg with the name “Layer Name”

****

What if multiple layers make up 1 asset?

You’ve got 2 options in this case:

  1. Convert the multiple Layers into 1 Smart Object and change its name using the designated tags
  2. Bring the Layers in to a Layer Group and change the name of the group, using the designated tags

****

To activate the Generator, go into your Preferences by pressing CTRL+K and find “Plug-Ins”. While you’re in there you must make to tick “Enable Generator”.

Preferences in Adobe Photoshop CC

Preferences in Adobe Photoshop CC 14.1 to activate Generator

****

The following was extracted from
Introducing Adobe Generator for Photoshop CC

To turn on this functionality, go to File -> Generate -> Image Assets. Now all you have to do is rename the layers or layer groups you want to export. Here are some examples of supported tags:

  • .png (Default value: png32 with semi-transparent alpha), .png8, .png24, .png32
  • .jpg (Default value: 9), .jpg(1-10), .jpg(1-100%)
  • .gif
  • 1-n%, (Number) px x (Number) px for scaling

Here are some examples of how tags can be used:

  • “200% logo-retina.png, logo.png” produces both a 2x and a 1x asset
  • “heroImage.jpg10” produces a 1x asset with max quality
  • “400% tuningfork.png, 250×250 tuningfork.jpg40%” produces a 4x PNG asset and a custom-scaled JPEG asset

****

What’s my favorite part?

The instant updates of assets!!! WOW!!!

So part of the reason I like this is the hyper efficiency but the other part is that I was completely wrong about it from the start. I’ll explain. When I first started studying up on the Generator, my first thought was “What happens when I update the layer? I guess I’m going to end up with multiple versions of the asset” Which was incorrect. When I update the layer, it updates my exported file and removes the old version. Even if I change the file type, it will remove the old file and replace it with the new file type. No dups!!!

****

In the video I use an Illustrator Plug-In called:

PHANTASM by Astute Graphics

****

I got all my info from Youtube:

Photoshop CC 14.1 Generator- Howard Pinsky

How To Create Web Graphics Automatically with the NEW Photoshop CC Generator

Photoshop CC: Generator- Dave Cross

Adobe Generator – Photoshop CC 14.1

****

Checkout:
SebastianBleak.Tumblr
www.SebastianBleak.com

Twitter:
@SebastianBleak
#AdobeGrind #StayMuddyGetFly
If you look up #NSL113 you should be able to follow my week, all of the videos I studied for this one, and other Tweets related to this post.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s