If you’re the type of Web Designer that doesn’t like to get your hands dirty with XHTML and CSS, SiteGrinder 2 could become your best friend. It’s a plugin for Photoshop that can turn a design into a fully functional website. This means you will no longer need to outsource the programming of your designs.
Enabling Photoshop to Do More
Out of the box, Photoshop is a robust graphics package with a powerful set of tools that enable designers to work their magic and create visually stunning web designs. In a typical web site creation workflow, when the design process is finished, so is Photoshop’s role. However, if you’re using SiteGrinder 2, Photoshop becomes a fully functional web page building solution. It’s a plugin that makes the transition from design to code seamless.
SiteGrinder 2 also ensures that the integrity of the design is maintained. This is so important for designers. Often times in a typical web site creation process, important aspects of a design have to be omitted because they require complex coding. SiteGrinder 2 makes sure that your design will look just as good in the browser as it does in Photoshop.
The main aspect of SiteGrinder 2 that designers will love the most is the fact that no coding knowledge is required. All of the code is generated by the plugin and it happens behind the scenes. And if you are the programming type, SiteGrinder 2 is going to be a huge time saver. There’s no longer a need to switch to Dreamweaver or TextMate after your design is finished. SiteGrinder 2 does all of the coding for you, leaving you more time to tweak your design.
So How Does it Work?
This explanation of how SiteGrinder 2 works is going to be short, because it’s such a simple process. It’s all about how you name your layers in Photoshop. The plugin requires special “hints” that tell it what each layer should be. For example, if you have a button in your design, just add “-button” to the end of its layer name, or “-rollover” to define its rollover state. Of course, for some designers this will mean actually being organized with their layer naming and overall PSD structure, but this is something that web designers should get in the habit of doing anyway. Plus the time saved by using this plugin makes it a non-issue. These hints are also used to create more complex web site elements, such as drop down menus, forms, multi-media content and more.
Basic or Pro
SiteGrinder 2 comes in two flavors: Basic and Pro. The right version for you will really depend on the functionality requirements of your sites. The Basic version gives you all the standard features, but does limit you to using solid color backgrounds. Going Pro will give you more options for background images and the added ability to easily create photo galleries, include Flash media, and add forms to your pages.
When products come along that claim to make difficult and complex tasks “push button” easy, it’s natural to be skeptical. However after using SiteGrinder 2, I’m convinced that this is a powerful plugin that can make a web designer’s job much easier.
Visit the official SitGrinder 2 site to learn more about this product.
hey, this program interest me. has anyone at wdl used it regularly that we could see some samples other than the ones the site provides? thanks!
already downloading it. It looks great
In my opinion (and that’s all this is) it’s fair to say SiteGrinder is a cheat. Can you really call yourself a website designer if you can’t even code your own work? There’s no substitute for knowing how to write your own XHTML and CSS. There aren’t shortcuts to good work and frankly, I’m surprised to see this site blatantly advertise this kind of product.
Chuck, I understand where you are coming from, but this is also where you separate “designers” and “developers”.
None the less, you always want to go through and clean up code after using any program to do the coding for you.
IMO, I see nothing wrong with using a tool to help development and design move faster.
Having been a mechanic for over 13 years before moving into web design and development, to me your comment would be the same as saying it isn’t fair for me to have a tool chest full of specialty tools.
Know what I mean?
That’s not really an accurate analogy.
SiteGrinder produces really superfluous code. I used it, and Axure Pro produces better code and that’s just for wireframing.
Definitely agree about the separation of designer and developer, but someone using Sitegrinder to sell a deliverable website is labeling themselves a developer.
Sitegrinder sites take forever to load because it creates thousands of extra lines of code in the CSS.
Cheating? I dont think so. The truth is that soon or later typing codes gonna stay in the pass and we should get ready for that. For now lets try focusing on using the new programs that are available.
I’m always wary of apps that do a lot of the coding for you – the one’s I’ve experienced in the past have always been bloated and unmanagable.
Any ideas on how clean the SiteGrinder code is?
“Can you really call yourself a website designer if you can’t even code your own work?”
I believe the answer is yes.
But like naysaying, this is subjective.
@Chuck
Since when is it a requirement to be able to code before you can call yourself a web designer. Now if you said “Can you really call yourself a web DEVELOPER if you can’t even code your own work?”. That I could understand. If you understand great design and usability but cant code your way out of a paper bag then IMHO you still are a web designer.
If you can’t code find someone who can or try a product like this and see if that gets you what you need.
I think people who are good at one particular thing sometimes waste their time at things they will only be mediocre at. Why not spend that time focusing on your strengths, becoming even better.
From what I can see this just uses position absolute for almost everything (sometimes relative). That’s a zero flexibility solution and I wouldn’t use it for a production website.
It could have it’s use for creating fast prototypes to show to clients but it should be priced accordingly.
I downloaded Sitegrinder 2 a few moths ago and its been great. It writes super clean code that is strongly driven by CSS. Plus, if you do have some HTML experience, you can easily manipulate the code once SG2 creates it. Since Im not the best HTML coder, I was limited in my design based on what i knew how to code. SG2 allows me to design more complex, more engaging sites. It does have some limitations, but the positives definitely out weigh the negatives with this plug in.
Looks like SiteGrinder 2 is a good program and that it is very easy to use, though I have not downloaded and used it yet. And the best part is that we can convert the files into other format.
I’d like to see a live site that SiteGrinder created. Just to see how ‘complex’ it can code..
I’ve been using SiteGrinder 2 for quite some time and absolutely love it. It’s easy to work with and consistently produces webpages/websites that look and work great regardless of the platform. Media Lab has a samples gallery on its website at:
https://www.medialab.com/sitegrinder/examplepages.php
Serious, serious, serious thumbs down for endorsing this weak product so blatently. As one poster above mentioned, all SiteGrinder does is write bloated code with position:absolut set on everything. Nothing can replace writing your own code!
Site Grinder 2 is a pretty awesome tool. It is not the preferred choice for larger database driven sites, but for your typical 5-20 page site it is perfect. My design time IS 90% of my development time. While you are designing it is so easy to begin labeling your PSD layers. By the time it is client approved you can literally press “Build”. I’ve built around 20 sites with SG2 and am very satisfied. The code is clean and SEO friendly and to make any necessary edits or additions and I’ve added CushyCMS to most of my SG2 sites for easy simple client editing. I highly recommend this product.
I agree that nothing can beat coding your own sites for maximum control but the reality is that some designers do all forms of design – print AND web and aren’t always the best at coding.
That is what web developers are for and so whilst some of you are expressing elitist attitudes, I think that things like Site Grinder have their place for those that don’t have time to learn new coding languages overnight etc. I do think that knowing code is a great skill to have though. But like anything, it takes time for some to learn new things.
Plus the time it takes to slice, dice and code a complex PSD can be time consuming. It is a handy program and you get far less code bloat than with other programs. It’s quite clean actually.
I often use it when i am short on time or get asked to start a job that needs to be up in a ridiculous amount of time, then I’ll spit out a template file and then go modify the SG files and code as necessary. you can change the absolute positioning to whatever the heck you wish to. Still shaves hours off project time.
I recommend it to designers who may not have a grasp on the coding side (though highly suggest learning at least basic coding languages like html/css as you go or when you get some time) or those that want to increase productivity.
Sure it may not be the finest choice for major complex sites, but can be used as a base. You can see sample sites on their website (pretty basic ones mostly) and read more about the program and how it codes in the support section of the site: https://www.medialab.com/sitegrinder/sg2learningcenter.php
Everyone has a different working method and preference and whilst it may not suit the purist coders, think it is a great solution for others. You can always try the demo first and judge for yourself.
promotional led blog post and not a affiliate link in sight? hmmm…
If you think Sitegrinder’s code is clean, herein lies the problem and you don’t understand code.
It’s good for a designer who has absolutely no understanding of best practices, semantic coding, or load time.
Designers and developers may not be the same, but what separates the mediocre from the rock star is having an understanding of how sites are technically built.
I’ve just used sitegrinder 2 for a project and I’m still on the fence. As mentioned, it does use position: absolute quite a bit which I can see creating problems down the line if we ever want to add more content to a page, tweak layouts, etc. Luckily I know CSS and HTML well enough that I was able to use sitegrinder to kick out a blank template, then go in and rework some code to make the positioning: relative – to get a nice clean template to use as a starting point when continuing on & building the rest of the pages. So far, it seems like this is the best application for sitegrinder unless you are doing strictly static sites that won’t have many layout changes.