Do you ever need to view a PSD but don’t have Photoshop? You can now upload the PSD to Adobe CC Extract, which is free even for non-Creative Cloud members. This will enable you to view the PSD, extract images, determine font families and sizes, and get a color palette—all without Photoshop!
When Developers Don’t Have Photoshop
At Credera, our XD designers will almost always make a comp in Photoshop (which saves as PSD files) for our software or web project. Eventually those designs get handed off to developers, who often don’t have Adobe Photoshop licenses since their skillsets are more focused on development, not graphic design. Crunching the PSDs to JPGs can help initially, but eventually developers require designer assistance when it comes to either extracting assets or replicating the finer details of a comp in their code.
Some common questions I receive are:
How do I export an image from a PSD without using Photoshop?
How do I tell what fonts/weights/sizes were used without Photoshop?
What HEX or RGB colors are used in the comp?
Introducing CC Extract (Previously Adobe Parfait)
Thankfully, this year brought us Adobe CC Extract, which gives developers a free way to view PSDs, extract images, determine font details and nail colors without needing Photoshop.
To get started:
1. Navigate to creative.adobe.com/files and log in (if you don’t have a free AdobeID, you can sign up here).
2. For our purposes, we’re going to upload a PSD we made of our blog by dragging it onto the page.
3. Once your PSD is uploaded, click on the thumbnail to be taken to the Extract view.
Once you land on the Extract view, we’re ready to move to any of the following features.
Get Font Details From a PSD Without Photoshop
When on the ‘Extract’ tab, you have the ability to click on any item in the comp and the relevant styles will be displayed on the right in the ‘Styles’ tab beneath ‘CSS.’ This is especially useful to developers to find which font families, weights, sizes, and colors are used in specific places on the comp and nail the details instead of guessing.
On the right hand side, if you scroll down beneath ‘CSS,’ you’ll find a rollup of all the fonts, weights, and sizes used throughout the entire comp, including links to Typekit if you’d like to source from them. This panel is great for setting up a project when you might need to declare SCSS/LESS variables and set up your repetitive tags or classes, like your H1, INPUT, LABEL, etc.
Get Color Details From a PSD Without Photoshop
If you continue to scroll down on the right side of the page, in the ‘Styles’ tab you’ll find the ‘Colors and Gradients’ section. Similar to fonts, this is a great place to find what colors are used throughout the comp so you can set these to your project variables in SCSS/LESS. You can pick your identity format from HEX, RGB, and RGBA.
Getting these colors nailed to brand standards using the PSD file as the source will ensure the developer will nail the colors, as the PSD to JPG conversion can introduce artifacts during compression. Setting these up as variables in the beginning of the project will reduce code bloat and keep the team of developers from having to remember multiple HEX values over the course of the project.
Exporting an Image From a PSD Without Photoshop
Usually the details of fonts and colors can be communicated via email, albeit with some difficulty, but images have to be extracted from the comp in order to be properly used in an application or website. Thankfully Adobe makes it a breeze for anyone to extract images.
1. Click the image you would like to extract.
2. A blue tooltip should appear, and you’ll click the download arrow on the right side.
3. Select the format you’d like to save the file in:
a. If the image is a photo, save it as a JPG.
b. If the image is a graphic, I’d recommend attempting to save it as an SVG.
c. Regardless, it’s best practice to also save a PNG as a fallback for browsers that don’t support SVG.
4. This will place the asset in the ‘Assets’ tab on the right side, where you can click to actually download the image.
Moving Forward
Adobe CC Extract is a simple tool that serves a very real need that we run into almost every day at Credera. Though it can’t do everything—it has some issues with linked PSDs and can’t export a pattern overlay tile—we’ll still likely be using it heavily moving forward.
If you’re a developer or designer and know of a different tool or method to achieve what CC Extract does, please let us know in the comments.
If you’d like further resources on Adobe CC Extract or Creative Cloud in general, try a few of these links:
Contact Us
Ready to achieve your vision? We're here to help.
We'd love to start a conversation. Fill out the form and we'll connect you with the right person.
Searching for a new career?
View job openings
