Question

Is it possible to convert Elements I created with Photoshop.

f.e. If I created a “skin” for a button in Photoshop without any Text in it. Could I convert it to CSS so that I can add a Text and adjust the Button’s height/width later when adding the button to the HTML?

If it is possible, how?

Thanks in advance!

Answer 1

there are a lot of tutorials that will teach you to slice photoshop to html & css

http://net.tutsplus.com/tutorials/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/
http://net.tutsplus.com/articles/news/photoshop-to-html-upcoming-ebook-from-nettuts-and-rockable/

but to answer your question. It all depends the button you designed. But for the standards wone you will have to copy the background of your button into a new document and save as a png or jpg (make sure to slice a 1 or 3px image that can be repeated)

and then with some css3 magic you can style your button and make sure it fits the content of your button.

eg:

input[type="text"]
{
   /*add rounded corners*/
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   border-radius:5px;
   background:#000 url('../images/button-background.jpg') repeat-x top left;
   paddng:3px 6px;
   margin:2px 0;
}

the url to the background should point to the image and best add a matching background color when the button is to big