Sitegrinder Photoshop Plugin

Roo posted this at 02:55 — 20th August 2007.

Joined: Apr 1999

Okay, I spent the 129.00 for the basic plugin.
I created a very ugly design.

Here's the page that goes with the code below. Untouched, just as it was generated. Beware, it's fugly.

Here's a simple clean page that I tweaked and cleaned up...eveb chaged the doctype. Here.

So far:
Pros:
Easily create a standards compliant css layout from a layered Photoshop document. Creates rollovers, and can have a rollover display other images in other places on the page.

Cons:
If you are anal about the code and css you will spend a lot of time tweaking both. It merged all of my graphical elements into a huge background, and doesn't use it as a page background...it displays it in a div. Seems to use a lot of divs needlessly.Uses a lot of absolute positioning.

Take a look at the css and the code and you can see why the tweakage is needed. (If you are anal about it like me )

Here's The CSS as Sidegrinder outputs it:

a {
text-decoration: none;
color: #000000;
}

a ins {
text-decoration: none;
}

#booktexttext p,
#leftcontenttext p,
#rightcontenttext p {
font: bold 12px/14px Georgia;
margin: 0px;
text-align: left;
}

#flyingbutton a:hover,
#byfencebutton a:hover {
background-position: -100px 0%;
}

#byfencebutton a,
#flyingbutton a {
background-repeat: no-repeat;
display: block;
height: 100px;
width: 100px;
background-position: 0% 0px;
font-size: 100px;
line-height: 100px;
}

#flyingbutton,
#byfencebutton {
visibility: visible;
position: absolute;
top: 149px;
z-index: 2;
width: 100px;
height: 100px;
}

#flyingpopup,
#byfencepopup {
visibility: hidden;
position: absolute;
left: 469px;
top: 139px;
width: 330px;
height: 449px;
background-repeat: no-repeat;
}

#rightcontenttext {
visibility: visible;
position: absolute;
left: 440px;
top: 647px;
z-index: 2;
width: 388px;
}

#leftcontenttext {
visibility: visible;
position: absolute;
left: 33px;
top: 650px;
z-index: 2;
width: 388px;
}

#byfencebutton a {
background-image: url(gallerymedia/byfencebutton.jpg);
}

#flyingbutton a {
background-image: url(gallerymedia/flyingbutton.jpg);
}

#byfencebutton {
left: 181px;
}

#booktexttext {
visibility: visible;
position: absolute;
left: 469px;
top: 147px;
z-index: 2;
width: 322px;
}

#byfencepopup {
background-image: url(gallerymedia/byfencepopup.jpg);
z-index: 4;
}

#flyingbutton {
left: 61px;
}

#flyingpopup {
background-image: url(gallerymedia/flyingpopup.jpg);
z-index: 3;
}

#background {
background: url(gallerymedia/background.jpg) no-repeat;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
width: 847px;
height: 1167px;
}

#gallery {
margin: 0px auto 0px auto;
width: 847px;
position: relative;
}

html, body {
padding: 0px;
margin: 0px;
background-color: #000000;
}

Here's the code as sitegrinder outputs it:

byfence

orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean justo dui, feugiat non, rhoncus ut, blandit et, augue. Suspendisse lacinia lacus viverra dolor. Morbi in est. Ut auctor dolor. Etiam aliquet. Duis scelerisque sapien vel justo. Donec egestas libero quis augue. Duis ultricies justo non diam. Fusce nulla. Sed tortor dui, tempor a, imperdiet eget, volutpat non, purus. Mauris vel felis.

Morbi lorem. Etiam neque. Curabitur erat. In mollis nisi ut enim. Nam vel pede. Integer odio mauris, imperdiet ac, porttitor vitae, porta sed, odio. Etiam placerat pretium ipsum. Cras eu lorem. Suspendisse dui leo, nonummy quis, porta lacinia, convallis vitae, dolor. Etiam iaculis. Suspendisse rhoncus.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean justo dui, feugiat non, rhoncus ut, blandit et, augue. Suspendisse lacinia lacus viverra dolor. Morbi in est. Ut auctor dolor. Etiam aliquet. Duis scelerisque sapien vel justo. Donec egestas libero quis augue. Duis ultricies justo non diam. Fusce nulla. Sed tortor dui, tempor a, imperdiet eget, volutpat non, purus. Mauris vel felis.

Here's the javascript file for the rollovers. (in this case mouseover a thumbnail displays larger pic)

//array push/pop - IE5Mac
function p2h_push( v )
{
this[this.length]=v;
}

function p2h_pop()
{
if(this.length > 0)
{
var v = this[this.length -1];
this.length--;
return( v );
}
}

function P2H_ImgSwap(divName, imgPath)
{
var lyr =document.getElementById(divName);
if(lyr)
{
lyr.style.background = 'url('+imgPath+')';
}
}

function P2H_GetElementsByClass(className)
{
var c=0;
var i=0;
var tagCollect = new Array();
var tags = document.getElementsByTagName("*");
if(tags.length == 0){ /* Safari 1.0 kludge. */ tags=document.getElementsByTagName("div"); }

for (i=0; i < tags.length; i++)
{
if (tags[i].className==className)
{
tagCollect[c]=tags[i];
c++;
}
}
return(tagCollect);
}

function P2H_Menu(menuClassName, delay, level)
{
P2H_StopClock();
window.p2h_delay=delay;
P2H_SetMenu(menuClassName, level);
P2H_SetVisibilityByC(menuClassName, true);
P2H_SetVisibilityByC(menuClassName+"hide", false);
if(level==0){P2H_SetVisibilityByC("hidey", false);}
}

function P2H_MenuItem(level)
{
P2H_StopClock();
P2H_ClearMenu(level);
}

function P2H_StopClock()
{
if(window.p2h_timeoutid)
{
clearTimeout(window.p2h_timeoutid);
window.p2h_timeoutid = null;
}
}

function P2H_StartClock()
{
if(p2h_delay == 0){ P2H_CloseMenu(); return;}
P2H_StopClock();
window.p2h_timeoutid = setTimeout('P2H_CloseMenu()', window.p2h_delay);
}

function P2H_CloseMenu()
{
P2H_StopClock();
P2H_ClearMenu(0);
}

Roo

Magenta posted this at 14:58 — 20th August 2007.

She has: 47 posts

Joined: Jul 2007

Doesn't Image Ready CS2 and above generate html, css and such? Just wonderin' why you got the plugin.

cperkins posted this at 15:54 — 20th August 2007.

They have: 1 posts

Joined: Aug 2007

Quote: It merged all of my graphical elements into a huge background, and doesn't use it as a page background...it displays it in a div.

If you have non-interactive elements overlapping, it'll merge them together as a download optimization. As you define multiple pages in Photoshop/SG you'll see better results - only those overlapping items that are the same from page to page will be merged. You can also influence the automerging with the -merge and -nomerge hints. One color rectangular layers (that are not anti-aliased) will be output as HTML only, not as graphics and won't be merged with other layers either.

If you want some pattern (or image) in the background of the page, then use the Photoshop Pattern Overlay effect on a layer named exterior-tile. But -tile layers are part of Pro. http://www.medialab.com/sitegrinder/support/sg2overview_page_backgrounds.html

Quote: Doesn't Image Ready CS2 and above generate html, css and such? Just wonderin' why you got the plugin.

ImageReady is a slicing tool which outputs table-based layout whereas SiteGrinder does CSS and no tables. ImageReady has no support for conversion of styled Photoshop text to real HTML text, which SiteGrinder has. Also SiteGrinder has dozens of features that ImageReady doesn't have: multi-page site creation with maximal re-use of graphics and CSS across pages, background tiles support, image gallery creation, flash slideshow output, importing external HTML, late binding to external HTML via PHP require(), SSI, etc., output of forms (including email forms and it'll generate the PHP for you), vertically expanding document support, scrolling text, text buttons and menus, and much more.

If you are moving between Photoshop and DreamWeaver then slicing and struggling with slices downstream wastes a lot of your time unproductively. SiteGrinder leverages and makes great use of your time. SG has a bit of a learning curve, but it pays off handsomely.

Chris Perkins
SiteGrinder Programmer
Media Lab, Inc.

Roo posted this at 16:34 — 20th August 2007.

She has: 840 posts

Joined: Apr 1999

Thanks for the tips Chris.

Photoshop CS2 does the slicing and all yes, with no need to IR, and yes it will output a css layout, but I'm not thirlled with how it does it.

I am a a hand coder but well if something will save me some work I'm all for it!
I normally use a table just as a container and use CSS for everything else. It's time consuming for me to figure out the positioning with a table-less layout, I can do it by hand, but I see that SiteGrinder will give me my basic positioning, and then I can tweak. (I prefer fluid layouts over fixed sized and absolute positioning)

I am anal about code, so while I'm sure I will use SiteGrinder, I still will tweak because I don't care for the way it outputs the CSS,

That said, just the time saved from the general layout, even if I make it skeletal will make it worth it for me.

I wish I could afford the developer version as it seems to have a lot more features, but that is out of my budget at this time.

Roo

webwiz posted this at 18:52 — 20th August 2007.

He has: 629 posts

Joined: May 2007

Thank you for showing us the results of this plug-in, Roo. I have some designer friends that love this kind of stuff.

With all those inline styles, I wonder they don't just revert to the ancient FONT tag? All that absolute positioning seems problematic, too. Not much advantage over just displaying a single image of the whole page and be done with it.

This way of working - comp first, content later - seems to me a lot like designing clothes and deciding later who they are going to fit. I still believe that "content is king".

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

Magenta posted this at 07:32 — 21st August 2007.

She has: 47 posts

Joined: Jul 2007

I have two questions about the code.
1) What is the reason for using z-indices? I thought a z-index was only used for elements that overlap and the only reason I can think of for using them here is because the background is a div layer.
2)html, body {
padding: 0px;
margin: 0px;
background-color: #000000;
}
I've never seen "html" used as a selector. I tried figuring out what this rule would do but it made my brain sore.