A major update to Adobe Photoshop CC last June 2014 introduced a lot of new design features such as Typekit integration, font search, linked smart objects and more. Since its launch in June 2013, there are currently 45% more new features in Photoshop CC in total than in Adobe Photoshop CS6 – if you do the math.
With the fourth version of Photoshop CC, the team behind this giant software made sure that other important segments such as web design and mobile apps will benefit from these new as well as improved features of this creative cloud application. Though there are various Photoshop plugins for web designers, the 2014 release of Photoshop CC rolls out several new web design features as well as enhancements to some of the current tools will surely enrich your web designing experience.
In this post, we will introduce to you the newest web design features of Adobe Photoshop CC for web designers, as of June 2014.
You might want to take a look at the following related articles:
- 15 Video Tutorials on How to Use Photoshop Dodge and Burn
- 15 Video Tutorials to Create Glitch Effects in Photoshop
- Build Personalized Website With Adobe Portfolio
- 5 Ways on How to Make your Web Designs More Intuitive
- Introducing the Bold New Design of The Huffington Post
A world of typographic possibilities is now in your hands made possible through the integration of Typekit. Fonts from Typekit that are synchronized with your computer, which by the way will appear alongside locally installed fonts, can now be used with any of your creative projects giving you a thousand of options.
Aside from having a thousand of great fonts in your machine, Photoshop will also let you replace missing fonts with equivalent fonts from Typekit in case you open a document with unavailable fonts. Instead of searching for the right font in the Internet, downloading then installing it on computer, Photoshop CC will do these works for you which means a lot of time will be saved for other important tasks.
Moreover, there are two main features in this area which you will surely love:
- Typekit Font Filtering – By clicking the grey T icon, you’ll be able to display all synced Typekit fonts which is really a useful way of identifying which fonts are in the Typekit servers, and which are stored locally.
- Typekit Website Shortcut – To open the Typekit repository in your web browser, click the green T icon next to the given font. Through this, you can select any Typekit fonts which you would like to use and then sync them easily with your computer. The synced fonts will automatically appear without the need to close and re-open Photoshop. Sounds good, huh?
Layer comps in Smart Objects
The improved Layer Comps in this release are now easier to keep up-to-date by allowing you to sync the position, visibility, or appearance independently across multiple comps.
Furthermore, combining Smart objects with layer comps is now possible with Photoshop CC 2014 as it introduces a way to do so. It also introduces a feature that lets you change the state of the Smart Object at a layer level without editing the Smart Object.
Overall, the enhancement in this area of Photoshop CC will benefit web designers for creating a plethora of different web elements which can be used in different web design projects. Effectively, you can use a Photoshop file as a linked Smart object and activate corresponding layer comps which will be integrated on your other projects.
Font Search and Instant Font Previews
Tired of scrolling down a thousand of font in your Text tool options bar and Character panel font lists just to find the font that you would like to use? If yes, then there’s a good news for you. Font search is another useful feature of Adobe Photoshop CC 2014.
The font search features allows you to find the perfect font in record by narrowing down the long list of fonts by typing font name of your desired font family — even with just part of the name such as helvet which will then display the Helvetica font families. In no time, Photoshop filters the list on the fly.
On the other hand, the Font Preview feature allows you to view different fonts by using the up and down arrow keys on your keyboard or by holding the shift key when doing this to skip font families and go onto the next font.
A Smarter Smart Guide
Every web designer certainly knows that a pixel-perfect alignment including the issues of lining items up correctly as well as the correct amount of spacing in between different elements are very important aspects to be considered when designing websites.
With Photoshop CC 2014, you do not need to worry about these issues because Smart Guides now show you pixel distances to the edge of the canvas and the distance to any other object. It also snap to common spacing when duplicating or moving an object.
As a summary, some of the many useful enhancements to Smart Guides are the following:
- Path Measurements – While working with paths, Photoshop displays measurement guides. The measurement guides will also be displayed when you select the Path Selection tool and then drag a path within the same layer.
- Distances from the canvas – Hold down the (Mac) or (Windows) key while hovering outside a shape to display distances from the canvas.
- Matched Spacing – Photoshop displays measurement guides to indicate spacing between other objects when you duplicate or move an object. Objects that match the spacing between the selected object and its immediate neighbors will be displayed when doing so.
New and Improved Linked Smart Object
After the groundbreaking introduction of linked Smart Objects – same as standard Smart Objects, but are instead linked to a file – Photoshop CC 2014 now lets you to convert Embedded Smart Objects into Linked Smart Objects.
As a summary, some of the enhancements in the 2014 release of Photoshop CC are the following:
- Package the Linked Smart Objects in a Photoshop document – The new Package command gets your PSD and links ready to share with other people as the source files are saved to a folder on your computer. To do this: Select File > Package
- Convert an embedded Smart Object to a Linked Smart Object – Effects and filters applied to the embedded Smart Object will be preserved once you convert it to a linked Smart Object. To do this: Select Layer > Smart Objects > Convert To Linked
- Workflow improvement – Performing an operation on a Linked Smart Object whose source file is missing will allow Photoshop to prompt you that the Smart Objects must be rasterized or resolved.
Other enhancements for Web Designers
- Layer Copy CSS now supports Inner Shadow Layer effects
- The new narrow Options bar lets you work more efficiently on devices having small screens. To do this: Select Preferences > Interface > Enable Narrow Options Bar.
- The Spectrum color picker in the Color Panel is now resizeable
One Final Thought
With the Photoshop CC 2014 updates, a lot of features have been added while other features are being improved as well. And while most people can conclude that these features are mostly for print designers, we can’t hide the fact that it also enhances the workflow of web designers and introduce a lot of options in designing websites.
What do you think about these updates? Let us know in the comment box.