SiteGrinder

Features & Benefits

Photoshop to Facebook Fan Pages

     "I recently purchased the SiteGrinder 3 Web Suite and have customers interested in having Facebook fan pages...I can provide that service to my customers without having to re-work stuff outside of Photoshop."

John Harvey, Pheonix Development Group

 

 

 

 

PSD Designs to Facebook Fan Pages

The Media Lab SiteGrinder 3 platform automatically converts Photoshop PSD files into standards compliant pages that will enhance the Facebook user's web experience.  SiteGrinder 3 creates elements such as customized CSS text, web-optimized images, interactive buttons and menus, drop shadows, rounded corners, transparency, CSS animation and more.

 

Click the image to the right and try out our live iFrame page generated by SiteGrinder 3 or Go to our blog and read more about converting your designs from Photoshop to Facebook fan pages.


  • Pages created with SiteGrinder 3 work with the Facebook iFrame app

  • SiteGrinder 3 pages work with the Developer app so you can create your own iFrame app

    •
  • Create special content only visible to Fans

    •
  • Place QuickTime and MPEG movies anywhere on your pages

    •
  • Create finger friendly drop down menus for mobile users

    •
  • Supports CSS drop shadows, rounded corners and transparencies

    •
  • Embed Flash or animated CSS photo galleries into your Facebook Fan Pages

    •
  • Bring full website content and capabilities to your Facebook pages, including eCommerce

    •  

IMPORTANT – Known Facebook bug: If your Facebook profile is set to "secure browsing," you may not be able to view iframe fan pages. Facebook is working on a fix. Until then, you can access your Facebook privacy settings under Accounts -> Account Settings -> Account Security Make sure to uncheck "secure browsing" to access iframe fan pages. Click here to go to the office bug report.

 PSD to Facebook and PSD to HTML with SiteGrinder 
 

CSS Searchable Text from Type Layers

SiteGrinder 3 can convert any Photoshop type layer into real, styled, searchable, selectable text on a web page. SiteGrinder can automatically reproduce most character and paragraph styles that you’ve defined in Photoshop using CSS behind the scenes.


CSS Text should always be used for the main body content of your pages. It can also be used for buttons, menus, and links. There are two ways in Photoshop to tell SiteGrinder to convert your Photoshop type layers PSD to CSS text:

  • Add -text to the end of the layer name

  • or, Select “none” for anti-aliasing
 PSD to CSS is easy with the SiteGrinder 3 Design Manager 

 
 

Advantages of CSS Text

Mastering CSS is tantamount to success in web design and development. Using SiteGrinder 3 with Photoshop will make you a PSD to CSS expert without writing one line of CSS Code.  The SiteGrinder Design Manager lets you create:

  • Live CSS text which is searchable and selectable by the user

  • Text directly in the SiteGrinder Content Manager or any text editor

  • Links on words or phrases within text by using the -links hint on another layer in conjunction.

  • Display text in large sizes or text to be read by voice software for sight-impaired web users. Another benefit to the sight-impaired users (and SEO) is the use of Faux-Text. Using the faux-bold or faux-italics will give emphasis to your text.

  • Heading hints (-h1, -h2, -h3, -h4, -h5, -h6) that will help improve emphasis for search engines.

  • Live text that is essential for Search engines such as Google and yahoo to find out about your site

  • CSS text which downloads much more quickly than an image

  • New text in the Content Manager without returning to Photoshop

 Change the color of your text links easily! 
 

SG3 Adds CSS to Photoshop PSD Files

There are a lot of CSS text options that Photoshop doesn't support. Luckily SiteGrinder makes them available to you through the Design Manager. These include:

  • Backgrounds and Borders
  • Background color
  • Border style and width, even custom for different sides
  • Drop shadows
  • Text Scrolling and Wrapping
  • Bullet and Number Lists with the -menu hint

By default all text layers that are converted from PSD to CSS text on the final page are further editable in the SiteGrinder Content Manager. So you can make changes to the actual content, and you can also edit text, menus, buttons, and links right in the web browser, even from a remote location that doesn’t have SiteGrinder or Photoshop installed, if you also have the Control add-on.

 Convert your Photoshop PSD to CSS text with SiteGrinder 3