Layer 4 copy
doc
tut
blog
forum
doc
tut
blog
forum
home

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

More Control By Naming Your Layers

Table of Contents:

 

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', '_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:
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 for 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

You can even use them to span entire DIVs to make Image Hotspots:
http://psd2cssonline.com/node/100

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

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

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

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

Example:
http://psd2cssonline.com/tutorials/lightbox/index.html
http://psd2cssonline.com/tutorials/lightbox/lightbox.psd

Click here for the Video Tutorial

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

index.html
jquery.js
jquery.lightbox-0.5.css
jquery.lightbox-0.5.js
lightbox.psd
close.gif
loading.gif
next.gif
prev.gif
Layer-1.jpg
Layer-2.png
Layer-3.png
Layer-4.png
Layer-5.png
Layer-6.png
Layer-7.png
Layer-8.png
Layer-9.png
Layer-10.png
Layer-11.png
Layer-12.png
Layer-13.png
bigsur.jpg
flamingos.jpg
guitar.jpg
palomar.jpg
panda.jpg
porter.jpg
redtree.jpg
sealions.jpg
sunset.jpg
ucsc.jpg
wavehouse.jpg

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

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

http://js-kit.com/comments

Example:
http://psd2cssonline.com/tutorials/comments/index.html
http://psd2cssonline.com/tutorials/comments/comments.psd

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.

 

FYI: _menu and Firefox

Hi, Shaun

The _menu drop-down/ flyouts aren't showing up on Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8

drop down menu form

hi shaun. great job with the site. I just have a question regarding drop down menus in the _form layer name. so how exactly would i do that?

joomla

Hi, I tried to use layers for joomla but unsuccessful. Check this site and you will see problem (<a href="http://www.trusteddatingsites.com">dating site review</a>). So my question, where I can find tips how to use it for joomla.

Thanks a lot...

More Control by Naming Your Layers post is too much appreciable post of all. You have done such a great effort in this article. Thanks a lot sharing this information. <a href="http://www.exact-exams.com/Security-Plus-Certification.html">security+ certification</a>

copyright (c) 2009 psd2css Online, Inc.

 

 

User login

Become a Fan of our Facebook Page

Need help or have a question?
support@psd2cssonline.com

| Privacy | Terms of Use |

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

Syndicate content