"When my clients complain that their last web designer took 8 months to build a basic site and then I build a basic one while they wait (and watch) you have to admit that SiteGrinder is a bit of a revolution"
"My business has evolved with SiteGrinder as the main bit of 'proprietary intelligence' that has launched it over the top."
Making websites can be a very tricky undertaking. Designing the look of a site is only the beginning. It is no easy task to implement a site that matches a visual design created in a tool like Photoshop. Photoshop is designed to give total freedom to the artist. The web, on the other hand, is built on top of complex technologies and standards that place other concerns ahead of aesthetic ones. This difficulty has understandably intimidated many graphic designers who, though they may be proficient or expert in Photoshop, don't want to spend months or years learning the gory details of the internet such as XHTML, CSS, javascript, and document object models. For years only experts could generate workable sites from arbitrary, graphically intensive designs. Even then compromises often had to be made and the process was never pleasant.
Things change.
The SiteGrinder 2 Basic and SiteGrinder 2 Pro automation plug-ins from Media Lab now turn Adobe Photoshop for Windows and Mac OS X into an easy-to-use and powerful website design and production tool.
While SiteGrinder is not aimed solely at the web neophyte, a SiteGrinder-equipped designer with no previous web experience can use only their Photoshop skills to go from concept to deployment of a professional, standards-compliant site in mere hours with no slicing or programming. The difficulty of this task is invisible to the user as SiteGrinder builds graphics, text, and interactivity using modern web standard technologies and takes into account esoteric and detailed requirements like cross-platform browser compatibility. While such power and simplicity are unprecedented in the world of web site creation, they call to mind the ability of Adobe Illustrator to enable a designer to create sophisticated 2D vector graphics without giving a thought to the intricate Postscript programming code that under-girds every curve and color of their illustrations.
Given the huge variety of sites on the internet, obviously a significant number are mostly text and/or are heavily database-driven and are not very appropriate for initial design in Photoshop. (This page, with its lengthy text, is an example - although SiteGrinder would be appropriate for creating a "skin" for this page with a graphical header, footer, and navbar and a placeholder for the bulk of the content.)
But for many other designs that feature sophisticated graphics and interactivity, SiteGrinder 2 Provides unprecedented advances in the speed, features and simplicity of WYSIWYG web design.
This guide provides an introduction to the general workflow of SiteGrinder, which is very different from what you are probably used to. After that the guide covers the major feature areas and is interspersed with tutorials that will give you a taste of the details of implementing some of those features.
You will find it most helpful to read the next section, “SiteGrinder Workflow Overview”, before continuing on to browse the feature descriptions. The workflow concepts are applicable to both SiteGrinder 2 Basic and SiteGrinder 2 Pro. You may also wish to view the narrated screen recordings that cover the basic features and workflow found here.
After the workflow section you will find information about features common to SiteGrinder 2 Basic and SiteGrinder 2 Pro, which is a more expensive version of SiteGrinder with concomitantly more, and in some cases more complex, functionality.
Features unique to Pro are described in the final section of the guide and are clearly described as being part of SiteGrinder 2 Pro.
SiteGrinder 2 Basic and Pro work with Photoshop 6 or later for Mac OS X and Windows.
The SiteGrinder workflow is decidedly different from the typical workflow for graphically intensive sites.
It’s also a lot more fun.
Because SiteGrinder generates a fully functional site from within Photoshop, most of the aforementioned steps are eliminated or made much simpler. The workflow is rapid and organic, allowing for the kind of quick feedback loop and experimentation that creative designers are accustomed to and prefer.
There are a few basic aspects and best practices of the SiteGrinder workflow that all users will encounter and need to understand.
Naming layers carefully is both good Photoshop practice and also the simplest way to indicate layer functionality to SiteGrinder. Users who are accustomed to documents chock full of layers named "Layer 1", "Layer 235", etc. will need to change their ways, at least for layers that are meant to be interactive on the web pages they are designing.
To determine certain kinds of functionality SiteGrinder employs "hints", which are key words the user adds to the end of layer names after a dash character. There are many hints, but only a few that are used frequently. These include "-button", "-rollover", and "-popup".
SiteGrinder matches similarly named layers that have hints which work together. For example, an image layer named "Home-rollover" becomes the rollover version of an image layer named "Home-button". Any layers (any number of them) named "Home-popup" will become visible on the web page whenever the user rolls over "Home-button."
Luckily Photoshop makes it very convenient to rename a layer by double-clicking directly on the layer name in the layers palette, allowing in-place editing without bringing up a dialog box. SiteGrinder also has tools to automatically alter layer names.
There are many hints, but most users will only employ a few of them. A complete list is located at the end of this guide.
A number of hints can be used in combination in a single layer name, as in "Home-text-button" to tell SiteGrinder that a type layer should output as a text button.
SiteGrinder acts upon layers and does not use the Photoshop image slice tools in any way. Layer management therefore becomes important, especially for larger site designs. Photoshop's layer groups, the folders previously known as “layer sets” into which the layers palette can be divided, make this very straightforward. Many users, for example, place elements that will appear on every page of their site in one layer group. Other layers reside most comfortably in groups corresponding to the pages on which they appear. This organization is merely a recommendation, not a requirement.
Many SiteGrinder hints can be added to the names of layer groups in addition to individual layers, allowing maximum power and flexibility.
Photoshop CS introduced a useful new feature that many users have not yet discovered, the "layer comps" palette. Layer comps allow you to set up the layers of a document a certain way and take a snapshot (called a "layer comp") of the layer positions, visibility, and styles. You can then name this layer comp and call it back or update it to the current document state at any time. You can make as many comps as you need.
One of the biggest advantages of layer comps is that they allow layers to be arbitrarily associated together even if they are far apart in the layers palette and don't share the same group.
The combination of layer comps and layer groups make for efficient management of many different web page layouts inside a single Photoshop document.
SiteGrinder uses layer comps whose names end with the "-page" hint to define web pages and also to determine which buttons link to those pages.
Just as SiteGrinder matches a layer named "Home-button" to one named “Home-rollover”, it will also match them to a layer comp named "Home-page". When the site is built the button named "Home-button" will automatically hyperlink from any page it appears on to the page defined by the "Home-page" layer comp. This is set up by the user completely through this simple layer and layer comp naming convention. The user never enters a URL for this process to function, which both saves time and eliminates the possibility of errors commonly caused by typos in finicky URL spellings.
Layer comps are so crucial to defining pages that SiteGrinder includes a functionally equivalent tool for users of earlier versions of Photoshop that don't have the layer comps feature.
SiteGrinder can glean most of the designer’s intentions from the kinds and positions of layers in the document and the hints added by the user. Some things, however, are better expressed using the controls in the various tabbed panels of the SiteGrinder window.
These include:
The first thing SiteGrinder shows to the user when it is opened from Photoshop's File->Automate menu is the Report panel. The report presents a detailed analysis of the pages, buttons, menus, and graphics SiteGrinder will construct when the user clicks the "Build" button. Most importantly it warns of any potential problems it detects, such as a "rollover" layer with no corresponding "button" layer.
After a quick look at the report the user can choose to build their site or can go to some of the other panes to add or change settings. (Only panes which are relevant to the contents of the current document appear in the SiteGrinder window.)
SiteGrinder saves these settings into the Photoshop file, so they need only be entered once per design.
Once the settings are finalized the user can build an instant text-only preview to evaluate text styles and navigation, a slower full preview built to a temp folder, or a final build to a specific folder ready to upload to the internet or open in another tool.
When the build is complete the new site will open in the user's browser. A post build report gives information about sizes of graphic files created, etc.
Media Lab has, over the years, created several popular products for quickly and painlessly converting Photoshop designs into useful starting points for work in other products such as Macromedia Flash and Macromedia Director.
Converting a Photoshop design to a working website is a much grander task due to the variety of sites designable with Photoshop, and the complexity of the technologies and standards required for even trivial websites.
As a result SiteGrinder has a large feature set. Luckily most users will never need all of the features and will only have to learn about those they do need. Since most of the features work very similarly to each other using layers, layer comps, and hinting, learning new parts of the software can be quite rapid once the basics are mastered.
SiteGrinder, unlike ImageReady, can convert Photoshop Type layers directly into styled CSS text on web pages. All of the Photoshop character and paragraph styles that are supported by CSS (which is almost all of them) are preserved. These include color, bold, italic, underline, space before paragraph, space after paragraph, paragraph alignment, etc.
This is obviously an incredibly useful feature for almost any web page design. Users need only turn off anti-aliasing or add the "-text" hint to a type layer to take advantage of it.
Type layers can be made to scroll if there is more text than can fit in the area of the layer simply by adding the "-scroll" hint.
Phrases inside the text can have hyperlinks added in several ways. Any URLs (HTTP, email, and otherwise) appearing in the text are automatically set up as hyperlinks by SiteGrinder. In addition, a separate layer with the "-links" hint can be used to apply links to particular phrases within the corresponding type layer.
SiteGrinder will construct and open a web page with styled css text. Compare the text on the page to the text you created in Photoshop. Any styles supported by CSS will have been preserved.
SiteGrinder converts image layers (including shape layers, etc.) to web graphics and positions them perfectly on the resulting web pages. SiteGrinder matches the "z-order" of layers in Photoshop on the resulting pages also.
SiteGrinder can use any compression setting from Photoshop's "Save For Web" dialog, including user-created settings, on any layer. The user can select a default that will be applied to most layers and exceptions for layers with different compression requirements.
SiteGrinder will output graphics using the compression setting you chose and the HTML required to display them where they appear in the Photoshop document.
For SiteGrinder, a button is just a layer or layer group that responds to the mouse in some way. It can change appearance and/or trigger a popup in response to a rollover, and it can link to other pages or resources on the web in response to a click.
SiteGrinder can create buttons from image layers, from styled type layers, or a combination. Both kinds of buttons, text and graphic, can trigger popups and rollover effects. Image button rollover effects are accomplished by replacing the image layer button with a corresponding image layer for the rollover.
Text button rollover effects are generated by CSS, not images, and include all of the standard options such as bold, italic, underline, overline, background and text color changes, and borders. In contrast to image buttons, text rollover options are set within the "Text Buttons" panel of the SiteGrinder window.
A popup is a layer (or layer group) that appears when a user rolls over a particular button and disappears when they roll off the button. A button can trigger any number of popups and those popups can be type layers, image layers, and even layer groups.
Both text and image buttons can also trigger popup menus. (See next section)
The various parts of buttons (the -button, its -rollover, and -popups) can be layer groups instead of layers, and individual layers in these layer groups can be made to react to rollovers instead of the entire button allowing for subtle control over button behavior.
Buttons that are constructed from a combination of graphics and text using layer groups are called "hybrid buttons".
SiteGrinder will create a page with the "Sample-button" graphic visible. Roll over it with the mouse to see it change to the rollover version. Roll off to see it revert.
SiteGrinder will create a web page with your text button on it. Roll over it to see the effect. Click on the button to go to medialab.com.
For extra credit, add another layer (text or image) on a different part of the page and name it "Testing-popup", then open SiteGrinder and build again. When you roll over the button your new popup layer should appear.
SiteGrinder can create menus from type layers containing multiple entries or from layer groups containing multiple buttons.
Text menus can have horizontal or vertical orientations. Each menu item is considered a button and has similar highlight options.
Layer group menus contain text or graphic buttons that can be in any configuration the user chooses for a huge number of possible effects.
As with simple buttons, SiteGrinder automatically links menu items to matching layer comp page names.
Menus on the built pages can be set to retain the highlight state of the button representing the current page the user is viewing, a common website feature.
Each menu button can, in turn, trigger its own popup menu (or non-interactive popup) via layer name matching. Any number of popup menus can be nested in this way.
For a tutorial demonstrating menus, see the next section on Pages.
Pages are defined using layer comps whose names end with the "-page" hint. (SiteGrinder also provides a functionally equivalent tool for users of pre-CS versions of Photoshop.)
What goes on individual pages is determined by what layers are visible in these layer comps. This allows a site with an arbitrary number of pages to be defined in a single Photoshop document. Multiple pages can share layers, and shared layers can appear in different positions on different pages. The next section contains a tutorial that includes defining pages with layer comps.
Pages can be left, right, or center-aligned horizontally. They may be top-aligned or centered vertically.
Pages have user-settable background colors. (SiteGrinder 2 Pro provides powerful background tile options in addition.)
Any page can be set to be the "home" or "index" page of the site. This page will be saved as "index.html" and links to it will be properly adjusted.
Graphics that are used on more than one page are only saved once, which can increase loading and memory efficiency a great deal.
SiteGrinder has now built two pages. The menu appears on both and links between them via SiteGrinder's name matching. There is a custom message on each page.
From this small example it should be easy to imagine expanding the menu to as many items as you have pages and filing the pages with content using layer comps.
Because "Contact-menu" matched the "Contact" item in the "Example-menu" SiteGrinder has made it a popup menu for that item. Roll over "Contact" and see the menu appear. Click "Email" in the submenu. If your email software is properly configured it will open and a new message will be created.
One of SiteGrinder's most subtle and powerful features is called "Page Cloning". SiteGrinder 2 Basic can create many identical pages based on just one or two original page designs. This can be very useful for creating "site skeletons". Site skeletons are sets of pages which, while incomplete, already have all of their common elements built and in place, such as working navbars and positioned background and header graphics. These pages can then be finished off in another package with content that would be awkward to deal with in Photoshop, such as long sections of flowing HTML.
Each button (and menu item) defined by hints in the document can link in one of three ways:
It is this third option that we are leveraging here.
SiteGrinder will create three pages with nothing on them but the menu. Click the menu items to go between them and look at the page names in the browser's title bar.
Where did these pages come from? How did SiteGrinder know what to put on them?
SiteGrinder knew only that you might be making three pages corresponding to the three menu items. Since you didn't tell it otherwise by setting up layer comps or setting other links on the buttons, SiteGrinder generated the three pages by "cloning" the current document state. Since the current document state contains the menu, all the pages contain the menu.
And, importantly, the menu actually works on each page. SiteGrinder named the cloned pages after the menu items and auto-linked them all to the menu.
That's a lot of output from one layer!
In the previous example we cloned the current state of the document. What is even more useful is to set up one or more layer comps and clone them. In this way you can set up a complex template page with a navigation menu, background color and graphics, header graphics/text, and generate as many pages as you need.
Then you can open these pages in another tool and add the content HTML. This is how SiteGrinder can jump start a site by creating a skeleton containing the things Photoshop with SiteGrinder is good at, and add content Photoshop isn't so good at, like lengthy sections of flowing HTML content, in another tool.
SiteGrinder 2 Pro adds features that make page cloning even more useful.
As you can see, SiteGrinder 2 Basic is able to create a wide array of sites with all of the most common elements of web pages including buttons, rollovers, menus, popups, graphics, and styled web text.
Read on to learn about what SiteGrinder 2 Pro brings to the table.
SiteGrinder 2 Pro both adds fundamentally new features and improves on old features.
SiteGrinder 2 Pro allows user to make text-only changes and then rebuild final pages without re-exporting graphics, greatly speeding up the process of making small alterations.
SiteGrinder 2 Basic usually required users to rebuild an entire site to finalize changes before uploading. SiteGrinder 2 Pro allows final building of individual or just a few pages, which can be uploaded individually.
SiteGrinder 2 Pro CSS generation is more efficient than SiteGrinder 2 Basic. CSS common to multiple elements is better combined to avoid redundant entries, for example, and CSS unique to a single page is kept in the HEAD section of that page rather than in a common CSS file.
Image galleries are a major new feature of SiteGrinder with a large number of options. This feature is aimed at Photographers and anyone else with a number of images they wish to display in a flexible and easily navigable gallery format.
It is possible to create a gallery of images with SiteGrinder 2 Basic, but it involves the creation of many pages and buttons. SiteGrinder 2 Pro supports robust automatic gallery creation from folders of images and based on a very small number of buttons and pages in the Photoshop document.
Galleries are created in the following way:
Thus a folder of image files and two page designs are enough to generate a complex gallery with both thumbnail-based and next/previous-based navigation.
A gallery can have a single page design on which to display full sized images, or it can have a number of designs corresponding to different height/width proportions of the images. Thus a landscape-oriented image could have a special frame in the background, and a portrait-oriented image a different one, in a different place. Matching of proportion to image is automatic.
Images can be optionally scaled or cropped to fit in a particular rectangular area.
Image metadata is thoroughly supported. Image pages can include any jpeg metadata. Multiple pieces of metadata can appear anywhere on the page, and can be given Photoshop text and paragraph styles.
Thus a full size image page can contain the image in the upper right, the filename in large green type centered under the image and the date the image was taken to the left of the image in small white text. SiteGrinder uses hints inside type layers to represent metadata. SiteGrinder fills in and applies styles to the actual values when it builds the pages.
SiteGrinder has unprecedented flexibility and power when it comes to thumbnails via the -thumb hint. Thumbnails are buttons, usually small versions of the images they represent, that SiteGrinder automatically links to the appropriate full-sized image page.
Users can supply their own thumbnails.
Users can create buttons with rollovers and popups to be their thumbnails.
SiteGrinder can automatically generate "sheets" of thumbnails from the original full-sized images. The user need only provide a rectangular area for the sheet and another indicating the size of the thumbs. These sheets can optionally be scrolling and have customizable spacing between thumbs.
Users can create multiple small rectangles and place them anywhere they like to indicate where SiteGrinder should size and position automatically generated thumbnails.
Thumbnails can appear on pages with full sized images to combine navigation and viewing on the same page
Generic thumbnails can be made from layer sets and contain image metadata. Thus thumbs can easily be labeled with metadata in the same way that full sized images can.
SiteGrinder can also supply automatic rollover effects for thumbnails.
Follow these tutorials to see the basic process.
This layer will not appear on the built gallery pages...it is a size and location guide and will be replaced by the actual jpeg images from your selected image folder)
The exact contents and placement of these button layers don't matter for their functionality, only the name.
These can be text or graphical buttons. In this case if the layers you made have anti-aliasing set to "None" they will become text buttons. Otherwise they will be graphic buttons. The only limit is that their layer names must be "next-button" and "prev-button". (Note that in the case of graphic buttons the user may also provide "next-rollover" and "prev-rollover" as well, just as with standard buttons.)
SiteGrinder will now generate a page for every image in the folder you selected and auto-program the next/prev buttons to navigate between them. When finished it will open one of the gallery pages in your default browser and you can test them out.
SiteGrinder will now create a new gallery from the folder you picked in the previous example, but this time it will have a scrolling area of thumbnails (if there are too many thumbs to fit). After the site opens, click on the thumbnails to navigate to a particular photo. Thumbsheets can be on the same pages as the full sized images or be on their own pages without the full sized versions.
These gallery pages can, of course, have any number of background elements, other buttons etc.
Click here for an overview of the Gallery features with links to more resources
SiteGrinder 2 Pro can generate animated Flash slideshows from folders of images. These can be any size and can appear anywhere on a page.
Click here for a gallery of the different slideshow types
Users control where slideshows appear and how big they are using placeholder layers with the "-slideshow" hint.
Slideshows are similar to galleries in that they are generated from folders of images. The images are automatically scaled to the size of the slideshow layer.
Slideshow backgrounds seamlessly match page backgrounds.
Slideshows have a variety of timing, effects, and transition settings, including pan, zoom, and crossfade.
Optional slideshow controls allow next/previous/pause/play while Slideshows are running.
Background MP3 music playback is supported.
Unique hyperlinks for each image can set on slideshows using metadata.
These features mean that slideshows can do a lot more than simply show a series of photos. They can be used to create small, animated banners that draw the eye on one or more pages, perhaps to promote a sales special or a new addition to a site.
SiteGrinder 2 Pro makes it easy to place multimedia elements on pages. This is done via placeholder layers which indicate where on a page media should go. These layers use the "xmedia" hint, short for "eXternal Media", and are replaced with the actual media when the pages they appear on are built.
Supported media types include Flash and animated GIF files, digital video and audio, and external images.
Media files local to your hard disk are and copied into your build folder. Media elsewhere on the internet is linked as is, through URLs, to appear on your pages from their original locations when your pages load.
To make media management more efficient, SiteGrinder allows users to optionally specify a media folder. SiteGrinder 2 Pro will automatically find and place files in this folder whose names match xmedia layer names. A Flash movie that is located in the media folder and is named "southpark.fla", for example, will match a layer in the Photoshop document named "southpark-xmedia".
Once you selected the media folder, SiteGrinder found the media matching your -xmedia layer name. The media folder is an optional convenience. Clicking in the "Type" column of this panel to the right of an xmedia layer allows you to choose media from any location you like.
SiteGrinder 2 Pro provides advanced support for incorporating external HTML files into your pages.
Just as xmedia layers define a size and location for external media files, they can also provide the same for external HTML.
HTML can be incorporated into your pages when SiteGrinder builds them or they can be dynamically included at the moment visitors to your pages load them from the server.
Because imported HTML is often of an unknown or changing length, it works especially well with expandable pages. (See below.)
Using external HTML files users can incorporate web content on their pages that is not appropriate for creation in Photoshop. These include lengthy stretches of text, advanced PHP controls such as calendars or blogs, paypal stores, etc.
SiteGrinder 2 Basic supports customizable page background colors only. SiteGrinder 2 Pro adds robust support for background graphics and tiles.
A tile is just a repeating pattern. They are very common on websites, including very narrow tiles repeated either horizontally or vertically. SiteGrinder 2 Pro supports both. Tiles can create a variety of dramatic effects, including a border around content and strong visual column separations. There are a number of demo files accessible from the SiteGrinder report that demonstrate various tile techniques.
SiteGrinder 2 Pro supports fixed background graphics. In this case the contents of pages will scroll in the browser window while the background image stays underneath and doesn't move. This is a popular and dramatic effect.
SiteGrinder 2 Pro supports setting an "interior" tile to fill the background of the content area as represented by the dimensions of the Photoshop file. This tile can grow vertically as much as is needed in growing documents. (See Expandable Pages)
SiteGrinder 2 Pro also supports an "exterior" tile to fill the area between the edge of the content and the edge of the browser window when the window is open larger than the content area. Many sites use this sort of effect to place drop shadows and other visual separators between the content and browser window edge.
Because SiteGrinder 2 Pro uses the "Pattern Overlay" layer style to identify the tile, user-definable patterns are fully supported.
SiteGrinder considers the "interior" to be the dimensions of the Photoshop document. The "exterior" is the area between the edges of the document and the edges of the browser window when the browser window is wider than the size of the "interior".
When the page opens, expand the browser window so you can see that the pattern filling the exterior tile layer is now filing the area between the "content" and the edges of the browser window.
Pages created by SiteGrinder may be called upon to contain larger or smaller amounts content than were originally present in the Photoshop design when the page was built. This may be because the document is edited in another tool after SiteGrinder builds it or even because users view the page in a browser that allows them to force changes to the size of css text.
SiteGrinder 2 Pro supports vertically expandable areas to handle this situation via the "-grow" hint. Footer-style elements that appear below these growable areas will shift down or up, as necessary to accommodate the changes in height.
Text layers, and layers with the -xmedia hint are able to use the -grow hint, since they are the two layer types that might grow after a build.
Your document should now look similar to this:
Save the document, open SiteGrinder 2 Pro from Photoshop's File->Automate menu, and Click the build button
When the page open in the browser notice that the footer layer has moved up into the empty space the -grow layer wasn't using. Any number of layers that sit below the bottom of a -grow layer will do this. Thus the footer can be quite elaborate, containing menus, text, graphics, etc.
To see the grow layer when more text is added you can open the html file in an editor (if you are viewing in IE Windows just "View Source" to open it in Notepad, add more text to the tag containing your original text, save, and reload in your browser.
SiteGrinder 2 Basic and Pro will create pages for all buttons and menu items that don't have links explicitly assigned to them and base the contents of those pages on a specified layer comp or the current state of the document.
SiteGrinder 2 Basic can leverage this feature to create site skeletons of identical pages with navigation and background graphics in place. Content not ideal for handling in Photoshop, like long flowing HTML documents, can be added to these pages in other tools.
SiteGrinder 2 Pro extends this idea much farther. The following features combine to make SiteGrinder 2 Pro a powerful tool for mixing pre-existing HTML content and Photoshop designs to build finished sites rapidly:
These features allow the user to specify a folder which contains HTML files that match button names in the document. These files will be imported and placed in a region that will adjust to fit. Tiling can be added to fill both the area behind the imported content, and the rest of the document.
To see this feature in action, open SiteGrinder and click on the "Grow-with xmedia and tile" demo file. This file builds from HTML files containing scenes from Shakespeare's "A Midsummer Night's Dream." Each file contains one scene and the file names match menu items in the document.
Build the file and explore the resulting pages. Note the paper texture tile beneath the styled HTML scene text. Note also the tile filling the rest of the area such as the drop shadow on the left and right edges and the gradient between the document edges and the edges of the browser window. Note also how the footer has adjusted on each page to the different scene lengths.
Now return to Photoshop, close SiteGrinder, and examine the layers of the file.
SiteGrinder 2 Pro is the best of both worlds for this kind of site. Graphic design and interactive elements are easy to make in Photoshop, and long flowing content is easy to import to create many pages from only a few designs and layers in the Photoshop document itself.
This kind of site could have been built with SiteGrinder 2 Basic but it would have taken many more layer and layer comps to accomplish.
No other tool can perform a similar function with the simplicity and efficiency of SiteGrinder 2 Pro.
HTML forms are the standard way to solicit information from visitors to web sites. This might be for sending the site owner an email, typing in an address to get driving directions to a store location, etc. HTML forms can contain text entry fields, menus, and other input controls.
While there is no direct analog to the various form elements in Photoshop’s bag of layer types, SiteGrinder 2 Pro employs a straightforward way to encode multiple form elements in a single text layer. Text entry fields are denoted by underscores, buttons are surrounded by parentheses, labels are followed by colons, etc. (See example below)
SiteGrinder 2 Pro supports the most commonly used form elements, including text fields, menus, multi-choice boxes, and checkboxes.
SiteGrinder supports CGI and PHP email forms out of the box. This means the only requirement for the user is to name the email field labels correctly, such as "subject", and SiteGrinder handles the rest.
Generic forms for myriad other purposes, such as looking up directions on Google's map page, require the addition of appropriate URLs and sometimes custom variable names and differ with each application.
The names of the variables whose values are given by the web page visitor, such as their email address, can appear right in the form layer next to the individual field labels.
Names and values of variables that need to be set by the web page designer, such as the location of their store, are added using the Forms pane of the SiteGrinder user interface. This is also where the URL to submit the form to is entered.
Click Ok and then click the Build button
When the page opens, type in a zip code and try it out!
The SiteGrinder demo files contain a slightly more advanced version of this that gets driving directions from the entered zip code to a predefined location.
There are many more small features and feature details than appear in this guide. Please explore the documentation, the examples, the user showcase, and especially the hint summaries and UI description pages for more complete feature details.
Please address any questions to help@medialab.com. We have famously responsive and knowledgeable technical support.