Design How To: Speed Up Your Design Process with Adobe Libraries

Photoshop recently launched the new version, CC2015, and with it some pretty handy new features.  Anyone who uses photoshop knows that once in a blue moon, you discover a new tool or short cut that changes your life.  The latest tool that has completely reshaped the way Demac Media designs eCommerce sites is: Adobe Libraries.

Say hello to consistency!  You know what it’s like when you have 4 levels of grey in your style guide and you get into a new file and… It’s close enough right?  Memorizing hex codes, flipping back and forth between files, matching up font weight, size and spacing is exhausting.  And now, this is a thing of the past.  With Adobes Libraries, you can save your fonts, styles and colours; and apply them across all of your files, AND access them in other Adobe programs. Create style, save, apply.

You can also set up extremely useful resources for default interface objects (like check boxes, radio buttons and dropdown lists) or frequently used icons (think: arrows, social icons, the hamburger or cart.)  If you are thinking this sounds pretty awesome, you are right!  Here’s how you can create your own.

Related: How Design Changes Drive Sales and Engagement

Creating a Library

For the sake of this exercise, open a blank document and create 4 boxes with the rectangle tool.  Make them red, blue, green and purple.  Type red, blue, green & purple below the boxes.

1-Create-doc

1. In the windows dropdown in Photoshop open up: Libraries, it will appear on the right along with the rest of the panels.

2-Open-libraries

2. Choose “+Create New Library” and name it “Test Library.”

3-Create-new-library

3. Select the red box in your layers panel.

4. In the Libraries Panel you’ll see a small red square show up in the bottom bar, click it

5. It adds the colour swatch and the colour number to your Library, now click the blue box and add the colour to your Library.  Continue with all 4 boxes.

5-Add-colour

6. Let’s add some fonts- change the font for your 4 labels to 4 different levels of text.  Make red your H1, blue your H2, green your Body Copy, and purple your Link Text.

7-Add-Text

7. Select the text layer for the word Red.

8. At the bottom of the of the Libraries window click the T, it will add the text style and all of the configurable’s you chose, colour, size, weight, tracking, kerning, everything!

10. Double click on the name of the font in the Library and change it to H1, do the same for the rest.  Your Library should look something like mine.

8-Text-Added

Related: Don’t Go! Why Your Bounce Rate is so High

Using a Library

1. Now that you have a mini Library set up, save 2 versions of your psd.  Call them Libraries-Test.psd  and Libraries-Test1.psd

2. Open Libraries-Test1.psd, you’ll notice when you open the new file, the Library is still there.  Once you get using them you will have a list of other Libraries available to you.  You can also access the Libraries across all of the Adobe programs, photoshop, illustrator etc.

3. Click on the red box in your psd, now click on the colour blue colour swatch in your Library, easy peasy colour change.

9-Change-Colour

4. Select the word red and click the green colour swatch from your Library, quick font colour change.

5. Now select the word blue and click “Link Text” in your Library, it automatically applies all of the styles you set to the word.  This will work for one word or an entire paragraph, also really helpful for consistency, to keep you from using too many different font styles and help you remember all the ones you have used.

10-Change-Text

Related: eCommerce Conversion Design Synergy

Objects and Libraries

You can also save objects that you are consistently using throughout your document.

1. Add an angle bracket to your document.

2. Add it to your Library by selecting the layer.  The drag it to the Library, hover and drop it in.

3. Rename it “Arrow” in the Library.

11-Add-Object

4. In order to add another arrow to the document, the Library object into your design and place it.

13-Drag-Object

5. If this was a slider you would want the arrow to face the other way, the one draw back to the Libraries is that they objects are not editable when you just drag them in to the file.  Keep following the steps for a work around.

6. Use the word red and the blue square to make a button, group the layers together and name the group “Large Button.”

7. Drag the group into the Library panel and it will add the it as an object.

14-Create-Button

8.  You can now right click the button in the Library and choose “Place Layers” and then change the label of the button to Shop Now.

 16-Label-Button

*When you use the Place Layers function it will add the properly named group to your layers panel and the object will appear in your design, fully editable.  The downside to this is it places it in the file where ever it wishes, so sometimes you have to search around the see where the object is.

If you wanted to change the direction of the arrow in step 4, you would have had to use the Place Layers function rather than drag them in to the file.

9.  Drag another copy of the button into your design and then right click the Library object and choose “Edit.”

10.  In the new window, change the colour of the button to red and save.  You will notice the Library updates the colour of the button to red and if you go back to your design it is now red as well.

17-Button-File-Edit

*When using the Edit function remember that any changes you make are universal, they will change the object in the Library AND update the appearance of the object across all of your files.  The best use case for this would be for your header, for example, if you set it up as a Library object from the start, you can just drag it in to all of your other documents.  Say you needed to change the colour of one of the nav links, you could edit it and save, and it would update the header across the board.  Saving you from open every file and doing it one by one.

Sharing your Library

Now you can share your Libraries or provide a front end developer with an overview of your style guide.

1. Select “View on Website” from the menu icon in the top right of the Libraries window.

19-Share1

2. Choose “Share” from the right and choose to invite a collaborator or share the link with them.

18-Share

We have been using the Libraries to create style guides for our Front End Devs.  You can share the link with them, but we have found it works best if you create a separate file and extracts all of the assets for them and apply the font style.  Currently Adobe does not allow you to export the Library.

Want more design resources? Download our Holiday Sale Kit to prepare your eCommerce promotional designs for the upcoming season by clicking below:





Download The Holiday Sale Kit