MediaLab Sitegrinder – Styled Web Text Tips

Paragraph Type: Utilizing either the Anti-Alias to None or the -text hint requires a Paragraph Type Area and not a regular Point Type Layer.

Layer Naming convention:Site Grinder outputs css id selectors based on the caption of the Layer (or Layer Set), so it’s a good habit to condense Layer captions and keep them relevant to the element on the page layout (as captured below).MediaLab - Sitegrinder, automate site creation

Font Selection: Utilizing either the Anti-Alias to None or the -text hint on Paragraph type Layer will require a cross platform (end user) font face selection. (Examples: Arial, Times New Roman etc)

Multi Paragraph Styled Web Text: To create multi-paragraph styled web text there is one tweak you have to perform in order for it to be outputted properly.

  1. Click anywhere in the paragraph contents to activate the blinking insertion cursor. (encircled in red)
  2. Then set the Paragraph Palette ‘Add Space After Paragraph‘ property – I used 12 pt.
  3. Then hit the Enter/Return key to add the 12 pt carriage return between paragraphs.MediaLab - Sitegrinder, automate site creation

» Click here for Multi-Paragraph Sample.

MediaLab Sitegrinder – Styled Web Text (-text hint)

Using the -text hint on a Photoshop Paragraph Type Layer and combining Options Bar or Character Palette type attributes will be outputted as css styled web text.
  1. Activate the Type Tool from the Toolbar (T).
  2. Click and drag onto the document to draw out a Paragraph Type Area, and paste (or type) in your desired text. Set desired type face. I used Verdana, Regular, 11 pt Anti-Alias to None.
  3. Rename the new Type Layer in the Layers Palette to some user friendly and append the -text hint to it’s caption.
    MediaLab - Sitegrinder, automate site creation
Then go File > Automate > Site Grinder 2 to Build (Preview) the output.
The -text hint accepts most Character or Options Bar type parameters and outputs it to css format.
As in the below example, portions of the type were altered with a different font face, font color and a text decoration of Underline.
MediaLab - Sitegrinder, automate site creation

MediaLab Sitegrinder – Styled Web Text (-scroll)

Another useful feature is to convert a fixed size Paragraph Type area to have scroll able contents within it’s boundary. The end result is equivalent to an iframe, except the result is pure css.

  1. When you draw or resize the Paragraph Type area smaller than it’s contents, you should see an indicator to the lower right of the Paragraph bounding area.
  2. If using the -text hint you can also append the -scroll hint as I have captured below.MediaLab - Sitegrinder, automate site creation

Note: Sitegrinder does not customize the colors of the scroll bar or it’s properties.
The -scroll hint also applies to a no -text hint Paragraph Type area Layer with Anti-Alias set to None.

» Click here for Scroll Example.

Though SiteGrinder may not allow for scrollbars customization, the scroll contents can be customized just by adjusting the properties within the Paragraph Palette.

  1. Since the scrollbars is a pure vertical visual element, why not Justify Last Left, so that the contents output perfectly aligned with it. (The other Justify properties also apply.)
  2. Also to avoid the right side from being to close to the scrollbars element, adjust the Indent Right Margin property to 12 pt. (The other Margin properties also apply)MediaLab - Sitegrinder, automate site creation

» Click here for Scroll Example 2.

Combine Paragraph Palette attributes with the SiteGrinder Control Panel Layer Decoration properties to fancy the borders of Scroll box.

  1. Set the Indent Left Margin to 12 pt to offset the paragraph from the left scroll border.
  2. Click once at the beginning of the Paragraph (just before the word ‘Lorem’, in my case) and then set the ‘Add Space before Paragraph’ property to 2 pt to offset it’s contents from the top scroll border.

    MediaLab - Sitegrinder, automate site creation

  3. Then File/Automate/Site Grinder 2 and click the Decoration tab.
    1. Click the Decoration Tab.
    2. Click the -scroll hint Layer (in my case the ‘sampletext-text-scroll’ Layer)
    3. Set the Border and Background properties, Click OK to commit changes.
      Then Build to Preview or To Folder option at the bottom of the Sitegrinder Control panel.

    MediaLab - Sitegrinder, automate site creation

» Click here for Scroll Example 3.

MediaLab Sitegrinder – Automate with an Action

Here is a nice way to automate the use of the SiteGrinder Plugin through the use of a quick Action shortcut key instead of relying on the File > Automate > SiteGrinder menu command all the time.

  1. To Begin, go Window > Actions to bring the Actions Panel to the foreground. Then click the Create New Action Set icon command at the bottom of the Actions panle (encircled in red).

  2. At the New Set prompt dialog, give it a user-friendly name, like SiteGrinder, and click OKto commit. 

  3. With the new Set (SiteGrinder) active in the Actions Panel, click the Create New Actionicon at the bottom of the Actions Panel.
  4. At the New Action dialog prompt, give it a user-friendly name (I used Grind). Then assign it a Function key keyboard shortcut. I used Shift + F5. Then click REOCRDto proceed with the creation process. 

  5. While in RECORD mode, click the Actions Panel properties icon command (encircled in red) and from the context list choose Insert Menu ItemCommand.
  6. Then go to the File > Automate > SiteGrinder2menu command, to add it to the Action. Click OK to commit/exit the Insert Menu Item.

  7. Finally, press the Stop Recording Action playback control (encircled in red) at the bottom of the Actions Panel.Now whenever you need to run the SiteGrinder plugin, simply press the Shift + F5 (or which ever one you assigned it).


Styled Web Text (Anti-Alias to None)

MediaLab Sitegrinder – Styled Web Text (Anti-Alias to None)

An alternative to the -text Layer hint to achieve the same styled web text is to ignore the hint altogether and simply ensure that the Paragraph Type is set to Anti-Alias to None on the Options Bar or in the Character Palette.

  1. Give your Type Layer a user friendly name, without the -text hint appended caption.
  2. Then on the Options Bar set the Anti-Alias (aa) to None as captured below.MediaLab - Sitegrinder, automate site creation

Then go File > Automate > Site Grinder 2 to Build (Preview) the output.

MediaLab – Sitegrinder: Generate Flash SlideShow

It’s so easy, all it takes is one Layer with the -slideshow hint appended to it.

First create a new Photoshop document to contain the slideshow placeholder Layer. In my case my document will be the actual size of my slideshow (366×375, White Background).

In the new document:

  1. Set Foreground Swatch to a color of your choice. It doesn’t matter which color – I used Black. Then select the Rectangle Shape Tool from the Toolbar.
  2. Enable Fill Pixels on the Options Bar for the active Rectangle Shape Tool
  3. Then Draw in your shape as I have captured below. The append the -slideshow hint to that Layers cation/title in the Layers Panel.

Then go File > Automate > SiteGrinder2 to launch the plugin module.

At the plugin module:

  1. Click the SlideShow tab
  2. Then click the target Source folder area (encircled in red)
At the image directory for slides dialog, set your desired options as captured below, then click OK to the lower right to commit changes.
Then Build to Folder and Close the plugin module to complete the slideshow creation.

Preview Slideshow example.