Comps to Templates - main page

In class I will be answering questions about the process of creating a template from a Photoshop image or from template code.

I have video demonstrations of how to do both of these techniques. I encourage designers to watch these before the class. I invite all students who are interested in design to watch the videos when they have time and consider taking CS 50.21 A/B - "Web Design with CSS and Graphic" so that they can master the concepts covered in this lesson.

In the demonstrations listed below I show how to set up a plan for converting a Photoshop file to HTML / CSS and image slices. After the basics of this design is complete I could also follow some of the steps in the demo pages along the left such as add DW library items, ssi, random images, aslett, etc.

To sign up for an appointment to meet with me, visit the class message board and select "Show Comps to Instructor" remember the password to the message board is "messages"

Here is what you bring to the meeting:

Designers - A Photoshop document which shows the home page and a second level page. If you did not design in Photoshop but instead created the comps in Dreamweaver, then bring that document instead.

Interactive Media Developers - Flash files that show what you will be doing once all the content goes in. This could be a Flash file or Photoshop.

For example the Humane society plans on using accordion navigation for a history section of the site. I would like to see the opening screen of the navigation and maybe one additional screen. I would not expect the section to be complete, but we would be able to see the size, color, and font which will be used to create this area of the site.

If you will be asked to edit the video I would like to see a short video sampler which shows the title page, one bottom third, and one transition, which are examples of what will be used for the entire edit.

Review of Photoshop to Code conversion from CS 50.21B

Students who have recently completed CS 50.21 A/B will recall that for client#3 we learned how to take a Photoshop file and convert it to HTML / CSS / and image slices I have included those videos below as a review or as new material for those who have not completed the course.

:: Create color overlays of div tags in Photoshop

:: HTML / CSS shell

:: Use Photoshop to create image slices

:: Nav. bar code

:: Add content

:: Create faux columns

:: JPEG or second level page with div overlays

:: HTML shell / CSS shell

The image that displays in this div tag of the content div

background

The content div tag will flow down to the location of the tallest column. The browser will fill the content column with this 2 toned image and 2 columns of color will display. It is a very slick trick.

Second level page with faux columns

Second level page with no faux columns and with long LEFT column

Second level page with no faux columns and with long RIGHT column