Why Photoshop still matters for UI design

In Sketch, you can easily make smooth round corners instead of radial ones. Or you can easily set a background blur on some surface:

Illustration by Konstantin Dubrovsky

It’s natural to use and love Sketch. The progress should go on, routine tasks should be done instantly. But a designer who is seriously saying that Photoshop is now irrelevant, is second-class.

These features are in Sketch, because some designers had invented them with Photoshop some day.

 83   2018   Photoshop

Save as Untitled-1.psd? Oops, no

It is 2015, and computers still suck. Here, Photoshop suggests saving a file as Untitled-1.psd:

Save as Untitled-1.psd?

I press Enter and get slammed in the face:

Oops, no

Hey, wasn’t that you who suggested the name? How about figuring out in advance that the name was occupied and suggesting, I don’t even know, Untitled-2.psd?

 64   2015   Photoshop   user interface

Rename layer in Photoshop CS6

In previous versions of Photoshop I’ve always set up F2 to open Layer Options dialog. The layer name field was focused by default, so that’s how I renamed layers.

For mysterious reasons in CS6 Adobe has removed Layer Options from the list of things for which you could use a keyboard shortcuts. I was upset. I had to use mouse to rename layer (which takes ages). And why on Earth out of all things would they remove this from the infinite list of configurable shortcuts?

I was almost going to file a bug report, but found a new Rename Layer... item in the Layer menu. Of course it is listed in configurable menu shortcut list, so now I have F2 as a shortcut for it:

I found out that Layer Options were removed from the keyboard setup because the very dialog was removed from Photoshop altogether. That makes sense now that you rename layer with a dedicated command and select its color from a popup menu.

So if you had the same problem, now you don’t. And if you haven’t bothered to set up a shortcut to rename a layer, it’s about time to do it: it will save you tons of time.

 363   2012   Photoshop

UI Shadows in Photoshop

The use of Photoshop’s standard Drop Shadow effect is immediately visible. It usually produces unrealistic and dull shadows:

A button with a Drop Shadow effect

Here’s how the shadow is constructed: the object’s mask is put beneath it, blurred and shifted. Here are the parameters of the above shadow:

Photoshop Drop Shadow parameters

However to make a shadow look better, you don’t always have to draw it “by hand”. The “Quality” group of parameters will help.

Number one is contour. You can change it by bending this graph:

Shadow contour in Photoshop

The graph defines the fade of the shadow. For some reason it’s reversed: the point farthest to the object is on the left, the closest one is on the right. In most cases dragging the midpoint down is the right thing to do: you want the shadow to be lighter halfway from the object.

Photoshop includes some crazy contours that make no sense at all. This adds to the relative unpopularity of the feature (see the first two rows):

Shadow contours in Photoshop

The last four contours are mine. Don’t hesitate to save your good ones there so that you can pick them faster. Like this one:

Shadow contour in Photoshop

The real shadow does not fade linearly because there are many light sources. Bend the curve until it looks fine.

Number two is noise. Just add noise at 2 to 3 percent:

Photoshop shadow noise

Here’s the above button with adjusted contour and added noise (other parameters intact):

A button with a better Drop Shadow effect

No doubt hand-made shadows are better (if made by a good graphic designer). But the production cost is also higher, sometimes too high. Here everything remains scalable and you can transform the button, clone it etc.

A possible shortcoming of this approach is that you can’t make this button with pure CSS. In some cases manufacturability is more important than beauty. And of course all this is about UI shadows (as in buttons, toolbars and such). When you want a real shadow of a real object, Drop Shadow is of no use.

 128   2012   design   Photoshop   user interface