Working With Text in SiteGrinder

As anyone with experience in web design knows, it is not as easy as it should be to add a block of text to a web page and have it look visually appealing. Many design programs do not support the special formatting options that a word processor uses, such as bold, italics, or breaks between paragraphs. So, even though you might have a well written, visually appealing article to add to your site, it turns out looking crowded, jammed-together, and hard to read once you place it on your web page. SiteGrinder addresses these problems and makes working with text easy.

Use the -text Hint

Most of the hints in the SiteGrinder arsenal are used to denote some kind of interactivity. The -text hint is an exception to that rule. When you use this hint, you are telling SG that you want your block of print to react like real text on a web page, and not like an image of the text. In other words, the text that ends up on your website will be modifiable, searchable, and selectable if you designate its layer with the -text hint.

The text you import to your Photoshop document can be center, left or right justified. It can include bullet points or numbering. It can involve a variety of fonts and special characters. And it will all look just the way you want it when you build your website.

Text as Graphic

If, for some reason, you do not want a certain piece of text to be searchable or modifiable, you can tell SiteGrinder to treat it as a graphic, or an image of the words. A logo that involves the name of a company is a good example of text that is often treated as a graphic. In that case, you simply set the anti-aliasing for that layer to “on.” Then, SG will know that the logo text is not meant to appear as real, searchable text. Setting the anti- aliasing for any text layer to “none” serves the same purpose as using the -text hint. This makes it easy to tell at a glance which of your layers will appear as true text and which will not.

Scrolling Text

Websites often contain more text that just that which will fit in a box set aside for that purpose. That’s when text scrolling comes into play. Once again, SiteGrinder makes it easy for you to add a scroll bar to your text box and allow your reader to move up and down your article at will. All you need to do to insert a scroll bar is to add the -scroll hint to the label for any block of text that is larger than the rectangle it is in. You can even add -text and -scroll to the same label, which saves you time. Thus, the Photoshop layer containing your About Us article might be labeled Aboutus-text-scroll.

Step-by-Step for Adding Text

If you are a new SiteGrinder user, here is a simple step-by-step guide for inserting a block of writing into your page.

  • Start with a Photoshop project and select the horizontal type tool.
  • Decide where you want your block of text to appear, and click and hold your mouse in the upper left corner of that space.
  • Drag the mouse down and to the right until you have created a rectangle of the size and shape that you want.
  • Paste or type your text into the layer.
  • Use the handles on the text box to move your block to the exact location where it will appear.
  • Give the layer a name and put the -text hint after it.
  • If the words do not all fit into the box, add the -scroll hint as well.
  • Click the Build button to see your scrollable text displayed just as you want it.

Helpful Hints

Because web users will visit your site using all kinds of different browsers and computers, you will have fewer problems with your text looking right in all situations if you follow a few guidelines.

  • Use a common web font like Courier, Verdana, Times New Roman, or Comic Sans for your text. If you want to use a more off-the-wall font for a small piece of text or a headline, you’ll have better luck maintaining its look for all users if you make the text into an image as described above.
  • If you need to resize your text box, be sure that you are in the text-editing mode first. Do not use Photoshop’s “Move” command to change the appearance of a text box. If you do, you will end up resizing the text itself, as well as the box.
  • Rather than hitting your Return key to make a space between paragraphs, use Photoshop’s “Space Before” and “Space After” commands. This will ensure consistent appearance across all browsers.

If you are like many website owners, the text or content on your site is the most important element of your online presence. It is the text that will inform, educate, and persuade your visitors. For that reason, using SiteGrinder to create easy to read and appealing blocks of text is an important skill to have, and is well worth learning. I’m glad to say, however, that using the SiteGrinder -text and -scroll hints makes the process simple.