W140 - Vector Graphics - Final Project

This is the documentation for the site that I created as my Final Project.

This site was created with a dual purpose in mind. First, I was asked to create a newer and better looking website for Vanguard Vaults, where some of my family and friends work. Secondly, this site will be used as my final project for my Vector Graphics class at MTI College.

The main vector graphics that I made are the logo (called vanguardLogo.gif). This file was created in Adobe Illustrator and then modified a little bit in Adobe Photoshop. The image was optimized in Adobe's Image Ready software. I basically optimized the image by tweaking the optimization settings... Things like the # of colors and such, until the desired results were achieved.

The next set of vector graphics that I made were the buttons that appear beneath the logo. There are 6 different buttons (depending on which page you are currently on), and each with 2 different states (up and down) for the roll-over effects, for a total of 12 additional images. I put these buttons into a table under the logo to give it the look of a nav bar. These images were all also created in Adobe Illustrator and then modified in Adobe Photoshop and finally optimized in Adobe Image Ready. The process was basically identical to the process used on the logo. It is really just playing with the optimization settings until the desired result is achieved. The main thing that I changed was the number of colors used. I reduced the number of colors to the fewest possible that still gave a good-looking image.

All the other images used on the rest of the pages are actual photos taken with a digital camera at the Vanguard Vaults site. These photos were then uploaded to my PC where I used Adobe Photoshop to crop the images down to show the desired picture. I then changed the image size to keep the images somewhat small so that download time would not be too excessive. I then transferred the images to Adobe's Image Ready software where I optimized each file as a .jpg. Each file was done with it's own settings because each is different. I basically adjusted the number of colors used and the quality to give the best results that I could get, with the smallest overall filesize.

I also created an animated banner to go along with the Vanguard Vaults project. I again used Adobe's Illustrator to create another version of the Vanguard Vaults logo and then moved that file into Adobe Photoshop. I then moved the logo onto a banner sized file in Photoshop (468 x 60 px). This gives the result of the logo being on the left side of the banner and the white space for the fading text on the right. I then created all of the text to appear/disappear on a separate layer for each color of text (five grays and one black, I believe). I then moved this file into Image Ready where I animated the banner by creating animation cells in the animation palette and showing/hiding text layes very quickly.I also used Image Ready to optimize the banner. Again, the optimization was merely tweaking the settings to get a good-looking result.

Overall, this was a very exciting project for me because it was my final project (of course) and because it is one of the first chances that I have had to utilize the skills that I have acquired! And it might even make me a little bit of money for once! I'm also appreciative of the opportunity to get my name out there on the market! So, like I stated earlier, this has been a very exciting project for me.

Please use the links below to navigate to the various portions of this project and take a look at my handiwork!