An excellent Photoshop plugin used widely even by professional webdesigners is the Sitegrinder2. Essentially it allows you to build your site based on your Photoshop creations.

In this tutorial we are going to go through the basic principles of creating a site using the Sitegrinder2 suite.

To begin with you do not need any coding knowledge to build a CSS standards compliant site and that is what makes it so popular. It is compliant up to Photoshop 7 and Photoshop CS4.

Here are some examples of what Sitegrinder can help you create:

Graphical Rollover buttons
Pop up graphics
Live CSS webtext
Scrollable CSS text
Text navigation bar

These elements are created by adding keywords to the names of your photoshop layers while creating them.
Common characteristic of all Sitegrinder keywords is the dash “-“ that needs to be added after every layer you create so you can let Sitegrinder know that this layer needs to be properly stylised for web publishing purposes.

For the text layers of your content you will need to add “-text”. Once you finish naming your text layer save it and then run Sitegrinder using File -> Automate-Sitegrinder. This will bring forward the following screen.

After this click on the Build button on the previous screen and once this is complete the site will be displayed on a browser window.

Similarly if you need to create a scrolling text you need to add a rectangle with clicking and dragging a rectangle with the type tool. In order to make your text scrollable once again you need to add the “-scroll” command on your layer name, save the layer and activate the sitegrinder through the Automate command!

Buttons Rollovers and Popups!
By adding the “-button” hint next to the layer name you are creating a button that once uploaded to Sitegrinder will become a live site button. Similarly for rollover buttons you need to add “-rollover” and finally add “popup” to create a popup button.

Tip! You need to keep the first part of the names consistent in order to match the buttons to their corresponding effects!

You might find these related posts useful too: