How to use Adobe Assets for free, easy, in-browser PSD conversion.

Adobe Assets is a free in-browser PSD conversion tool that is perfect for anyone wanting a low-budget, light-weight or chromebook-friendly alternative to Photoshop.

This article will provide you with the essential tools and some useful tricks to make your workflow more efficient when navigating the in-browser tool. Before starting, you will need to sign up for a free Adobe Creative Cloud account, and upload your PSD file to the Assets page.

Get to know your file

The Details Panel
The easiest way to get a quick overview of your file is in the “Details” panel. Here you will find information like file size, dimensions, date of last modification and access privileges.

Extract Panel
To unlock the full potential of Assets, you need to navigate to the “Extract” panel. Once the image has rendered you will have access to all the features detailed below.

Zoom and Fit
Although Adobe Assets does not take zoom into account with measurments or distances, it is helpful to be able to adjust for viewing and workflow. You have three options:
1) Type in a zoom ratio percentage(useful for large-scale overview)
2) “1:1” will give you a 100% zoom to match pixel for pixel (helpful for eyeball comparisons).
3) Fit will zoom the document to match the width of the viewport.

Navigating Layers
You can navigate the PSD’s layers using the layers panel to deconstruct, extract and hide specific elements. This is particularly useful for selecting overlays or gradients.

Wide-Screen Viewing
Adobe does not give you this option, but if you are comfortable with developer tools in your browser, you can remove the panels section from view by applying display:hidden on the div#detail-panel, and width: 100% on the div.psd-preview-view. You will still be able to measure, copy text/CSS and even extract assets, but will need to refresh or restore display: block on the details panel to access extracted assets.

Measuring

Adobe assets has a robust set of built-in measuring tools to take advantage of.

Click
By clicking any object you will get a readout of its width, length, x-coordinate and y-coordinate for sizing and positioning.

Pixels to percentages
By selecting the percentage option, those values will change to percentage values. by clicking the width or height values, they will be automatically copied to your clipboard.

Shift Click — By shift-clicking items you will select both at once. If you have one item selected and you shift-click another, you will get 3 outputs:

• the total dimensions of those two items
• the measurements relating those two items (how far they are apart from each other)
• You will be able to export those items as a bundle (more on this later)

Styles

One of the most useful tools of Adobe Assets is to determine and copy styles to use in your CSS.

Text Content
by selecting a block of text and clicking the “Copy Text”, the content will automatically be added to your clipboard.

Text Styles
by clicking “Copy CSS”, the CSS properties and values listed in the styles panel will be automatically added to your clipboard. You can even export in preprocessor-friendly formats by clicking the CSS drop-down menu in the styles panel.

Text Size Format — in the styles panel, you can change the font size format from px to rem or em for more fluid typography in your document and even plug in your base font size so it will align with other fluid text in your project.

Matching Styles — By selecting an item, you will get the associated colour and font size in the styles panel. You can then select the highlighted colour or font size, which will produce tags on all matching items in the document. This is useful for mapping out typography headings and colour variables.

Extracting Assets

Adobe Assets makes it surprisingly easy to extract images, icons, and other layered assets in their native size and resolution.

Images
To extract an image, simply select an item and click the Download arrow. Then navigate to the assets panel on the right, and the layer will be available for download.

Selecting file types
You are given a choice of extracting assets in .jpg (with quality slider for optimization), png-8, png-32, .svg. It will also give you the option to scale up the pixels (2x) for retina screen resolution.

Asset Bundling
By shift-clicking before extracting, you can bundle assets into one unit. This is useful for easy mock-ups or fixed-position items.

In Conclusion

Adobe Assets is an excellent tool for anyone who is looking to do PSD conversion work who needs something low-budget, light-weight, or in-browser (chromebook friendly). Hopefully these tips will help you level-up your workflow. Now go get extracting.