Sunday, October 2, 2011

New Assignment: Create A Graphic Based Website With Photoshop and Dreamweaver

Hello Students,

You newest assignment is to create a small website (based on your previous html project) using the "Photoshop to Dreamweaver" technique. This is your first graphic based website and will prove challenging. Use class time wisely, missing class time or wasting time will severely impact your ability to complete this project. Your Photoshop design should reflect the class time given for the work. Minimum effort will yield a minimized grade.

I will demonstrate this technique, take notes!

The Photoshop to Dreamweaver Process:

1. You will create a homepage template complete with your name at the top, photo banner and a graphic menu bar. Leave an area below to use for content.

2. Then you will use the "slice tool" to cut up and output an html file and compressed graphics ready to edit into a website with dreamweaver.

3. Add any extra formatting to your template in Dreamweaver, center your page and elements and begin programming your buttons into links. Do not stretch or move any of your image tiles or graphics, this can break up your tables.

4. Create copies of your template and rename into the appropriate file names for your menu navigation. Do not do this step until all programming and edits are made to the template page. Any errors will have to be fixed 4 or more times otherwise.

5. Edit each page for content, such as your home page, contact page, links, about me etc... each page should have unique content to test your navigation. 

PSD To Dreamweaver Project Details:
• You must use Photoshop to create your original design and Dreamweaver to insert the proper HTML tags.
• Each page must contain a simple menu at the top for navigation
• Must have a total of 4 pages, more is allowed for extra credit. Page titles can be "Home, About Me, Contact, Favorite Websites" or your choice.
• Include 1 image or photo on each page.
• Include at least 3 links to external websites (for instance your blog, the class blog etc...).
• You must include your email address either on your contact page or in your menu.

4 Days for Graphic Design and Photoshop Work
4 Days for Programming and Testing

Extra Credit:
- Create rollover buttons for your menu
- Create an animated Gif for your page banner
- Create a seamlessly tiled background for your page template
- Use one of the tutorial links below to create your website

Check out these links for help with the PSD to DW technique or if you are looking for some website design inspiration

100 Great Simple Website Designs

Workflow Video:
PSD- Dreamweaver Website Part 1 - How to "slice" up a design to prepare for coding
PSD - Dreamweaver Website Part 2 - How to code your sliced up PSD page