SiteGrinder
Videos
Features
Learn all about what SiteGrinder 3 can do for you.
More >
Control
Edit your website remotely from any web browser.
Commerce
Easily add a fully functional web store to your site.
More > supportSupport Have more questions? Ask our Support Community. More > VidoeoTV80x80.pngVideos Watching the videos is a great way to start learning now. More >
Support
Have more questions? Ask our Support Community.
Watching the videos is a great way to start learning now.
Introduction to SiteGrinder 3
This video gives you a broad overview of what SiteGrinder is and what Photoshop techniques you need to know to use it. Anyone learning or evaluating SiteGrinder should watch this video first.
Workflow Essentials Part 1: Design
This video covers the design portion of the SiteGrinder workflow including creating layers in Photoshop, building them as web designs using the SiteGrinder Photoshop plug-in, and altering their appearance live in a browser window using the amazing SiteGrinder Design Manager.
Workflow Essentials Part 2: Content
This video covers the content portion of the workflow. We show how to deploy pages to a site, edit page content right in a browser window using the amazing Content Manager, and finally upload our pages to the web.
Image Quality & Compression
Demonstrates how SiteGrinder outputs images and how you have convenient yet complete control over the image formats SiteGrinder uses to create beautiful sites.
Web Text Essentials
Shows how to use text in your web designs whether as part of an image logo or as standards-compiant CSS formatted content text, all from the Photoshop Type layers you already know how to use.
How to Create Pages
This video discusses the two primary ways to create pages in SiteGrinder 3: Photoshop layer comps, and generating "clones" in the Content Manager. Also demonstrates how to automatically link navigation items to pages. Editing and managing pages in the Content Manager.
Buttons, Menus, and Animation
This information packed video demonstrates how to create buttons and menus that react to the mouse pointer. Buttons and menu items can change on hover or click and can also change the appearance of other layers through animation! See how all this can be done with a few hints and Design Manager options.
Navigation Options Comparison
This video explores the various ways to create site navigation using SiteGrinder 3, and weighs the pros and cons of each method.
Graphic and Text Buttons
Creating clickable buttons on a web page by applying SiteGrinder hints to graphical and text layers in Photoshop. Adding interactivity by creating hover and click states for both types of buttons.
Layergroup Buttons
Creating "hybrid" buttons - buttons that have real CSS text and a graphical background and graphical hover state - using Photoshop layer groups. Using more than one background graphic for a single button.
Creating Horizontal Text Menus
Demonstrates the creation of a horizontal navigation menu from a single text layer in Photoshop. Gives rules of thumb for predicting the layout of horizontal menus.
More About Menus
Using text-basd menus as best practice. Customizing the look of text menus using the Design Manager.
The -menutree Hint: Part 1
This video introduces the -menutree hint, introduced in SiteGrinder 3.2.
The -menutree Hint: Part 2
More information about the usage of the -menutree hint and how to use the Menutree Editor in the Content Manager.
Styling Text Links
We can use the Design Manager to style in-text links, but first we need to let SiteGrinder know that our text layer will eventually have links in it. We do this by creating a "dummy" link that we can then style with the Design Manager. Also discusses different ways to create hyperlinks on phrases within chunks of text.
How to Create Pages With Different Lengths
Introduces the -pagesize hint: SiteGrinder 3's layout control for generating pages that have different amounts of content. Controlling page alignment using the -pagesize hint.
Add a Solid Color Background to the Browser Window
Filling the browser window with a color of our choice (besides white) using the browser-backgroundcolor hint.
Adding a Tiling Graphic to the Browser Background
Demonstrates how to turn a static background graphic into a repeating tile that will fill the browser window. Creating a custom pattern in Photoshop that SiteGrinder can use for the browser window graphic tile. Howto use a graphic background tile in conjunction with a solid background color.
Controlling How the Browser Background Tile Repeats
Demonstrates the different ways you can control how your browser-background tile repeats in the browser window.
Using a Large Image As the Browser Background
Demonstrates how to set up a large, non-repeating image as the browser background (rather than a small repeating tile graphic). Using the -pagesize hint to correctly position content within the browser window, and to avoid the horizontal scroll that a large background image would otherwise cause. Making the background image affixed to the browser window.
Introduction to Columns
This video covers building flexibility into your design by using the -column hint. Explores some possible layouts that would benefit from using the -column hint.
Application of the -Column Hint & Panels
This video demonstrates how to group elements inside of a -column in order to maintain the position of the elements relative to each other, even if the amount of content inside of the column changes. Using a nested panel to create a "fixed" group of elements that flow as one relative to other elements in the column.
Adding Background Styling to Columns
This video demonstrates how to turn columns into visible design elements on the page, and some of the different ways to style visible columns.
Using the -Centercut Hint With Columns
This video demonstrates how to create a flexible, stylized graphic container using the -column hint in conjunction with the -centercut hint.
Adding a "Floating" Footer Area
This video introduces how to define a footer area that will move up or down depending on the amount of page content. Also showshows how to add a unique background color or background tile graphic to the footer area.
Using the -footer Hint With Layergroups
This video demonstrates how to use Photoshop layer groups to include elements that are geographically outside of a defined footer area as part of the footer.
Application of Layout & Decoration Tools: Flexible Page With Drop Shadow
This video puts together some of the concepts from the previous videos demonstrating SiteGrinder 3's layout and decoration tools. The end result is a page with a tiling browser background, a color-filled floating footer, and a page content area that has a repeating tile to represent a drop shadow.
SG3Xpress Video Series
Learn how to use the new SG3Xpress Add-On to create Worpress Themes and Custom Blogs.
Uploading with 3.5 - Connection Settings
Configuring the Connection Settings in SiteGrinder 3.5 for FTP or WebDAV upload. Also, how to install WebDAV. And we upload a site.
Synchronizing with 3.5
Synchronizing the local and remote sites with partial uploads and downloads.
Accordion Tutorial
How to use the new -accordion and -tab hints in SiteGrinder 3.5 for making jQuery accordions.
Check back often! We’ll be adding more videos and updating this page regularly.
