Project+1+Notes

Creating Image Series Using PhotoShop Slices

 * 1) new photoshop document (600px x 600px)
 * 2) two vertical/two horizontal guides (3x3 grid of 200px x 200px) - be careful on placement of guides - make it to the exact pixel
 * 3) select slice tool from tool bar (click/hold crop tool in toolbar)
 * 4) populate each grid unit with a unique colour (9 total)
 * 5) click 'create slices from guides' button in options bar
 * 6) right click on the created slices, make sure they are the intended width/height (200x200) and have exact placement (e.g. x 400, y 200)
 * 7) File menu / Save for Web...
 * 8) For each slice, use GIF setting
 * 9) Double click and give each slice a unique/appropriate name (e.g. blue.gif )
 * 10) Once all slices are named and set to .gif format, click Save (make sure ‘Images only’ is selected)

Creating HTML/CSS Documents

 * 1) in your HTML editor, create a new ﬁle
 * 2) in an external CSS ﬁle, create a css class for each box
 * 3) make an HTML ﬁle that links to the CSS ﬁle (use the tag)
 * 4) in positioning your grid on the page, give yourself a buffer of 50 or 100 pixels from the top left corner
 * 5) make a div tag for each class created, with an image tag inside the div
 * 6) save and test the page in a browser, your image tiles should be seamless

For the other grids - you should use the same CSS file for positioning each class - duplicate the first HTML ﬁle you were working on - for a different colour grid arrangement, come up with a new layout in Photoshop then rename the image name in the src to recreate it - also create a link on each page so they sequence in order and loop back (1-2-3-4-5-6-1)