EntropySink
Technical & Scientific => Programming => Topic started by: Steve on October 27, 2009, 05:32:26 PM
-
I'm IN LOVE with this Photoshop plugin. Create a website as a psd (layers for each element), get it how you want, and with a few simple clicks of the mouse Site Grinder spits out all the images, css, etc that you need. It takes half the time to build a website that it ever has before, and can even handle flash.
It's fucking amazing and i suggest anyone that can use photoshop try it out.
-
heres a snippet example of the css code it spit out, and the index file. this is from a very basic tossed together psd file and just clicking the build button
#creativecollateralbutton {
background: url(acehtmlmedia/creativecollateralbutton.gif) no-repeat;
position: absolute;
left: 364px;
top: 604px;
z-index: 3;
width: 296px;
height: 150px;
}
#paymentplansbutton {
background: url(acehtmlmedia/paymentplansbutton.gif) no-repeat;
position: absolute;
left: 65px;
top: 604px;
z-index: 2;
width: 295px;
height: 150px;
}
#nomoneydownbutton {
background: url(acehtmlmedia/nomoneydownbutton.gif) no-repeat;
position: absolute;
left: 650px;
top: 604px;
z-index: 2;
width: 307px;
height: 164px;
}
#id17sidespades {
background: url(acehtmlmedia/id17sidespades.gif) no-repeat;
visibility: visible;
position: absolute;
left: 968px;
top: 348px;
z-index: 3;
width: 45px;
height: 383px;
}
#id16sidespades {
background: url(acehtmlmedia/id16sidespades.gif) no-repeat;
visibility: visible;
position: absolute;
left: 14px;
top: 341px;
z-index: 3;
width: 43px;
height: 384px;
}
#background {
margin: 0px auto 0px auto;
background: url(acehtmlmedia/background.gif) no-repeat;
visibility: visible;
height: 768px;
width: 1024px;
position: relative;
}
#shape1copy {
background: url(acehtmlmedia/shape1copy.gif) no-repeat;
position: absolute;
left: 0px;
top: 0px;
z-index: 2;
width: 1024px;
height: 396px;
}
#shape3 {
background: url(acehtmlmedia/shape3.gif) no-repeat;
position: absolute;
left: 65px;
top: 319px;
z-index: 3;
width: 891px;
height: 277px;
}
html, body {
padding: 0px;
margin: 0px;
background-color: #000000;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="generator" content="SiteGrinder 2 http://www.medialab.com/sitegrinder" />
<title>acehtml</title>
<link rel="stylesheet" type="text/css" media="screen, print, projection" href="acehtml.css"></link>
</head>
<body>
<div id="background">
<div id="shape1copy"></div>
<div id="shape3"></div>
<div id="id16sidespades"></div>
<div id="id17sidespades"></div>
<div id="paymentplansbutton"></div>
<div id="creativecollateralbutton"></div>
<div id="nomoneydownbutton"></div>
</div>
</body>
</html>