Export a layer from a PSD file (Photoshop CS6)
ProZack
Posted messages
165
Registration date
Status
Member
Last intervention
-
ProZack Posted messages 165 Registration date Status Member Last intervention -
ProZack Posted messages 165 Registration date Status Member Last intervention -
Hello,
I am redesigning my portfolio website with WordPress, and to do things methodically, I started this time by creating a mock-up in Photoshop at a 1920 / 1080 format. (the first version was my discovery of WordPress, I kind of went with my instinct...)
I have created a design that I really like, but now it looks good on my .psd document and I would like to export each part of my mock-up in order to re-import everything into WordPress, all in png or jpeg format as needed.
Is there a way to do this?
I thought I found something about it on Adobe's site about "generating images from layers": https://helpx.adobe.com/fr/photoshop/using/generate-assets-layers.html
It seemed to be exactly what I needed, but when I go to File I don't have the "generate" option and I wonder if it's because I am using Cs6 and not Adobe CC :/
So either it’s possible and I haven't understood the method (which might not be what I'm looking for anyway), or my Cs6 doesn't allow it and in that case, do you have an alternative solution?
Because right now I have to keep my mock-up as a reference but create a .psd file for each element, which is super long and the final design on WordPress lacks a bit of accuracy compared to the mock-up, which is quite frustrating :( Not to mention the time lost doing everything one by one...
If this "generate" option only exists in CC, I assume there may have been a method that was perhaps less practical but similar in earlier versions of Photoshop, otherwise the mock-up in Photoshop is not great ^^
Thank you in advance =)
Configuration: Windows / Chrome 84.0.4147.89
I am redesigning my portfolio website with WordPress, and to do things methodically, I started this time by creating a mock-up in Photoshop at a 1920 / 1080 format. (the first version was my discovery of WordPress, I kind of went with my instinct...)
I have created a design that I really like, but now it looks good on my .psd document and I would like to export each part of my mock-up in order to re-import everything into WordPress, all in png or jpeg format as needed.
Is there a way to do this?
I thought I found something about it on Adobe's site about "generating images from layers": https://helpx.adobe.com/fr/photoshop/using/generate-assets-layers.html
It seemed to be exactly what I needed, but when I go to File I don't have the "generate" option and I wonder if it's because I am using Cs6 and not Adobe CC :/
So either it’s possible and I haven't understood the method (which might not be what I'm looking for anyway), or my Cs6 doesn't allow it and in that case, do you have an alternative solution?
Because right now I have to keep my mock-up as a reference but create a .psd file for each element, which is super long and the final design on WordPress lacks a bit of accuracy compared to the mock-up, which is quite frustrating :( Not to mention the time lost doing everything one by one...
If this "generate" option only exists in CC, I assume there may have been a method that was perhaps less practical but similar in earlier versions of Photoshop, otherwise the mock-up in Photoshop is not great ^^
Thank you in advance =)
Configuration: Windows / Chrome 84.0.4147.89
2 answers
-
Hello,
The idea of creating a mockup beforehand is very good,
so if I understood correctly, you would like to export your psd document layer by layer in png/jpeg format?
For that, you just need to hide all the layers of the document except the one you want to export using the eye icon on the left in your layers palette.
After that, it can be time-consuming to do it one by one, so I believe there is an option in Photoshop that automatically exports layers, especially for creating animations, to check... -
Hi and thanks for the response :)
Yes, that's basically it. If I create a mockup of one of my pages on a 1920 / 1080 document to properly layout the screen size, I would like to export the elements one by one from this document. This way, I just have to import them into my WordPress and place everything like on the mockup.
For example: let's say I have a cut-out photo of myself where I'm playing with transparency effects, etc. Well, once my mockup is finished (text, image, title, etc.), I would like to be able to just retrieve the photo as it is on my mockup to get the same rendering and size on my WordPress page. (I also use Elementor by the way :o)
The technique of keeping only one layer visible (for the same example, the layer of my photo) is already somewhat what I use.
The issue is that after hiding all the other layers I don't want (especially the texts), I'm left with my photo on the gray/white checkerboard background (normal) but my photo is then in an image that is 1920 / 1080, the size of my complete document, and that's not practical, so.
I have a photo of myself that gets lost in a large empty area ^^ Good for a background but not for an "isolated image."
To get around this problem, before exporting, I use the cropping tool to keep only the element I need (like my photo), and after having "save as" in png (or jpeg), I have to do ctrl+Z to get back to the normal document size.
This method works, it's just that I find it quite impractical, and I like to know a software as well as possible in order to be more efficient ^^ And I assume that depending on ctrl+Z to do something is not the correct method. Ctrl+Z is rather for correcting a mistake, you know :o By the way, if I make a wrong manipulation while saving my document and quit before ctrl+Z, I would be quite annoyed :/
If you manipulate Illustrator a bit when you want to export an element in jpeg/png, etc., and if you only display the element you want to export (like a circle), then Illustrator does the job well :)
You get an image file that has the edges of the shape as its limits, and that's cool. I would like to do the same with Photoshop, but it's not as straightforward, at least not in CS6, and Photoshop and Illustrator don't have the same functions, so the comparison isn't really valid.
Yesterday while tinkering, I found another solution to my issue, but again, it’s a bit makeshift.
I’ll explain my system if it can help someone else someday.
So there I have my photo with some text slightly in front, all with transparency.
I merge everything I need (text + image) / convert it to a smart object / right-click on the smart object and "edit content." This opens a new .psd document where I only have this element with transparency, and I can then do file/save as, etc.
This is the closest to my goal, but it's still too many steps in my opinion.
I may need to change my working method and create a mockup file that I will duplicate to obtain a file exclusively dedicated to export where I can merge all the layer groups I need, but keep the original mockup in case of future improvements.
So, if anyone has a more intelligent method than my system of creating duplicate files everywhere, I’m always open to suggestions. Also to confirm whether my limitations come from CS6 and that in CC, this kind of option may already exist. But if that’s the case, CC won’t be for a while ^^ even though with all the tutorials, it does seem pretty cool compared to CS.
Thank you very much =)
