Photoshop to CSS [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focuses on one problem only by editing this post.

Closed 9 years ago.

Improve this question

Is it possible to convert Elements I created with Photos开发者_JAVA百科hop.

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!

---

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

---

What you're trying to do has many, many different solutions. Here are just a couple:

1. You could create the button using css3 only

warning: this solution will not work on older browsers without javascript plugins

html

<a href="http:/my.url.com/" class="button">Hello World</a>

css

.button {
    border:solid 2px white;
    -moz-border-radius:5px;
    border-radius:5px;
    -moz-box-shadow:5px 5px 5px black;
    box-shadow:5px 5px 5px black;
    padding:20px;
    background:lightgray;
    color:darkgray;
}

2. You could create the button using 2 images

photoshop:

create the image of the left side of the button.
make sure it's much longer than it needs to be.
the right end doesn't matter:
   ___________________________
  /
  |  button1.png        ...
  \___________________________

now create the right side of the button.
make sure it's very short, like below:
                    _____
                         \
   ...   button2.png     |
                    _____/

html

<a href="http:/my.url.com/" class="button">
    <span>Hello World</span>
</a>

css

.button {
    background: url(path/to/button1.png);
}

.button span{
    height: (height-of-button2.png);
    line-height: (height-of-button2.png);
    padding: 0 20px;
    background: url(path/to/button2.png) no-repeat right top;
}

These are just a couple variations.

EDIT: apologies. the above code was wrong. i fixed it just now.

---

No, it's not possible to convert directly from Photoshop Elements to a HTML and CSS version that scales. You need to either export the whole button as one big image (and use a separate image for each button), or construct the button yourself with CSS.

---

Sexybuttons - http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html would let to create a button in Photoshop and once you have built it in CSS it would adjust its width to whatever text you put in it, as for height...not sure.

---

It's not a good idea to use Photoshop for creating code. It creates god awful looking code. It's best to just slice and name your slices, save them to images and then write code by hand. Unfortunately it's a very manual process and bridging the gap between design and code isn't something humans have done well yet!