Isolated image transfer to desktop

  You are currently not logged in. You can view the forums, but cannot post messages. Log In | Register

14-Jun-06 20:50
In Photoshop CS2 V9 after I have erased the background of an image using the eraser tool and selected the area I wish to save I cannot save the isolated image without a frame around it and a white interior. I need to save the image isolated eg. a balloon in the air and then place JUST THE BALLOON in my website without a border . I am using Windows XP. Any help would really help me. Thank you
Lindsay
14-Jun-06 21:09
Hi Lindsay,

I think I get you. What you want is the area that's now white to be transparent when you export it? The first step is to get that area transparent in Photoshop.

Depending on how your file is set up, you may be able to just turn off the background layer. If you can then see little grey squares in that previously white area then that's now transparent. If though you've been working on the background layer or indeed in a layer with locked transparency, then you'll need to re-do the erasing. Essentially you need to get that image on a separate layer (not "Background") to do the erasing.

When you have got to that stage, you can export as maybe a transparent gif or a png 24 file to preserve full transparency (a fiddle is needed to get that working in IE6 though). If your site has a solid colour background you can just add that into a layer beneath your cutout image and export as a jpeg.

This is actually really hard to explain, but we do have a tutorial that will maybe help at:
http://www.elated.com/tutorials/graphics/photoshop/selecting/

What would be great is if we could see the file - can you upload it somewhere and let us have a link? Without it, there are a *lot* of potential parameters to consider and talk about!

Simon
ELATED : )



--
ELATED : )
http://www.PageKits.com
Professional Website Templates
15-Jun-06 07:30
Thanx Simon. I will try what you said and let you know. I have a site ( seems to be always under construction mind you.............. but I do live in Cape Town hahah!)that Im building and if you look at the DRESS BELT page you can see that I would like the black belt either to be half in the frame and the other piece hanging out ( maybe Ill try that when Im clevererer! ) basically just have that belt hovering somewhere over the other two. Try www.rosstudio.com
15-Jun-06 08:41
Hi Lindsay,

We did an old tip in our newsletter that relates to this actually. I'll paste it below for you.

You can subscribe to our newsletter which is full of great exclusive stuff like this at: http://www.elated.com/newsletter/

Simon


----------------------------

Breaking a photo out of its frame.


It's hard to describe this one, so I'll show you what I mean. Have a look here:

www.elated.com/grabs/photo_over_frame/leaf_cutout_400.jpg

The Photoshop file is here:

www.elated.com/grabs/photo_over_frame/leaf_cutout_400.psd

As you can see, this technique allows you to take an element of a photo and seemingly break it out over the edge of the frame. This is a slick look that can really bring photos to life and add impact to a page.

So how's it done? Well the first thing to bear in mind is that we're working from a single photo. The top "leaf" element is simply part of the original photo, not an add-on.

The basic workflow is to isolate the element you want to "break out", then put that on a new layer. When you've done that, you can slip a frame in underneath, but above the original photo.


Step One: Cut out your top element.

There are many ways to select elements in Photoshop. In my example I simply used the Magic Wand tool to select the areas outside the leaf, then inverted the selection. For more on selections, try our tutorial at: http://www.elated.com/tutorials/graphics/photoshop/selecting/

I selected the whole leaf rather than just the small area outside the frame, since I wasn't sure exactly where the frame would come - it gave me more flexibility.

When you have your selection, copy and paste it into a new layer above.


Step 2: Add your frame.

Create a frame by filling a new layer between our original photo and our cutout with white. Using the marquee tool, draw out the area you want the photo to show through. Press backspace to clear that area. You should now have a hole with the photo showing through and the cutout resting over the top.


Step 3: Add a drop-shadow.

To really bring your cutout out of the scene, add a drop shadow. I found that the best way to achieve this was to copy the area of the cutout that overhangs the frame and paste that into a new layer, below the original cutout. You can then apply the drop shadow to that using Blending Modes.

The reason for this, rather than using the full area of the cutout for the drop shadow is that I wanted it showing only outside the photo, so that existing shadows within the photo where untouched. Also, if you don't have the full coverage of the top layer the drop shadow shows as it hits the photo. Turn off the top layer "leaf" in my example and you'll see what I mean!

I found that when I saw my cutout against the white of the frame I hadn't made a great job of the selection process, and needed to get rid of a little edge of darker pixels. To do this, I highlighted the "leaf" layer and used Layer>Matting>Defringe. Using the blending modes for the drop shadow meant that as I did this the shadow was updated in real time.


Some photos will lend themselves to this technique more than others, and you will need to make sure the compositions are going to work for whatever project you're applying the technique to. The final result, though, is a nice, dynamic twist on a basic photo, and the the hardest bit is really the initial cutting out!




--
ELATED : )
http://www.PageKits.com
Professional Website Templates
15-Jun-06 11:51
Simon,
Where do I send the image file of a belt I have to?
15-Jun-06 17:21
Hi Lindsay, just upload it to a web server and send us the link, eg www.lidsayssite.com/thefile.psd

Simon

--
ELATED : )
http://www.PageKits.com
Professional Website Templates
16-Jun-06 08:52
Hi Simon,
Excuse my ignorance but I dont have a clue as to uploading to a webserver. I can save as a jpeg and send it if thats ok?
16-Jun-06 10:06
Hi Lindsay, well, for feedback on a photoshop issue it really has to be the PSD file, and I'd rather it was up on a server so that others can see it and get the benefit too, sorry.

Just upload it to rosstudio.com using whatever software you usually use, and put it alongside the HTML files.

Simon

--
ELATED : )
http://www.PageKits.com
Professional Website Templates
19-Jun-06 10:19
Hi Simon,
I seem to have got a bit of success as far as this goes ( thanx to you guys) but just want to know about copying a part of an image you mentioned. I dont see how to do this unless I reselect that area??
Step 3: Add a drop-shadow.

"To really bring your cutout out of the scene, add a drop shadow. I found that the best way to achieve this was to copy the area of the cutout that overhangs the frame and paste that into a new layer, below the original cutout. You can then apply the drop shadow to that using Blending Modes." ( Your writings)
19-Jun-06 10:30
Hi Lindsay,

Yes, that's right, just re-select that area. Once it's cut out, you can hold down control and click on its layer in the layers palette.

Simon

--
ELATED : )
http://www.PageKits.com
Professional Website Templates
02-Jul-06 20:47
"you can export as maybe a transparent gif or a png 24 file to preserve full transparency (a fiddle is needed to get that working in IE6 though)"
Hi
Any idea what the fiddel is as I can only save png8 files - png24 come out with the dreaded white border!
Help?
Thank you
Lindsay

 
New posts
Old posts

Follow Elated