Our last assignment in Survery of Computer Arts was to create a simple portfolio website using Adobe Dreamweaver. I briefly encountered this program over the summer while doing website work for my hometown's athletic hall of fame. In all honesty, I was still pretty lost.
We spent most of class looking at previous student websites. The project was pretty open ended---we could make it look however we wanted. Looking at student samples helped me gather ideas of things to do...and NOT to do...
Here were some of my favorite samples:
By the next class, we were expected to create three separate web designs and present them to class. We had a critique over the designs and had to work with the one the class liked best. This went pretty well. It always seemed as though the class favorites were the artist's favorites as well.
My first design was based off my summer piece, King Rat. This was my second favorite of my three designs.
During my class research, I kept stumbling across websites with character rollovers. This really caught my eye and seemed appropriate to showcase my focus in sequential art and character design. I incorporated some of my favorite characters into my design.
My last design was definitely my weakest work. This was meant to be similar to websites such as Steven Darden's example, or Boneface's website. I really liked how clean and straight to the point they were. Unfortunately, I couldn't think of a cool logo. And everything looked too...plain.
The class was in favor of my second design, and I was thankful. I started designing my website pages immediately after the critique.
The class was in favor of my second design, and I was thankful. I started designing my website pages immediately after the critique.
Each monster had its own page that would correspond with the index page. I was mostly after readability and consistency-- I kept things pretty basic. The contact page contained twitter, facebook, DA, and blogspot icons that I had originally designed for the whale website design. I liked them too much to throw them away.
For the Index page, I wanted the monsters to appear in greyscale, then switch to color once the links were rolled over. I had to create 3 different images where each individual monster was in color. After that, my professor helped me use swap image rollovers within dreamweaver by creating hotspots around the links.
I had it working in no time.
The next class, our professor went over how to use Shadowbox on our websites to display our artwork. You have probably come across this javascript tool before if you've ever clicked a thumbnail and a black box with the artwork appears. Example here. If you're interested in learning how to use this pretty quickly, Professor Kaul made a simple tutorial on his youtube channel.
To do this, I first created several image thumbnails within Photoshop by scaling down artwork and cropping it into boxes. This was very similar to a website building process I did in high school using Flash.
After the image was completed, I divided it into sections with the slice tool. I imported it into Dreamweaver and typed in the shadowbox javascript. It even works with embedding youtube videos. Pretty neat!
I struggled a bit getting the code to work, but once I had it going, it was only a matter of copying and pasting over and over for each thumbnail.
The most unexpected part of the assignment was when we were asked to create a favicon for our website; it's the little square icon you see in the address bar for each website you visit. I never knew those little guys had names!
First, I cropped down an image of one of my monsters down to a square size. Then, in Photoshop, I brought the image size down to 16x16 pixels at 72dpi. It's pretty itsy-bitsy.
The image cannot stay a JPEG be converted to a .ICO file. Photoshop does not support this file type, so I used a generator website instead, www.favicon.cc . You merely upload your file to this website and download the .ICO file it creates. There's a code to plug into Dreamweaver after that---and then you're done!
So there you have it, folks! My first final project is complete. Make sure to take a look at the finished product. I think it's pretty rad.
0 comments:
Post a Comment