Auto-login in future?   Forgot password?

Web Design with Photoshop: SiteGrinder 2 Pro Web Design plug-in

By: Erik Vlietinck - Last Updated: Mon 10 July 2006

Designing a web page can be hard work, especially when you need to tie together many different graphical elements. With CSS the process actually just got worse, because some things just don’t line up all that well with CSS. Which is why traditiona wants web page design to be a lengthy process. But SiteGrinder Pro 2 takes the time out of designing web pages. It is fully CSS capable, Flash capable even, and it only takes Photoshop skills. And the results can be quite stunning.

The SiteGrinder 2 Pro workflow goes like this: design your page elements, preferably with each one having its own layer, open SiteGrinder, click its Build button, test, publish. Admittedly, this is only so for very simple pages, but the basic workflow principle remains the same, regardless of how complex your web page design may be.

Photoshop and web design. Usually, you expect the venerable image editing application to handle only the design of the images that will make up the mockup page, or the buttons, or other elements on a page. SiteGrinder break with this ‘fenced in’ view of what Photoshop can do. In fact, the only thing you can’t handle with SiteGrinder and Photoshop, is the web site structure. For that, you’d better use Dreamweaver, Golive or your old faithful BBEdit or HomeSite.

But people who are visually orientated, like graphic designers, will love the way SiteGrinder 2 Pro allows them to build a page design and then automatically create the HTML, CSS, Flash and everything else that is part of the web design process. Usually, though, the professional web designer will hesitate using a program that wasn’t designed specifically for creating code. Most of the tools that claim to simplify web design create awfully bloated code. SiteGrinder 2 is different in that respect too. I checked the code myself and found it was pretty lean.

SiteGrinder

Of course, it can still be fine-tuned by someone with the skills, but it’s far better than what you’ll get from iWeb or even Golive for that matter. This makes SiteGrinder 2 Pro a really professional tool; it’s not just an easy way to get to flashy designed web pages. They will load quickly too.

register now!

50% off for a limited time only.
Sign up now!

  • A Monthly Newsletter with unique content not found anywhere else
  • Selected Product Reports
  • 25% off the Reports in the Research Store 50% off for a limited time only | claim your coupon!
  • Advice, Analyses & Multimedia Tutorials on Graphic Design, Photography, Video-editing, and Publishing Systems
  • The best content on cross-channel publishing on the web

SiteGrinder's learning curve

Isn’t there a learning curve with SiteGrinder? Yes, there is, but it’s more a matter of getting used to doing things a certain way than it is really a matter of learning a whole new system. For starters, the fact that it depends on Photoshop makes it suitable for people used to working with Photoshop Layers and Layer Groups. Knowing your Photoshop Comps is also recommended.

The only thing that stands between a seasoned Photoshop user and SiteGrinder success then, is the discipline to always name your layers and to learn some of Photoshop’s higher-level capabilities. Layers should be named in compliance with a specific naming scheme so that SiteGrinder recognizes the use for each layer.

Buttons, for example, take no more than a few minutes to build, provided you don’t forget to call each layer of the rollover button you’re creating according to SiteGrinder conventions. These are intuitive, I might add, but with version 2, a number of new naming conventions must be learned. And that is entirely due to the new capabilities of the plug-in.

SiteGrinder settings

For example, SiteGrinder 2 Pro will allow you to create text boxes on a page that grow with the content poured into them. This is great news for those of us who deal with a Content Management System for feeding our sites with textual content. SiteGrinder can then be used as a skin creator where the dynamic text boxes’ sample content can be quickly replaced by the code from the CMS.

While SiteGrinder will not build your site structure, it will in this version allow you to set up site skeletons in much the same way. The feature is called Page Cloning and it enables you to build just one or two page designs and fill up the pages with extra code in a separate application. Again, very useful if you’re running a CMS or a weblog.

SiteGrinder 2 Pro features

What struck me personally as a huge improvement over the first version, is the way SiteGrinder 2 Pro handles CSS. The code that is created by the plug-in hardly requires any tuning at all. It’s pretty efficient CSS, and when you add styling to one page only, that styling does not get added to the linked file, but is added to the HEAD section of your web page.

SiteGrinder 2 Pro also supports the creation of image galleries. The Basic version does allow you to build such galleries, but only with a considerable amount of page and button design. The Pro version supports automatic image gallery building, complete with tumbnails and full-scale images.

Another newcomer for the Pro version is Flash animations, i.e. slideshows. I did not test this feature as I am not really into Flash, but if it works like the rest of the plug-in, it must be great to do it right within SiteGrinder.

Much of what is new in SiteGrinder 2 Basic as well as Pro—but Pro more than Basic—is in fact aimed at making the plug-in more attractive and efficient for usage with a weblog or a dynamic web site. For example, the growing text boxes have a sibling in the Pro version which boils down to the user being able to include raw HTML or PHP in pages right from within SiteGrinder.

SiteGrinder web design

Such capabilites make the plug-in particularly suitable for the design of large web sites where content gets added to a skeleton page.

Last but not least, SiteGrinder 2 Pro supports HTML form building from within the Photoshop environment.

No

Name:

Email:

Location:

URL:

Remember my personal information

Notify me of follow-up comments?

Please enter the word you see in the image below:

Who invented Mickey Mouse? (11 character(s) required)

Your Views

share this article

Digg!

delicious

Reddit

facebook

stumble

Technorati

seed to newsvine

 

Join us on Twitter!

rss feed

Enter your email address:

By FeedBurner

end of columns

Last Added

small logo

end of columns