Blog – Psd 2 Html Converter Blog of Psd 2 Html Converter developers

16Feb/140

Service automatically converts layers into CSS3

We are happy to announce that long-awaited feature is now available in the Psd2HtmlConverter service. Now it automatically converts Photoshop layers into CSS3 code, and does it just in a matter if seconds. Since this moment the service of automated PSD to HTML5/CSS3 conversion will handle a lot of routing tasks for you and will help you to save more time.

Service is able to convert:

For image layers:

  1. Rounded borders  - create shape with any combinations of rounded borders
  2. 'Stroke' style
  3. 'Inner shadow' style
  4. 'Drop shadow' style
  5. 'Inner glow' style
  6. 'Outer glow' style
  7. 'Gradient overlay' style
    • Linear Gradient
    • Radial Gradient
    • Reflected Gradient
  8. 'Color Overlay' style

For text layers:

  1. 'Color Overlay' style
  2. 'Drop shadow' style
  3. 'Outer glow' style

When generating CSS code for layer styles, the service also creates vendor prefixes for following browsers:

  1. Mozilla Firefox
  2. Opera
  3. Internet Explorer
  4. Webkit family

Soon we are going to:

  1. Support 'Pattern Overlay' style
  2. Partially, as far as possible in the CSS3, support 'Bevel & Emboss' style
  3. Support different blending modes, since some browsers are starting to support them

Recommendations on the PSD template preparation:

  1. Use 'Shapes', 'Layer masks' and 'Clipping Masks' extensively.
  2. Use only those layer styles which it is possible to convert into CSS3 code. I.e., do not use the following layer styles: ‘Satin’, ‘Bevel & Emboss’, ‘Pattern Overlay’.
  3. Do not rasterize layers! When you rasterize a layer, you lose all the information that allows the service to convert a layer style into CSS3 code.

 

Examples:

On the examples below you can see what kind of code you will get for layers with quite complex styles.

Radial gradient  + rounded borders

Original PSD file: Radial Gradient.psd

Image:

CSS code generated by service:

.rounded_rectangle_6 {
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box; /*Will not allow bg color to leak outside borders*/
	-webkit-border-radius: 3.52px/5.83px;
	-moz-border-radius: 3.52px/5.83px;
	border-radius: 3.52px/5.83px;

	background: -moz-radial-gradient(center center, #ffffff 0, rgba(17,255,51,0.0) 50.39%, rgba(0,0,0,0.5) 100%), #ff008a;
	background: -o-radial-gradient(68.5px 68.5px at center center, #ffffff 0, rgba(17,255,51,0.0) 50.39%, rgba(0,0,0,0.5) 100%), #ff008a;
	background: -webkit-radial-gradient(68.5px 68.5px at center center, #ffffff 0, rgba(17,255,51,0.0) 50.39%, rgba(0,0,0,0.5) 100%), #ff008a;
	background: -ms-radial-gradient(68.5px 68.5px at center center, #ffffff 0, rgba(17,255,51,0.0) 50.39%, rgba(0,0,0,0.5) 100%), #ff008a;
	background: radial-gradient(68.5px 68.5px at center center, #ffffff 0, rgba(17,255,51,0.0) 50.39%, rgba(0,0,0,0.5) 100%), #ff008a;

	width: 232px;
	height: 137px;
	float: left;
	position: relative;
}

Reflected Gradient + rounded borders + Stroke + Drop/Inner Shadow +  Inner/Outer Glow

Original PSD file: Reflected gradient, stroke, shadows, glows.psd

Image:

CSS code generated by service:

.rounded_rectangle_4 {
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box; /*Will not allow bg color to leak outside borders*/
	border: 2px solid #d3072e; /*stroke*/
	-webkit-border-radius: 131.89px 34.47px 34.47px/94.82px 25.21px 25.21px;
	-moz-border-radius: 131.89px 34.47px 34.47px/94.82px 25.21px 25.21px;
	border-radius: 131.89px 34.47px 34.47px/94.82px 25.21px 25.21px;

	-webkit-box-shadow: 4.1px 2.87px 14px 0 rgba(225,0,0,0.8), 0 0 3px 0 rgba(218,218,36,0.75), inset 0.5px 0.87px 0 0 rgba(255,255,255,0.53), inset 0 0 25px 0 rgba(255,255,190,0.41); /*drop shadow, outer glow, inner shadow, inner glow*/
	-moz-box-shadow: 4.1px 2.87px 14px 0 rgba(225,0,0,0.8), 0 0 3px 0 rgba(218,218,36,0.75), inset 0.5px 0.87px 0 0 rgba(255,255,255,0.53), inset 0 0 25px 0 rgba(255,255,190,0.41); /*drop shadow, outer glow, inner shadow, inner glow*/
	box-shadow: 4.1px 2.87px 14px 0 rgba(225,0,0,0.8), 0 0 3px 0 rgba(218,218,36,0.75), inset 0.5px 0.87px 0 0 rgba(255,255,255,0.53), inset 0 0 25px 0 rgba(255,255,190,0.41); /*drop shadow, outer glow, inner shadow, inner glow*/

	background: -moz-linear-gradient(100deg, #fced00 1.46%, rgba(252,237,0,0.89) 11.72%, rgba(185,0,238,0.79) 21.66%, rgba(183,3,235,0.79) 21.76%, rgba(0,249,0,0.89) 31.68%, #00f900 41.76%, rgba(0,249,0,0.89) 51.83%, rgba(183,3,235,0.79) 61.75%, rgba(185,0,238,0.79) 61.86%, rgba(252,237,0,0.89) 71.8%, #fced00 82.06%), #00d2ff;
	background: -o-linear-gradient(100deg, #fced00 1.46%, rgba(252,237,0,0.89) 11.72%, rgba(185,0,238,0.79) 21.66%, rgba(183,3,235,0.79) 21.76%, rgba(0,249,0,0.89) 31.68%, #00f900 41.76%, rgba(0,249,0,0.89) 51.83%, rgba(183,3,235,0.79) 61.75%, rgba(185,0,238,0.79) 61.86%, rgba(252,237,0,0.89) 71.8%, #fced00 82.06%), #00d2ff;
	background: -webkit-linear-gradient(100deg, #fced00 1.46%, rgba(252,237,0,0.89) 11.72%, rgba(185,0,238,0.79) 21.66%, rgba(183,3,235,0.79) 21.76%, rgba(0,249,0,0.89) 31.68%, #00f900 41.76%, rgba(0,249,0,0.89) 51.83%, rgba(183,3,235,0.79) 61.75%, rgba(185,0,238,0.79) 61.86%, rgba(252,237,0,0.89) 71.8%, #fced00 82.06%), #00d2ff;
	background: linear-gradient(350deg, #fced00 1.46%, rgba(252,237,0,0.89) 11.72%, rgba(185,0,238,0.79) 21.66%, rgba(183,3,235,0.79) 21.76%, rgba(0,249,0,0.89) 31.68%, #00f900 41.76%, rgba(0,249,0,0.89) 51.83%, rgba(183,3,235,0.79) 61.75%, rgba(185,0,238,0.79) 61.86%, rgba(252,237,0,0.89) 71.8%, #fced00 82.06%), #00d2ff;

	width: 289px;
	height: 181px;
	float: left;
	position: relative;
}
Share
Filed under: All No Comments
3Feb/140

Support for Adobe Photoshop CC

The service of automated PSD to HTML conversion now fully supports the latest version of Adobe Photoshop Creative Cloud - 14.2.

Share
Filed under: All No Comments
10Mar/130

Non-destructive merge of several layers into one – tag $merge$

Quite often web designers use several Photoshop layers to represent one entire image. However, web developer usually wants to represent this image with only one physical file.

Let's see how automated psd to html/css conversion will work out in such case. By default, separate image file will be created for each Photoshop image layer. Obviously, it will have a negative effect on the resulting html markup:

  • a lot of images will be created,
  • size of the web page will increase, and hence the loading time will also increase,
  • html code will become less readable

It's very simple to deal with this problem, though. You can use one of two non-destructive techniques, described below:

  1. Create new Layer Group and put there all layers that correspond to the image. Mark that group with the $merge$ tag. In the process of automated PSD to HTML conversion this group will be merged into one layer.
  2. Another way is to convert these layers into a single Smart Object. Select desired layers in the Layers palette and launch "Layer" -> "Smart Objects" -> "Convert to Smart Object" command.

Such approach will lead to the better quality of automated psd to html conversion. Moreover, you will find that structure of your PSD templates become much better, easy to understand and work with.

Share
31Jul/121

Automatic Psd to Html conversion now 15 times faster

Today automatic PSD to HTML conversion service was moved to the new more powerful server. Now conversion of PSD template to HTML/CSS markup is performed 10-15 times faster then before.

Also the limitation on the maximum PSD file upload size was changed. Now we allow PSD files of size up to 40Mb. Presumably, after the thorough testing we will allow to upload PSD files of even bigger size.

Furthermore, quite soon the new website design will be published and the service will be fully revised.

Share
31Mar/120

A sneak peek into the future

Our blog has not been updated for quite a long time. But why? Do you think we casted the project away? Nope. Conversely, we are to busy with its development :) Today we would like to make a sneak peek at the future projects development.

  • Very soon we will update the website's design with much more contemporary, usable and clear one.
  • HTML and CSS  code generator is being fully reworked now. New algrithms of design template recognition are implemented. We are now able to develop  such things that it was impossible for us to implement earlier. Also, we will be able to develop new features much more quicker now.
  • We will launch the service of free PSD template slicing into images.
  • We work not only on generation of simple HTML/CSS code, but on generation of templates for CMS's. We would not reveal yet what CMS's we are talking about. By the way, for what CMS's you would like us to generate the templates? Tell us either via 'Feedback' widget or leave your comments right here.

It was a short overview of things you will see in the quite near future. We will describe each feature in more detailes in our future postings.

Share
Filed under: All No Comments
12Feb/120

Bugfix: PayPal payments

An error was fixed because of which in some rare cases user of the PSD to CSS service did not receive a letter with conversion details and a download link.

Share
Tagged as: No Comments
24Dec/111

Christmas and New Year discounts on PSD to HTML conversion

For the period of Christmas and New Year holidays we are setting the 50% discounts for all - for single page PSD to HTML conversions, for packages of PSD to CSS conversions, for unlimited PSD to XHTML conversion subscriptions!

Discounts are only available till 7-Jan!

Share
13Nov/110

Creating CSS layout for RTL language

A lot of us get used to write from the left to the right. So it is accepted in English, Russian and a lot of other languages. But there are a lot of languages (like Arabian or Hebrew) in which LTR writing system is used. HTML and CSS provide support for both LTR and RTL writing system.

HTML provides a special attribute dir, that accepts two values:

  • ltr - for the left to right writing system
  • rtl - for the right to left writing system

However, using "dir" attribute is not welcomed because it is responsible for the appearance of the document, not for its structure. But cascading style sheets should be used to describe appearance.

In CSS there is a "direction" property that is responsible for:

  • how the text is rendered in the block;
  • position of the scroll bar in the blog;
  • order of columns in the table;
  • position of the orphan line in the text block with text-align: justify.

Psd to Css Online service now supports conversion of design templates with RTL text direction. We added an additional option for that on the PSD file upload page. Choose the text direction you need on your web page and then upload your PSD design. Psd to Html software will make all the work for you.

Share
30Oct/110

Uploading zip archive with Psd design template

You can now upload files on the Psd to CSS Converter web site faster. We now allow you to upload a zip archive with a Psd design template inside. Psd files compress quite well. That allows you to save Internet traffic and reduce a time taken by file upload on the Psd to Html conversion server.

Limitation on the size of uncompressed PSD file remains the same - 30Mb. Moreover, zip archive must contain only one PSD file.

Share
26Oct/112

PSD to HTML online – unlimited use subscriptions

We reworked the scheme of payment and made in much more flexible. Now, besides buying single PSD to CSS conversion you can buy subscription on unlimited use of the design to HTML conversion service and create as many web pages as you need to!

You can buy unlimited subscription to use the PSD to XHTML conversion service for one or several days. Right after you buy the subscription the countdown timer starts. Time to the end of subscription will be shown in the information window on the Online Profile page. If you have an active subscription and buy another one, then time of the new subscription will be added to the remaining time of the old subscription.

Experiment with the design template as long as you want - change layers ordering and groupping, add "tags", etc. Do as many PSD to HTML conversions as you need to.
Please, note that:

  • You can also buy a one-day subscription during the conversion process, after a PSD file's upload and conversion.
  • You can view history of all payments at the payments history page.
  • If you think that having several conversions, which will never expire, is more convenient that having unlimited subscripton for the limited time, please consider buying just several conversions.

One day of unlimited use subscription cost only $10 (US dollars). So, you can now create a multiple page web site almost for free!

Share