Thursday we learned about creating multiple optimized images from one Photoshop webpage comp.
Today, we’ll review those steps and take it further. We’ll use Photoshop to slice and optimize the comp images (that’s the review part).
We’ll also use Photoshop to actually create our html page! When the page and all the images are created, we’ll open it up in Dreamweaver and make our Javascript rollovers.
We started work on the artist/musician assignment, which is fun and creative and challenging.
This week, we talked about and worked on these steps of the assignment:
Choose artist and gather images.
Using Photoshop, create a static comp of your artist page.
Slice up the comp into the required areas: titlebar, navi, etc. Slicing, BTW, is a Photoshop term that means cutting up a comp.
Optimize each slice appropriately for the web. We will cover slicing and optimizing thoroughly.
Create a gif animation to put in the little animation div in the lower right-hand corner.
(I’m going to simplify the steps below. We’ll use Photoshop to create slices and to create the html for our pages. Much better!)
Next week, we’ll talk about and work on the following steps:
Open the Artist.html page from the materials folder in TextWrangler. Save it as your Artist webpage. In this html page, place the images you created in the slice/optimize process in their correct divs.
Returning to the navi and back and next slices, we’ll make rollover animations using Photoshop.
We’ll plug the ani, navi, and back/next slices into their areas.
The due date for the Scuba/100k assignment is extended to Thursday, Oct. 4 at 5:45. We’ll have a crit as soon as they’re all uploaded.
Here’s how you put all your styles into an external style sheet.
Create a document with the extension .css. For example, mystyles.css.
Put that document in the same directory at the same level as the html document you’re working on. In the same folder, in other words.
Copy all the styles from the head portion of your html document. Just the selectors and declarations – not the <style type=”text/css”>…</style> portion.
Paste the styles into the mystyles.css document.
Delete the styles from your html document.
Link mystyles.css to your html page by putting this in the <head></head> portion of your page:
Download the Handout for the assignment and print it (though it says exactly the same thing as the assignment page, so you don’t have to download and print it if you don’t need it.
Web Gazette Stage 3 should be uploaded by tomorrow, Sept. 21, at midnight.
Reading:
Chapter 7 – Adding Images: p. 123 to 132.
Chapter 13 – Colors and Backgrounds: p. 284 – 300.
Chapter 21 – Web Graphic Basics: p. 507 – 533.
Chapter 22 – Mean and Lean Web Graphics: p. 541 – 553.
This week we finished up and critiqued our resumes and finished up Web Gazette.
In order to do that we had to learn about laying out web pages using CSS and HTML. The basics of how to do that are in the slide decks from this week, below.
Next week
We’ll start a new assignment – Scuba! You’ll learn about optimizing images for the web.
Busy week!
