View Full Version : Please, I am desperate: PSD / CSS - how do I "extract" one image from the PSD file?

Jan 31st, 2010, 10:23 PM
Hi guys!

I am really new to this and I always learn my stuff through trial and error but this time I am really hopelessly lost. I know some Dreamweaver and Photoshop basics but obviously by far not enough..

I am trying to bring my personal homepage online and got a template for that thinking "how hard can it be?". oh man was I wrong.

Instead of many PSD files top edit the package contains ONE big PSD file that basically shows the website in photoshop. But HOW can actually edit some of the graphics? For example what if I want to change the logo - I can do it in this huge PSD file but how do I get the small logo.png file needed for the website?

I know I gotta sound like the biggest idiot, but I really hope someone here can help me!! I really appreciate any comment!!


Jan 31st, 2010, 10:29 PM
You can make that logo layer a slice (don’t know the exact menu item, though, but something like “Object > make slice from object” or whtever – Photoshop help will give you more info) and then “save for web and devices”, and choose that one slice only.

Alternatively you can copy the logo layer into a new file and conveniently export it from there.

Jan 31st, 2010, 10:58 PM
After having done this a number of times, I have found that the easiest way is as follows:

1. Make a rectangular selection around the object you need. Make sure to take any blending modes into mind (drop shadow, glow, etc.) so you can leave breathing room for them.

2. Go to Image > Crop

3. If you are using a transparent image that you want to layer over a background and have it show through or around, make sure to hide all background layers

4. Go to File > Save for Web and Devices and select png-24 for transparent and jpeg for non-transparent images. Save it.

5. Get info on your saved file to determine the width and height for css placement.