How to export A layer from Adobe Photoshop To a PNG file for Creating PSD to HTML

1. How to export A layer from
Adobe Photoshop
To a PNG file for
Creating PSD to HTML

2. Part 1: Export as Smart Object into
“.psb” format

3. As an example, we are going to learn
how to convert some layers of
web-template-1.psd to .png file

4. 1. In the Layer Panel, in the [home/social icons]
folder, right click the layer named “Twitter”.
2. In the right click Menu, select “Convert to
Smart Object”. It will convert the layer to
Smart object (a format supported by Adobe
Photoshop that you cannot edit).

5. 1. You will notice the icon beside the layer
“Twitter” has changed into . Now right click
again and choose “Export Contents…”

6. 1. A window pops out,
asking to save the
layer as a Smart
object File (.psb).
2. Click “Save”.

7. 1. Open the “Twitter.psb” file.
2. Go to File Menu: File->Save for Web…

8. 1. You can enter your desired
width/height in the W:/H: box (circled).
2. Click “Save”.

9. 1. Save the .png file.
2. You should have something
like this-
3. You can also export
“Facebook” following the
same way described here.

10. 1. If you want to edit the layer ever again, you
cannot keep it as a Smart Object, because
they cannot be edited.
2. So, every time you make an Export, after
finishing, go back to the web-template-1.psd
file, and go to Edit Menu: Edit->Step
Backward. It will restore the layer to original
format.

11. Part 2: Export as Smart Object into
“.ai” format

12. 1. In the Layer Panel, in the [contact/social icons]
folder, right click the layer named “fb”. Notice
it is already a Smart Object.
2. Now right click and choose “Export
Contents…”

13. 1. But this time a window pops out and asks you
to save the Smart Object file as .ai (circled)
2. Save it.
3. Open it in Illustrator.

14. 1. This is a bit tricky. The smart object isn’t a
Photoshop document, it’s an Illustrator document
(see snapshot). So as you can see we have to
resize it, and make the background transparent.

15. 1. Resizing: Go to Object Menu:
Object->Artboards->Fit to Artwork Bounds
This will resize the Artboard down to artwork’s size.

16. 1. This is the result.

17. 1. Just like Photoshop, go to File Menu:
File->Save for Web…

18. 1. Transparent Background: In the Preset
Section, turn the “Transparency”
checkbox ON. (circled). Voila!
Like before width/height can be set in
the Image Size Section.

19. 1. Save the .png file.
2. You should have something
like this-
3. You can also export
“behance” following the
same way described here.

20. Final Talk:
Q. When .psb, when .ai?
Ans. If the Layer is created in Photoshop, .psb
if the Layer had been imported from Illustrator
before (as a Smart Object), .ai
For example, in this tut, “fb”/”behance” layers were
actually created in Illustrator, then imported to web-template-1.psd.

21. behance.net/rakibasif