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:
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.
Deadlines:
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
- 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
Inspiration:
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
