Blog·Tutorials·Photoshop· PNG-24
This is a guide on how to use PNG-24. This is a great way to get transparent backgrounds for your "h3" etc. I'll put up 2 alternatives of use. Here we go..
Alternative 1 (transparent background)1 Make a new document with a random choice of size.
2 Make a new layer and fill it with the color you want the transparency to be. Set the opacity to about 40-60% or any other number you feel for.
3 Here comes the saving part. Press Ctrl(cmd) + alt + shift + s or go to file > save for web and devices. A new window appears(cropped image below) :
4 Make sure your settings are exactly the same as the highlighted fields on the image. Otherwise the transparency won't work.
5 Click "save" and upload the image on to the web and paste the image-url as you're used to in your css or other code.
+ I used this metode on a premade layout. Check it out here (example).
Alternative 2 (description below)
If you want a thumbnail to be permanent and rounded cornered without having to change the background of the thumbnails every single time you change the css background colors in the box, use PNG-24 instead of silly .gif images. Here's how to. (you can also use this metode on any image)
1 Start by making the thumbnail/layout etc. Here's how I start :
2 Mark the background layer or whatever you call the first layer, erase everyting in it! You might aswell just delete the whole layer. Now the white(?) background you had is gone and replaced with "the squares" (hard to see in the example).
3 Do the same as the alternative above. Press Ctrl(cmd) + alt + shift + s or go to file > save for web and devices. A new window appears(cropped image below) :
4 Click "save" and upload the image on to the web and paste the image-url as you've always used to do. The rest is up to you!
= Here's my final image (you might drag the picture around to see that the image actually is trasparent, might depend on your web-browser):
+ I really hope this tutorial helped you ! If you did get any problems or did you see any errors or miss spellied words - Please click the "contact me" link below in the footer to inform me. Thanks
