Header for AngelicAilee designed and coded by yours truly in CS5.5 was released today! So here are my comments and notes about the process.
Created & Designed in: Adobe Photoshop CS5.5
Coded in: Adobe Photoshop CS5.5 & Adobe Dreamweaver CS5.5
First Issue: The Navigation Bar
The navigation bar wasn’t much of a difficulty to code since the “Slices” and “Save for Web and Devices…” option in Photoshop that sends the file to Dreamweaver with basic coding helped. It was a pain in the bum when I was uploading it to the preview forum though. 2 sets of images were needed for 3 sections of the code: 1st section was for the normal image, 2nd section for what the image looks like when the mouse is on top, and finally the 3rd section for what it looks like when the mouse comes off. With 11 categories, it was just a matter of being organized so I don’t mess things up, put the wrong image in the wrong spot etc.
Second Issue: The YouTube Video
No one told me that Flash and z-index hated eachother. Nobody. As you can see in the image, to create that layering effect on the top right corner, you need to use the z-index property. However, when you use Flash (the youtube video) as a layering element, it refuses to work. On my Mac, it looked fine on Google Chrome, Firefox, and Safari. Then I tried it on my PC. It refused to work on both Google Chrome and Firefox by ignoring the z-index and just staying on top of the “Ailee’s Latest Performance” cloud. I didn’t get why then, I still don’t get it now. Hours, days, of me just mulling over how to get over this problem. I also asked my design friends if they knew how to deal with this problem. They tried helping, and I thank them for it, but it remained a mystery.
When push came to shove, I had no choice but to alter the “Ailee’s Latest Performance” cloud lower so that even if it messes up, it’ll sorta look like it was part of the plan. Given this problem, it still came out okay. Ailee fans loved the header, and I’m glad that they do. In the end, it all worked out and everyone loved the new header :)
Focus: Web Design
Date of Completion: n/a