Posts Tagged ‘Personal’
Web – Guitar Gears Gallery
Here’s a fun website I’ve created, dedicated to my guitars, effects pedals and amps. It was created using HTML and CSS in Dreamweaver and took roughly a week to complete.
I started with some quick design ideas in Photoshop for the general look and then once I was satisfied with the layout; I progressed through to Dreamweaver for the coding design.
The photos were taken using a Canon 20D dSLR and then underwent some enhancements in Photoshop with level adjustments and colour correction. I used the High Pass filter to sharpen the images up.
Lightbox script plug-in was used for the gallery section as it’s a simple and nice way of viewing the photos.
I tried implementing some cool CCS3 functions that I learnt along the way and played around with transition effects which really adds dynamic to the site.
The drop down menu was done using HTML unordered lists and CSS to hide the menu, I used ‘absolute’ position to make the list appear on top of the menu, turning it into a “drop up” menu system.
The homepage was the last page to be created and took me awhile to figure the best method for linking the images.
The illustration images are in PNG format with transparency, I tried seeing if I could use the hover link state in CSS to create a mouseover, I found out this didn’t work since the cursor still interacted with the transparent background.
To create the end result I used the Image Map in HTML to draw the link poly shapes and added a javascript for the onmouseover action.
I added a preload javascript for the mouseover images to give a better result with no delay when users first hover over the illustration links in the homepage.
I tested the site through various browsers and there were a few small compatibility issues mainly with fonts which has mostly been fixed, there’s still an issue with Firefox support on cursive font which causes not to the display the primary custom heading font, I found this quite odd since all the other browsers support these fonts.
I also had checked the site in older IE browsers and there was a problem in IE7 not displaying the content, this is now fixed with a CSS code specifically for IE7 only with a small alteration in the positioning of the container element.
Overall, I really enjoyed making the site and was a lot of fun!
Illustration – Guitar, Cap & Me
This is an illustration of myself and my guitar. The shadow was created by copying all the shapes and applying the Pathfinder > Add to shape area (and click expand) to merge all the shapes into one. On the baseball cap I added lines to give a knitted texture, this was created simply by drawing the top and bottom lines and then selecting both and applying Object Tab > Blend which adds and morph the lines inbetween.
Illustration – 1986
Here is a vector image of myself when I young. This was created on Illustrator with the aid of an old photo as a reference. I tried to use simple neutral colours and light tones to show youth and innocence. I’ve reduced the Opacity on the skin area down for a more natural blend and the effect used on the hair was Filter > Roughen. I like this piece of work in particular as it reminds me of a much simpler time.