Working with Text
PhotoWebber has text features that expand on the limited text available in Photoshop. You can enter text directly in PhotoWebber or convert Photoshop text layers to real text. You can also edit text and change size, color, and font. Finally, you can add hyperlinks to text.
Note: PhotoWebber includes basic text editing functionality. If you have more complex text items or existing content, you can also include these in PhotoWebber using Placeholders (see Working with HTML for more information).
Extracting Text from Photoshop Text Layers
Adding Text
You enter, format, and edit text and add hyperlinks to text using the Text Editor.
|
To add text:
|
 |
To open the Text Editor again, double-click on any text layer in the Document window.
Notes:
PhotoWebber text does not automatically word wrap. To insert line breaks using the HTML <br> tag, press the Return (Mac) or Enter (Windows) key.
When you paste text into the Text editor, only the plain text is added. Formatting created in other programs will be lost. If you have already created formatted text in another HTML editor, use a Placeholder instead.
Editing Text
You can edit any text block and modify the appearance of any portion the text including font, color, size, and attributes (bold, italic, or underline).
Note: HTML code cannot be added in the PhotoWebber text editor. If you need HTML code in your text block, use a Placeholder instead.
|
To edit text:
|
 |
|
Attributes - You can change text attributes. To change text attributes, select the text you want to change and click the Bold, Italic, or Underline button.
|
|
|
Color - You can change text color. To change text color, select the text you want to change and click the Text Color button. Select a color from the color-pick window and click OK.
|
|
|
Font - You can change the typeface of any text. To change the font, select the text you want to change and select Serif, Sans-serif, or Monospaced from the Font list.
|
|
|
Size - PhotoWebber supports standard HTML 3 type sizing. That is, type sizes are defined numerically from 1 to 7 with 1 being the smallest size and 7 being the largest. To change the size of text, select the text you want to change and select a size from 1 to 7 from the Size list. |
|
Extracting Text from Photoshop Text Layers
Photoshop 5 and 6, unlike previous versions of Photoshop, allow you to edit text and make changes to individual characters and words within a text block. This is because Photoshop text layers now include both the actual text you typed in and the graphic representation of that text, including the attributes you assign (such as font, size, anti-aliasing, and color). PhotoWebber recognizes Photoshop 5 and 6 text layers and includes both the graphical representation of the text and the type.
When you import a Photoshop text layer into PhotoWebber, that layer is initially set as a graphic layer and is treated in the same way as any other graphic layer. When you build your page, the graphical text is output as a GIF, JPG, or PNG file as you define it in the graphics Properties window.
Because PhotoWebber interprets both parts of the Photoshop layer, you can optionally change any Photoshop graphical text layer to real text. However, when you convert a Photoshop graphical text layer to type, you lose the formatting that was applied in Photoshop and the text changes to default type settings. Then, when you build your page, type is saved as part of the HTML file and displayed on the web page using the browser's font settings. (Do not render text layers in Photoshop if you want to convert them to text in PhotoWebber.)
Should you use a layer as graphic or type? There are pros and cons to both approaches.
Things you should consider using text as type include:
- Fonts may change
- Text size may change
- You have less control over how the text is displayed in the browser
- You can edit text directly in any HTML or text editor
- Text can be displayed in large type or read by voice software for sight-impaired web users
Things you should consider using text as graphics include:
- Always looks exactly as you designed it
- File size may increase
- Lots of graphics to download
- Need to go to Photoshop to edit text to keep it as a graphical element
- Should assign alt tag for sight-impaired web users
For more information, see Considerations for Using Text in Browsers, below.
To change a Photoshop type layer to text, select the layer and choose Layers, Set Type, Text.
When a layer is changed from a graphic to text, the IMG, Button, and Media Properties are no longer available.
To change a Photoshop type layer back into a graphic, select the layer and choose Layers, Set Type, Graphic. Or, click the small arrow on the Text icon in the Layers list and select the simple T icon.
Note: If you added links to the text or made any other changes, these will be lost. The PhotoWebber graphics layer is exactly the same as it was in the original Photoshop document.
Adding Hyperlinks in Text
You can also add hyperlinks to text.
|
To add a hyperlink to text:
|
 |
|
You can also select the Target Frame for each hyperlink:
|
|
Considerations for Using Text
Note: When you use text in an HTML document, you relinquish some control over how the text is displayed in the user's browser:
|
Fonts changing - Users can select their own fonts for serif, sans-serif, and monospaced in their browser. They may or may not select a font that has a similar appearance to your intended design. Size changing - Users can change the font sizing in their browser. If a user sets their default font size to anything other than 3 (or Medium), type may not display at the size you intended. |
For Example, in Internet Explorer:
|
|
Hyperlinks are more flexible in text - Hyperlinks can be added to the entire text block or to indvidual sentences, phrases, or words withing the text block. You can also add more than one hyperlink in a single block of text. |
|
|
No HTML support - HTML code cannot be added in Photoshop or PhotoWebber text editors. If you need HTML code in your text block, use a Placeholder instead. |
|
|
Table cells resizing - If you built your page in Table layout and type is enlarged in the user's browser, the table cells will expand to fit all of the text. This may cause other graphics to move or break apart if they have been split into slices by PhotoWebber. This is an inherent feature of HTML 3 and a limitation of table layout. Tip: When adding text to a graphic-intensive web page, always place the text above or below graphics, not to their left or right. |
Do:
Do not:
|
| Layers cutting off text - If type is enlarged in the user's browser, the text may be cropped at the bottom and right sides of the layer if it exceeds the size of the layer itself. If you want the layer to expand to fit the text, or if you want the text layer to scroll if necessary, use a Placeholder. See Placeholders. |
 |
| Text wrapping - Because neither Photoshop nor PhotoWebber support automatic text wrapping, when user's resize fonts in their browser, the results can be unpredictable. |
 |
Copyright
© 2000 - 2001 Media Lab, Inc.
All rights reserved.
PhotoWebber
is a trademark of Media Lab. Photoshop is a registered trademark and GoLive
is a trademark of Adobe Systems Incorporated.
All other trade names are trademarks of their respective owners.