0

I am making website mockups in Photoshop where I repeat a lot of components such as form buttons. I'd like to create a library of UI components such as a button with the default text "BUTTON" where the label of the button can be replaced/modified to suit the button's action.

I've tried to create a button smart object with default text, but once I place the linked objects each time I change the text all buttons get the same label.

My goals are to use smart objects to quickly change the look and feel of all buttons (example changing my green buttons to blue) on my art board while retaining the ability to have each of the 3 buttons in my mockup have a different label.

Is this flexibility possible? If not what's a good solution?

1

I used Photoshop for a long time to make website mockups, but seriously missed that functionality.

I then discovered that Sketch offers exactly the functionality that you mention: smart objects which are editable. Let's say you design a standard form field shape with a text label and save that as a symbol in Sketch. You can then manually set the text for every instance of the text label. This also seems to work for image backgrounds.

Here is a screenshot of how this works in Sketch:

Sketch uses so-called Overrides on symbols:

So, even though this is not a direct tip on how to do this in Photoshop, if you're asking for a good solution to achieve this flexibility, then I would say: try Sketch.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.