bk
_close

This whole page including the image gallery and this dialog (click on the polaroids!) were just drawn in Photoshop and converted to this page at psd2css Online. Here is the complete list of what I did manually after the conversion:

  • Replaced the example text here and for 'SF NewTech...' and added a little CSS style for the h1 tag
  • Set the href for the psd2css Online logo to point to http://psd2cssonline.com
  • Followed the directions in the psd2css.js file comments to stop this _menu from closing automatically (just comment out 2 lines)
  • Copied the big images for the polaroids (p1.jpg and p2.jpg) into this folder

That's it!! ALL of the rest of the code even for this dialog was generated based on the Photoshop drawing. psd2css Online uses hints you put in the layer names to decide what special code to write. They are called Layer Naming conventions. Here are the Layer Naming conventions I used while drawing this design: _frame, _menu, _lbthumb, _empty, _center2, _close, _text, and _# (color)

You can download the PSD file used here:
sfnewtech_100203.psd

about
home

SF NewTech    

Just a quick example of a simple site drawn in Photoshop and converted to code with psd2css Online. Read more about this page at the 'about how this page was made...' link below.

Check out the pics on the left too (click 'em), and thanks again Myles!