Soushi | Tutorials

Hey there fellas!
Alright, I've had one or two comments from people regarding the Stylish Button Tutorial. People were wondering how they could save the button and actually use it, and using it usually means you'll want a transparent background so that you can fit it on any colour background you have.

In this tutorial, i will teach you how to crop an image, more specifically a button and then save it with a transparent background.

Please note this is a very basic tutorial for those who are unsure on how to do this, if you already know how to do this, then why are you here ;) ?!
Let's get started shall we :)

1. Alright, you want to crop and save your image don't you? So open up your PSD with the graphic you created. I'll be working with the stylish button i created in a previous tutorial.
   Note: Oh yeah before we go on, i'm not teaching you how to get rid of a background on an image which already has a background. That's something different. I'm teaching you how to save your image which you probably created in photoshop and want to use on the web.
2. Now, when i created my canvas to work on my button, i used a transparent background.
   
   I recommend selecting transparent as your background on every canvas you create, so that you don't have to mess around deleting layers and what not if you want a transparent background or a different coloured background.
3. Now if you have selected white as your background when you created your canvas, you should have a layer called Background which is locked.
   
4. If you do have this layer, then simply delete this layer. Note that you need to have other layers in your layers palette in order to be able to delete the Background layer, but as you should be working on your image which you want to get a transparent background on, i suppose you have other layers.
5. Now what? Well you should have a transparent background. Unless you created other layers on top of the Background layer and filled them. If so, delete them. If you don't know, a transparent background looks like this.
   
   You'll know your button/image is on a transparent background if you have something which looks like above.
6. Now, my canvas is 600x500, but i don't want that. So what i'm going to do is grab my rectangular marquee tool. Yes, grab your rectangular marquee tool ;)
7. What we're going to do is narrow down the canvas so that it is just a few pixels larger than our button. This is important if you don't want your image to be hard to manipulate on your website.
   Now on my button, i also have a reflection. I need to take it into account when cropping.
8. So zoom in to make the task easier, and draw a selection around your image just a little larger. Actually, if your image has sharp edges then you can cut the selection right down to the sides of the image, but as i have some soft edges because of the outer glow i decided to let the selection be a little wider.
   
   Notice how i included the reflection in the selection. By the way ignore the grey background, i just reactivated my background layer so that i could see the reflection more easily.
9. Now with your selection active and your transparent background, go to Image > Crop.
   My canvas is now roughly the size of the button.
   
10. Now this is the crucial part. Go to File >Save For Web & Devices... (Photoshop CS3, may be called slightly different in earlier versions).
11. You need to save your image as either a GIF or a PNG.
    
    If you have an image which has perfectly sharp edges without a drop shadow, or an outerglow and it is not extremely detailed you should save it as a GIF.
    
    
    However, as my button HAS got outerglow, and a reflection, the GIF will not work. Look what happens:
    
    The rest of the background is transparent, but the area where there is the outer glow and reflection have a white background automatically added.

    So, if your image has much detail, and/or has outer glows, reflections, soft edges, shadows etc, save as PNG!
    
    Save as PNG-24 for maximum quality. The filesize should not be too significant since Photoshop does try and optimise it for web use.

    Please note that Internet Explorer 6 has a malfunction where it will not display PNG images with transparent background.
    
    
    How do I resolve the problem?
    A. Upgrade to the latest Internet Explorer (which is 7 at the moment i believe, 8 being in BETA)
    B. Download a real browser, get
    Mozilla Firefox 3
    (you can easily import all your favourites/feed to Firefox from Internet Explorer).

     

12. You should now have a button with a perfectly transparent background! Here is the button i was working on in this tutorial, saved as a PNG.

    

    I hope this has helped out the people who were unsure on how to save images with a transparent background! It's really useful when saving for the web. Especially for forum signatures and buttons etc!