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.

Make sure the Color Mode is RGB and the Background is Transparent.

Click OK.

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!

–Wanda Nelson


~ by wandarox on September 18, 2011.

3 Responses to “How to Get Fun Text on Your Website Using Adobe Photoshop”

  1. This post was very explicit using both words and images. If I ever lost my place while doing this, I can quickly find out where I was. Also, you added how you got another likable aspect of your page (background image). It answers the question most users would be thinking, including myself.

    Jarad Kmietowicz

  2. I really like this post, although at first glance, I was put off by its length. However, the text turned out to be easy to read, and the large images are helpful for execution of the step-by-step procedure. Overall, I felt the length of the post was warrented. The aspects that made it helpful and well-composed were: 1) It began casually, and flowed conversationally throughout, meanwhile avoiding being overly promotional or cheesy. 2) It clearly and quickly defined its purpose and provided an example of a finished product, letting readers know exactly what they’d be getting out of reading the post. 3) The procedure was easy to follow, and contain the right level of detail — enough to forestall confusion, but not so much that it got unnecessarily technical. Nice job!

    – Cathy

  3. I really like this blogpost because she is extremely specific in each step. She tells you exactly what she is doing, and even tells you where the buttons you need are located. She also anticipates mistakes readers might make, and addresses them before hand. Her extensive use of pictures also helps newbies to follow along with what she is saying. Basically, if your page doesn’t match the images on her page, you’re doing it wrong. Very easy to understand. I also like the bits of personality she added to her post. She makes readers feel comfortable and trust her through the little bits of information she reveals about herself.

Comments are closed.

%d bloggers like this: