Example of Customizing the Generated Code from psd2css Online
This is an example of a simple PSD design, converted to CSS/XHTML using some of the older features at psd2css Online but modified a little by hand to get even nicer functionality. Below you can find the original PSD and a link to the video explaination of the changes made by hand and the effects they offer.
The goal for this example is to make a cool Feedback button and form for my users to let me know what they think. The default psd2css Online features we use in this example are: _center, _form, _fixed, _link, _inputtext, _textarea, _submit, and _close. Added by hand are jQuery fadeIn and fadeOut animations, jQuery AJAX form submission and a couple of other minor modifications.
Here is the PSD file we started with: feedback.psd
Check out the video to see all the modifications that I made: Video Link
Here is the actual tutorial on psd2css Online: Tutorial Link
psd2css Online
Dynamic Web Pages from your Photoshop Designs in Seconds.
psd2css Online converts your creative and artistic web page designs into dynamic XHTML and CSS web pages automatically. Use Photoshop or The Gimp to express yourself and create the most professional, aesthetically perfect, dynamic and functional designs you can think of.
Upload your Photoshop design, download your HTML file, javascript and images. It's that simple.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur gravida pellentesque lorem. Maecenas pede velit, euismod vel, placerat et, pretium a, justo. Etiam sit amet neque. Etiam tristique, mauris euismod fermentum posuere, lectus nibh sollicitudin mauris, eu rhoncus ligula massa a sem. Integer vitae augue viverra dolor dignissim mollis. Praesent nunc felis, placerat in, suscipit a, mattis sit amet, nisl. Curabitur tempor vulputate urna. Etiam eget dolor non justo auctor commodo. Nunc in dui eu pede tincidunt placerat. Aliquam mauris magna, varius et, imperdiet non, tincidunt id, tortor. Maecenas sapien orci, tempus ut, venenatis et, sollicitudin eu, massa. Quisque iaculis facilisis massa. Donec id pede. Fusce est orci, condimentum sit amet, molestie quis, blandit in, metus. Vestibulum mollis imperdiet eros.
Fusce lorem elit, hendrerit aliquet, iaculis at, molestie vitae, metus. Suspendisse ac ante. Fusce sed libero eu sem condimentum sodales. Quisque vel massa. Aenean a quam. Praesent id augue venenatis lorem adipiscing posuere. Nunc quis elit ac lorem consequat faucibus. Ut lorem justo, varius et, porttitor vitae, ullamcorper in, risus. Morbi facilisis eleifend nunc. Donec nisl risus, porttitor in, tristique nec, dignissim a, libero. Fusce viverra aliquam libero. Curabitur ornare. Sed sodales nibh eget elit. Maecenas aliquet. Curabitur porta sem eget purus. Donec suscipit ultrices ipsum. Nullam placerat. Nullam at enim vitae purus suscipit pulvinar. Sed aliquam, orci ut laoreet gravida, enim libero ultricies turpis, at pharetra diam nunc a lorem.
Maecenas sit amet elit vel lectus bibendum rhoncus. Aenean ac est at orci viverra congue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam ipsum erat, elementum quis, viverra in, tincidunt non, nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In iaculis dolor a tortor. Etiam aliquet hendrerit diam. Morbi at nisi ut massa ullamcorper ornare. Suspendisse potenti. Praesent molestie odio quis leo. Nulla facilisi. Sed fermentum lorem. Aenean mi eros, condimentum sit amet, faucibus sit amet, pellentesque quis, felis. In cursus, dolor at lobortis facilisis, ligula urna tincidunt nibh, ac aliquam metus neque sit amet nibh. Integer lectus erat, accumsan elementum, viverra vel, varius eget, lacus. Duis interdum. Donec viverra massa ut felis porttitor vehicula. Phasellus rhoncus aliquam urna. Quisque iaculis erat id massa. Quisque id magna sit amet ipsum tempor rutrum.
Sed augue. Duis id libero. In nisi est, mollis vel, lacinia sit amet, commodo at, pede. Proin nibh. Vivamus sagittis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam urna massa, gravida ac, pellentesque non, pretium ut, dolor. Cras semper fermentum lectus. Integer bibendum. Nunc sem odio, convallis sed, fermentum nec, pharetra sit amet, libero. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris malesuada nisi vitae erat. Etiam gravida semper enim. Integer et leo vel dui tempus ultrices.
Duis pulvinar, lacus tincidunt porta ornare, lectus tellus fringilla enim, in tempor magna arcu vitae purus. Nunc urna dolor, consectetuer in, tincidunt sit amet, fermentum et, lorem. Morbi iaculis, velit at accumsan convallis, pede risus viverra justo, et facilisis lorem purus porta neque. Nunc arcu nisi, dapibus ut, imperdiet eu, sollicitudin eget, lacus. Suspendisse nunc. Sed at felis eu tortor consectetuer placerat. Maecenas nec nunc. Etiam bibendum varius elit. Donec sodales dignissim sem. Morbi elit erat, imperdiet non, viverra quis, tincidunt a, ligula. Suspendisse non augue. In rutrum erat vel velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
