Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

Photoshop CC 2014: What’s New for Web Designers?

by
Gift

Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.

Last month saw the launch of the all new Photoshop CC 2014, with lots of great new features, especially for web designers. In this tutorial, you'll learn about the following new or improved features, and learn how to get started using them:

  • Smart Objects
  • Layer Comps
  • Smart Guides
  • Typekit Integration
  • Font Search
  • Workflow Enhancements

Smart Objects

Using Smart Objects is a great way to work non-destructively. You can embed a Smart Object directly in a Photoshop file or link to a separate file and update it and reuse it in multiple projects.

You might already be familiar with Linked Smart Objects in Photoshop. Essentially, these are the same as standard Smart Objects, but are instead linked to a file. This means that your Linked Smart Objects aren't actually saved as part of the .psd, but instead externally, as a separate document.

Traditionally, Linked Smart Objects could always be converted into an Embedded Smart Object, but not the other way round. However, now, in Photoshop CC 2014, Embedded Smart Objects can be converted into Linked Smart Objects! Here's how that works:

Step 1

Right-click on the layer you want to convert, and then choose Convert to Linked.

Smart Objects Convert to Linked in Photoshop CC 2014

Step 2

A new window will appear, asking you to choose the location of your new Linked Smart Object. Once you've found where you'd like the new Linked Smart Object to live, click Save.

Smart Objects Save File As in Photoshop CC 2014

Step 3

That's it! What was once an Embedded Smart Object, is now a Linked Smart Object. Sweet!

Smart Objects Linked Smart Object in Photoshop CC 2014

Layer Comps

Photoshop Layer Comps save specific layout details such as visibility, position, and appearance as a recallable state, meaning that you can quickly switch between different versions of the same thing.

An example of this would be a business card, with two Layer Comps. The first version could have the logo on the left, and the text on the right, whilst the second version could have the logo on the right, and the text on the left. It's a really simple concept, now made even more powerful with Photoshop CC 2014.

Adobe have vastly improved how the Layer Comps feature works, and this is especially noticeable when working on a project with many layers and Layer Comps. Now, you can apply the document's current layer position, visibility, and appearance across all selected Layer Comps.

Layer Comps in Photoshop CC 2014

Smart Objects With Layer Comps

Photoshop CC 2014 introduces a way in which you can combine Smart Objects with Layer Comps. For example, you might build a new Photoshop file containing many different icons,  each individual icon being visible through a different Layer Comp.

You could then use that Photoshop file as a Linked Smart Object in other projects, and simply choose a specific icon by activating its corresponding Layer Comp. Effectively, it's like using one Smart Object which contains a plethora of different elements.

Smart Guides

As a web designer, you'll almost certainly know how important it is to line items up correctly, and with the correct amount of spacing in between different elements. Luckily, with Photoshop CC 2014, you needn't worry about these issues, nor about making complex grids using the guide tools.

With the improved Smart Guides, you can see the relative distance between different objects, allowing you to position things much more quickly and efficiently. This feature may be familiar to you if you use Sketch.

Step 1

To begin using Smart Guides, select the Move Tool, and hold down either the Control key (on Windows), or the Command key (on Mac OS X). Magenta lines will begin to appear (you can change this colour under Photoshop > Preferences > Guides, Grids & Slices) showing you the distance between the canvas and your selected layer.

Step 2

If you want to measure the distance between two different layers, you can do so by pointing your mouse over the other layer.

Step 3

Voilà - that's all! You're now using the improved Smart Guides! If you'd rather change the measurements away from the default option, enable Rulers (either the Control key or Command+R), and then right-click the ruler and choose the measurements you'd like to use.

Typekit Integration

Photoshop CC 2014 offers massive new updates to the way in which the Text tool works. One of the most notable new features is the improved Typekit integration. There are two main features in this area:

Typekit Font Filtering

From the font selection dropdown, click the new, grey T icon, and you'll be shown all your synced Typekit fonts. This is a really useful way of identifying which fonts are stored locally, and which are in the cloud, on the Typekit servers.

Typekit Font Filtering in Photoshop CC 2014

Typekit Website Shortcut

Clicking the green T icon next to a given font will take you to the Typekit repository, in your web browser, which you'll be automatically logged into. You'll then be able to select the fonts which you'd like to use, and then sync them with your computer. Oh, and did I mention that synced fonts will appear automatically, without the need to close and re-open Photoshop?

Online Typekit Repository opened from Photoshop CC 2014

Font Search & Previews

Another useful feature of Photoshop CC 2014 is Font Search. Begin typing either a font's name, such as helvet, so that the Helvetica font families display, or something like, bold cond, so that all the Bold Condensed fonts appear.

Font Search in Photoshop CC 2014

Photoshop CC 2014 also offers a Font Preview feature, which allows you to use the up and down arrow keys on your keyboard to view different fonts, one-by-one, or by holding the shift key when doing this to skip font families and go onto the next font.

Font Previews in Photoshop CC 2014

Workflow Enhancements

There are two key workflow enhancements included in Photoshop CC 2014. The first is in the Linked Smart Objects area of the software. From Adobe:

When you try to perform an operation on a linked smart object whose source file is missing, you are prompted that the smart objects must be rasterised or resolved.

The other workflow enhancement relates to the Sync Settings function - you can now specify the direction of sync, by either uploading or downloading settings from CC, as well as being able to "synchronise workspaces, keyboard shortcuts, and menu customisations". Finally, "the Sync Settings log on the Preferences > Sync Settings tab displays the files being uploaded/downloaded, their sizes, and the timestamps for the upload/download operation".

These workflow changes may be simple, but will definitely be effective, speeding up projects, and making web designers even more productive!

That’s All, Folks!

I'm sure you'll agree that the new features in Photoshop CC 2014 are really exciting, and will become a very useful part of designers’ worldwide regular workflows very shortly. You can learn more about all the changes in Photoshop CC 2014 on the Adobe website.

If you have any questions, or would like to offer your own opinion on any of these tools, please leave a comment below!

Advertisement