Creating Website Text Without Issues

For my website, I really wanted my text to be different and stand out on the page. I decided that the “web-safe” fonts that Dreamweaver offered were boring. However, I didn’t want to risk letting a web browser mess with my design if it couldn’t pull up that font. I came up with a solution using Photoshop that would give me the ability to have exciting text on the page. I just made them an image first!

First, go to File-New and create a new document. Now, I made mine an unusual size because I wanted my text to have long lines on either side, sort of as dividers. I built these right into the Photoshop document, so it made mine extra-long. Yours just has to be the approximate proportions of the text you want on your page. More on that in a bit.

See a sample of my image-as-text:

So choose a size that works for you. The important thing in this step is that you choose the background as transparent. See screen shot:

Once you have that, you will get a checkered board to work with in Photoshop. Now, you need to add the text you want. Click the text tool and drag over the area you want on the board. You’ll get a new layer and a box to type. You’ll also be able to pick the font type, size, color, etc. See screen shot:

Once you have it perfect, I also crop it to fit a little closer, so I don’t have extra space wasted once I put it on my website.

Next, we are going to File- Save for Web And Devices. The important part is that we save it as a PNG, which will keep the original transparent background we had in the beginning.

I also find it helpful to reduce the file size in the bottom right hand corner.

Now you can open Dreamweaver and just go to Insert- Media and pop the image right in where you want it! You can also adjust the size right in Dreamweaver, inline with the code, jut in case you realize it’s not the size you want.

That’s it! Now you have great text that a web browser can’t mis-read.


~ by avanim on April 8, 2010.

%d bloggers like this: