DylanBS+Project+1+Process

[|Final Copy of Website]

[|30 images taken for this project]

Rough sketches for ideas pre-project :D Second Idea.

The beginning process of creating all the storage units and comic boxes, both containing either 15 or 10 comics.

My Rooms construction!!! Work in Progress.

The items above are my general template for my categorizing system, I plan to have multiple comics stacked behind eachother in a box, and when hovered over, slightly elevates itself from the box. The boxes will be colour coated to demonstrate the era of comic, Ex. Gold Age, Silver Age, Bronze Age, Modern (Black/Onyx) Age.

This is the basic template for my website. The images will be displayed within the poster hanging on the wall, where if i have enought time, i will fill up the shelves with different books and items that will be interactive, and allow you to explore and get to know me. This a black and white outline of my room, and the items i collected were comic books.

The actual coloured photo of my room that i used for a template.

1) 2)

__Finding fast/cheap ways to fix problems!!!!__

1) The way that dreamweaver works is by layering images and text. Someone told me that java scripts some times have problems when you put an item on top of it, and it has a chance of breaking. That would be a lie. I started by skewing all the photos within photoshop and put them in a sort of slide show javascript. The problem was i didn't find out about actions, within photoshop till later on that week... Thank you Melody!! so instead of redoing all my images to make them standard i created a frame overlay to cut of the excess and make only the square part visible. PNG Format is Boss.

2) The idea of linking 1 button to 2 different items in my mind is not a complicating process, but with java script it is. Due to my lack of training in coding and the time to learn that level of coding, i've went to plan b. I used photoshop to put the image and text onto the same PNG. I know this is not cool, and is formally know as the __Brute Force Method__, but drastic times call for drastic measures. I had to level off all the images and text elements, which was no easy job. It took around 5 hours to get it all measured out correctly and put up on the site.

This is the working test site, all comics successfully move in and out of the box when hovered on. On press the comic is displayed in the picture frame on the wall just as explained earlier. The next step of my plan is to allow the name and issue of the comic to be displayed. My first test is with speech bubbles... which failed cause it looks horrible. So im attempting to put the entire site into a comic box, as if it was in a real comic. The addition of the yellow bar in the corner is to display the desired information, also closely relating to traditional comic format for the narrater.

**On Hover =**. The Above describes how to understand my categories, these little boxes for each session will be on the page to match the colour of the box, they display the era name and the time period.

So this is my final draft for this website. Yes i want everyone to look how the perspective of the picture frame is off.... LOOK AT IT. The reason for this is because no buddy is perfect, :D. Next, underneath each comic box are the smaller rollovers mentioned above, and they correspond with the box above them. If the box above them are rolled over a colour appears allowing them to be linked with the boxes below. I didn't want the boxes to stay in full colour because it takes away from the comics, and i believe that one of the major aspects a comic is the bold, vibrant colours it uses. The white allows the comics to jump out at you a lot more.