Advanced Text Effects and Publishing

Adobe Photoshop has a large list of parameters for a text and font attributes and in order to take them all into account, a coder has to spend much time. However, a coder is an ordinary man, so he can make mistakes. Whereas this fact, Divine Elemente reads off absolutely all text parameters and Photoshop text effects and converts them in HTML / CSS immediately.

Examples of advanced type converted to CSS / HTML text

The basic text parameters and tips for work with them in Divine Elemente are considered in this guide.

---

Type layers and their conversion

During the analysing of a template, Divine Elemente reads off all possible data from type layers, even the most insignificant ones. Thanks to that, all elements are displayed as closer as possible to the original template.

Character and Paragraph styles in Adobe Photoshop

So, let’s consider text parameters and PSD text effects and recommendations for custom and safe fonts’ use in your template during PSD text conversion.

---

Use of Point and Paragraph types and their features

You can convert Point type to Paragraph type in Adobe Photoshop and vice versa. Their main differences and ways of their use in Divine Elemente are considered below.

Example of Point type and Paragraph type

Primary differences:

Point type	Paragraph type
Point type continues in a straight line unless you press the (Return) [Enter] key to insert a line break.	Paragraph type automatically wraps to the next line when the text reaches the boundary of its box.
The space occupied by point type continues to expand as more characters are added.	Paragraph type is restricted to the designated rectangle; characters that don’t fit in the rectangle are hidden.
Point type is added from the specific spot in the image where the Type tool was clicked.	Paragraph type is added from the top of the bounding box.
To add point type, click with a Type tool.	For paragraph type, drag with a Type tool to create a rectangle to fill with the type.
Resizing the bounding box around point type scales the type.	Resizing the container rectangle for paragraph type forces the text to reflow within the container; the type maintains its original size and proportion.

It is recommended to specify a type of a text layer for theme’s text attributes design in Divine Elemente in order to define and set boundaries of the text block at template’s conversion.

Hint: Use of Point type is recommended for such web elements as ‘Logo’, ‘Navigation menu’, texts that will not be changed in CMS.

Hint: Use of Paragraph type is recommended for elements, which contain more than one line of text, and for elements, which boundaries should be set accurately (‘Posts’ > ‘Titles’; ‘Posts’ > ‘Contents’; ‘Posts’ > ‘Comments’, etc.)

Example of Point type and Paragraph type use

What is a Safe font?

There are many thousands of fonts in the world, but in order the fonts (you use at your website) are displayed in the same way for all users with various OS, it’s recommended to apply a list of “Safe fonts”.

The following fonts are considered to be ‘safe’:

Safe fonts examples

What is a Custom font?

Divine Elemente works not only with safe fonts but with modern custom fonts too, that are usually offered be such services as @font-face, HTML5 fonts, Google Fonts, Fontspring, Typekit, Fontslive, etc. Tips for their use can be found in the Custom fonts guide.

It’s recommended to use no more than three fonts on a web page.
Learn more about font stacks

---

Type formatting

If you want to draw attention to any important part of your website content, you often apply various methods of text formatting. Some of automatic PSD to HTML solutions offer only a small part of formatting attributes as underlining, italics, CAPS, bold type, and that’s all.

Divine Elemente allows to use the above mentioned methods plus many optional font attributes and parameters of text formatting that are considered below.

Example of conversion of various text styles

---

Optional font attributes

Besides character styles (font family, size, color), Divine Elemente plugin also recognizes such font attributes as Font Leading, Tracking, Kerning, Baseline Shift:

Optional font attributes

Let’s consider each attribute in details:

Leading – the space vertically between lines of text (name comes from the physical piece of lead that used to be used in mechanical printing process to separate lines of text):

Example of the text publishing setting Leading value

Kerning – the amount a character’s horizontal space encroaches into its neighbor:

Example of the text publishing setting Kerning value

Tracking – the horizontal space between each character:

Example of the text publishing setting Tracking value

The Baseline Shift is used to shift characters up or down from their baselines.

Example of the text publishing setting Baseline shift value

---

Type FX and CSS shadow

Users often apply optional Photoshop text effects in type layers (shadows, glow, gradient, pattern, etc.). At this moment Divine Elemente supports not only advanced text output, but processes Shadow effect too (modern trend, you know). All other type effects will be switched off during the text publishing.

Example of shadows

Note: In order to display other Photoshop type effects in your template, there is a possibility in Divine Elemente to convert type layers as images. More details on this issue can be found in Properties guide.

---

Anti-aliased text

You can always choose a required value of the text anti-aliasing in Photoshop but anyway the text in the browser window will differ from the one created in a PSD template after PSD text conversion.

Hint: As Adobe Photoshop and your browser may use different algorithms for text display, it’s impossible to reach 100% fidelity, unless you display a text as an image. However, it’s not recommended, as it can influence your website rating in terms of SEO and search engines (Google, Yahoo, Bing etc.).

Find more about text rendering modes and their differences here:

• http://en.wikipedia.org/wiki/Font_rasterization
• http://en.wikipedia.org/wiki/ClearType
• http://en.wikipedia.org/wiki/Antialiasing

---

Conclusion

Thus, you have learned about types, their effects, font attributes and other opportunities that can be applied to a text, and know the tips and output of their use in Divine Elemente plugin during PSD text conversion into a web page.

---

Related Guides and Tutorials

• Properties
• Custom fonts

---

External links

• Wikipedia: Font stacks
• Wikipedia: Font rasterization
• Wikipedia: Clear Type
• Wikipedia: Antialiasing