This simple website tutorial by Jean-Baptiste Jung was brought to our attention recently: http://psdvibe.com/2009/07/07/create-a-webdesign-company-layout-in-photoshop/ with the question of how to prepare it to be SiteGrinder ready. You can download the .psd that Jean-Baptiste made right from that tutorial.

So I downloaded the .psd file and got to work. It was a pretty easy conversion, took about an hour.

Here is the site I made with SiteGrinder: http://www.medialab.com/PWMenus/websites-that-rock

And here is the .psd after modification:  http://www.medialab.com/PWMenus/websites-that-rock/download/webdesign-company_sitegrinder_ready.psd.zip

And, here are the steps I took to convert it. Where there is an A and B step, the A step was in Photoshop and the B step in the Design Manager. So I did all the A steps in one pass, and then all the B steps. But I’m presenting them this way so you can read about each layer and its matching operation in the DM.

1 – First, I changed that header layer to header-backgroundcolor and put the Color Overlay Layer FX on it.

2 – I renamed MisterDesign* to be MisterDesign-button and made a -hover state layer for it as well.

3 – The whole .psd file uses a _lot_ of Rockwell, which won’t fly on the web. But Google has Rockkit, which is similar. So I downloaded and installed that and changed all the page text that was using Rockwell to now use Rockkit.

4  A – There was menu with a round cornered hilite. I can do the hilite in the Design Manager, so I hid that layer and put the -menu hint on that layer. I also changed its alignment to left (no justify) and put a consistent three spaces between each menu item.

4 B – In the Design Manager I customized the horizontal_menu style to have a background color on hover, as well as turned on all borders, set to None, but round corners. So now each item has a nice round cornered hover state that follows it.

5 A – Websites That Rocks.  Fixed the spelling. Put the -h1 hint on it. Also, the extra drop shadow layer isn’t needed that can be done in the Design Manager.

5 B – In the Design Manager I defined a new shadowed text style and set it to dark gray, two pixels x and y, no feather. I applied that style to the Websites that Rock-h1 layer and now it has a shadow again.

6 A- Named that top portfolio image  portfolio-picturebox

6 B – In the Design Manager I chose the Animated CSS Picturebox for that picturebox and chose CSS PageFlip as the transition (not supported in all browsers).  I also set it’s what to do when clicked behavior to  bigbox

6 B 2 – After assigning bigbox to the picturebox, there was now a bigbox entry in my galleries configuration in the Design Manager. I did not configure it (but could have).

7 – Named the text next to the portfolio image portfolio-metadata and replaced its contents with two metadata identifiers: [[title]] and [[description]]

8 A – Down in the slider area I put the -ignore hint on two of the thumbnails, and named the third one portfolio-thumb . I also added a new portfolio-thumbsheet layer below those three layers, with a little extra room.

8 B – In the Design Manager I chose the Paged CSS Thumbsheet for the thumbsheet, and set it to slide, instead of fade.

9 A – The left and right buttons next to the slider were named  portfolio-nextthumbset-button and portfolio-previousthumbset-button respectively. I set their Anti-Alias to None so they would be output as text buttons (not graphic buttons)

9 B – In the Design Manager, I changed the text_button style to change color on hover and add a text shadow on hover.

10 – I renamed that background layer to be browser-background and put the Color Overlay layer FX on it.

11 – I merged the border and footer layers at the bottom into one layer, used the marquee tool to define a pattern from those layers and then renamed the merge layer footer-background and applied Pattern Overlay Layer FX to it with that new pattern.

12 – I added a new main-column layer behind the main content of the page (starting below the -h1, extending down until the footer). I set its fill to 0% so it doesn’t interrupt the design in Photoshop when looking at it.

13 A – The form was laid up in the original Photoshop file as a bunch of layers. I sequestered those away into a layergroup and replaced it with one  project-form layer.  I also to the send button layers, merged them into a project-form-button layer and make a new layer for a hoverstate ( project-hover ).

13 A 2 – When the SiteGrinder dialog was opened I configured the form as an email form. [But I forgot to set the Thank You page]

13 B – In the Design Manager, I moved the centerline of the form as well as used the “unlabelled control layout”  to move the send button to the right.

14 – I put the -text hint on the what customers are saying layer

So that was the work in Photoshop. I did that, opened SiteGrinder from Photoshop’s File=>Automate menu and Built the design. When the Design Manager opened I made the aforementioned changes. The page was looking great.

After that I did the following few steps:

1 – Made a New Site in the SiteGrinder dialog in Photoshop.  ( I chose Local Only CM )

2 – I deployed my page design to that new site.  The Content Manager opened in the browser.

3 – From the Finder, I went to the site folder and made a new subdirectory there named download and dropped in a .zip file of the .psd

4 – From the Content Manager I edited the gallery and added images to it. I set the title and description metadata for each image.

5 – From the Content Manager I added a link to the mister design-button . I chose a File link and used the Site File… button to navigate to the .psd I had dropped into the site in step 3.

6 – I made the page design the home page by clicking the =index checkbox.

7 – In the Connection Settings dialog I filled out the dialog with my connection settings.  When doing so, I always use the Browse… button to select the folder on my site where the site should be uploaded.

8 – I choose Upload Everything from the Upload menu in the Content Manager.

9 – I wrote this blog post.

Hope this was helpful.