O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
How to export A layer from
Adobe Photoshop
To a PNG file for
Creating PSD to HTML
Part 1: Export as Smart Object into
“.psb” format
As an example, we are going to learn
how to convert some layers of
web-template-1.psd to .png file
1. In the Layer Panel, in the [home/social icons]
folder, right click the layer named “Twitter”.
2. In the right click Men...
1. You will notice the icon beside the layer
“Twitter” has changed into . Now right click
again and choose “Export Content...
1. A window pops out,
asking to save the
layer as a Smart
object File (.psb).
2. Click “Save”.
1. Open the “Twitter.psb” file.
2. Go to File Menu: File->Save for Web…
1. You can enter your desired
width/height in the W:/H: box (circled).
2. Click “Save”.
1. Save the .png file.
2. You should have something
like this-
3. You can also export
“Facebook” following the
same way de...
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, e...
Part 2: Export as Smart Object into
“.ai” format
1. In the Layer Panel, in the [contact/social icons]
folder, right click the layer named “fb”. Notice
it is already a Smar...
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 I...
1. This is a bit tricky. The smart object isn’t a
Photoshop document, it’s an Illustrator document
(see snapshot). So as y...
1. Resizing: Go to Object Menu:
Object->Artboards->Fit to Artwork Bounds
This will resize the Artboard down to artwork’s s...
1. This is the result.
1. Just like Photoshop, go to File Menu:
File->Save for Web…
1. Transparent Background: In the Preset
Section, turn the “Transparency”
checkbox ON. (circled). Voila!
Like before width...
1. Save the .png file.
2. You should have something
like this-
3. You can also export
“behance” following the
same way des...
Final Talk:
Q. When .psb, when .ai?
Ans. If the Layer is created in Photoshop, .psb
if the Layer had been imported from Il...
behance.net/rakibasif
Próximos SlideShares
Carregando em…5
×

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

5.614 visualizações

Publicada em

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

Publicada em: Design
  • Seja o primeiro a comentar

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

  1. 1. How to export A layer from Adobe Photoshop To a PNG file for Creating PSD to HTML
  2. 2. Part 1: Export as Smart Object into “.psb” format
  3. 3. As an example, we are going to learn how to convert some layers of web-template-1.psd to .png file
  4. 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. 5. 1. You will notice the icon beside the layer “Twitter” has changed into . Now right click again and choose “Export Contents…”
  6. 6. 1. A window pops out, asking to save the layer as a Smart object File (.psb). 2. Click “Save”.
  7. 7. 1. Open the “Twitter.psb” file. 2. Go to File Menu: File->Save for Web…
  8. 8. 1. You can enter your desired width/height in the W:/H: box (circled). 2. Click “Save”.
  9. 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. 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. 11. Part 2: Export as Smart Object into “.ai” format
  12. 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. 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. 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. 15. 1. Resizing: Go to Object Menu: Object->Artboards->Fit to Artwork Bounds This will resize the Artboard down to artwork’s size.
  16. 16. 1. This is the result.
  17. 17. 1. Just like Photoshop, go to File Menu: File->Save for Web…
  18. 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. 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. 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. 21. behance.net/rakibasif

×