SiteGrinder

How do I make text with a scroll-bar?


Sometimes a design calls for text to be displayed within a constrained area that isn't large enough to fit all of the text. The solution to this is to provide a scroll bar. SiteGrinder makes this embarrassingly easy: adding the "-scroll" hint to the end of a type layer's name will cause it to be scrollable on any of the pages it appears on. (You will need to ensure that the layer creates text on the final page by turning off its anti-aliasing or also adding the "-text" hint.)

Here is a start-to-finish example:

1. Select the horizontal type tool from the Photoshop tool palette

2. Click and hold down the mouse button in the document where you want the top left of the text area to be.

3. While continuing to hold down the mouse button, drag down and to the right to create a rectangle that can easily fit all of your text.

(It is important that you create the text by clicking AND dragging out the rectangle. If you only clicked and let go then you created what is called "point text" as opposed to "paragraph text" and SiteGrinder won't be able to tell what size rectangle you want the text to appear in.)

NOTE: for details about the differences between Photoshop's "Point" and "Paragraph" text, click here.

4. Type or paste text into the layer.

5. While still editing the text, drag the handles of the rectangle until it's the size and location where you want it to appear on the final page. Make sure you are in text editing mode when you do this so that you only resize the rectangle and not the text itself. (The quickest way to enter text editing mode is to double click on the thumbnail of the text layer in the layers palette.) This will crop some of the text off the bottom, but that's what the scroll bar is for, right?

6. Name the layer something like "sbar example"

7. Set the text to anti-alias "None" or add the "-text" hint to the end of the laye name to tell SiteGrinder you want this layer to be text and not a graphic of text.

8. Now add the word "-scroll" to the end of the layer's name and build. (If you added "-text" in the prvious step, just add "-scroll" after "-text" since you can add multiple hints to a layer. In this case the final name will be something like "sbar example-text-scroll")

That's it!