Video Tutorial

Smart Guides

Getting the correct distance between two objects is crucial in web design but it can be a tedious task to measure everything. With the Photoshop CC 2014 release, you longer do you have to guess the measurements between objects. The new Smart Guides are one of the most useful features because they show you the relative distance between objects and make positioning objects much easier. To use Smart Guides, hold the Control or Command key. A purple smart guide will appear and you can see the distance between your selected layer and the canvas. You can even measure the distance between two layers simply by hovering over the other layer. If you don’t see anything, make sure that you have the Move or any Path tool selected then try again.

image

Tip: If you want to change the measurements, simply press Ctrl/Cmd+R to enable the Rulers then right-click on the ruler and select the measurement you’d like to use.

image

Smart Guides also let you create matched spacing so that you can duplicate a layer to another position and repeat this with the same spacing you had before. For example, let’s say we want to duplicate this circle three times. Simply hold the Alt or Option key then drag it towards the right.

image

Repeat the same thing by holding Alt or Option and dragging another circle towards the right. Photoshop will automatically snap this circle so that the spacing matches.

image

image

Smart Object Improvements

A new feature in Photoshop CC that wasn’t found in Photoshop CS6 is Linked Smart Objects. This feature lets you embed a file to your Photoshop document and anytime you edit that Linked Smart Object, your file will save as well. This also works the other way around – you can edit your file then update your Linked Smart Object and it’ll update your Photoshop document with the new file.

image

If you wanted to turn the Linked Smart Object into a regular embedded one that isn’t linked, you can simply right-click on the layer and choose “Embed Link”. But in previous versions of Photoshop CC, you couldn’t do this vice-versa and turn an Embedded Smart Objected into a Linked Smart Object. Now you can do this in Photoshop CC 2014 by right-clicking any Embedded Smart Object and choosing Convert to Linked. When you do this, Photoshop will open a new window asking where you’d like to save the file. Save the file and your Embedded Smart Object is now a Linked Smart Object.

image

When you start using Linked Smart Objects, you’ll often find yourself having to organize where those files are stored in your computer. And if you have a document with many Linked Smart Objects, it can be a lot of work to organize all your files and send it to your coworker. Instead, you can now use the Package tool which will save a copy of your Photoshop document with all the Linked Smart Objects into any folder. Simply go to File > Package, browse for a folder where you want to save the files, and Photoshop will automatically save your document with all the Linked Smart Objects organized into the Linked folder.

image

What happens when you open a Photoshop document with a missing Linked Smart Object? Photoshop will let you know about the error and you can find the file.

imageIf If you can’t find the file, Photoshop still has a raster version of the layer that you can use but you need to rasterize your layer. If you try to edit the layer, Photoshop will ask you if you want to rasterize the Smart Object. Click Yes and you can edit the layer.

image

The last update for Smart Objects are selectable layer comps. Sometimes you need to create multiple variations or compositions of the same artwork. For this, you can use the Layer Comps panel by going to Window > Layer Comps. You can create multiple layer comps and change the layer visibility, position, and appearance. In Photoshop CC 2014, you can easily switch between different layer comps on your Smart Object. To do this, select a Smart Object then go to Window > Properties. You’ll find a dropdown menu for you to pick the layer comps.

image

Better Font Previews and Typekit Integration

Photoshop CC 2014 brings a huge update to the Text tool. Firstly, you can pick your fonts quicker with the live font preview. Simply hover over a font from the options bar and your text will update. You can also do this by pressing the up or down button. Sometimes a font will have several styles – instead of pressing up or down multiple times until you get to the next font, you can hold the shift key while pressing up or down and it’ll skip the styles and go straight to the next font.

Typekit Fonts

Another feature you’ll notice is the green icon beside the font. This indicates that the font is from Typekit – a respiratory of fonts that are free to use with your Creative Cloud membership. Simply click on the Add Fonts from Typekit  button and the Typekit website will load in your browser and automatically log you in. From here, you can select the font you want to use and sync it to your computer. The font will appear in Photoshop automatically without restarting.

Syncing Fonts from Typekit

Back in the Photoshop font selection menu, you can filter the fonts list so that it only shows fonts from TypeKit.

 image

You can also search for a font by typing. For example, you can type “bold cond” to find all the bold condensed fonts.

image

Finally, if you open a Photoshop document with missing fonts, Photoshop will automatically inform you if they’re available on Typekit and you can

image

image

Path and Spin Blur

With the new Path and Spin blur modes for the Blur Gallery filter, you can create realistic motion blur along a path or a circular motion blur. To access these, go to Filter > Blur Gallery > Path or Spin blur. First, we’ll show you the Path blur. This blur mode lets you create a motion blur along a path. Simply draw a path in the direction that you’d like the motion blur to move towards. You can also draw multiple paths in different areas.

image

image

The Spin blur creates a circular motion blur and it’s great for making the wheels look like they’re moving.

image

With the two new blur modes, you can create great looking motion blur car ads.

image

Focus Selections

Here’s a photo of with a blurry background and let’s say we want to make a selection of just the areas that are in focus. We can do this easily with the new Focus Area selection tool. To use this, go to Select > Focus Area.

image

Adjust the “In-Focus Range” setting or checkmark the Auto box to have Photoshop guess it for you. The selection isn’t always perfect but you can use the add and subtract tools to fix it. When you’re done, you can further enhance the selection by clicking on the Refine Edge button. This will bring up the Refine Edge tool to improve your selection.

image

And just like that, we created a quick selection of the in-focus areas that we can use with any adjustment or fill layers.

image

Color Blending Algorithm for Content-Aware Tools

All the content-aware tools now create better results with a new color blending algorithm. For example, we’re going to remove the boat from the image. First, we’ll make a selection of the area we want to remove then go to Edit > Fill and switch the mode to Content-Aware. There is a new option that lets you enable Color Adaptation. Checkmark this then click OK.

image

As you can see in this image, there is a significant quality improvement when color adaptation is enabled.

image

The color adaptation algorithm is also available in the Content-Aware Move/Extend tool and the Patch tool on Content-Aware mode. To enable color adaptation, click on the Adaptation configuration button then set the color strength setting to any number from 0 to 10 – the higher the number, the stronger the color adaptation. You can also adjust the structure setting with a value from 1 to 5 which will determine how strong the patches should adhere to the patterns in your image. If you are getting hard edges, then you might want to lower your structure value.

image

image

Create Your Own Color Lookup Tables

The color lookup adjustment layer was introduced in Photoshop CS6 and it lets you apply color profiles to your image so that you can match the colors between multiple videos and images. Unfortunately, it wasn’t used much because you could only use the presets or import one created using another software. Few color lookup tables were available and most people didn’t know how to create their own. Now you can create your own color lookup tables inside Photoshop and it is very easy. Simply create your color effect using any adjustment layer then go to File > Export > Color Lookup Tables. Give your lookup table a name then select the format you’d like to save the file as – for most instances, a 3DL file is fine. You can also adjust the quality. Adding more grid points will increase the accuracy of your color effect at the expense of a large file size. Click OK then save your file.

image

After you’ve saved your color lookup table, you can use it for any photo or video with Photoshop, Premiere Pro, or After Effects. In Photoshop, you can use your color lookup table by adding a Color Lookup adjustment layer from your Adjustments panel (Window > Adjustments). Select the “Load 3D LUT” from the dropdown menu then browse for your 3D LUT file. Now you can apply the same effect to your photos and videos with a single color lookup adjustment layer.

image

Photoshop Generator Improvements

If you’re a Web Designer, then you’ll love Photoshop Generator. This tool lets you export your layers and layer groups into images in real-time simply by naming your layer or group. For example, you can rename the layer or layer group with your logo to “logo.png” and Adobe Generator will automatically save that layer as logo.png. There’s also a lot more you can do and in the Photoshop CC 2014 update, you can even specify subfolders to place the images in. Let’s say you want to save your logo.png layer into your “images” folder. To do that, first go to File > Generate > Image Assets to enable Photoshop Generator. Rename the layer or layer group to “images/logo.png”. Photoshop will automatically save the image for you in the images directory.

image

Open the folder where your PSD is saved and you’ll find an assets folder with the image assets Photoshop Generator created for you. This is done in real-time so any changes you make will be live.

image

But let’s say you want to save all your layers into the images folder by default. Now you can create a document-wide default setting to use simply by creating an empty layer and naming it “default” followed by the parameters you want to set. If you want all your image assets to be saved into the images folder, simply rename the empty layer to “default images/”.

image

Here are some more examples you can try renaming your layers with.

  • default images/@2x – Saves your image assets in the images folder at 2x the image size.
  • default images/ + images/hi-res/@2x – Saves your image asses in the images folder as well as saving a 2x version in the hi-res folder.

If you want to turn off Photoshop Generator, go back to the File > Generate menu and disable the Image Assets item.

Camera RAW 8.5

Also new with Photoshop CC 2014 is the updated Adobe Camera Raw tool. The latest Camera Raw 8.5 update brings a very useful brush tool for the Graduated and Radial filters. The graduated filter is often used to darken and tint the sky but if your image is like ours, the filter can darken the tower and make it look unrealistic. Using the brush tool, we can erase the graduated area from the tower. The Auto Mask option can be enabled to make it easier to mask.

image

At the bottom of the panel, you’ll find options to toggle the mask settings. These options make it easier for you to see where you painted.

image

The second update in Camera Raw 8.5 is the per-panel preview option. Clicking on this panel will reset the settings in your selected panel to the default and back. For example, if you want to reset the Split Toning effect but not any other settings, simply switch to the Split Toning tab then click on the per-panel preview button. This will reset the settings back to the default just for the panel that you’re on. If you press the button again, it’ll switch back to your previous setting.

image

Easier 3D Printing

Photoshop CC 2014 makes it easier to print 3D objects with the improved Print Preview dialog. You can easily select your 3D printer and material then print. Once you’ve selected your printer, a print preview window will open. With the improved Print Preview dialog, you now get a realistic preview of the model with realistic lighting and improved ray tracing. There’s also a new remeshing algorithm that greatly reduces the triangle count in your 3D object files.

image

There’s no need to worry about stability of your print. Photoshop will automatically fix water tightness issues and build a scaffolding model to hold your 3D model so that it doesn’t collapse in the middle of the print.

image

If you don’t have a 3D printer, you can use Shapeways.com and they’ll send you your model in the mail. All you need to do is select Shapeways and the materials in the Properties panel then go to 3D > 3D Print. Photoshop will even estimate the cost for you. After everything looks okay, click the Export button to export your file then upload it shapeways.com.

image

Improved 3D Editing

Photoshop can open OBJ files with multiple meshes and groups but they used to be merged into a single group. In Photoshop CC 2014, your meshes and groups will be preserved.

image

There’s also new enhancements to the Texture Properties dialog. You can now rename your texture and instead of modifying each texture one at a time, all you need to do is checkmark the “Apply to matching textures” option and Photoshop will do it for you automatically.

image

New Preferences

Photoshop has introduced several important updates to the Photoshop preferences. You can access the Preferences by going to Edit > Preferences > General. The first new feature is the Narrow Options bar. You can find this option in the Interface tab. This option is useful if you’re using Photoshop on a small screen because some of the buttons on the option bar might get cut off if your Photoshop window isn’t wide enough. The new Narrow Options Bar feature makes your option bar more compact by turning long checkboxes into square buttons.

image

Syncing has also been improved in Photoshop CC 2014. Photoshop CC lets you sync your Photoshop settings to multiple computers using your Creative Cloud account by going to the Sync Settings area. In the 2014 release, you can now choose to upload or download your settings. You can also synchronize your workspaces, keyboard shortcuts, and menu customization. A new log window will show you your synchronization history and status.

image

Finally, try out new features before they’re production-ready by enabling the experimental features. Currently, you can enable Multitone 3D printing and enable some features that are already on Macs but not on Windows yet.

image