|
Home
Forums
Awards for You
Winners
Awards Won
About Us
Past Layouts
Past Updates
Site Rules
Site FAQ
Site Staff
Credits
Link to Us
Link Exchange
Linkage
Affiliation
Latest Contest
Previous Contest
Contest Winners
Mini Contests
General Rules
100x100 Icons
64x64 Icons
70x70 Icons
AIM Icons
Archived Icons
Signatures
Buttons
Banners
Wallpapers
Enter Signs
Hiatus Signs
LJ Headers
Friends Only Banners
Div Layer
Tables
iFrames
PopUp
Brushes
Extractions
Vectors
Icon Bases
Icon Creator
HTML Tutorials
CSS Turoials
Let's Make a Layout
Graphics Tutorials
Do's and Don'ts
Bassman Themes
|
|
Making Transparency in Photoshop
A common question is How do I make an image transparency in Photoshop, this has been posed to me a few times now, and the best way to explain it is to walk you through the steps.
There are many different ways to do this, but the best way is to start with a fresh image.
We're going to create this:
To start open up Photoshop, and copy and paste this image into it (Or save the image to your hard drive and then open it) THIS IMAGE HERE
If you've chosen to copy and paste it the quick keys are CTRL + N and then click OKay or Press Enter and then CTRL + V
Now we have our image, we'll need it but not right now, click The Minimize.
Now click File>New
We're going to use Pixels for our image measures, and a consistant 72 pixels/inch as Photoshop does do font adjustments if you change the pixels/inch and we don't want that.
Now for our purposes we're going to set the mode to "RGB Color" Odds are it's already there.
And the Contents should start on Transparent.
The image size we're doing is 450 x 100 though. Once all this is set, click OK
We now have this:
To begin we're going to select the pencil tool. The pencil tool is a SOLID line(Good for transparency), where as the paintbrush is a blurred line(bad for transparency). There is extra lighter colors outside the line of a paint brush provide a fade like look, where as a pencil is nothing but a solid line. Fade, does NOT work in transparency so we use the pencil to draw our lines, to this:
Where you see the thicker lines, on top, bottom and the side it's just because the border that surrounds your canvas, That border doesn't show up in saved mode... it's just to show you what's canvas and what's not.
Your blue lines we have created WILL show up.
Anything that has the little grey and white squares is transparent right now. What we're going to do next is drop a color inside the center part, which is where we're going to stick our image.
And it'll look like this:
Now we have a blue area, and the transparent area. Using the magic wand select the blue area, and then apply your image to that area alone, Best to use the clone tool. (Up to you though.)
Then add what effects you want, I used a little square for simplicity.
So now we have something like this:
Now the fun part. Click File>Save for Web
Okay, so this becomes the more, confusing part, the rest of this stuff was easy! It's just making an image how you want it. Keep in mind when doing this that you can NOT HAVE ANY FADE. Anything that isn't 100% solid and fully transparent will either not show up or will become gritty and pixelated.
So it has to be either 100% solid(Fades work if you have a solid background below it, because that's still 100% solid, just your picture is fading over a solid background) or it has to be 100% transparent. (Basically you can not fade over transparent areas)
Now there are many settings, but unless you want the image to get a gritty effect, I find these are the best ones.
You want the save type to be GIF, or PNG but PNG take long time to load and are larger file size, stick to Gif.
You want "Perceptual" for it to be clear, and Diffusion for it to fill in holes that would otherwise create a pixelled effect.
Select the "Transparency Check box"
The next is the Transparency Dither, play with it as you like.
The side is the settings for the image sharpness... play with them, find what you like. For this image I set the Lossy to 0, the Colors to 256, the Dither at 100% and the Matte off with the WEb Snap at 0%
If you want it to gradually load click Interlaced if not, leave it unchecked.
Then click "Save"
Name it, upload it and use it.
NOTE:: This works really well if you have no text over transparent areas. If you place text over transparent areas the text must be set to "None" for the "aa" can't be on Sharp, Crisp or any of the other settings, as it will NOT go transparent well. If the text is over a 100% solid area and not over anything you want transparent then go right ahead and set the aa to whatever you'd like. <3
| |
