In this tutorial you will learn how to use Smart Objects to save out individual images from a layout that you have created. If you are designing and developing websites and/or interfaces this is perhaps the most powerful tool that Photoshop has to offer.
Photoshop Help defines a Smart Object as a layer that contains image data from raster images Photoshop. What does this mean exactly? Essentially it mean that you can create mini-Photoshop files related to assets in your full Photoshop files and these mini-Photoshop files can be modified and saved out as images individually and not dependant on their parent Photoshop file. Follow along with this tutorial and you will better understand what Smart Objects are and why they are so useful.
Steps to follow:
- Open Photoshop and create some image assets all on different layers. Group some together in a folder if you like. In my example I have a header used for this website, its composed on a ’subscribe’ image, a ‘twitter’ image, and my logo which is made up of several assets put into a folder.
- Convert layer into Smart Object: Move your mouse over the chosen layer and right-click when you are over top of the layer name. Click on the option that says “Convert to Smart Object”.
- Now you the layer should have an Smart Object icon on it and should look like the image below. Double-click on that icon.
- You have now opened the Smart Object. Notice that it is named the same as the layer name you gave it except it uses the .psb extension. This is basically like a mini photoshop file. From here you can modify the image and save it out as an image (jpeg, png, etc). You can resize, crop, and do pretty much anything to this small file. When you close the Smart Object Photoshop will ask if you want to save any changes and they will be retained for future use.
You can also convert a folder into a Smart Object and it will retain the structure of the folder when you open the Smart Object.
I hope by now you are realizing how powerful this tool is for creating interfaces where you are constantly saving out various components of the full layout. It basically allows you to create many mini-Photoshop files within one parent Photoshop file.
I hope you have found this tutorial useful and would love to hear your feedback : )
Wow, thanks for posting this! I’ve been using Photoshop for about 8 years and still didn’t know about this technique. This will make my workflow much more efficient. Very useful indeed!
wow excellent tutorial, easy to follow. Just 4 steps
This is a nice guide,…I haven’t used Smart Objects much and when I have it appears I was taking some unnecessary steps. Thanks for this tutorial!
you guys are amazing artist..I just use one of the trick and got apprecited by client.thank you very much for sharing your knowledge.smith
Thank you very much. Just searched what such to put in place of the button.
Seoshneg´s last blog ..???????? ???????? ????, ???????? ????? ? ??????? ?? ???????
In this tutorial you will learn how to use Smart Objects to save out individual images from a layout that you have created. If you are designing and developing websites and/or interfaces this is perhaps the most powerful tool that Photoshop has to offer.
Photoshop Help defines a Smart Object as a layer that contains [...]