A little more web design--A rollover tile mosaic

So, for those of you who actually occasionally read my blog, you're aware that I've been working on a website:

http://www.totheleast.com/

I'm actually pretty proud of it.  It's mine through and through from the very beginning.  I haven't used any templates and it's Mostly all HTML--therefore it can be viewed on iDevices.  I don't normally blog about process anymore, but I have a little bit of time on my hands to do so, so here it is.

The problem: I forgot to add a tab on the menu: Inspirations.  Normally not so much a problem...just go in, add it, and wah lah, a new page!  Well, considering I created most of the website using Photoshop, I made my own template from there to work off of, I had to edit the template...and lots of other little things that I won't bore you with.  (The solution!)

The tricky (fun) part came after I created the page.  The problem is that on the previous website of his, the Inspirations page was just a list of random links...which worked fine there because that site was basically just a draft, but this one needed to be a little more up to date.  How could I display links in a way that worked well with the flow of the site but also easily navigated (not using flash)?  I wasn't sure so I took Cedric (my dog) on a short walk and began the brainstorming process.  I finished with the idea that I wanted to do a mosaic of images...but I wanted to overlay an image over all of them that joined together saying the words "Be inspired."  To get an image of what I mean, go ahead and take a gander at the finished product at:

http://www.totheleast.com./inspirations.html

I did the math and decided that I wanted it to be a 4 row, 3 column table and then divided it according to the appropriate dimensions.  You can see here that I added lots of layers on the same small canvas:

This way I was 100% sure that every tile of the mosaic was the same size.  When on the website, each tile takes you either to a different website or asks if you'd like to download a PDF.  So the Stitches of Love that you see here is all in one neat little folder.  If you click it, on the website, it will take you to an article about a group of old church ladies stitching together clothes for needy children.

After this, I created a document with a width of x and height of y.  x=the tile's width * 3 and y=the tile's height * 4.  That way I had a 3x4 grid that I knew was the right size.  (I knew in the beginning that the width of the table could only be 670 px wide, so in the very beginning I decided to divide that by 3 to figure out the width of each "cell" in the table[grid]). 

I wanted this to be what laid over everything (minus the blue lines (slices), those came later):

Note the groups again, they make things much cleaner.

After designing that and deciding I like it, I hid that layer and put all the pieces of the mosaic together and formed this:

And then proceeding to chop each one into slices.  I didn't try to slice manually, though.  If you look closely at the time I have a "Fixed Size" slice.  The dimensions were the same size as each of the little tiles/cells: 222x187 px.  Here I saved each image for web and devices, then I turned on the Layover group again (the one with the "Be Inspired." design) and pulled down the opacity then saved all the tiles as for web and devices again.  That way I had 24 individual files: each slice saved 2 ways, 1 with the layover on top of it and one without.

In dreamweaver I created a table with the right number of cells and dimensions then just added each image in the table as a rollover image and linked each photo to the correct file/destination.
DONE!

So there ya have it, creating a mosaic of tiles utilizing Photoshop.  Woop.

If you haven't seen the finished product yet, click HERE.

--------------------------------------

Also I finally framed (horribly) this painting I bought in Ghana--I'm going to redo it...something went way wrong.  I'll tell you the story about the painting on my next post.

Cubism made its way to Winneba, Ghana!