Layer 4 copy

Upload your PSD file...

Take a quick look at the Guidelines to see how to prepare your PSD file


Please wait - we are now uploading and converting your file...


Wait! You can upload your PSD, but you aren't logged in! If you submit now, you won't get any of the cool Unlimited features. You'll just get plain XHTML and CSS DIVs. Create a new account to use all the great Unlimited features free for 2 weeks.

More Control by Naming Your Layers

Table of Contents:


Layer Naming Conventions - What's in a name?

At it's core, psd2css Online converts all of your PSD layers directly to CSS layers. For most cases, absolute CSS positioning is used and the image that is the layer in the PSD file is the image within the generated CSS layer. That's important, but the real magic is in the Layer names. psd2css Online will 'read' your layer names and do some special things for you based on what it finds. Cool, huh? We call them Layer Naming Conventions. We just look for groups of specific letters in your layer name. You can have other letters in the name so it's still a meaningful layer name to you. You can even use combinations of naming conventions to get psd2css Online to do more than one special thing with a layer. Please note however that the names of empty layers (no graphics) get thrown away - those names doen't get processed.

back to top...

The PSD File - The Guidelines

psd2css Online has some limitations about what it will read and how it will interpret your PSD file. So here are a couple simple guidelines about your .psd files that will make working with psd2css Online and other sites powered by psd2css Online easier and more productive:

  • Opacity and Blending Options - Layers with Opacity at anything other than 100% or Blending Options set need to be rasterized. In Photoshop you can right click on the layer and choose 'Rasterize Type' or 'Rasterize Layer', or just merge the layer with any other raster layer (even a blank one). In The Gimp you can make an empty layer just below the one you want to rasterize, then right click on your layer and choose 'Merge Down'. That will rasterize the layer and merge it with the empty layer too.
  • Don't make too many layers - if you are an advanced artist, you probably made your work using lots of layers that all combine together to make individual parts of your art. For example, your logo might be made up of 5 or 6 layers - but the logo will always stay one single element, always together. Don't upload your psd file with that logo still all separated out into the 5 or 6 layers - merge them down to one 'logo' layer.
  • Use 8 bit RGB images - 16 bit, indexed image depths, and other color spaces won't work - use 8 bit RGB images
  • The Final Crop - Just before you send your PSD to be converted, it's a good idea to crop the image to exactly the size it is already. I know that doesn't sound like it makes any sense, but it's possible to have layers defined that are much larger than the visible area in the photoshop file (those layers will 'stick out' of the visible area). Not only can very large areas cause problems for the tool, but after conversion you'll have very large images that are absolute positioned via CSS to only show the part you want - looks good, but very inefficient. Please do the Final Crop before sending your PSD file for conversion.
  • Visible/Invisible Layers - psd2css Online will convert and generate images for your invisible layers. If you don't want those layers to show up in your web page, then please make a 'working' copy of your PSD file and delete the invisible layers for conversion by psd2css Online
  • Layer Comps (Photoshop CS) - Layer Comps in Photoshop CS are an awesome tool that can help your work flow while building multiple page web sites to be converted with psd2css Online. However, there are limitations with respect to how psd2css Online is going to interpret your PSD file if you use Layer Comps.

    One such limitation is that the ability for Layer Comps to remember positions is lost in psd2css Online. If you have a position for a layer in one Layer Comp and move that layer for another layer comp, that layer will only generate one CSS layer and it will be in the position within the lastmost Layer Comp.

    Layer Blending Effects are already mentioned above. Since you must rasterize any layer with Layer Blending Effects, the fact that Layer Comps can keep track of changes in effects between comps can't be used.

    The biggest gain from Layer Comps in PS is how it keeps track of visibility for each layer between Comps. This can be useful when building a site for psd2css Online to convert, but it can cause problems if some care is not taken. Since psd2css Online will ignore visibility settings for layers, a Comp that has some layers invisible might not generate the code that you expect. In order to aleviate this problem, we suggest you organize your layers in order of their use within the Comps (so that all the unique layers used for contacts_page for example are immediately above the contacts_page layer). Following this suggestion removes some of the 'helpfulness' of Layer Comps and so just using folders to keep the unique elements of various _page layers might prove more useful.

    So you can use Layer Comps to be a productive web designer, but please be aware of the limitations when building a PSD for psd2css Online.

  • The Gimp Layer Sizes - The Gimp likes to make layers as big as the entire image. This makes for a really inefficient web page - lots of big image files. For any layer in The Gimp where the actual art is smaller than the whole page (probably all your layers), choose the layer to edit, then in the layer menu choose 'Autocrop Layer'. Tutorial 3 shows this little work around in action.
  • 4MB/8MB psd File Size Limits for regular/Unlimited Users - You must be an Unlimited user in to get the 8MB file size limit. We are currently investigating larger file sizes. Bandwidth issues are the focus.
  • Help out the guy writing psd2cssonline - ok, not really a guideline I suppose, but if you upload a psd file and it doesn't do what you think it should, send it to me at I'll make it work (as time permits). Thanks

back to top...

Here are the various Layer Naming Conventions currently recognized by psd2css Online:

'_text' - Text Sections

If you put the letters '_text' in your layer name, then psd2css Online won't put any image in that CSS layer for you. Instead it will make a CSS layer for text for you. The text layer will be exactly the same size your image was. We'll even leave you a little note (in text) there about how you might want to use that text section.

psd2css Online will also add some extra info defining your font and stuff to the definition of that CSS class above in the style section that you can edit. By default it will put an overflow attribute in the CSS too so if you put more text/images/html in the layer than would fit, it will automatically put a scrollbar on the page for you and your layout stays in tact! How useful is that?

back to top...

What does it mean for one layer to be 'inside' another layer?

The idea of one layer being 'inside' another layer is important in psd2css Online. Generally it's very intuitive and you don't even have to think about it. A layer is inside another layer when the rectangle that bounds one layer on the screen fits completely within the bounding rectangle of another layer that is behind it (the smaller layer needs to be in front of the larger layer so it's visible). There is a more in depth description of 'inside' and a trick for the advanced users here.

back to top...

'_jpg' - JPG Image (instead of PNG)

By default, all the images psd2css Online makes for you from your PSD file are PNG images. That's all well and good - the PNGs will keep any alpha transparency that you might use. But PNG files are really pretty big. They don't compress much. And you don't want your users having to wait a long time for all your giant PNG files to download when they view your webpage. So if you have any images that HAVE NO TRANSPARENCY then you can have psd2css Online make JPG files for those instead. JPGs are SO much smaller. Just put the letters '_jpg' anywhere in a layer name and a JPG image will be generated instead of a PNG image for you.

back to top...

'_link' - Links!

If you want any of your elements to be links to other web pages, psd2css Online will help you out with that too. Name a layer with the letters '_link' in it and psd2css Online will generate link tag around the image for that layer. psd2css Online will fill the href tag with an html file named after the layer - for example, if you name the layer 'contacts_link', then the href will be filled with contacts.html. You can edit the html file manually to put a different URL in if you would like. See the tutorial called 'Links' to see it in action.

back to top...

'_center' - Centered, Floating CSS Elements

By default, psd2css Online uses absolute position tags for all elements of your page. So your web page looks just like your PS or Gimp document - all butted up against the left side of the browser. Often however you might want an element of your design centered with respect to it's parent. You can center a CSS element with psd2css Online by simply using the '_center' Layer Naming Convention. Put the letters '_center' anywhere in the name of the layer that you want to be centered and it works. This is useful if you want to center your entire page as well. Here's how you do that:

It's time to explain something that hasn't been mentioned much up to here in the documentation. When you define a layer in PS or the Gimp where the entire layer fits within another layer, then psd2css Online embeds or nests the one generated CSS layer within the other. You can have CSS layer inside of CSS layer inside of CSS layer, etc., etc. That's where the Cascading part of Cascading Style Sheets (CSS) comes from. Those CSS elements that are inside another CSS element follow it's 'parent' anywhere it might be on the page. This is where our new '_center' Layer Naming Convention comes in so handy. If you make one big layer - the size of your whole page - and then make all of the rest of your layer elements fit inside that one - you can name the big layer '_center' and your whole page centers automatically. Neat, huh?

There are many examples that illustrate this all over the site.

It's important to note here that when an entire page is centered in this manner (using the _center Layer Naming Convention) that if you resize your browser to be narrower than your design the left edge of your page will be clipped out of view while the browser truly 'centers' the page. You can stop that from happening by using the _center2 Layer Naming Convention instead. It works identically except it won't clip the left side of your design when the browser gets small.

back to top...

'_bkgnd' - CSS background-image instead of img tag

By default, all images are put into your webpage as image content with img tags. But that isn't the only way to get images into a layer. You can also define an image as the background image to the CSS layer. You can have psd2css Online do this automatically for you too. Just put the letters '_bkgnd' anywhere in your layer name. It's just that easy.

back to top...

Unlimited Features

psd2css Online came out of Beta on September 4, 2008. Unlimited Features are only available to psd2css Online Unlimited users. The Unlimited Plans are an upgrade to a standard psd2css Online login. So start a psd2css Online account, then upgrade your account to Unlimited to enjoy all the great features.

If you want to use the version without the Unlimited features, you can simply log out and use the same form on the front page of psd2css Online - if you are logged out, you will automatically get the version of the tool without all the features. This will always be there and will always be free.

back to top...

Unlimited Feature
'_relative' - Relative Position for CSS Layers

Sometimes you may want to allow the browser to move a particular CSS layer around relative to the other layers in the page. An advanced example might be a list of products for an online store front. You can make a relative CSS layer by using the '_relative' Layer Naming Convention. Just put the letters '_relative' anywhere in the name of your Photoshop layer and psd2css Online will generate a matching CSS layer that has a relative position rather than an absolute position. Since psd2css Online cascades the CSS layers, you can put your relative layer inside another 'container' layer. Then you might use some server or client side scripting to replicate that relative layer for each list item. This is a more advanced use of psd2css Online, but you Professional Web Developers can benefit from the head start getting something like this running for your clients.

One very important note here! Since a relative CSS layer is relative to anything else in it's parent layer (the layer that it is inside of), you probably don't want the JPG or PNG file in there that psd2css Online creates for you by default. So for a 'container' or parent layer of a relative layer, use the '_bkgnd' Layer Naming Convention to keep that image file out of the container layer.

Here is an example of how to use it for an expanding text area:

back to top...

Unlimited Feature
'_fixed' - Fixed Position for CSS Layers

Sometimes you may want a particular CSS layer to stay fixed relative to your whole browser window. Say for example that you have a very large web page - your user would be able to scroll up and down, left and right through the content. But you want some logo or menu to stay fixed at the top or along the side of the page no matter where your user scrolled to - the fixed layer would always be visible. Just use the '_fixed' Layer Naming Convention to make this happen. I'll be creating a tutorial for this soon as well.

Here's an example:

back to top...

Unlimited Feature
'_form', '_inputtext', '_textarea', and '_submit' - Auto-generated Forms

There are a number of Layer Naming Conventions for making forms.

The main one is the '_form' layer name. If you put the letters '_form' anywhere in a layer name, then that layer and all the layers inside it become a form. The default form name is psd2css. The target for the form by default is blank which is fine - that just means that the same page will be requested when the form is submitted. If you choose to do this, then you will want to add some form handling code in whatever scripting language you prefer to handle the form submissions.

When you put layers inside that form layer that have the letters '_inputtext' in the layer name, a form text input field is generated. The image for the layer is replaced with the field (like for the '_text' layer naming convention). The field will be named whatever was in front of the '_inputtext' in the name. So for example, if you have a layer named 'address_inputtext', then psd2css Online will generate a form input field for you that has a name and id of 'address'.

There is also a '_textarea' feature that works similarily to the '_inputtext' feature. Use '_textarea' to define a multi-line input field.

Another type of form layer is the '_submit' layer. This is the link that submits your form. If you name a layer that is inside a form anything with the letters '_submit' and the letters '_link' or '_linkover' in it, then that layer becomes a button that submits your form. Also, a hidden form element is added called 'submitted' with the value 'submitted'. You can use this element to decide whether you have form data to process or not.

This is one of those things easier to see in action than to read about - so here is an example. I've posted Form.psd that you can use to experiment with. When you upload Form.psd to psd2css Online, an index.html file is generated. Since I have php available on my server, I renamed the index.html file to index.php and added this code just after the body tag:

Now the form page submits to itself and the form elements are displayed.

Here are the Form.psd file to download, and the modified index.php file:

Click here to see the video tutorial

back to top...

Unlimited Feature
'_datepick' - A Dynamic Calendar Based Edit field for your Forms

If you have designed a form and have one or more fields that need a date, then you can use the '_datepick' Layer Naming Convention. Use it exactly as you would an '_inputtext' layer, but instead name it with '_datepick' in the layer name. psd2css Online will generate the same input text field, but will also attach the appropriate javascript, CSS and images to display a Dyamic Calendar that your user can use to choose a date with. The Calendar will automatically fill in the edit field with the date choosen by your user.

Click here to see the video tutorial

back to top...

Unlimited Feature
'_linkover' - Rollovers for your links!

Ok, now we're getting fancy. If you would like a roll over effect for your link images (i.e. when your end user puts his mouse cursor over the button but doesn't click yet, the image changes) all you have to do is make a matching '_linkover' layer in your .psd file.

So for example, assume you have a 'Products' button that you want your users to click to get to your products page. You've already named that layer in Photoshop to 'products_link' or something. But now you want the button to 'light up' when the user puts their mouse over it. So just make another layer (probably a duplicate of the first products button layer), modify it (boost the brightness and maybe contrast), and name the new layer 'products_linkover'. That's it. That's all you have to do. psd2css Online will recognize that the 2 layers are named the same except for that last 'over' part and generate all the appropriate CSS, javascript and html to give you a great roll over effect. And just like the '_link' layer, a URL for your href tag will be generated from the layer name too - so that 'products_linkover' link will automatically point to products.html. You can change the URL that it points to manually of course.

back to top...

Unlimited Feature
'_menu' - Menus!!

Yep - that's right - you can get working, animating drop down and fly out menus simply by naming your Photoshop layers right. This feature works in conjunction with the '_link' and '_linkover' Layer Naming Conventions. To create a drop down menu, simply make a '_link' or '_linkover' layer in your photoshop file - your user will click on to get the menu to appear. Then make another layer of the same name, but with the letters '_menu' at the end instead. For example you might have a layer named 'products_link' near the top of your page. If you design a drop down menu box for that and name it 'products_menu', it will automatically become a drop down menu for that link! I know that sounds like it has to be more difficult than that - but it's really that easy. So check out the tutorial (coming soon).

This is exactly what was generated by psd2css Online from this .psd file plus some lorem ipsum thrown in for the text layers:

Here is another example:

back to top...

Unlimited Feature
'_hmenu' - Hover Menus

This feature works exactly like the '_menu' Layer Naming Convention except that your user won't have to click on the '_link' or '_linkover' to get this menu to open. Instead just hoving the mouse over the '_linkover' will cause the menu to open. It's a different feel for your user and with both '_menu' and '_hmenu', you have the option without having to write any custom code.

Here's an example and the PSD file used to make it:

back to top...

Unlimited Feature
'_inputpassword' for Passwords in Forms

In addition to the '_inputtext' option for making forms, you can also use the Layer Naming Conventions '_inputpassword' to generate password fields in your forms. Password fields are just like text fields except that when your user types the password in, the letters typed are not visible (most browsers put asterisks instead of the letters).

back to top...

Unlimited Feature
'_empty' for layers with no images

This is a pretty simple one. If you want a layer to have no image in it then you can specify '_empty' in the layer name in your PSD file. You might do this for a number of reasons. One good reason is to create a bounding region for some '_relative' layers. Make your '_empty' layer larger and behind your '_relative' layers and the '_relative' layers will render inside the larger '_empty' layer. See the tutorial on Dynamic Text for an example. Another good use might be for a '_form' layer.

back to top...

Unlimited Feature
'_basename' Change the root portion of layer and image names

This one is very useful for the power users. First I'll describe the problem that it solves, then describe how to use the powerful '_basename' Layer Naming Convention to solve the problem.

By default psd2css Online generates layers in the CSS named 'Layer-#' where the number is incremented for every layer. The PNG or JPG files that are generated are named the same. This works great, you don't have to do anything - it happens automatically, and ensures that there are no naming collisions within a single web page.

But that is where the problem can happen. There are a number of ways that you might want to mix or use more than one psd2css Online generated web page together. For example you might want to use psd2css Online to generate just a portion of a page that you intend to manually cut and paste into another (a menu system for example). Or if you're making a set of pages that work together to make a template you can have the same problem. As soon as you mix 2 psd2css Online generated pages together you get 2 'Layer-1' CSS layers and 2 Layer-1.png files. That's bad. Of course you can manually rename all the layers and images from one of the files, but that is exactly the kind of work psd2css Online is here to to do for you.

The solution is the '_basename' Layer Naming Convention. Just put the characters '_basename' in any of your layer names in your PSD file and the first part of that layer name will become the Base Layer Name for all layers and images in the files generated for you by psd2css Online. For example: if you name one layer in your PSD file 'menusection_basename', then every CSS layer generated will no longer be generated as 'Layer-#', they will all be generated 'menusection-#' instead. And all the PNG and JPG files will be named 'menusection-#.png' or menusection-#.jpg' accordingly as well.

Now you can merge together as many psd2css Online generated pages as you would like. Even cut the CSS section out of the HTML files and generate a separate CSS description page for all your HTML pages to share. That is some power.

back to top...

Unlimited Feature
'_tooltip' Define a tool tip layer and make it dynamic for your text

Now you can design your own tool tip container with psd2css Online too. Just create a layer in your PSD file with the letters '_tooltip' somewhere in the name. You probably want to create a '_text' area somwhere inside the tooltip layer. Then just wrap any text you add to your page with a < span > with a class of 'tooltip' and a title of whatever text you want to show up in the tool tip. It's that easy.

Here is an example:

You can even use them to span entire DIVs to make Image Hotspots:

back to top...

Unlimited Feature
'_floatleft' and '_floatright' Let your text wrap around your images or layers

Sometimes you might like to define a small layer or image that you want to sit inside your text area. Maybe an image to go along with a story, or some advertising you want to be visible near where your reader's attention is. You might want the text to 'wrap around' the image. This is done in CSS with floating div definitions. But with psd2css Online all you need to do is draw it, and name it with a '_floatleft' or '_floatright' in the layer name. Make sure to put your floating layer inside the text space you define in Photoshop, then just name it right and that's it - you have text wrapping around your images.

Here's a tutorial...

back to top...

Unlimited Feature
'_scrollcontent' and '_scrollframe' Scrolling content without writing any code

This is another dynamic content feature of psd2css Online that you can use without writing any code. With this feature you can create content that scrolls across, up, or down the screen. You can include almost anything in the scrolling content that you would like, links, images, or text. You can scroll a big region or a very small region - you just draw it in photoshop (not image rollovers yet though).

To make this feature work you need to define 2 special layers named with these Layer Naming Conventions: the '_scrollcontent' layer and the '_scrollframe' layer.

The '_scrollcontent' layer is the content that you want to have scroll. You can use the psd2css Online notion of 'insideness' to put all sorts of art and text within the '_scrollcontent' layer to be scrolled (see the demo). The '_scrollframe' layer defines the space in which the '_scrollcontent' scrolls. The '_scrollframe' will serve as a mask for the '_scrollcontent'. You make them a pair by naming them with the same root or first part of the name. For example you might make a layer called banner_scrollcontent that you want to scroll within another layer you name banner_scrollframe. The 'banner' part of those names is what binds them together.

You can vary the speed and direction of the scroll too by following some simple instructions that are generated right in the HTML code for you in the comments. See the video tutorial for a hands on demonstration of how '_scrollcontent' and '_scrollframe' work.

Here's the tutorial...

back to top...

Unlimited Feature
'_close' Allow your users to close content or layers on your page

Suppose you have an element of your page that you would like to allow your users to close or make disappear in a nice animated fashion. Use the '_close' feature. A good example might be the 'X' button at the upper right hand corner of a window. Put a layer inside the layer that you would like to make closeable and name that layer something with the letters '_close' in it. When you convert that PSD file with psd2css Online, you will automatically get code generated that will make that _close layer behave as a button to close whatever layer it is inside (it's parent).

Here's an example...


Here's a tutorial...


back to top...

Unlimited Feature
'_lbthumb' Create a dynamic full page image gallery or slide show with no coding

The '_lbthumb' feature in psd2css Online uses the jQuery Lightbox plugin to give you dynamic, full page image viewing. jQuery Lightbox is a plugin to jQuery authored by Leandro Vieira Pinho and is available here. But to use the plugin with psd2css Online, you won't have to download any scripts or write any code, you simply make the thumbnail images in your PSD page design and name them with the '_lbthumb' Layer Naming Convention.

For this Layer Naming Convention to work, not only do you need to add '_lbthumb' to the layer name of the thumbnail image, but the first part of the name must match a JPEG image file that you already have in the same folder as your index.html, PNG and JPG files and scripts.

For example: suppose you have a large image called sunset.jpg that you would like to view from your webpage using the '_lbthumb' feature of pds2css Online. You would make a thumbnail version of that image and add it to your page design and name it 'sunset_lbthumb'. The '_lbthumb' part of the name tells psd2css Online that this is a thumbnail image. The 'sunset' part of the name tells psd2css Online that this thumbnail is for your sunset.jpg image. You can have as many '_lbthumb' thumbnail images on your page as you would like - they will all be treated as part of the same set of images that you can traverse forward and backward through.

This is another feature that is best explained with examples and a tutorial. Look at the examples, make sure to look at the PSD files, and watch the tutorial.


Click here for the Video Tutorial

To help illustrate, here is the listing of files in the folder that this example is served from:


From that list of files you can see the index.html, the PNG files, the .js, .css and .gif files that psd2css Online generated and provided from the conversion. You also see a number of .jpg files (bigsur.jpg, guitar.jpg, etc.). Those are the large images that I wanted to have displayed in my image gallery. These full size images were not added to the PSD file, however I did make thumbnails for each in the PSD file that match by name. For example there is a thumbnail layer in the PSD file named 'bigsur_lbthumb' that goes with the bigsur.jpg file, a thumbnail layer called 'guitar_lbthumb' that goes along with the guitar.jpg file, etc.

BEWARE! - some of the very 'helpful' operating systems will by default hide extensions it knows about - like JPG. Be sure you don't add the '.jpg' to your big images accidentally making them 'sunset.jpg.jpg' or 'wavehouse.jpg.jpg'

back to top...

Unlimited Feature
'_comments' - Create a professional robust Comment system for your users

The people at JS-Kit have built an amazing javascript and CSS based commenting system that you can drop into your web page in seconds. With psd2css Online, you don't even have to write any code. Just draw the area in your PSD file where you want the comments to show up, and name that layer with the '_comments' Layer Naming Convention. That's all you have to do. You'll have functional professional comments immediately. The JS-Kit system uses where your page is hosted from so don't put any important comments on that page until it's hosted in it's final location. If you want to get a little dirty the fine people over at JS-Kit offer SO MUCH customization for the comment system it's incredible. Visit their site for information on all the customization and moderation options:


back to top...

Unlimited Feature
'_twitter' - Add a live Twitter feed to your web page

Twitter is the king of micro-blogging and social networking. Now you can let your users know exactly what your doing, where you are, or what's new with your product line instantly from anywhere in the world. Use any of the myriad of ways you can make a tweet on Twitter and your webpage will update automatically. Add the incredible communication tool to your page by simply drawing a box in your PSD design where you want the Twitter feed to be displayed, and name the layer with your Twitter user name and the '_twitter' Layer Naming Convention. For example, my Twitter name is ShaunMcI so I just make a layer called 'ShaunMcI_twitter' and I get a fully functional CSS/XHTML compliant live Twitter feed generated on my page.


back to top...

Unlimited Feature
'_bodybg' - You can add a background to your whole page no matter how wide the browser window

Until now, you have been able to make what amounts to a background to your page, but it was always only exactly as wide as your PSD design. Now if you add a layer with '_bodybg' in the layer name, the image in that layer will be treated as a background to the entire page no matter how wide the browser window is made. By default the texture will repeat vertically and horizontally. You can use smaller textures to make a repeating background pattern or a solid background color, or larger textures for other effects. See the example to see how a very narrow, but very tall '_bodybg' layer can be used to fill your page.


back to top...

Unlimited Feature
'_page' - Make Multiple Connected Pages from a Single PSD File

Most websites have more than one page. Usually the multiple pages will share art, links, a menu and maybe more. What differs is the content of each page. Now you can make all of the pages for your entire website and have them all linked together for you from one PSD design by using the '_page' Layer Naming Convention.

Here is how you use it: Make a PSD file that is the design of your website. Also create page content layers in that PSD file that are each intended to be the content for each of pages that you want to create. For example, suppose you want to have 3 pages: an index page (your main or home page), a products page and a contacts page. You would make your one PSD design, and create 3 special layers in the one PSD file - one would be calld 'index_page' another would be 'products_page' and another 'contacts_page'. These '_page' layers should be the same size and fit right over the top of one another - only one will be visible at a time.

When you run this PSD file through psd2css Online, 3 separate HTML files will be generated: index.html, products.html and contacts.html. They will each include all of the layers that AREN'T '_page' layers, and the one '_page' layer that matches the name of the file. Each .html file will reference the same CSS file as well.

This works especially well with the new functionality to the '_link' and '_linkover' Layer Naming Conventions. The '_link' and '_linkover' features now automatically fill in the href tag for the links with an HTML file that matches the name of the link layer. So a link called 'contacts_link' will automatically get an href link to contacts.html. This means that for the example above that created an index.html, a products.html and a contacts.html file, you could build a menu with an index_link, a products_link and a contacts_link and all of your generated pages will be connected automatically through your menu.

A video tutorial is coming soon...


back to top...

Unlimited Feature
'_color' - Set the color of your _text layers in Photoshop or Gimp

When you define a '_text' layer in your Photoshop file for conversion to a text layer, psd2css Online generates some CSS to initially define your text for you. By default the text is made bright red - so you can find it in your page easily and customize it.

But if while designing your page you know what color you want that text to be you can tell psd2css Online to generate the correct CSS color attribute then by using the '_#color' layer naming convention. When you use it, you don't actually put the letters 'color' in the layer name, instead you put the CSS color definition there instead. So for example, if you have defined some content text layer and you want the text to be black, you might name that layer 'content_text_#000000'. You can use the 3 character shortcut for color definition too - so a layer for perfectly blue text might be called 'info_text_#00F'.


back to top...

Unlimited Feature
'_drupal' - Create a Drupal Theme

psd2css Online is capable of generating a Drupal version 6.x Theme from a Photoshop or GIMP PSD file.

Drupal is a popular themeable CMS (Content Management System) with lots of default functionality including the ability to let your users create accounts and log in to your website. There are thousands of modules that you can download and add to your Drupal installation as well. Drupal and most of it's modules are open source.

A Theme is the art and style of your Drupal website. The content is generated and rendered into each page by Drupal, but the Theme is what each page will look like - it's the look and feel of your website. The Theme controls where the content will show up, and what style it will take.

There are a number of features in psd2css Online to help you make a Drupal Theme of your own design. All of the features for making Drupal themes rely on the '_drupal' Layer Naming Convention in psd2css Online.

The basic work flow for generating a Drupal Theme using psd2css Online is as follows:

* You design your theme in Photoshop or GIMP
* You specify in your theme specific regions for Drupal to fill in.
* You save the PSD file and upload it to psd2css Online for conversion.
* Less than a minute later you are presented with a link to a zip file - this zip file contains all the files in the appropriate folders that are your new theme.
* You copy (usually via FTP) the theme folder into an existing Drupal installation you already have running.
* You log into your Drupal install as the administrator, then enable and make current your new theme.

After that you can continue to customize and maintain your Drupal website.

NOTE!! - The drupal content will _REPLACE_ the _drupal layers. If you have art that is to be the background and/or border around your content you need another layer in PS for that. Don't put art that you want to see on the page in a layer named with the _drupal Layer Naming Convention.


The primary thing you need to do in your Photoshop design is designate regions for Drupal to fill in with content. There are some default regions that Drupal comes with that are filled in with some information by default.

The default regions for Drupal 6.x are: content, left, right, footer, and header. Additionally there are menus that can be placed via psd2css Online as well called primarylinks and secondarylinks. To designate a region in your design you simply make a new layer for the region, and name that layer with the region and _drupal. So the left column region would be a layer named 'left_drupal'. The main content region would be named 'content_drupal'. That's it. That's the whole trick. But one word of note: those names are case sensitive - so Content_drupal won't work - it has to be content_drupal for the default content region for example.

If your just getting started with Drupal, it's a VERY good idea to make a theme with at least a left_drupal layer (tall and narrowish), and a content_drupal (much wider - most of the page). If you don't make these regions at least, you won't have access to anything - including your administration tools - while your theme is current. Note: If you do accidentally install a theme that doesn't allow you access your own administration tools, just delete the theme from the sites/all/themes folder and refresh your browser.

Custom Regions

Beyond the standard regions that come with Drupal, you can designate new regions simply by making up names for them. 'mysearch_drupal' will generate all the code for a new region called 'mysearch'. The new region will show up in the Drupal administration as one that blocks can be placed into.

Per Page Custom Themes

Drupal allows you to define custom theme page designs to be used only by specific pages. Suppose you want a page that has very little or no content to be the Landing Page for your visitors. You can use the Drupal content management system to define a new Page for that and tell Drupal that is the page to be displayed when people first visit the site. Suppose after you make that page you find that it is called /node/1. The psd2css Online '_page' Layer Naming Convention has been extended to work with the Drupal custom page capabilities. Just make a layer called 'page-node-1_page' and that layer will be the special design just for your Landing Page.

Check for upcoming examples and tutorials for more information.

back to top...

Unlimited Feature
'_joomla' - Create a Joomla Theme

You can have Joomla templates made from your PSD files too. The idea and process is almost identical to Drupal (described above). Use _joomla as the naming convention instead and psd2css Online will generate the folder structure and all necessary files for a complete Joomla template.

The only differences are these:

  • You can only make these regions. Use these layer names in your PSD file to define the size and position of these regions:
    • content_joomla - this is the most important one. This is where most of the regular Joomla content gets rendered by default.
    • breadcrumb_joomla
    • left_joomla
    • right_joomla
    • top_joomla
    • user1_joomla
    • user2_joomla
    • user3_joomla
    • user4_joomla
    • footer_joomla
    • debug_joomla
    • syndicate_joomla
  • There is no Custom Regions feature for Joomla like there is for Drupal (yet)
  • There is no special per page option like there is for Drupal either

The Joomla feature has been tested with Joomla 1.5.8.

NOTE!! - just like for Drupal and WordPress, the _joomla layers will be _REPLACED_ with the Joomla content. They are just markers for where the content is to show up. If you have art (background images, color, borders, etc.) for your content, do NOT put that in the _joomla layer - instead make another layer in PS just for that art and place it behind the _joomla content.

back to top...

Unlimited Feature
'_wordpress' - Create a WordPress Theme

Now you can make WordPress themes too! It works exactly like Drupal and Joomla above except that there are currently only 2 regions available. The 2 regions that work for WordPress are:

  • content_wordpress
  • sidebar_wordpress

Design regions in your PSD design as a layer for the main content of your WordPress website and name that layer content_wordpress. Similarly, design a region for the sidebar as a layer and name that layer sidebar_wordpress. psd2css Online will _replace_ those layers with the content generated by WordPress.

Check out this posting for a video tutorial:

back to top...

Unlimited Feature
'_footer' - Sticky Footers for your web pages

Make a layer stay 'fixed' relative to the bottom of the browser by using the _footer Layer Naming Convention. Suppose you have a footer that you want to always be visible at the bottom of the browser window no matter what the user does on that page. Whether they scroll, or resize the browser - you want this footer to stay visible all the time. An example would be the bar across the bottom of most Facebook pages.

One caveat however: Centering. Quite often (more often than not), you'll want your whole page to center in the browser. As you may know, you can get that to happen by making one big background layer (it can even be named with _empty) to serve as a 'container' for your page and name it with the _center Layer Naming Convention. One _center layer with everything else inside it will make a web page that centers in the browser ..... _except_ the _footer layers. This is the one exception. Don't worry, you can get the _footer layer to center too, but you have to give it it's own _center in it's layer name. This is the only situation where you need to use _center more than once for the entire page. The tutorial below has an example of this issue.

back to top...

Unlimited Feature
'_vlist1' - CSS Stylized Menus

This feature will generate all the code and even some example data for CSS Stylized Text based lists. Use these for Navigation menus or menus of any kind. Name your layer with _vlist1 and get a blue vertical navigation menu in blue with light blue hover effects for each item. Example data is already there so all you have to do after you've converted the PSD to HTML/CSS is edit the HTML file with a text editor so the href tags point to where you want, and the list elements have the text you want in them. You can even name the layer with the _menu or _hmenu features too and have the CSS menu behave like a drop down or fly out menu.

Take a look at the video tutorial to see how it works:

back to top...

Unlimited Feature
'_frame' - An Expanding Frame for your Content

All of the previous techniques for building a page or template that expands with your content are no longer needed. Now it's as simple as naming your 'frame' layer with the _frame Layer Naming Convention and putting your content inside. Yep, that's all there is to it. Gone are the days of designing a bunch of layers, taking great care that this is inside of that and this is on top of that and editing CSS by hand afterwards.

Just design the frame - the graphics that you want your content to fit wihin. This will include what's above, below, left and right of your content. Make that one layer in your Photoshop file and name it with the _frame Layer Naming Convention. Then make another layer for your content. You can use any of the existing psd2css Online content Layer Naming Conventions (_text, _drupal, Joomla, or _wordpress). Make the content fit within the frame (that only makes sense, right?).

You can even add other psd2css Online layers inside the frame too - they will stay fixed relative to the bottom of the frame - so for example if you want some _lbthumb images or a button, or some text based links to stay in a 'footer' under your content, just draw it in under the content but within the _frame in Photoshop and it will work. Take a look at the video for an example - there is a button in the _frame that stays under the content no matter how much content there is.

Take a look at the video tutorial:

back to top...

Unlimited Feature
'_center2' - Another way to center your content

Here is another way to center your page in the browser. Choose or create a large layer that is behind and encompasses all of the other layers in your PSD design. Name that layer with the _center2 Layer Naming Convention. Then once you convert the page to code, your entire page will be centered in the browser. You only need the one _center2 layer, but all of the other layers do need to be 'inside' it. This feature works identically to _center but uses a different method to do the centering. There is one major difference in the behavior of the centered page as well: with _center2, the left edge of your page will always be visible. That is, if you resize your browser so that it is narrower than the page design, the left edge of the design will stay locked at the left edge of the browser. This isn't how _center behaves. The older _center feature will center your design in the browser regardless of width of the browser. And so when the browser is narrower than the design, the left edge of your design will be clipped out of view in order to preserve the 'centered' content.

back to top...

Unlimited Feature
'_fbshare' - A Customer Facebook Share Button

Using the tools that Facebook provides for you to share your website and to get more people engaged with your website is a no brainer. It's a fantastic way to keep users and to bring new users to your site. But using Facebook Connect isn't always that easy. But with psd2css Online you have a very simple way to add a Facebook Share Button to your site. Just draw the button any way you want it to look with Photoshop, and name that layer with the _fbshare Layer Naming Convention. That's it. When you convert that PSD design to code, the art in that layer will become a button. That button will give your visitors the ability to share your web page in their Facebook stream just by clicking the button.

back to top...

Unlimited Feature
'_video, _play, _pause, and _rewind' - Build your own Custom Flash Video Player

For this feature, there are 4 new Layer Naming Conventions. The most important is _video. Draw a rectangle somewhere in your web page design for the actual video and name that layer with the _video Layer Naming Convention. So 'myvid_video' for example. Really that's all you need to do. But if you want your users to be able to pause, rewind or play your video again, then you'll want controls too. Just draw the controls and name them with the _play, _pause or _rewind Layer Naming Conventions. Make sure the first part of the _video layer name matches the first part of the _play, _pause and _rewind layer names. So for our example if you had a myvid_video layer, then the controls for it would be myvid_play and myvid_rewind, etc.

As with most psd2css Online features you can mix and match too. So if you want a mouse over effect for your controls just use the _link and _linkover features as well. So for the example above you might have a myvid_play_link and myvid_play_linkover pair that work as the 'play' button for your video.

The video file itself has to be a Flash FLV video file. That is the standard format that Adobe Flash videos are in. The name of the FLV file needs to match what you used in the layer name. For our example above, the layer we called myvid_video will get code generated that will play a video file called myvid.flv. We supply a place holder video that is already named correctly in the page we host for you and in the zip file with all the other generated code. You'll certainly want to replace that FLV file with your own.

Converting pretty much any other video file to FLV is very simple anymore. There are lots of online tools that you can use for free to convert all sorts of video formatted files to FLV. Just google 'convert FLV online' or something. There are open source tools that you can download and use too. mencoder and ffmpeg are very good and have tons of options. There are lots of GUI conversion tools made from them as well. Of course Adobe Flash comes with a utility to convert any video file to FLV.

back to top...

Unlimited Feature
'_slidepane, _slidecontainer, _slideright and _slideleft' - A Cool Content Slider

This is a javascript widget where you design a number 'panes' of content and a container for the panes. What psd2css Online will generate for you is a bunch of javascript that makes one or some of the panes visible within the slide container (as many as will fit will be made visible). The javascript by default is set to rotate through to the next pane every 5 seconds in a nice smooth animated way. You can click on a visible pane to trigger the rotation too instead of waiting the 5 seconds. You can also draw buttons to make the panes scroll left or right. All of this is available by just drawing it in Photoshop and naming the layers correctly.

The Layer Naming Conventions used for this feature are:

  • _slidepane - Design at least 2 of these. Design as many as you want, but if you only make one, well, then you really don't need the slider :)
  • _slidecontainer - Put all your _slidepanes in here.
  • _slideleft - (optional) You don't have to have one of these, but it's cool to allow your user to be able to scroll or page through your content by just clicking on this button.
  • _slideright - (optional) Same thing, just the other way.
  • PLEASE NOTE THE _slidepane HAS TO BE THE SAME EXACT SIZE AS THE _slidecontainer
    If you have bleeding from one slide to the next a _slidepane size is off.

You also can put other psd2css content inside the panes. _text and images work great. _video works too. But some of the other javascript heavy psd2css Online features might not work so well so I'd say just try it and see what works for you.

Check the video tutorial for this one. It's cool to watch, and so much more explanitory than this documentation.

back to top...

Unlimited Features
'_fblike, _fbcomments, _fbrecommendations' - Some of the new Facebook Social Plugins

Facebook has created a whole new set of Social Plugins for people to add to their websites and we've got them covered. The new Social Plugins are awesome. When people visit your site, if your visitor is a Facebook user and has logged in to FB recently, the plugin knows this and shows your visitor his friends who have visited your site and liked it or commented. Also, when they comment on or like your site, it will show up in their feed back on the Facebook site for all their friends to see.

So far we have 3 of the Social Plugins covered. You can add a Facebook Comments box, a Facebook Like button or a Facebook Recommendations box to your website. Just like any other psd2css Online feature you just draw a box where you want the plugin to show up and name the layer with the correct Layer Naming Convention. Here are the 3 we have so far:

  • _fbcomments - Facebook Comments. with a Like button built in.
  • _fblike - Facebook Like button. When your users visit your site, they will see all their friends who liked your site
    too. And when they click 'Like', your site will automatically get shared back to their Facebook.
  • _fbrecommendations - Facebook Recommendations. The Recommendations plugin gives users personalized suggestions for p
    ages on your site they might like.

You can get more information on what these plugins are at the Facebook Developer Website. Info on the Social Plugins specifically is here.

back to top...

Mixing Naming Conventions

This is so cool. Suppose you want a layer to use the background-image part of the CSS definition AND be converted to a jpg for you. No problem. Name your layer with both the '_bkgnd' and '_jpg' keywords in the name. For example a layer named 'rednoise_bkgnd_jpg'. That's it. psd2css Online will generate a JPG instead of a PNG and define it as a background-image instead of a regular img tag.

back to top...

Some More Examples

Clean the Beach -
This is what psd2css online generates from the beach.psd file at the link. There has been no editing after conversion. This example uses the _jpg, the _text, the _link, the _linkover, and the _center Layer Naming Conventions:

A Simple Template - Another example with some Lorem Ipsum text thrown in:

back to top...

The Dev Log

Things are getting better here all the time. Check the Developers Log for the very latest features and updates.


copyright (c) 2009 psd2css Online, Inc.



User login

Become a Fan of our Facebook Page

Need help or have a question?

| Privacy | Terms of Use |

copyright (c) 2008, 2009, 2010, 2011 psd2css Online, Inc.
Patent Pending

Syndicate content