Khalida.biz website - the making of.. part 2: Background images and initial design

For this website there was an initial design that used the same pictures as the current site, but it looked quite different from the end result you can see now at www.khalida.biz

See one of the 'first design' pages here:

And the end result:

The original plan was to create pages that had a similar look and feel to the old khalida.biz website, but with a ligther background, matching the white backdrop that was used for the DVD recordings.

The background images were all composed of:

• a white backdrop (easy peasy)
• a picture from the new shoot (I selected 8 pictures in total, one for each main menu item)
• the new logo (created for the DVD cover, adapted to the costume color of the pics)
• a font for the 'motto' (I decided on 'Nuptial', which we also used for the wedding invitations :)
• a flower brush (I bought a set of brushes to use in Photoshop CS3)
• a menu bar, matching the color of the picture
• menu text font (zapfino)

Each of these components had its own 'layer', which means they could be edited separately and copied to the other background files easily.

The backdrop was the easiest part, and because it was white the pictures did not need to be cut out very precisely, as they had a white backdrop as well. What I did instead was make a wide cutout of each background picture and soften the edges using the eraser tool with a blurry edge and large brush.

The logo was adapted to the colors of the main picture using a 'gradient overlay' effect and 'fancified' using the 'bevel and emboss' effect. I also added a drop shadow to give it a bit more depth.

The menu bar was created by selecting part of a new layer, giving it a solid color and then copying the  gradient overlay from the logo (its easier to copy and modify a gradient overlay in different pages then creating a straight-up gradient for each page)

The menu font I wanted to use for the website was Zapfino Linotype.

Normally I would just add the menu text in the .html file itself and specify the font name in the .css file like I did in my other websites, but alas it turned out that this font is not supported in all regular browsers, which meant I had to fake it by loading the font into Photoshop and adding the menu names as a separate layer in the background image instead.

For the picture galleries I used Simpleviewer, a free gallery program that I had some trouble with at first, but seems to be working better now. 


I was very excited with the end result (see above) so I immediately started creating the other background images and uploaded the new webpages to a test site after that. But, while testing these pages on different browsers and after showing them to my design buddy Sophie Armoza of Israel and to Eric from AzizaRaks productions the conclusion was that this design had a few drawbacks:

• There were too many links in the top menu, making it too wide for viewing on most phones
• A centered webpage would be more adaptable to different screen widths than a left-oriented one
• The pictures next to the text did not always show up on a phone browser
• The top section looked a bit 'empty', plus it could be used to link back to the home page, and/or host some social media icons that follow on each page (thank you Sophie for this one!)
• The overall impression was that the pages looked nice and clean, but that they were 'too bright/white' for viewing comfort, and that the pictures with arms crossing the menu bar looked a bit strange setup-wise.
• Not all information fit equally well on the pages, as I had used a set height for the text area which was perfect for wide screen computers but not so good for small laptops, notebooks and phones. Vertical scrollbars are not supported by all browsers. 

So.. Back to the drawing board for me! Thankfully a lot of the work previously done could be preserved.

What did I do next? Read more in the next blog entry :)