Layer Styles and Effects
Text can be a wonderful thing, it's even better if you're adding the effects needed to make it visible but elegant or bold. Maybe it needs to be shattering. The font you want might not always provide the right results for what you need. Perhaps it blends too much with the background, or it's just not pull accross the soft look of the graphic or layout.
When making graphics text can be your best friend or your worst enemy. Nothing destroys it more than gritty, blurry text.
So what we'll go over here are ways to sharpen our text, make it bold and yet soft. Make it ledgible and yet invisible.
Like with most graphics, this is all about taste.
To start things off, we're going to need an image. I went into MiD's signature collection and brought out this one. The goal is to add our username and have it suit the image.
It's best to open this image in a psd, so copy and paste it into adobe.
When it comes to fonts, no two computers have all the same ones. Unless of course they're running the EXACT same programs, with the EXACT same operating system (same year too) and they've never had another font loaded on.
Most people load fonts on by going to sites like Fonts.Com they'll help give users new fonts.
Most font sites by the way are FULL of popups so don't click those links until you have your popup blocker on.
So using our image we will first pick a font, for me I've picked: LainieDaySH
This is a scriptive font that I'm fond of. Other good script fonts include Scriptina and French Script
Then you'll need a font color. The color of the image we're using is pink, white and a bit of purple. so we want to stick to one of these colors.
The text already on it was done with a red-pink, so we want to contrast that with something light.
In my case I chose white.
But oh look, white doesn't show up. It's so blended into the background.
This is where layer styles come into effect.
Click Layer, then highlight Layer Style
When it comes to text, it's automatically in it's own layer. Only with an image would we have to make sure we've made our layer.
So just pick any one of them right now. In my base I picked Drop Shadow, to show drop shadow first of course.
I've had to crop some of the popup off... namely the entire right side of things. But that's pretty generic. The only thing you need to double check there is that Preview is checked. We want to be able to preview our image as we change it's effects.
Shadow is one of those things where it can be overused, or barely used at all. We want to find the happy medium.
(If you can't see your image at the same time as adjusting this, then move things around till you can.)
Drop shadows doesn't always have to be used, in this case we want to seperate our text from our background, so a drop shadow is beneficial to do that.
So Let's say we use it.
The settings can be easy or difficult depending on how you want to play with it.
The Blend Mode being the first one will tell the "Styler" how to blend the colors, Multiply is part of the darken tree. So it is used with dark colors in order to darken the area behind the text. A shadow implies dark, so it's automatically on multiply.
You can let's say set it to Screen. Screen is part of the lighter tree, which means it'll work with light colors to lighten the are around and behind the text. Not often used with a drop shadow, but if your text is dark, and you want a light shadow behind it, you can do that.
You can also scroll through the settings and see which each provide to you. Linear will bring things up, most others do nothing. Normal however will just use the color no matter what it is and blend it like you droped a color back there.
For me, I went with Multiply
The box beside the blend mode is a color. That color is what color you want your shadow to be. So you click the box and you'll get your color picker up. Choose the color you want.
I went with a mostly red color, to match the text below it. The hex was: #A4252E
Next is the Opacity. Now this is to make your shadow darker or lighter. Obviously you want it visible. The sharper it is the more it makes your text stand out. It's rare I don't use 100% opacity, the default however is 75% most people don't want a solid shadow.
In our case we need it to push the white text from the page, so we're setting it up to 100%
Didn't look like it changed much?
It's because it's too far away from the text and too big. We want to make it smaller and we want to push it up closer to the text.
So the next step is to skip over angle and go to Distance. We're going to change the distance to 1px. We want the shadow huging the text, we don't want it to have 5px away before it starts. So now it's a little more evident that it's there.
Next is spread, but typically leave that at 0% it's not much use, but of course you can experiment with it. Just slide it up and down to see what it does.
Then size, we want it smaller, with this big one it looks more like a glow than a shadow, so we're going to shrink it's size down to 1px. So it's one pix to the side and only 1px big.
Now we have this dark shadow pulling our text out of the page.
You can play with the other settings to see what you get, but generally simple settings like this will get you the desired effect on a drop shadow.
If your text is dark it's typically better to drop a light shadow, or try using a different section... (We'll get to them.)
If we went with just Shadow our image now looks like this: (Of course with your name... and colors)
Now I'm going to show you each effect individually and then combine a couple to show what a combination could potentially look like, but I'll tell you right now. Some of these effects.. I NEVER use.
The next one for example is Inner Shadow. I positively, absolutely HATE inner shadows. They destroy text and look like a preschooler did it. But most people learn by example. So I'll show you an innershadow...
So then clear our layer style. (Go to your layer control, right click the layer and then click "Clear Layer Style" ) and then click Layer and highlight layer style then click Inner Shadow.
The first thing you're going to notice is the text becomes dark grey almost.
The text in my case is a thin font meaning there isn't that much room for the inner shadow. I suppose if you were going to recolor your text in a bizarre way you could do it this way.
In our case we want to try and make it look good.
We don't want black we want a red-pink so we're going to leave it on multiply because we're still using a dark color, and then we're going to change the color to our red-pink.
Same Hex as before #A4252E
Now we notice the text isn't that readable. So we'll first slide our opacity up to 100% Now it's ledgible and it looks like there is a fade across the bottom.
Now we could leave it like this, but it's not really a shadow.
So let's say we really want a shadow. Because we're using a thin font we need to change our distance to 1 and our size to 0. If the font was thicker we could use a different distance and size.
However, inner shadow rarely makes things more visible on it's own. If you were going for the cut out look, you got it with inner shadow.
This is our end result:
But on with the next. In our layer control, clear the layer style (Right click the layer and click clear layer style) then click Layers, highly Layerstyle and pick outer glow.
Now I do use outglow often, it can provide a very soft outline for text, give things a nice heavenly feel or if used wrong it can make things blurry to all hell.
Not saying the way we're going to use it is the only way, just keep in mind a glow is like a soft blur, too much and it'll destroy your image. Too little and it won't be noticed.
So let's play with the settings.
First we are using a light text, so we don't want a light glow or we won't see anything. Let's change the Blend Mode over to darken. We could use multiply but we're not there to recreate, just to darken.
On our image we see nothing, so we need to change the color and the opacity. (Who wanted that yellow anyway?) First the opacity as it's before the color. Let's just go up to 100% for fun right now. If we don't like that we can change it after.
Let's keep things simple and use our Hex #A4252E for the color.
Right now there is this blur of color behind our text. We don't really want tht as we discussed it's not a very ... pretty look.
In our case, for this image we want the glow around everything perfectly and we want it small.
The font below is small, so let's stick with the small theme. (While the image as it is does look alright, saving might deteriate the image)
So let's set the technique to "Precise" Now we have this HUGE glow all around our text, we don't need it that big. So let's bring the size down to 1 or 2 pixels. (I chose 1px for the soft look.)
And to me at this point our text fit the image. And so I went with it. Clicked ok. And this is what I got.
Next on the list is inner glow. This like inner shadow has really no use, well little to no use. It'd good if your text seems to be fading into the outer effects and you need to brighten it. A innerglow can sometimes do that.
But in this case we're saying we just want to use an innerglow... so I'll use one... but I'll tell you now... it won't look like we did anything.
The fact we've such thin text will make it so all we've done is color in the text.
After you've cleared your current layerstyle, click Layer, highlight Layerstyle and click Innerglow.
When you first open it up it will look like it did nothing. It's just the fact of the effect. Unless there is an out effect or you have a darker font, it did nothing.
So let's change some settings. Change the blend mode to darken... as we want to make the white show up.
We're going to need our opacity up at 100% and the color changed... keep to our hex for simiplicity. (#A4252E)
Now using precise in this won't do much it'll pretty much look the same no matter what you do. As it is right now.
So you can try playing with the settings but in reality, it's best just to click okay.
Now there is Bevel, color overlay and Satin. With text.. there isn't much point in any of these, so I skipped over them.
And yes I realize bevel works with text. You want to play with it go ahead, but I absolutely positively HATE bevel. So I skipped it. I hate it more than anything in the world as it doesn't do anything good it just makes it look like you played with building blocks.
So then on to Gradient overlay. This can be usefull if you want to do a fade.
This is one where I'm going to ask you to check your pallette colors, change them to two colors you wouldn't mind showing up on the image. Don't use white as white is what we're trying to avoid being dominant
So clear the layerstyle, and select Layer, Layer Style, Gradient Overlay.
This one is... different. Handy to use with other styles such as drop shadow, outer glow and stroke, but other than that it's not... as useful as it could be.
So we need the text to show up. Seeing as we preset out other colors, we're going to leave the blend mode (It's fine at normal but feel free to look through at the others...)
The opacity is where we want it, as we don't want white showing through. We just want this gradient.
The Gradient however is not on the one we want, so we'll click the little down arrow and from there find the gradient we want (I use the preset colors) and then click it. (Its the first box incase yours don't show up right either stupid photoshop ;_;)
then leave the style, play with the reverse to see which way you want it.
When you have it, click okay.
Mine turned out like this!
We're skipping pattern overlay. It's tacky really - kind of like bevel it just makes it look like you can play with shapes and building blocks together. If you want it, play with it.
Stroke then!
This is a section I myself never used till Aaron used it once. I stayed away from it then I saw him use it and so I thought hey that's neat.
First of all tho we need to open it up. clear your layer style, then Layer > Layer Style > Stroke
Now the default settings are most assuredly NOT what we want.
Let's start changing them.
Starting with the size, we only want a 1px stroke, we're all about keeping things small (Big strokes are good if we're trying to blank out the area around our text or image on purpose. There have been times where I've used 10px strokes)
Alright now that red just doesn't go. The position is fine, we want it on the outside, and the blend mode at the moment does it's trick. We can play with that later if we think there is a better one.
The opacity is where we want it it's just the red. So let's change it. Sticking to our wonderful red-pink hex of #A4252E
we can make the change. (we're leaving the mode at color though Gradient can do some neat things feel free to play with it later)
And then we'll click okay.
Stroke is great, but without accents and other blends we don't always get what we want.
If I was to do this image... without the individuals in a combination this is what the result would be:
There is the above mentioned stroke, glow and drop shadow on there as well as the Fill opacity is set to 0%. And the glow color is actually : B44A4A instead of our usual A4252E
But perhaps this isn't to your tastes. Now you know how each can effect a layer, go back, and make it your own!
| 
