Anyone who is familiar with Photoshop can use that knowledge to build great-looking, highly functional websites without the necessity of

learning any web coding programs. That, in a nutshell, is the beauty of SiteGrinder. What follows is a basic step-by-step guide for getting started with the program. As the owner of several websites, I have found SG to be invaluable in allowing me to produce fine looking sites with a minimum of effort. If you have not yet purchased SiteGrinder, check out this article for a quick overview of the many advantages it can provide.

Begin with Photoshop

All sessions using SiteGrinder begin with a Photoshop project. If you already have a file that contains text, graphics, or a mixture of the two, you can use it to test out the SG features. The main thing you will want to know is how to label the layers within your file with “hints” so that SG can recognize their different functions. For example, if you have a logo that you want to act like a navigation button, you should follow the name of that layer with a dash and the hint “button.” Therefore, your layer could be called “Logo-button.” Other common hints would be -menu, -popup, -link, and -text. To add a hint in your Photoshop file, click the layer name in the layer palette, and edit it by adding a dash and a hint.

Open SiteGrinder

When your labels are done, you’ll want to open SiteGrinder from the Photoshop -> File -> SiteGrinder menu. You need to know that your Photoshop tools will not be available once you have opened SG, so if you want to make any changes to your original file, you’ll have to close SiteGrinder and go back to do it.

The first thing you’ll see after SG opens is a report that lets you know if there are any problems with your document. You can choose to save the report in a browser so that you can see the list of problems as you are working. SiteGrinder also provides links to its Help Files from within the report so you can easily get more information about fixing any trouble spots. When you click on any Help button, you will be taken to a web page that explains the topic that is referenced on whichever panel you are viewing at the time.

Build Your Site

Once your problems have been addressed, you click the “Build” button. SiteGrinder will immediately go to work creating as many files as necessary to make your PS document function as a website. When this process is complete, SG will open a page in your web browser so that you can see what has been built. If necessary, you can return to Photoshop to correct anything that does not function the way you want, or you can continue with your design by adding more pages or layers.

Most users will work in a manner that looks something like this:

1)      Open a PS project and designate layers for buttons, menus, etc.

2)      Open SiteGrinder and check the Report for trouble spots.

3)      Adjust the settings.

4)      Click the Build button and check functionality in a browser.

5)      Add more layers.

6)      Repeat as needed.

That’s really all there is to it! Of course, SG has all kinds of cool tools and features that you will want to learn about, but all of them will be utilized in the same basic way. If you have any reservations about purchasing SiteGrinder because you don’t want to spend hours and hours learning another software program, don’t worry. If you are familiar with Photoshop, you’ll find that SiteGrinder is almost completely intuitive, and it will give you the results you want.