Child pages
  • Sample Files and Sites
Skip to end of metadata
Go to start of metadata

SiteGrinder 3.5 Sample Files – Click here

Contents

Complex Design Examples

You can play with the built versions of these designs,

then download them to see how they were created in Photoshop.

Webinar "Compani" Sample

Click here to see the built pages.

Click here to download the psd.

Earthy Stripes Sample

Click here to see the built page.

Click here to download the psd.

Plum Sample

Click here to see the built page.

Click here to download the psd.

Slate Sample

Click here to see the built page.

Click here to download the psd.

Feature Demo Examples

These examples are more spare in order to clearly show a small number of features each.

Expanding Background

Hover over the white arrow after you click to see the built page.  It will reveal a menu that will allow you to view other pages with different kinds of backgrounds.

Click here to see the built pages.

Click here to download the psd.

Centercut vs Background Hints

This demo file illustrates the difference between the -centercut hint and the -background hint from a -column layer. Remember, -centercut will repeat only 1px and have a really small file size whereas -background can be larger than 1px but file size will slightly increase depending on your layer size.

Click here to see the built pages.

Click here to download the psd.

Large Background Image

This example file demonstrates how to set up a Photoshop file with a large non-repeating (and unaffixed) background image.  

Click here to see the built page

Click here to download the .psd file.

"Outdoor Store" E-Commerce Example

Accompanies the "Ecommerce Integration" webinar recording here.

Click here to download the PSD.

Basic Columns

Click here to see the built page.

Click here to download the psd.

Hovershow with Movefrom Animation

Click here to see the built page.

Click here to download the psd.

Page Alignment (and footer)

Click here to see the built pages.

Click here to download the psd.

Panelsheets

This example shows two panel sheets. 

The panel and sheet layers are duplicates of each other, but they have been given different settings in the Design Manager.

The upper panelsheet has been set to "sliding" so it takes up no more space than the rectangular area of it's panelsheet layer.  It has been set to "feed" for its content, and the feed was set to the Yahoo RSS news headlines feed in the Content Manager.  You can use the nextpanel/previouspanel and nextpanelset/previouspanelset buttons to navigate the sliding sheet, and it has also been set to self-play.

The lower panelsheet has been set to grow and its content is from gallery images.

Click here to see the built pages.

Click here to download the psd.

"Poor Man's" Accordion

An easy-to-achieve layout effect using -clickshow layers stacked inside of a column.

If you look at the PSD file, notice that all the content appears at full height, with all the -clickshow layers visible. In other words, we design in Photoshop what the accordion would look like fully expanded. SiteGrinder will collapse the accordion when it builds, because the -clickshows will not be initially visible inside the column.

Click here to see the built page.

Click here to download the PSD.

Form Example

A simple page that shows the various types of form elements you can create, and the style you can apply using the Design Manager.

Click here to see the built page.

Click here to download the PSD.

  • No labels

19 Comments

  1. Anonymous

    RE Panelsheets:

    Can you please post a simple PREVIOUS NEXT example for a -picturebox Slider?

  2. Anonymous

    PLEASE......

    learning from working PSD is so much easier and faster to understand when learning from the online manual.

    Please expand this page with more working PSDs to help us learn the software.  This page is excellent!

  3. Anonymous

    Hah! I only saw the completed sites at the top and didn't scroll down here until you sent me an email - SO MANY WONDERFUL CHOICES - I want to learn them all -- I feel like I'm gorging! Thank you, thank you, thank you. My only problem now is calming down enough to learn just 2 or 3 so I can get my customer's web site done! :-) Can't complain there, but I am a little frustrated -- Learning Curves -- Gotta love them!

  4. Anonymous

    Just a note of thanks and advice: These examples are great and I need more. The examples with .psd are easy to learn from so you really should create more. You will sell more copies of SG3 if you make this example area more extensive.

    Videos are fun, but this page gets it done. Please create .psd of all features!

  5. Anonymous

    You REALLY need some better gallery examples. How about ones that show actual images instead of RSS feeds? Differences between viewsheets, panelsheets & thumbsheets, etc?

    1. Take a look at the gallery page in the 'compani' example at the top.  I uses a thumbsheet and a picturebox.

      1. Anonymous

        I have looked at the gallery pages in ALL of the examples. Where are the ones showing panelsheets with images, multiple thumbsets, etc? These examples only show the most basic stuff, which we can figure out from the docs. It would be great if there were some more complex examples.

        1. Anonymous

          I agree..the psd examples are bare bones and basic. It would be nice to see more effort with these. Looking at a psd file is WAY easier and way less time consuming that reading through a bunch of documentation.

          I would like to see a psd showing how to to create a variety of galleries. I would like to see a psd showing how to create a gallery slideshow (with images and text).

          I would like to see how to edit the shopping cart page so it's not so ugly and so I can match it the look of the rest of my site. I would like to be able to create a clickshow contact form that actually has a close button so the visitor isn't as confused as I am (see "Slate" psd preview).

  6. Anonymous

    Learning from an existing PSD, is the fastest way. Can you post more samples of different Galleries and Columns?

  7. Anonymous

    Please put more, it is so much easier to understand when you can play around in a pre-cooked photoshop file. Thanks for the great work sofar!

    Mike Buzzmedia

    1. Anonymous

      I totally agree...  Searching through wiki-files is quite time consuming, when you just need to find a solution to a problem.

      -Sylvia-

  8. Anonymous

    Yes, yes, please more PSD files which showcase the more complex features of SG3. PLEASE MORE!

  9. Anonymous

    You should check out the link to se the buildt Outdoor Store, it's not working (something about having no index-file)

    Also, a question about how to change the automated image numbers in Bigboxes.

    I want to be able to add my own text instead of the image-numbers (1 of 16) automatically shown under each image in Bigbox-display. Like Title and author.

    -Sylvia-

  10. Thanks for the notification about the outdoor store link.  It is now fixed.

    You can customize the text that appears in a bigbox using SiteGrinder's metadata features.

    1. Add a type layer to your page design using the -metadata hint and named after your other gallery layers, as in "weddings-metadata".

    2. Inside double brackets type in the name of the metadata field you want to use, as in [[description]].  If you have your metadata already in your jpeg images then use the metadata field you used.  Otherwise you'll be able to enter the metadata for each of your images in SiteGrinder's gallery editor in the content manager.

    3. If you only want the metadata to appear in the bigbox display then hide the metadata layer in the page layer comp

    4. Build to the design manager

    5. In the bigbox settings window use the metadata text field to enter the same metadata field name you used in step 2, as in "description" (without the quotes)

    6. Deploy to the content manager and import your images.

  11. Anonymous

    Sample of slideshow, please....

  12. Anonymous

    Sample of slideshow, please....

  13. Anonymous

    Just wanted to show support for more pages like this one. It is way easier learing from a psd file we can play with.

    Medialab cut the webinars that seem to go on for days before they actually get to the point and give us PSD's.

    Peace x

  14. Anonymous

    The "Compani" example has a gallery page that can be used as a slideshow.

    The bottom line it that a slideshow is just a rectangle with the -picturebox hint.  In the design manager set it to the Animated Flash Picturebox for a full-featured flash slideshow or CSS animated picturebox for an iphone friendly but less advanced slideshow.  Then add your images in the design manager.  Several of the recorded webinars demonstrate this process.

  15. Anonymous

    For the panel sheet, within the psd file is the white box (sliding -panelthumb) and (sliding -metadata) duplicated and populated with different images and text in order to create the scrolling effect?