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

11Aug/140

Automatic embedding of non standard fonts

Service of automated PSD to HTML5/CSS3 conversion is now integrated with Google web fonts service. That means that you can use any of more than 600 fonts available from Google in your design templates and our service will embed any of that fonts into the converted page via @font-face directive. You can view all the fonts available from Google at the following link: https://www.google.com/fonts.
In future we are going to support another sources of web fonts. We want to hear your opinion - integration with what fonts websites would you like us to have? Please, tell in comments what sources of fonts do you use and we will think about integration with those sources.

Share
9Jun/140

Generation of linear and radial gradients in SVG format

Service of automated PSD to HTML conversion used to convert Photoshop gradients into CSS3 code for all browsers. In addition to that we have added generation of linear and radial gradients in SVG format and embedding it into CSS code using a Data URI in base64 encoding.

Example of CSS code for linear gradient:

background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9InJvdW5kZWRfcmVjdGFuZ2xlXzMiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNTAlIiB5MT0iMCUiIHgyPSI1MCUiIHkyPSIxMDAlIj4KPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjYWQwMDUxIiBzdG9wLW9wYWNpdHk9IjAuNTYiIC8+CjxzdG9wIG9mZnNldD0iOTkuNTElIiBzdG9wLWNvbG9yPSIjYzM2NTAwIiBzdG9wLW9wYWNpdHk9IjAuNTYiIC8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2MzNjUwMCIgc3RvcC1vcGFjaXR5PSIwLjU2IiAvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI3JvdW5kZWRfcmVjdGFuZ2xlXzMpIiAvPjwvc3ZnPg==), #ff007d;
background: -moz-linear-gradient(270deg, rgba(173,0,81,0.56) 0, rgba(195,101,0,0.56) 99.51%, rgba(195,101,0,0.56) 100%), #ff007d;
background: -o-linear-gradient(270deg, rgba(173,0,81,0.56) 0, rgba(195,101,0,0.56) 99.51%, rgba(195,101,0,0.56) 100%), #ff007d;
background: -webkit-linear-gradient(270deg, rgba(173,0,81,0.56) 0, rgba(195,101,0,0.56) 99.51%, rgba(195,101,0,0.56) 100%), #ff007d;
background: linear-gradient(180deg, rgba(173,0,81,0.56) 0, rgba(195,101,0,0.56) 99.51%, rgba(195,101,0,0.56) 100%), #ff007d;

Example of CSS code for radial gradient:

background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAyMzIgMTM3IiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj4NCjxyYWRpYWxHcmFkaWVudCBpZD0icm91bmRlZF9yZWN0YW5nbGVfNiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGN4PSI1MCUiIGN5PSI1MCUiIHI9IjM0LjI1JSI+DQo8c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIgLz4NCjxzdG9wIG9mZnNldD0iNTAuMzklIiBzdG9wLWNvbG9yPSIjMTFmZjMzIiBzdG9wLW9wYWNpdHk9IjAiIC8+DQo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC41IiAvPg0KPC9yYWRpYWxHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMjMyIiBoZWlnaHQ9IjEzNyIgZmlsbD0idXJsKCNyb3VuZGVkX3JlY3RhbmdsZV82KSIgLz48L3N2Zz4=), #ff008a;
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;

In this way we provide compatibility with the IE9 browser.

Share
3May/140

PSD to HTML5/CSS3 conversion price is reduced

Conversions

We lowered prices for buying one or several conversions. Now the price for one PSD to HTML5/CSS3 conversion starts from $1.6!

Compare our old and new prices.

New prices

Price for one conversion, $ Number of conversions to buy Total price
3 1 3
2.7 5 13.5
2.5 10 25
2 25 50
1.8 50 90
1.6 100 160

 

Old prices

Price for one conversion, $ Number of conversions to buy Total price
3.5 1 3.5
3.32 5 16.6
3.26 10 32.6
3.15 25 78.8
2.98 50 148.8
2.63 100 262.5

 

Subscriptions

Special offer for 1 day unlimited subscription

Since now till May,18 2014 you can buy 1  day unlimited subscription for $6.99 instead of $9.99.

Share
2May/140

New tags for layers in PSD file (support for HTML5, etc.)

We have added several new tags for layer names in a PSD file recently. Please, check how to use them when converting PSD design to HTML5/CSS3 code.

  • #header, #footer, #section, #nav, #article, #aside - groups marked with these tags would be converted into corresponding HTML5 blocks. Example of usage in the PSD file: html tags.psd. Conversion result: html5 tags.zip.
  • #alt{alternative text} - if an image layer is marked with this tag then in the resulting markup image will have alternative text set to the specified value. Example: "Logo#alt{My company}".
  • #h1{alt text}, ... , #h6{alt text} - image layer will be converted into a header of 1st, 2, 3, 4, 5 or 6th level and specified text will be set as image's alternative text. Example: "Logo#h1{My company}". Also, you can do the same with the #alt tag: "Logo#h1#alt{My company}".
Share
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:

<code>.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;
}
</code>

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:

<code>.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;
}</code>
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