How to work with HTML Text

Lakesider wrote:

Dear NG,

I am new to photoshop and have a question about creating a website with photoshop: I have designed a website and some text on it, which I dont want to have as a graphic, but as HTML text. How can I save and slice the photoshop file for the web without saving the text as a graphic?
Where do I find a good beginners tutorial for website creation with photoshop on the web?

Thank you very much,

Rudi

Jump to ImageReady and do it there.Here’s the Help file info: Adding HTML text to a slice

Choosing the No Image type for a slice lets you enter text that will appear in the slice area of the resulting Web page. This text is HTML text–you can format it using standard HTML tags. You can also select vertical and horizontal alignment options. For more information on specific HTML tags, see an HTML reference (either printed or on the Web).

Photoshop and ImageReady do not display HTML text in the document window; you must use a Web browser to preview the text. (See Setting and viewing slice options.) Keep in mind that the appearance of text is affected by the browser settings and operating system it is viewed on. Be sure to preview HTML text in different browsers, with different browser settings, and on different operating systems to see how text will appear on the Web.

Note: The amount of text in a No Image slice can affect the layout of an exported page. Be sure to experiment with your design in several browsers to ensure consistency.

To add HTML text to a slice:

1. Select a slice. If you are working in Photoshop, double-click the slice with the Slice Select tool to display the Slice Options dialog box.
2. In the Slice Options dialog box (Photoshop) or the Slice palette
(ImageReady), select No Image from the Type pop-up menu.
3. Type the desired text in the text box.
4. (Photoshop Save for Web dialog box and ImageReady) If the text includes HTML formatting tags, select the Text is HTML option. When this option is deselected, all the text you enter (including formatting tags) will be displayed in the resulting Web page.
5. (Photoshop Save for Web dialog box and ImageReady) If desired, select options in the Cell Alignment section of the dialog box.

Horizontal alignment options:
* Default to use the browser’s default for horizontal alignment * Left to align the text to the left side of the slice area * Center to align the text to the center of the slice area * Right to align the text to the right side of the slice area

Vertical alignment options:
* Default to use the browser’s default for vertical alignment. * Top to align the text to the top of the slice area.
* Baseline to set a common baseline for the first line of text in cells in the same row (of the resulting HTML table). Each cell in the row must use the Baseline option.
* Middle to center the text vertically in the slice area. * Bottom to align the text to the bottom of the slice area.

—
Comic book sketches and artwork:
http://www.sover.net/~hannigan/edjh.html
Comics art for sale:
http://www.sover.net/~hannigan/batsale.html

Unfortunately you can’t. While you’re working in Photoshop all text is in a vector form, but the moment you flatten it and save it for web, that data is gone. As a matter of fact the only reason for having editable vector text in Photoshop is just that – editability (and some other perks when printing). I am affraid however, that your text if created in Photoshop is just a graphic when it comes to browsers.

I teach Photoshop and do web design as well, but if I may suggest, these two should be kept as (and are) two separate things. Photoshop is clumsy at best if used for creating web pages, deffinitely not HTML efficient, and quite frankly it’s like using a hammer to open a can of refried beans. If you want to use a program to create HTML or XHTML code for you I would encourage you to look into Macromedia (curiously enough – recently obtained by Adobe) Dreamweaver. Use your Photoshop to create the assets, but then put everything together using Dreamweaver

On 13 Mar 2006 11:17:17 -0800, "Lakesider"
wrote:

Dear NG,

I am new to photoshop and have a question about creating a website with photoshop: I have designed a website and some text on it, which I dont want to have as a graphic, but as HTML text. How can I save and slice the photoshop file for the web without saving the text as a graphic?
Where do I find a good beginners tutorial for website creation with photoshop on the web?

Thank you very much,

Rudi