Ask DN: Color Variables - Photoshop?

12 points 6 months ago from Saurabh M., UI/X Designer. Co-Founder @Motorpaneer

Anyone use a process to involve color variables in your PSDs? A process/hack that doesn't involve messing up neatly organized layer groups and hierarchy? I've heard all sorts of approaches being used - Saved selections, Adjustment layers on layer groups. But none too practical to use.

Use case being: updating color themes of a layout without having to dig and update each element individually.

Sort by:

18 comments

Marc E., Founder at Bjango Edited 6 months ago

Option 1: Layer Tags

  1. Tag your layers, as explained here: http://bjango.com/articles/layertags/
  2. Make the desired change to one layer/group, then Copy Layer Style and/or Copy Shape Attributes.
  3. Search for the tag.
  4. Select all the layers and Paste Layer Style and/or Paste Shape Attributes.

All layers will be synced, colour and style wise.

Option 2: Gradient Maps

You mentioned you didn’t want to use adjustment layers, but I think Gradient Maps are worth considering, because they’re so precise. Gradient Maps set colours in an absolute fashion, letting you hit exact colour values. Most adjustment layers make their changes relative to the source in a way that’s difficult to get exact results.

Here’s some more info on how I use them (please check out the example under the heading “Versatile”): http://bjango.com/articles/gradientmaps/

Here’s the PSD, if you want to see things in more detail: http://drbl.in/fxEK

Gradient Map Adjustment Layers could also be tagged, for fast search and replace.

Option 3: Smart Objects

Smart Objects could also be used in various ways to propagate colours across many elements, but I’d recommend against using them, unless you’re aware with and ok with the various down sides.

  • Smart Objects pasted from Illustrator have lower quality rendering than objects drawn inside Photoshop.
  • Smart Objects created in Photoshop are rendered at the original size then bitmap scaled up and down.

Those may or may not be an issue, depending on your use. You could build some Smart Objects as flat colour blocks, then use a shape mask to create your elements.

I don’t think that’s a good way to do it, though.

Other options

There’s probably a few other methods available.

Using slice sheets can make this kind of thing far easier, because you have all your elements laid out in front of you — it often only takes seconds to make changes that affect many or all assets you’re exporting.

22 points 6 months ago Reply
Dirk v., Nerdy-two-shoes

And that, ladies and gentlemen, is how markdown will make this a better site.

Great comment ;)

1 point 6 months ago Reply
Allan G., Founder at LayerVault

I should adjust those headline sizes.

2 points 6 months ago Reply
Dirk v., Nerdy-two-shoes

Look fine to me. Maybe just ever so slightly? :]

0 points 6 months ago Reply
Marc E., Founder at Bjango

@Dirk v. Thanks! I love that DN now supports Markdown.

@Allan G. I wasn't sure if I should be using H1, H2 or H3. Opted for H1, assuming you might do needed adjustments on your end. I’m happy to follow your lead, if you have a way you’d like bigger posts formatted.

1 point 6 months ago Reply
Allan G., Founder at LayerVault

I'm cool with H1s. Do your thing.

1 point 6 months ago Reply
Titouan M., Web Designer

I didn't really know where to post this, but there's a bug when collapsing Marc's comment: the don't really want to leave ( screenshot).

0 points 6 months ago Reply
Allan G., Founder at LayerVault

Good find.

0 points 6 months ago Reply
Thibaut N., Interface Designer

I'd welcome a slightly bigger body text size on mobile. ;)

0 points 6 months ago Reply
Sebastian H., hager-grafikdesign.de

If you, at anytime, release some kind of book about your tricks and know-how with Photoshop (that is mostly unrelated to the Photoshop version) I WOULD PAY ANY PRICE you tag this book!

3 points 6 months ago Reply
Marc E., Founder at Bjango

Thank you.

I did write a chapter in the Smashing Book 3 and would love to write a full book some day. I’ve covered quite a few things in articles on the Bjango site, too. To be honest, I’m not sure what else I can write about! I might have to start a thread here to see what people are interested in.

4 points 6 months ago Reply
Dirk v., Nerdy-two-shoes

How awesome would it be, btw, if Photoshop did offer styling the way CSS does? Change 1 style somewhere, and across all your files for that site, the style would be changed.

Oh, a boy can dream.

1 point 6 months ago Reply
Matt M., UI Designer

If I remember correctly, that's one of the big reasons that Vox used InDesign for the recent redesign for Polygon.

Though, this interview talks about how relying heavily on InDesign required InDesign experts.

Personally, as a Photoshop guy, InDesign takes some getting used to every time I pick it up.

2 points 6 months ago Reply
Marc E., Founder at Bjango Edited 6 months ago

It would be great. I think “propagate my changes” is a problem that hasn’t been solved adequately in any design tool. I really don’t like the solutions in any app, including InDesign (although InDesign does a far better job than most).

1 point 6 months ago Reply
Dirk v., Nerdy-two-shoes

Yehrp. I think you're spot on there; no tools has done it yet ...

... mainly because no tool has been big enough to challenge Photoshop for the throne/title/belt.

If only someone would build an app, ground-up, purely for web design... (here's looking at you, Sketch!)

Dots in this post were sponsored by [your name could be here].

0 points 6 months ago Reply
Justin E., Product Designer at Pinterest

There are Character Styles and Paragraph Styles. They're just really laggy and buggy (which may not be the case forever).

0 points 6 months ago Reply
Dirk v., Nerdy-two-shoes

Yip, and I've been using them for years and years :] but they don't work -> backwards, where you change a style and it changes everywhere.

0 points 6 months ago Reply
Dirk v., Nerdy-two-shoes

I use layer effects when that happens.

I'm on a PC so; CTRL+ALT+Right-mouse-click selects the layer of the element on the canvas that you click on.

CTRL+ALT+SHIFT+Right-mouse-click to select additional layers.

Then just paste the layer-style that I should've mentioned I copied earlier ;)

0 points 6 months ago Reply