You are looking at archived content. The hot new stuff is happening at Veerle's blog 3.0. You should check it out!

Oct 16

Photoshop Smart Objects, smart but not always that smart

2007 at 08.43 am posted by Veerle Pieters

One of my favorite Photoshop features is the Smart Object one. It has saved me a lot of time because you can avoid repetitive tasks. It’s perfect when you design template web pages with temporary content placeholders etc. But that’s just one advantage…

How I use Smart Objects

What I usually do is save the layers of a group of elements into a Smart Object and then duplicate that Smart Object as many times as I need to. Perfect example is the image below which is from a project I worked on called MoveDigital. This web page design shows 5 of these small boxes containing a title, text, image and play button. I create a Smart Object : I select the layers, hold down 2nd mousebutton and select 'Convert to Smart Object'. Then I duplicate the Smart Object layer 4 times and move each of them to its right location.

How I use Smart Objects

If I need to change something I'll just edit the Smart Object by double clicking the Smart Object Layer icon. I save it, close it and all Smart Objects are updated. I use Smart Objects for buttons that appear more than once on a page for instance "Learn more" or "Read more". If you need to change the button's color or its effect, you only have to do this once.

How I use Smart Objects

Smart Objects means flexibility

I try to work with Smart Objects as much as I can because it gives me this flexibility. I tend to copy and paste objects from Illustrator a lot. I always paste icons or illustrations as Smart Objects. This way you keep the flexibility of a vector-based object. You can resize the object without the fear of quality loss. You can apply changes via Illustrator. You save it, close it and it's updated in Photoshop.

Flexibility, but not only for vector-based objects

Another good idea of how to use Smart Objects is when you have a bitmap element that you would like to use in your layout. Only, you're not sure how big you would like to place it in your layout. You need some room to play with it. You could start with big dimensions, make it a Smart Object and then scale it down to the preferred size. If you decide later on to enlarge this shape a bit, you still can without any quality loss even though the shape is pixel-based. Its original size is the size you saved in the Smart Object. So as long as you don't resize it bigger than that you are safe.

Smart but not always *that* smart

Smart Objects are perfect... or maybe not for 100%. At least that's my experience. There are a few pitfalls and I would even consider them bugs. Though, I would call the one I recently encountered a usability flaw.

These were my steps :
  • I double click the Smart Object to edit its content
  • I edit the content of the Smart Object, save it, but don't close it
  • I click back to the main Photoshop file (to copy some text)
  • while I go back to the main Photoshop file, I noticed that I accidentally moved an item
  • I want to undo my error, but it appears to have happened already before I double clicked the Smart Object
  • I go to the History palette to undo my mistake and so I go back before the 'Update Smart Objects'
Here is what happened:

My thinking here was "OK I can still do this. My Smart Object is still open with its new state so if I save this state, it'll re-update in the main document". Well guess what: WRONG! After saving and closing the Smart Object, nothing got updated and I was back to square one. I had to redo all my work. Now I wonder, what the hell was Photoshop saving when I saved my Smart Object? To me this is bad usability. Even if I go back in the History palette before my last Smart Object update, I find it illogical that when I save the Smart Object in its current state, things don't get updated. I didn't close the Smart Object and after all I did was saving it in the end.

One more thing...

In a next article we'll talk about a sibbling of the Smart Objects namely Smart Filters. You know, normally filters are a destructive way to manipulate images since they change the actual pixels in an image. Smart Filters lets you recall, modify and delete filters without touching the orignal image.

Want to learn more?

VECTORTUTS+ Vector Tutorials and More A good and not expensive source to learn more about Illustrator, Photoshop, or web design is by joining the Tuts+ sites. You get access to the source files for just $9 a month. So your ONE membership gives you access to members-only content for ALL the Plus sites. I've written a tutorial for the Vector Tuts section.


36served

gravatar

1

permalink this comment Ben Tue Oct 16, 2007 at 09.11 am

I never thought of using Smart Objects in this way - you may have saved me a lot of time!! Thanks Veerle :) Another great article.


gravatar

2

permalink this comment Midgard Tue Oct 16, 2007 at 09.56 am

Thx for the article! :) It’s great!


gravatar

3

permalink this comment fatihturan Tue Oct 16, 2007 at 10.25 am

Hi Veerle!

It’s really clever solution in Photoshop . ^^


gravatar

4

permalink this comment Oli Tue Oct 16, 2007 at 10.26 am

I usually use Smart Objects in that way and I just love it! Also Great if you import an .ai (logo for ex.) and update it later in that .ai file. Thee PSD updates the smart object and everything fine.. Thank you Adobe. ^^


gravatar

5

permalink this comment Tim Tue Oct 16, 2007 at 10.36 am

Good lord, thanks a lot for this tutorial. This will save me lots of levels in the folder tree (I bounced into the limit…)!

Thanks V.


gravatar

6

permalink this comment Carsten Tue Oct 16, 2007 at 11.17 am

Hi, I also use the Smart Objects like this. But I encounter another Bug or a bad usability issue:

I often use masks with layers. Naturally, I wanted to use a mask on a Smart Object. If you don’t want to move or scale the smart object everything is okay, but as soon as you move (or scale) it, the mask doesn’t scale/move with it. It just acts like an unconnected mask and stays where it was.


gravatar

7

permalink this comment Harmen Janssen Tue Oct 16, 2007 at 12.02 pm

Thanks for a great article!
I was never sure what Smart Objects were, now I do and I think they’ll be really helpful in the future.
Looking forward to the next article, Smart Filters are another thing I know nothing about ;)


gravatar

8

permalink this comment Marcelo Wolfgang Tue Oct 16, 2007 at 01.08 pm

One feature I miss is a way to dumb a smart object

Something like the rasterize smart object but it would create all the layers from the smart object but will not keep the smart object status.

There’s also one option that I use that is the create new smart object by copy, so you will have a second smart object just like the first one, but you can edit it and would not impact the first one

I use it mainly for buttons where all the button art is in a smart object with a text layer on top, and others art that I want only for this specific button, but If I edit the base of the button (the smart object inside the smart object) it will be replaced in all buttons.


gravatar

9

permalink this comment Jason Beaird Tue Oct 16, 2007 at 02.19 pm

I saw the title of this post in my feed reader and thought, “What!? Veerle is hating on Smart Objects?” Thankfully that wasn’t the case.  For all the time I’ve spent dealing with tiny annoyances that have come up while using Smart Objects and Filters, they’ve saved so much more time overall that I can’t really complain.  Looking forward to the post on Smart Filters!


gravatar

10

permalink this comment Adam Meisel Tue Oct 16, 2007 at 03.01 pm

Smart objects are a lifesaver - my most usually use of them being when I add a large image to a document, instead of duplicating it and scaling the dupe, I just create a smart object so that I can scale it up ‘n down willy-nilly like.

One problem I’ve encountered with smart objects is that sometimes they don’t retain the sharpness of the original, things tend to get fuzzy.


gravatar

11

permalink this comment Alex Tue Oct 16, 2007 at 05.21 pm

But Masks on that layers are stupid. They`re not linked with layer.


gravatar

12

permalink this comment Dever Tue Oct 16, 2007 at 07.27 pm

Never looked at Smart Objects this way it’s just like an instance of an object in Flash or a factory class in php, thanks for the info.


gravatar

13

permalink this comment tom Tue Oct 16, 2007 at 07.40 pm

What bugs me about smart objects is when you double-click them to edit, do your editing, save, and return, often. Depending on if the S.O. was scaled (and sometimes regardless) the S.O. will have a low-res look to it afterward. This results in my having to re-open the S.O., drag everything out into the main document, and then recreating a separate S.O. Just not worth it if you ask me. Of course, this is in CS2 and I don’t work often enough in CS3 to see if this has been fixed.


gravatar

14

permalink this comment Dominik Lenk Tue Oct 16, 2007 at 07.41 pm

This is brilliant. I have been using Potatoshop CS3 for a while now, but never looked into Smart Objects. They just seemed like another add-on-feature that nobody really needed.


gravatar

15

permalink this comment John Lascurettes Tue Oct 16, 2007 at 07.57 pm

I’ve noticed the same interface flaw with saving smart objects. I’ve just gotten in the habit of closing the window (cmd+w) and waiting for the “Save?” prompt to say okay. This way, I know the edit is always passed on and I’m not in that, “what state am I in?” mode.


gravatar

16

permalink this comment Conrad Tue Oct 16, 2007 at 10.07 pm

As some here already stated, smartblocks, oh yeah, those, there must be cool things to do with it… Thanks for pointing this one out Veerle.

Cheers, Conrad


gravatar

17

permalink this comment Aaron Weinstein Tue Oct 16, 2007 at 10.07 pm

This tutorial makes me realize how little I really know about Photoshop, even though I use it almost every day. The depth of functionality in the Adobe Suite is pretty staggering. I wonder what other tricks and tools I’m missing out on. Thank you Veerle for the useful lesson.


gravatar

18

permalink this comment gareth Price Wed Oct 17, 2007 at 02.33 am

Have to agree with Adam, you really need to watch the quality of the rasterising with smart objects - esp vector artwork at small pixel sizes can get pretty rough.

I use the smart object in the design iteration phases but rasterise carefully for the final artwork - blow up the object by 100%, rasterise and then transform back down to 25% - the correct size (remembering to paint some extra lines outside the object so PS doesn’t carve the edges off badly).. this sounds fairly anal (it is) but the results can be a lot better.

I’m really waiting for Adobe to sort out the overly sharp edges/missing pixels that Photoshop creates when scaling down small rounded shapes.


gravatar

19

permalink this comment Ronald Poi Wed Oct 17, 2007 at 06.54 am

Never know of this way to use Smart Objects… i just used them with copy/paste from Illustrator… I’ll try these tips =)


gravatar

20

permalink this comment Martijn Wed Oct 17, 2007 at 08.40 am

And one other thing, if you have your layers set to multiply this no longer work when you put them together in a smart object. The appearance stays but flattened. Al least in CS2 (no funds for 3 :()


gravatar

21

permalink this comment Blue Buffalo Wed Oct 17, 2007 at 04.45 pm

Excellent article - this can really come in handy and save a ton of time!


gravatar

22

permalink this comment snowdog Wed Oct 17, 2007 at 09.16 pm

Wow, that way of using smart objects for placeholders in layout is so simple… Why I didn’t think about it before… thanks.


gravatar

23

permalink this comment Jean-Baptiste Wed Oct 17, 2007 at 10.40 pm

@Carsten & Alex : I noticed this bug too, and I really don’t understand why we can’t link masks to smart objects… The solution I found is to put the smart object in a group, and then apply the mask to the group. That way, the mask will be linked with the group. Cumbersome, but hey smart objects are too useful to be picky :p


gravatar

24

permalink this comment Pjtr Wed Oct 17, 2007 at 11.22 pm

I love smart objects. But some things about them really annoy me. Two have already been mentioned:
- The fact that you can’t lock a mask to a smart object, like Alex said.
- The issue with the blending modes, like Martijn said.

My third complaint is that when you double click a smart object and then change the canvas size of it’s content, the resulting smart object gets squeezed or stretched. It keeps it’s original size totally ignoring the fact that you changed the canvas size of it’s content.

Disclaimer: I’m still on CS2


gravatar

25

permalink this comment Richard Thu Oct 18, 2007 at 10.53 am

Is there any way to edit the smart object content in place, without opening a separate window? Sometimes I need to see surrounding area to see if a change is ok to be done.


gravatar

26

permalink this comment june Thu Oct 18, 2007 at 02.43 pm

Thanks for the tutorial! Is it possible to use the same smart object across multiple files? For instance mocking up a webpage often involves creating images of several of the pages to be found within the site. If I had a “play” button that was going to appear on numerous pages…could I open one of the mock ups, edit the “play” button smart object and have that change occur in all of the mock ups? In my experimenting I can only get the smart objects to change within a file, not across files. Any suggestions would be great. thanks!


gravatar

27

permalink this comment revy Thu Oct 18, 2007 at 03.11 pm

very neat. i’ve never really used smart objects, other than imports from illustrator sometimes…

i’ll have to give them a go!


gravatar

28

permalink this comment Jean-Baptiste Thu Oct 18, 2007 at 07.15 pm

June said:

Is it possible to use the same smart object across multiple files? For instance mocking up a webpage often involves creating images of several of the pages to be found within the site. If I had a “play” button that was going to appear on numerous pages…

You can make your play button an independent file, and “place” it into your different mockups. The button will appear as a smart object in the layer palette, linked to the original file. If you update the button file, the mockups will ask you if you want to update the link and if you answer yes, they will be updated. Pretty neat. But I dunno if double clicking on the smart object will open the original file or if it will open a “local” copy of it. Gotta try that…


gravatar

29

permalink this comment Tom Fri Oct 19, 2007 at 09.19 am

As seemingly everyone else has said, Smart Objects are very cool, but there’s a few annoyances (some already mentioned).

In particular, if you make a smart object of a few layers, and duplicate the resulting smart object layer, they become an instance of that smart object.

If you edit one of those object the changes go across all smart objects.

This may be a feature, but it can prove annoying. For example, the boxes used in your own example above, you may want to make these boxes different to each other and there’s no way to solve that with Smart Objects.

Don’t get me wrong though, smart objects make my day easier :)


gravatar

30

permalink this comment zooloo Fri Oct 19, 2007 at 01.27 pm

I really need to learn smartobjects… why does it always feel like everyoneelse knows everything? :)


gravatar

31

permalink this comment Gavin Sat Oct 20, 2007 at 02.19 pm

Thanks for the lesson.  I’ve never used smart objects before and this is a real timesaver for photo contact sheets.


gravatar

32

permalink this comment Lee Sat Oct 20, 2007 at 05.52 pm

Great tip, thanks


gravatar

33

permalink this comment Veerle Sun Oct 21, 2007 at 07.04 pm

Thank you all for commenting here. Some of you were mentioning things that don’t work well with Smart Objects, such as Masks or Layer modes. It would be cool to have both working perfectly. I use the same technique to link the mask as Jean-Baptiste, but it’s of course not ideal.

Martijn said:

And one other thing, if you have your layers set to multiply this no longer work when you put them together in a smart object. The appearance stays but flattened. Al least in CS2 (no funds for 3 :()

Pjtr said:

My third complaint is that when you double click a smart object and then change the canvas size of it’s content, the resulting smart object gets squeezed or stretched. It keeps it’s original size totally ignoring the fact that you changed the canvas size of it’s content.

That I believe is solved in CS3 :)

Richard said:

Is there any way to edit the smart object content in place, without opening a separate window?

Unless someone contradicts me on this, I don’t believe there is.

Jean-Baptiste said:

You can make your play button an independent file, and “place” it into your different mockups. The button will appear as a smart object in the layer palette, linked to the original file. If you update the button file, the mockups will ask you if you want to update the link and if you answer yes, they will be updated. Pretty neat. But I dunno if double clicking on the smart object will open the original file or if it will open a “local” copy of it. Gotta try that…

I recently discovered this myself.  I didn’t know this. This could be pretty handy. Thank you for this valuable comment :)


Tom said:

As seemingly everyone else has said, Smart Objects are very cool, but there’s a few annoyances (some already mentioned).

In particular, if you make a smart object of a few layers, and duplicate the resulting smart object layer, they become an instance of that smart object.

If you edit one of those object the changes go across all smart objects.

This may be a feature, but it can prove annoying. For example, the boxes used in your own example above, you may want to make these boxes different to each other and there’s no way to solve that with Smart Objects.

True, but if you just group the layers of the things that are the same and leave the layers that you like to differentiate out you can still do this. That’s how I sometimes do it. For example a page design for a blog that shows 10 entries, I leave title out and the image out and they look like random entries. If the client decides to add something in the footer of the these entries well I edit only 1 footer, not 10 ;) I also use the “New Smart Object via Copy” a lot to create a 2nd, different Smart Object from the original Smart Object (holding down 2nd mouse button on the Smart Object Layer). This is also pretty handy.


gravatar

34

permalink this comment Fred Campbell Tue Nov 6, 2007 at 10.46 am

Thanks, I wondered what they were ... guess you’ve just saved me a few days a year.


gravatar

35

permalink this comment James Sun Nov 11, 2007 at 02.35 am

Wow, and I thought Smart Objects were just there to kill machines with less than 3.5gb RAM.  (Just kidding - kinda)

Showed me a trick or two - thanks!


gravatar

36

permalink this comment Joefrey Mahusay Sun Nov 11, 2007 at 02.39 am

Great article thanks for sharing..:)



Commenting is not available in this weblog entry.

Flickrness

buy something from my Amazon wishlist