Today, Adobe updated almost all of their creative apps including Photoshop. If you are a designer or developer who has ever needed to slice out assets from a PSD design to use in a website or mobile app, this update is going to give you hours (or days) of your life back.
A while back, Photoshop introduced Generator to automatically create new assets if you named your layers correctly. This interface wasn’t particularly friendly. Now, the new “Extract Assets” feature puts an easy to use face on the generator technology.
Here are the simple steps to getting new image assets from a PSD using the update of Photoshop CC including Extract Assets:
1. Open your PSD design.
2. Select all the layers you want to create new images from.
3. Right click and select “Extract Assets”.
4. In the dialog select all the resolutions you want created, add or delete layers from your asset queue, manage names and settings.
5. Apply the settings and ALL of your assets are created at once (no need to repeat any steps).
As of today, the functionality of Project Parfait is available in Adobe’s Creative Cloud as “Extract”. The functionality and UI should feel totally familiar to Parfait users. We want Parfait users to transition over to using Extract in Creative Cloud as soon as possible, so, here is some information that should help you out.
- You do not need a new login for Adobe’s Creative Cloud. The login you used for Project Parfait should work when you go to http://creative.adobe.com/files. All Adobe accounts (including free ones) can use Extract.
- You can continue to use Project Parfait until at least September 30, 2014. After that date, the service in Project Parfait will be discontinued.
- You can download PSDs uploaded to Project Parfait until September 30, 2014. In the Files view of Parfait, hover over a thumbnail and click the down arrow.
- All the functionality of Project Parfait will exist in Extract. In addition, you will be able to share a PSD with someone else via a public URL. Using this public URL, the recipient can use Extract right away. No login will be required.
Using Extract in Adobe’s Creative Cloud
1. Go to http://creative.adobe.com/files (You will likely be asked to login, if you have not logged in already.
2. Upload a PSD to the Creative Cloud by dragging your file into the Files view of Creative Cloud.
3. Click on the PSD file after upload is complete.
If you want more information regarding Extract, visit one of the following links below:
Ask a question by visiting our forum: https://forums.adobe.com/community/extract-for-psd
Note: All new users to Project Parfait will be redirected to use Extract in the Creative Cloud.
We had a recent update to Project Parfait where we added support for the first preprocessor, SCSS/Bourbon. We plan on adding other preprocessors, but, wanted to get people’s reaction to this workflow and feedback on what is used the most.
To use a preprocessor, go to the Styles tab in Project Parfait. By default, the CSS Inspector displays plain CSS. Mouse down on the down arrow above the CSS Inspector to change to a preprocessor.
That’s all. Your CSS inspector should reflect this change.
In Project Parfait’s in-app chat, I’ve been reading through all the feedback and trying to respond to people’s requests and problems. One question that has come up a lot is, “Can I share my PSD from Project Parfait?”. I’ve answered this question at least a dozen times, so, I thought I’d post an answer here for anyone looking for it.
Right now, Project Parfait does not support any collaboration features like sharing. So, if you are a designer wanting to share a PSD with a developer through Project Parfait…. you can’t really do it. You will need to send the PSD to the developer and they will need to upload to their account to take advantage of measurements, CSS and assets outputted by the tool.
However, sharing and collaboration is on our radar and we plan to have this in the next few months.
This week, we launched a new service in my organization called Project Parfait. Here are a couple of the things you can do with Project Parfait that hopefully make a front end developer’s life easier:
1. Get Measurements from a PSD.
No more ruler tool or using the marquee tool in PS to eyeball the distance from the top of your site to your logo!
In Project Parfait, you can SHIFT+CLICK two elements on your canvas and get the relative distance between them. Here, I have selected the main document and the top header. The measurements in Project Parfait show me a top margin of 134px and left margin of 349px. While the tool only gives you pixels right now, we want to support % and ems soon.
2. Get the CSS for a Gradient
In PS, some people just use the colorpicker to grab colors from the top and bottom of a gradient. But, what if the gradient actually has more stops than that? There are other ways to get all the colors, but, in Project Parfait, it’s one step.
Select the element with the gradient and see the CSS in the CSS Inspector. This example had three gradient stops.
You can also get vendor prefixes by clicking on the checkbox “Show vendor-prefixed CSS”.
3. Determine your CSS classes for font styles from a PSD design.
In Project Parfait, you can see, at a glance, what fonts, sizes and weights are being used throughout the design you’ve been given. This is displayed in the Styles tab:
By clicking on any of the font sizes, you will get an indicator in your design where this font style will be used as well as a pop up with the CSS.
This allows you to write a CSS class like:
4. Create assets from a single or multiple layers.
From the canvas or the layers tab, you can select the layers that you want to make an image asset from. For example, in this design, I may want this kayaking man icon and the circle behind it. So, I’d select both.
After making this selection, I would click on the download arrow icon in the blue popup box. This will extract your asset and you can see it in the Assets tab.
From the Assets tab, you can click on any image to download it to your local machine once you have verified this is the image you want.
5. Get Inline text CSS styles
In some PSD designs, you will have one text layer with multiple styles. If you try to pull the CSS from PS, you will only get the first set of styles for that layer. If you select a text layer in Project Parfait that includes more than one set of styles, the CSS inspector will give you the “inline” styles. Here is an example:
When you copy the CSS, you’ll get something like this which you will need to break out into separate classes:
font-family: “Source Sans Pro”;
font-family: “Source Sans Pro”;
This is probably not the ideal format, but, hopefully, our users will tell us how they would like inline styles formatted.