Table of Contents:

• What's in a name?
• '_text' - Text Sections
• '_form', '_inputtext', and '_submit' - Auto-generated Forms
• '_jpg' - JPG Image,
• '_link' - Links
• '_linkover' - Roll Overs to go with your links
• '_center' - Centered CSS elements - even your whole page
• '_bkgnd' - CSS background-image
• '_relative' - Relative Position for CSS Layers
• '_fixed' - Fixed Position for CSS Layers
• Beta Features
• '_menu' - Animated Menus of any kind
• '_inputpassword' - Password Fields for your Forms
• '_empty' - Just an empty layer
• '_basename' - Change the root name of layers and images
• '_tooltip' - Floating Custom Tool Tips for your text!
• '_floatleft' and '_floatright' - Let text wrap around your layers
• Mixing Naming Conventions
• More Examples
• The Dev Log

 

Layer Naming Conventions - What's in a name?

So maybe you've been using psd2css Online now for a couple of projects and things are going great. But now you'd like to make a block of html text, or change one of those images from .png to .jpg, or make one of those cool image rollovers. Well psd2css Online will do that for you too! 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.

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...

'_form', '_inputtext', 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'.

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:
http://psd2cssonline.com/tutorials/forms/Form.psd
http://psd2cssonline.com/tutorials/forms/index.php

Click here to see the video tutorial

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 webpages, 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. You will have to edit the html file manually to put the URL in, but you get a pretty good head start on the process. See the tutorial called 'Links' to see it in action.

back to top...

'_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.

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. Some folks have asked if they could have their art centered in the browser - now you can! Now 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 actually more useful than you might think - here's why:

It's time to explain something that hasn't really been mentioned much anywhere else in the documentation for psd2css Online.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 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?

As always, there will be an example that illustrates this so much better than I can explain it up soon. Check back!

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...

'_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:
http://psd2cssonline.com/tutorials/grow/index.html
http://psd2cssonline.com/tutorials/grow/grow.psd

back to top...

'_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:
http://psd2cssonline.com/tutorials/fixed/index.html

back to top...

Beta Features

Beta Features are only available to registered users! Beta Features are features that are new to psd2css Online. They haven't undergone enough testing to be considered 'release', but they have completed my test suite before going Beta. When you log in as a registered user, you automatically get to use the beta version of psd2css Online with all the beta features active. Features that are still in beta are noted here in the documentation. This way, if one of the new features doesn't do what you expect, you already have an account and can leave me a note in the Support area of the forum.

If you want to use the older version without the beta 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 older version of the tool.

back to top...

Beta 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:
http://psd2cssonline.com/tutorials/menu/index.html
http://psd2cssonline.com/tutorials/menu/T2.psd

Here is another example:
http://psd2cssonline.com/tutorials/menu2/index.html

Note! - This feature is in Beta and you must be registered to use it. Registration and use of psd2css Online is and will always be free.

back to top...

Beta 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...

Beta 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...

Beta 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...

Beta 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:
http://psd2cssonline.com/tutorials/tooltips/index.html

back to top...

Beta 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...

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:
http://psd2cssonline.com/tutorials/beach/index.html
http://psd2cssonline.com/tutorials/beach/beach.psd

A Simple Template - Another example with some Lorem Ipsum text thrown in:
http://psd2cssonline.com/tutorials/template/index.html
http://psd2cssonline.com/tutorials/template/Template01.psd

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.