MDIA 3207 - Assignment 2
This assignment is about being a tour operator, and we were given a couple of inspiration sites.
Here's how I'm (currently) going about laying out this assignment:
- Load up Firefox with the'Fireshot' image capture add-on.
- Copy a 960 column 'PSD template' to my assignment directory and open it with Photoshop.
- With Firefox, search for some inspiration sites.
- Use Fireshot to capture the entire page and paste it as a new layer in Photoshop.
- Repeat for a few sites (make sure you rename the layer to the URL of the site).
- Once done, I may wish to cut up sections of the pages into blocks, each on its own layer.
- Create a 'mock' layout using the various blocks.
- Hide everything except for my 'mock' layout, and lower it's opacity and set it as the background layer.
- Now I start designing my own site in Photoshop loosely based on the 'mock' one.
- Of course, my PSD to CSS conversion will make it looser still.
- Then there's the Javascript component. Yikes!
PSD template:
Update:
- Playing with Photoshop built-in grid sizes & colour contrast
- Turning off template once I am happy with overall layout
- Printing out pages of the inspiration sites
- Lay out major sections first, then work on detail
- Using Photoshop folders and name them
- Using shape layers drawing mode and not fill pixels and using masks for rounded corners
- www.sxc.hu has a LOT of free stock images and graphics
- I'm developing core HTML/CSS first, then adding Javscript later
- Yikes! Don't forget cross browser testing. Sure wish there was a Firebug for all browsers.
Update 2:
- Most of the HTML/CSS is done
- The key to most of the Javascript effects are found in the examples,
I'm thinking 6-3, 6-11, 6-5, 6-8 and 8-8 (for a random image on the
main page).
- Using 'mod' or '%' saves some lines of code when going through a slideshow
Finished. I was really happy with how this looked in the end. Sure it could have done with some more polish, but the image management was really cool.