Conversion of PSD text layers into CSS text
Some time ago we introduced a new feature of PSD to HTML converter service: extraction of all text styles from Photoshop text layers. Let us to explain conversion of Photoshop text layers into CSS in more details.
Fonts
Which text layers in the Photoshop design will be converted into CSS text? PSD to CSS online service will convert into selectable text only those layers which use web safe fonts. Here is a list of fonts that are considered to be web safe:
- Arial
- Arial Black
- Helvetica
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Lucida Console
- Lucida Sans Unicode
- Palatino Linotype
- Tahoma
- Times New Roman
- Trebuchet MS
- Verdana
- Symbol
- MS Sans Serif
- MS Serif
Text layers which use these fonts will be converted into HTML text that uses appropriate CSS styles. Otherwise, text will be converted into an image with the layer's text set as an alternative text ('alt' attribute).
Using non standard web font is perfect for logos, headings, etc. However it is not recommended to use them for the main content text. First, image loading takes much more time then text loading. Second, text as images is not good for SEO. Third, your users will not be able to select, copy the text, etc.
"Point Text" vs "Paragraph Text"
There are 2 ways of text writing in Photoshop: "Point Text" and "Paragraph Text". To switch between them you should right click on the layer in the Layers Panel and choose "Convert to Point Text" or "Convert to Paragraph Text" option. You should avoid using "Point Text" for multiline texts. For multiline text you should use "Paragraph Text" option. It will give you much more better result.
Using Layer Efects
If you use Layer Effects to get additional image effects then, as for any use of layer effects, you should convert such a layer into Smart Object or rasterize it. Otherwise, you will get text without any effects.
Following these rules you will easily create a web site from the Photoshop design template.
Invite friends, get free PSD to HTML conversions
Inviting friends to enjoy using PSD to HTML conversion service became more profitable! Now, for each invited friend who made a paid PSD to CSS conversion you will be given 5 free Design to HTML conversions, which equivalent to $17,5!
How to invite friend?
That's easy. Go to the invite friend section of your Online Profile. You will have several options: either to send invitation via e-mail, either use your affiliate link to post it anywhere, either share your invitation via social networks. Use options that are convenient for you. Let your friends also like automatic PSD to XHTML conversion service!
Special offer is valid until 1st of August 2011
Conversion of PSD text layers into CSS text
Those, who are using automatic Psd to Html conversion service for a long time have already noted that Photoshop text layers are now converted into HTML text in a different way. In the past, text style of the first letter of a Photoshop text layer was used for all the converted layer's text. Now, all the text styles are extracted form the Photoshop text layer. Thus, you do not need anymore to divide your text layers into text layers with similar text style. Creating web sites has become easier.
Moreover, all the underlined texts are now converted into XHTML hyperlinks automatically by PSD to CSS conversion service. So, if you would like your text to be converted into a hyperlink you should mark it with a $link$ tag only in case your text has not underlined style. However, if you don't want your underlined text to be converted into a link you can simply mark such a text layer with a $nolink$ tag.
Bugfix: unable to view web sites in portfolio
An error was fixed: in some browsers it was not possible to view websites converted via PSD to HTML online service. The error was shown that web page is not found when you tried to open windows with website or CSS or XHTML. It happened mostly in IE browser.
Bugfix: incorrect CSS layout if $bg$ tag was used in a not right way
After automatic PSD to HTML conversion it was possible to get incorrect XHTML/CSS layout in case of using $bg$ tag in a not right way. This error in the PSD to CSS online conversion was fixed. Below is a description in what case you could got this error.
The first thing you should understand is that only the lowest layer in a layer group can be set as a background for the group. Otherwise, z-order of layers will be corrupted.
Formerly, if user marked not the lowest Photoshop layer with a $bg$ tag, it would have been converted into a CSS background anyway. Thus, in some cases this layer might have been overlaid by another layer and become invisible. So, PSD to HTML conversion might have been inaccurate.
Now, this is not a case. Psd to CSS online service will check z-order of layers and will not convert a layer marked with a $bg$ tag into CSS background in case in will cause incorrect z-order of layers. Instead of it, service will automatically find a layer that is best to become a background for the layers' group. Thus, design to HTML conversion will always be accurate.
Blogroll
Categories
Subscription Options:
Archives
- March 2013 (1)
- July 2012 (1)
- March 2012 (1)
- February 2012 (1)
- December 2011 (1)
- November 2011 (1)
- October 2011 (4)
- September 2011 (2)
- August 2011 (3)
- July 2011 (3)
- June 2011 (5)
- May 2011 (3)
- April 2011 (8)
- February 2011 (4)
- January 2011 (1)
- December 2010 (2)
- November 2010 (5)
- October 2010 (6)
