Photoshop: export psd to html/css
Solved
Anonymous user
-
malikalalmas -
malikalalmas -
Hello,
how can we export a PSD file to HTML and CSS while working with Photoshop CS4 or export it to Adobe Dreamweaver CS4?
--
~~~~~>>>MaximE<<<~~~~~
PeX 0.5 on May 20, 2009
how can we export a PSD file to HTML and CSS while working with Photoshop CS4 or export it to Adobe Dreamweaver CS4?
--
~~~~~>>>MaximE<<<~~~~~
PeX 0.5 on May 20, 2009
Configuration: Windows XP Firefox 3.0.7
6 réponses
Hi.
Well, with Photoshop you can export your design as HTML so that you can then code "on top of it", and this design will serve as a sort of background for your website.
To export this design, you first need to slice it. You use the slice tool, etc.
Next, to export it, you can choose either in the form of a table or as a
Well, with Photoshop you can export your design as HTML so that you can then code "on top of it", and this design will serve as a sort of background for your website.
To export this design, you first need to slice it. You use the slice tool, etc.
Next, to export it, you can choose either in the form of a table or as a
and CSS.
1/ Open your PSD file with Photoshop
2/ Go to File/Save for Web
3/ In the new window that opens, on the far right, below the three buttons "Save, Cancel, Done", you have a settings field. (it's a dropdown list).
To the right of this dropdown list, there is a small double arrow, like this >>
Click on it, and then choose "Edit Output Settings"
4/ Below the settings dropdown list, there is another dropdown list, in which you choose "Slices".
5/ In the "Slice Output" section, you click on the radio button "Generate CSS"
Then, you have 3 choices for the dropdown list "Reference".
If you choose "by ID", your HTML page will look like this:
<head>
<style>
#banner{
height:776px;
.......
}
</style>
</head>
<body>
<div id="banner">
your banner image...
</div>
</body>
On the other hand, if you choose "by Insertion", your page will look like this:
<head>
</head>
<body>
<div style="height:776px; ...">
your banner image..
</div>
</body>
And "by category", I don't remember but you can test, bye!
1/ Open your PSD file with Photoshop
2/ Go to File/Save for Web
3/ In the new window that opens, on the far right, below the three buttons "Save, Cancel, Done", you have a settings field. (it's a dropdown list).
To the right of this dropdown list, there is a small double arrow, like this >>
Click on it, and then choose "Edit Output Settings"
4/ Below the settings dropdown list, there is another dropdown list, in which you choose "Slices".
5/ In the "Slice Output" section, you click on the radio button "Generate CSS"
Then, you have 3 choices for the dropdown list "Reference".
If you choose "by ID", your HTML page will look like this:
<head>
<style>
#banner{
height:776px;
.......
}
</style>
</head>
<body>
<div id="banner">
your banner image...
</div>
</body>
On the other hand, if you choose "by Insertion", your page will look like this:
<head>
</head>
<body>
<div style="height:776px; ...">
your banner image..
</div>
</body>
And "by category", I don't remember but you can test, bye!
mehdi
Thanks bro
Simo
Thank you for the info :)
