-
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.5First 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 so much 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. Honestly, it wasn’t, and I’m disappointed that I wasn’t able to solve it. But, given this problem, it still came out okay. Ailee-ans loved the header, and I’m glad that they do. I expected the worst to be honest. Complaints about how it doesn’t show up properly, especially. In the end, it all worked out and I’m happy that everyone loves the new header :)
-
Coded: for Blogger, but can also be used for other sites as well… I think.
Time taken: Approx. 3 days of on and off designing and coding.
Programs Used: Adobe Photoshop CS4 | Adobe Dreamweaver CS4
Credits: ColorLovers | Dezinerfolio | Blogskins | WeHeartIUDescription: IU’s Dream Waltz is a limited elastic-fluid hybrid kind of design. It was designed so that if you resize the browser window, the pattern is continuous: IU remains at the bottom-left/bottom-right, and the blog window is still the same size no matter how big the screen is.
_ The frame was created in Photoshop, then saved it for Web and imported it into Dreamweaver. After that, coding the frames, where everything was supposed to go, how it appeared(e.g. font colours, size, hover abilities, headers, links, etc.) just went along rather easily.
_ The menu on the left took the longest to code due to the fact that it wasn’t showing up properly in Dreamweaver and ended up having to code that somewhat separately so it worked how I wanted it to.
_ I had planned to leave placing the IU images to last mainly because they weren’t a /huge/ part of the design, though now that I look at it, they seem to help quite a bit xD Resized and cleaned up the images in Photoshop and coded them to be fixed into place no matter the size of the browser. Honestly, I had thoughts in my head whether I wanted to vector the images instead of using the actual images but due to the fact that it would distract from the main point of the blog (which would be the entries haha) I chose not to.
