Photoshop – How to preview designs in grayscale

When designing anything from icons to user interfaces, it is advisable to check your design in grayscale. This helps your design in multiple ways:

  • If your design works without any color, you have a solid foundation and color can add to the functionality that is already there.
  • Color information is less reliable to work for any person viewing your design than value (how light or dark a color is). Colors appear very different on different devices and the human perception of color can vary dramatically, therefore you should never rely on only using color to distinguish design elements.

Check your design, by stripping away the color information non-destructively. This is the easiest way to do it:

Grayscale layer

Photoshop - layer to preview in grayscale.
Photoshop – layer to preview in grayscale.
  1. Create a new empty layer and fill it with black (use your keyboard shortcuts, such as CTRL + Shift + N to create a new layer and CTRL + Backspace to fill it with the background color).
  2. Set the layer’s blending mode to Saturation.
  3. This now works like an adjustment layer, which you can keep at the top and turn off and on.

There are, of course, other ways to achieve the same effect, just be aware of the additional steps.

Hue/Saturation adjustment layer

Photoshop - Hue/Saturation adjustment layer set to 0% saturation.
Photoshop – Hue/Saturation adjustment layer set to zero saturation.
  1. Create a new Hue/Saturation adjustment layer and set Saturation to 0% in the Properties panel.
  2. Set the layer’s blending more to Saturation. (Important!)
  3. Same effect as the grayscale layer mentioned above.

Personally, I think this method has drawbacks:

  • The adjustment layer icon is not as recognizable as the plain black one from the grayscale layer.
  • You have to open the Properties window and adjust the saturation manually.
  • If you forget to set the layer’s blending mode, you will get “incorrect” grayscale:
Photoshop - Hue/Saturation layer with incorrect mode for grayscale preview.
Photoshop – Hue/Saturation layer with incorrect mode for grayscale preview.

You can see that the Normal blending mode leads to a different grayscale result. In fact, this mode is not neutral at all, so do not use it to check your design.

Black & White adjustment layer

This is not really an option for previewing a “true” grayscale version of your design, as it does not provide a neutral setting. This adjustment layer is meant for changing a black and white image. If you set the layer’s blending mode to Saturation, you get the same effect as with our grayscale layer, but why have all those useless sliders from the filter then?

Grayscale color mode

Photoshop - grayscale color mode.
Photoshop – grayscale color mode.

Switching the color mode for the entire document discards color information and certain adjustment layers and Smart Objects. You might not be able to switch back to color and besides, it performs a file format conversion, which is not what we want.

Happy grayscaling to you all!

Object linking – Photoshop linked files and Smart Objects

This is part 2 of the examples from Object linking and embedding – Smart workflows for game developers.

Here you can get an overview of different object linking tools in Photoshop and how to use them. Generally, this applies whenever you are working in a production pipeline, that needs auto-updating links and non-destructive processes with many iterations.

Linked Files

In Photoshop you can insert images in two ways:

Photoshop - Place embedded or linked.
Photoshop – Place embedded or linked.

 

Whenever you copy and paste or drag a compatible file into your current Photoshop composition, it creates an embedded copy. This means, there is no connection to the original file.

When you want to maintain a dynamic link to a source file, chose Place Linked… to insert an image.

Place Linked… creates a reference to the original file and therefore allows you to updated your placed file only by changing the source. No exporting and re-importing into Photoshop required. Here’s an example:

Marketing screenshots for a game.
Marketing screenshots for a game.

 

Most likely you are going to release screenshots of your game or similar marketing material for app stores etc. In the above image you can see a screenshot of a game that is framed and has marketing content around it. This is an ideal candidate to be linked dynamically. Using a static image would mean that you would have to reimport a new version whenever changes are made to the game. We want to avoid this to because it means a lot of manual work, that not only costs time, but can also lead to errors.

Instead, we create screenshots (or whatever content it may be) in a separate file, that is easy to manage and than place it as a linked file in our main composition document.

So this is my main composition document:

Main composition document.
Main composition document.

 

It features a framed content area and a few assets to create descriptions and decoration. The actual screenshots are going to be linked in this document.

photoshop_linkedFiles_2_images

In my case, I have a mockup-psd, but you can also link simple images, which you can edit or override from outside of Photoshop.

Click File > Place Linked… from within your main comp to link an external asset.

A linked file in Photoshop main comp.
A linked file in Photoshop main comp.

Note the chain symbol, which shows that this file is linked to a source.

Now you can manipulate the linked file as if it were a simple image by transforming it or adding layer effects to it.

photoshop_linkedFiles_editInMainComp

So far so good, but now comes the good part:

This was a one-time setup. From now on, you can update the separate mockup psd file or simple override screenshots in the file browser and your main comp will automatically update.

If you need to force an update, just right click the layer and hit Update All Modified Content:

Photoshop - Force update linked files.
Photoshop – Force update linked files.

 

Some more examples when to use linked files:

  • A logo that was designed in Illustrator or any other application can be linked in your marketing preview screens, your game design document, your website and of course in your game itself.
  • Mockups and iconic images like characters or important items can and should appear as a branding throughout your production pipeline.
  • Whenever you want to iterate over assets, place them as linked files in your workflow early on. This way, you can have everything in place and then make changes continuously.
  • If possible, avoid dummy graphics, that are not part of the pipeline. Don’t get me wrong, stand-in assets are very important to your workflow, but make those intermediate assets linked files, so that your production pipeline is set up from the beginning. Iterations come easy and show immediate results.

Use linked files in Photoshop whenever you split work among several files, you want to iterate over your assets without changing the production pipeline and when you want to make sure that a certain asset is always up-to-date at multiple locations.

Smart Objects

Smart Objects in Photoshop are, although they don’t always show it, linked files. Here’s a famous example from PixelResort’s App Icon Template (get it here or search for it online, if you want to follow along).

App Icon Template by PixelResort.
App Icon Template by PixelResort.

 

In this template file you can edit a single Smart Object to design an app icon. Once you are done with creating your icon, you save and Photoshop automatically creates different sizes for you to preview and even exports them via an action.

Let’s take this example and learn how Smart Objects work.

The Smart Object icon in Photoshop.
The Smart Object icon in Photoshop.

 

Double click the layer preview to open a Smart Object.

photoshop_smartObjects_objectOpenAsFile

You will notice that a new file opens (Icon.psb). You can see its content and edit it easily in a separate comp before saving it and seeing the main comp update (App Icon Template.psd).

So if this Smart Object links to another file, where is it? Try the Save As command (CMD/CTRL + Shift + S) and have a look at the inherited file location:

photoshop_smartObjects_fileLocation

As you can see, the Icon.psb Smart Object is a separate Photoshop file on your hard drive, but it’s hidden at a temporary location to avoid cluttering your working  folder. Let’s cancel saving and try something else.

Open the Properties window by selecting Window > Properties or clicking the sidebar icon:

Photoshop Smart Object properties.
Photoshop Smart Object properties.

 

From here you could open it again and edit it (just like when double clicking the layer preview) or you could convert it from a temporary file to a permanent, linked one. Don’t be fooled by the terminology: It is called an Embedded Smart Object because its source is hidden as if it weren’t a linked file, but in fact it is.

Use Convert to Linked… if you want to save out your temp file to use it with other applications. This does not change the functionality; as stated above, a linked file and a Smart Object only differ in the way their content is stored.

Note, that by convention Smart Objects create PSB (Large Document Format) files. In most situations there will be no difference in using the standard PSD format.

How to Create a Smart Object

To create a Smart Object from any layer, right click it and hit Convert to Smart Object.

Aside: Do you remember, that Photoshop let’s you resize Smart Objects non-destructively? Now you know how this works. If you have a simple layer and transform it, you must override it’s save state. If you have Smart Object, that is stored as a temp file, you always have the original source as backup and can go back and forth.

Let’s use Smart Objects to create assets for a card game:

photoshop_smartObjects_exampleCards_01

  • Create a new Photoshop document card.psd
  • Create a new layer, name it card_background or whatever suits the purpose
  • Convert the layer to a Smart Object
  • Copy the Smart Object for card variations

photoshop_smartObjects_exampleCards_02

The copied Smart Object now links to the same background files, meaning that you can open any one of them and edit its content, which will then be updated in all layer instances of your main comp. You can still perform transformations, layer styles and effects, all non-destructively in your main document.

Important: When creating a Smart Object from a layer, it will always inherit the layer name. This name cannot easily be changed, therefore, name your layer before converting it.

This way, you can build a very robust system for creating quick mockups or even your final assets. Here is how I used this technique:

  • I created a Smart Object for a generic background, that could be colored in the main comp.
  • Pictogramms and other graphic elements are all single Smart Objects, so that I can use them on different cards, but when I decide to change one element, they all update accordingly.
  • My main composition works as an overview for me to see all cards in context, compare color values and just make sure they look good together.
  • Individual cards are Smart Objects, that are also hooked up to the Image Asset Generator or a Photoshop action that exports them, if necessary (but as you can guess, I’d rather link my files to any other location, than export them)/

By making individual elements of a design Smart Objects, you can adjust them separately, while keeping up dynamic links to all instances of the elements use. Nesting Smart Objects makes this system very robust and still gives you the flexibility to iterate over your design.

Here are a few more ideas, I’ve used in my own projects:

  • When designing individual elements, always do so in context. Create dynamic links to backgrounds or other external elements so that you always have the most recent version, even if other artists are working on those files.
  • Create a central color scheme or art style document, where artists agree on a color palette and other significant elements. This could also be the main background or any design that dictates how child elements should look. Link to this file from your own images to always be up-to-date when the main design changes.
  • Especially when creating mockups, use the power of Smart Objects to easily test out ideas with complete flexibility. Here’s a quick tip:
Create a design element in an easy to handle Smart Object.
Create a design element in an easy to handle Smart Object.

 

Then, transform and recolor it in your main comp.
Then, transform and recolor it in your main comp.

 

Now just copy the Smart Object and use it in several places and with variations.

This should give you some inspiration to explore Smart Objects in Photoshop. Please let me know, if would like to see more examples in detail.