Ask DN: Using Smart Objects when designing on Photoshop, best practices?

over 6 years ago from , Product Designer

Hey guys,

Just wanted to know, what are the best ways to use Smart Objects, in web design. For example, when to use repeatable Smart Objects and what methods or techniques you use? I'd love to know the process you guys go through when designing complex designs that have a couple of pages? Any feedback will be appreciated! Thanks.


  • Aaron S, over 6 years ago

    I find working with Smart Objects useful, when using images. So I like to convert all my images into Smart Objects, that way, I can resize and apply effects, without it ruining my original image.

    Aside from that, I find it hard to use Smart Objects with buttons. Say for example I have a couple of buttons, but some have different text. I guess the button itself would be a smart object. But say for example the button is wider. You'd have to resize the smart object and end up with pixelated corners.. Anyone know of a solution to this problem, or have found better ways to use Smart Objects?

    0 points
    • Chris MastersChris Masters, over 6 years ago

      I try to use smart objects as much as possible & overall find them exceptionally useful, but I think that Aaron highlights an area of working with them that can be frustrating.

      Knowing when to 'break off' an object into a smart object can be difficult. In that example the background of the button and the text should be separate, so that the button text can be changed easily — but in the event of a wider button size being needed then obviously simply cloning the Smart Object doesn't make sense.

      In those circumstances I tend to either revert back to shapes or use the copy smart object option, rather than duplicating. As this creates an entirely new smart object which you can then safely increase the width of without affecting all the proceeding objects.

      I think that ultimately working out when & how to structure a document takes a lot of practice and comes from personal preference too, but for me, the combination of smart objects & layer comps when used efficiently can be very powerful for UI design.

      I'd also agree that immediately making a bitmap image a smart object and then scaling can be a great way of avoiding an 'oh god I wish I had kept an original sized version of that image' moment.

      1 point
    • Jonathan ShariatJonathan Shariat, over 6 years ago

      More and more, like your example, I realize that I am just trying to recreate CSS and so why not dive into designing from wireframes to CSS? But I haven't made the jump yet.

      0 points