Save Time Using Photoshop Smart Objects

Posted in Tips, Tools, Web Design3 years ago • Written by 18 Comments

Those who are familiar with CSS and PHP know how good it is to only change one line and see all changes propagate through the elements you’ve changed.

Well, today we’ll see how to do something similar to this with Photoshop, so when your client asks you to change your background from 90% black to 92.37% black you can do it in no time.

What are Smart Objects?

First of all, it is nice to know about the basics. Smart Objects are layers that store data as external sources, so you can make use of them in your document non destructively.

Think about them as one file linked with a layer, so if you make any changes to the layer (rotate, distort, apply filters and effects and many other things) your source file remains intact and you can always go back to the original version, but if you change your original source it will affect all layers that point to this “file”.

Another important feature is that you can have several smart objects pointing to the same source. So if you have, for example, a button that is repeated 10 times, you can make all those layers point to the same source, and when you change the source you’ll change all of them automatically (you can also make them not to propagate these changes by copying as new smart object, but we have to talk about this another time).

Finally, this is a nice feature also for the front-end developer since it makes much easier to keep transparency and a lot of other effects when you export objects to make better use of CSS techniques (and save time, of course).

Some use cases

We’ll use the cubicle free psd theme as our base theme so we will just edit it here in order to have a “smarter” approach. Also, all these techniques are much easier to do when you’re just starting your project, of course, so don’t worry too much if something just looks like it’ll need a work.

How to create smart objects, and our first smart button

First of all, let’s see how to create a smart object. You just have to select the elements you want to be part of the smart object source, right click them and select “Convert to Smart Object” as follows. After that a different icon will be shown, and you’ll know that it is definitely a Smart Object.

In this layout we have simple buttons, but if you want to change it in the future it will be much easier.

Now we need to copy this element to use it in other places. Just press CTRL+J and you’ll have another smart object from the same source as the original, so if you change one you’ll change all of them.

Now let’s edit this button. So double click in the item’s icon and you’ll open the smart object as a Photoshop file.

After editing your element you must to save it in same location (just CTRL + S and you’ll be fine). So after some editing you’ll have both smart objects updated.

Easier Color Palette

So let’s say you like to try out all possible combinations before defining the best one. It is pretty hard to try out a lot of color combinations when you do it in the traditional way (layer fill). Well, but if you do it via smart objects it’ll be really easy to try out more and more combinations.

Again, looking at our sample layout, we don’t have many colors but almost any element there is orange. So let’s pick up the non-textual element and use this technique. This will be the changed objects:

I’ve created a small smart object with an orange square and put this square where is the slideshow orange arrow, and the orange “latest from blog” box. So by this time we’ll just have a common square in top of the box and the slideshow arrow.

Now you need to use this smart object square as background for anything you do. When you change the color of this smart object, all the elements that share this color will be updated also.

For example, to get the arrow the easiest way that I thought is to make it as a mask for our color smart object, via add vector mask tool (bottom of layer panel).

So, despite the fact that our basic smart object is just a square, when we mask it, it’ll just look like an arrow.

To get the box you’ll need 3 elements:

  • Bigger Box -  just resize the smart object
  • “Angular” shadow – distort and resize your object
  • Pixel perfect light effect – resize the basic smart object and then apply color overlay effect with blend mode overlay, opacity 60% and color #fff.

This is our final smart objects:

If you make all these things if you want to change your basic color palette you’ll just have to change that first color smart object (just pick any of the duplicated elements).

Marker, icons and “Photoshop Spriting”

You could also do all your icon set, markers or even text styles via Smart Objects. You’ll add them all in the same source and then do what I call “Photoshop Spriting”. I call it this because it has the same logic as CSS Sprites. All elements will be in a part of the smart object but you’ll just hide others with layer masks, as we’ve done with the arrow.

So, let’s say you have three icons from the same set (SEO, Web Development and print design) you just have to merge them all as one smart object, and when you use one, you’ll have to hide others. For the first icon your mask will look like this (hidden content shown in red area):

The same way you can store all your main headings or basic dummy text and when you need to change anything in your typography or text colors you’ll just have to edit one “file”: your smart object!

What about trying out all these things?

So, have you ever done a layout this way? Do you wanna try it?

This is definitely just a starting point. Do you think it could be useful for you? Share your thoughts with us!

43 Written ArticlesWebsiteGoogle+

I'm a web designer and entrepreneur from Itajubá (MG), Brasil. I love writing about obscure topics and doing some cool stuff. And also I do some FREE stuff, check it out: http://www.roch.com.br/

18 Comments Best Comments First
  • Nemo

    Monday, August 8th, 2011 19:17

    10

    Remember when you where on Highschool, and everyone used projectors? Imagine you project the image on a whiteboard; the original image remains unchanged, but you can still fiddle around with the projection.

    Thats what happens here: the original object remains untouched, and you can do tweaks to its “projection”, meaning that if you make a mistake, want to come back to a previous state, etc. you dont have to worry about losing the original forever (god knows I have pressed shift + S too quick quite a few times before realizing I WANTED to come back later to make some tweaks).

    0
    • Rochester Oliveira

      Tuesday, August 9th, 2011 14:36

      11

      Hey Nemo,

      This is a nice example!

      []‘s

      0
  • Salman Saeed

    Sunday, August 7th, 2011 12:07

    1

    Nice tip :)

    0
    • Rochester Oliveira

      Monday, August 8th, 2011 18:19

      9

      Hey Salman Saeed,

      I’m glad you liked it! Hope it helps you :)

      []‘s

      0
  • Sean

    Sunday, August 7th, 2011 12:46

    2

    never knew how they work, but i was always searching for easy “multiple edit” function.
    now i’ve tried it and loved it!

    thank you very much for showing these simple things.

    0
    • Rochester Oliveira

      Monday, August 8th, 2011 18:14

      8

      Hi SAiNT,

      I think it is the best way do do it. Just the easier color changes worth the effort :)

      []‘s

      0
  • Tim

    Sunday, August 7th, 2011 20:41

    3

    Smart Objects are great, however, they have severe limitations. You really can’t use them for buttons unless all your buttons are going to be the exact same size. Photoshop does not yet support 9-slice scaling, which means it will distort the button if you stretch it out.
    Also, masking is very poor for smart objects because the mask cannot link to the object. If you move the object, the mask stays put, which means you have to move the mask separately to realign everything.
    Let’s hope Adobe fixes these major problems in the future.

    0
    • Rochester Oliveira

      Monday, August 8th, 2011 18:04

      7

      Hi Tim,

      I’m not sure if we’re talking about same elements.

      As I said before, you can resize you smart object without affect the source object, so you can do your buttons in all sizes. You’ll have more work if you want to do things exactly as it is in CSS (the 9-slice method) but you can I’ve done it with photoshop shapes (works pretty well).

      About masking, you can make it move with the object, with that “chain” icon, just click on it and you’ll disable / enable mask moving with the object.

      Thank you!
      []‘s

      0
      • Tim

        Wednesday, August 10th, 2011 01:28

        13

        Hi,
        I just tried CS5 and you’re right! I’m glad Adobe finally made that possible. At work I use CS3 and you cannot link a mask to a smart object. Very annoying.

        0
        • Rochester Oliveira

          Wednesday, August 10th, 2011 05:02

          14

          Hi Tim,

          One thing must to be said, fireworks is way better than Photoshop for this kind of work. I used to do everything on it when it was our oldie Macromedia Fireworks. Now seems like Adobe is trying to kill it making Photoshop much better and easier.

          But back to you comment, yes you will have to adjust your round corners outside the smart object. I think that must to be an easier way to do it, I just haven’t figured it out yet.

          But don’t you think that smart objects are really useful at least to have a better color palette control? I just love them! :)

          Thank you very much for your comments!
          []‘s

          0
      • Tim

        Tuesday, August 9th, 2011 15:54

        12

        Hi Rochester,
        We are talking about the same elements. Unless Adobe has changed the way smart objects work in CS5. If you create a button with rounded corners and then make a smart object out of it, you cannot simply scale the button horizontally, because it will distort the edges. In contrast, when working with 9-slice scaling in Fireworks (and Illustrator for that matter), buttons retain their original shape with corner in tact. If you are using a perfect rectangle for your buttons, then it may work ok.
        As far as the mask, in versions of PS previous to CS5 (I cannot comment on CS5), you cannot link a mask with a smart object, thus the mask behaves as a separate layer even though it is part of the same layer as the smart object.

        0
  • Rochester Oliveira

    Monday, August 8th, 2011 17:59

    5

    Hi Jarod,

    Which part exactly you didn’t understand?

    Thank you
    []‘s
    Rochester

    0
  • Gift Ideas

    Monday, October 3rd, 2011 13:59

    18

    That is very nice guide to know such smart tools.

    0
  • robert

    Friday, August 26th, 2011 18:53

    15

    Am i the only one who finds it hard to make the transition from fireworks to photoshop?

    0
    • Rochester Oliveira

      Monday, August 29th, 2011 00:22

      16

      Not too much..

      CS5 interface is way better than that crazy old ones (with only floating panels), if you’re starting I suggest you this one!

      []‘s

      0
  • Renato Alves

    Monday, August 8th, 2011 03:43

    4

    I really interesting tool we can use to save time and make things more easier for us. Thanks alot! :)

    -1
    • Rochester Oliveira

      Monday, August 8th, 2011 18:00

      6

      Hi Renato,

      I’m glad you liked it!

      Thanks
      []‘s

      0
  • Gift Ideas

    Monday, October 3rd, 2011 13:59

    18

    That is very nice guide to know such smart tools.

    0
  • robert

    Friday, August 26th, 2011 18:53

    15

    Am i the only one who finds it hard to make the transition from fireworks to photoshop?

    0
    • Rochester Oliveira

      Monday, August 29th, 2011 00:22

      16

      Not too much..

      CS5 interface is way better than that crazy old ones (with only floating panels), if you’re starting I suggest you this one!

      []‘s

      0
  • Nemo

    Monday, August 8th, 2011 19:17

    10

    Remember when you where on Highschool, and everyone used projectors? Imagine you project the image on a whiteboard; the original image remains unchanged, but you can still fiddle around with the projection.

    Thats what happens here: the original object remains untouched, and you can do tweaks to its “projection”, meaning that if you make a mistake, want to come back to a previous state, etc. you dont have to worry about losing the original forever (god knows I have pressed shift + S too quick quite a few times before realizing I WANTED to come back later to make some tweaks).

    0
    • Rochester Oliveira

      Tuesday, August 9th, 2011 14:36

      11

      Hey Nemo,

      This is a nice example!

      []‘s

      0
  • Rochester Oliveira

    Monday, August 8th, 2011 17:59

    5

    Hi Jarod,

    Which part exactly you didn’t understand?

    Thank you
    []‘s
    Rochester

    0
  • Renato Alves

    Monday, August 8th, 2011 03:43

    4

    I really interesting tool we can use to save time and make things more easier for us. Thanks alot! :)

    -1
    • Rochester Oliveira

      Monday, August 8th, 2011 18:00

      6

      Hi Renato,

      I’m glad you liked it!

      Thanks
      []‘s

      0
  • Tim

    Sunday, August 7th, 2011 20:41

    3

    Smart Objects are great, however, they have severe limitations. You really can’t use them for buttons unless all your buttons are going to be the exact same size. Photoshop does not yet support 9-slice scaling, which means it will distort the button if you stretch it out.
    Also, masking is very poor for smart objects because the mask cannot link to the object. If you move the object, the mask stays put, which means you have to move the mask separately to realign everything.
    Let’s hope Adobe fixes these major problems in the future.

    0
    • Rochester Oliveira

      Monday, August 8th, 2011 18:04

      7

      Hi Tim,

      I’m not sure if we’re talking about same elements.

      As I said before, you can resize you smart object without affect the source object, so you can do your buttons in all sizes. You’ll have more work if you want to do things exactly as it is in CSS (the 9-slice method) but you can I’ve done it with photoshop shapes (works pretty well).

      About masking, you can make it move with the object, with that “chain” icon, just click on it and you’ll disable / enable mask moving with the object.

      Thank you!
      []‘s

      0
      • Tim

        Tuesday, August 9th, 2011 15:54

        12

        Hi Rochester,
        We are talking about the same elements. Unless Adobe has changed the way smart objects work in CS5. If you create a button with rounded corners and then make a smart object out of it, you cannot simply scale the button horizontally, because it will distort the edges. In contrast, when working with 9-slice scaling in Fireworks (and Illustrator for that matter), buttons retain their original shape with corner in tact. If you are using a perfect rectangle for your buttons, then it may work ok.
        As far as the mask, in versions of PS previous to CS5 (I cannot comment on CS5), you cannot link a mask with a smart object, thus the mask behaves as a separate layer even though it is part of the same layer as the smart object.

        0
      • Tim

        Wednesday, August 10th, 2011 01:28

        13

        Hi,
        I just tried CS5 and you’re right! I’m glad Adobe finally made that possible. At work I use CS3 and you cannot link a mask to a smart object. Very annoying.

        0
        • Rochester Oliveira

          Wednesday, August 10th, 2011 05:02

          14

          Hi Tim,

          One thing must to be said, fireworks is way better than Photoshop for this kind of work. I used to do everything on it when it was our oldie Macromedia Fireworks. Now seems like Adobe is trying to kill it making Photoshop much better and easier.

          But back to you comment, yes you will have to adjust your round corners outside the smart object. I think that must to be an easier way to do it, I just haven’t figured it out yet.

          But don’t you think that smart objects are really useful at least to have a better color palette control? I just love them! :)

          Thank you very much for your comments!
          []‘s

          0
  • Sean

    Sunday, August 7th, 2011 12:46

    2

    never knew how they work, but i was always searching for easy “multiple edit” function.
    now i’ve tried it and loved it!

    thank you very much for showing these simple things.

    0
    • Rochester Oliveira

      Monday, August 8th, 2011 18:14

      8

      Hi SAiNT,

      I think it is the best way do do it. Just the easier color changes worth the effort :)

      []‘s

      0
  • Salman Saeed

    Sunday, August 7th, 2011 12:07

    1

    Nice tip :)

    0
    • Rochester Oliveira

      Monday, August 8th, 2011 18:19

      9

      Hey Salman Saeed,

      I’m glad you liked it! Hope it helps you :)

      []‘s

      0

Comments are closed.

54.197.188.35 - unknown - unknown - US