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.