How to Get Fun Text on Your Website Using Adobe Photoshop
So you’ve decided that the default fonts on your computer just aren’t cutting it. You want something fun and crazy, like this:
It IS possible to go and download the font, put it into your html code, and have it work. However, the problem with this is that not everyone’s computer out there on the internet can recognize this font, so they’ll get the phrase in whatever font their computer can translate. All your hard work for nothing.
Unfortunately, getting super awesome font requires a little more work. However, the long way gives you way more freedom so that you can get your header to look however you want.
First, you’ll need to find a font you want. This is really easy, and there are plenty of websites online that give you free fonts. Make sure you’re allowed to use them on your website. You don’t want to be stepping on any copyright issues.
This would be a good website to visit. They have a huge selection. Just don’t go crazy and spend two hours downloading fonts like I do every time I go on that site.
Once you’ve downloaded the fonts, open up Adobe Photoshop. Then open File>New . . .
You can play with the size of your image, but it’s gotta be small enough so the page doesn’t take forever to load, and it has to be about the shape you expect it to be in the header.
You’ll get your working space and you can simply use the text tool to draw a box. Make sure you have two layers, not just the text layer, as Photoshop will not let you edit anything if you’re on the text layer.
You can find the font you downloaded in the text box above. If it’s not showing up, it’s not in your FontBook (on Macs). Open up FontBook (plug “FontBook” into Mac’s Spotlight if you can’t find it) and make sure you installed it there if you can’t find it.
As for the new layer, make sure it’s BELOW the text layer, and make sure it’s transparent. The little checkered pattern means it’s transparent. It doesn’t have to be transparent, but if you want the background color on your webpage to show through, it should be transparent. If you don’t want the background color showing through on your website, then you don’t need the background to be transparent.
After this, go ahead and make the text whatever color you want. Make sure you’re on your TEXT LAYER when you select your color.
Let’s assume I want a gradient beneath it. Go to the Gradient button, which will be the sixth button down on the right. If it looks like a Paint Bucket, click on it and hold until the menu shows up beside it, and select gradient.
When you click on Gradient, at the top left corner, there will be a little bar that shows you the color and kind of gradient you have. If you only want one color (resulting in the rest transparent) make sure that the little bar shows the color fading into the checkers.
Once you have the gradient, click and drag in the direction you want it to go.
After that, all you’ve got to do is save the document into the folder where you put your html files. You can save it as either a .jpg or a .png, but make sure it’s NOT .psd, as that is not compatible with the internet. If it’s transparent, a .png file would be better.
Then go to Adobe Dreamweaver and use the code you’d normally use for an image.
<a href= “Wanda’s Webpage 2.png”><img src=”Wanda’s Webpage 2.png” border=”0″ width=”1000″ height=”200″></a>
Which results in this:
FYI, the background image was also done in Photoshop with a simple gradient. Classy!