Creative Energy Team

Creative Energy Team, home page

  • graphic design
  • image editing
  • XHTML/CSS coding
  • server-side (PHP) includes setup
  • content insertion
  • W3C validation (XHTML 1.0 Strict, CSS 2.1) upon delivery
  • cross-browser testing (Chrome, Firefox, Internet Explorer 6/7, Opera, Safari)
  • Google Webmaster Tools setup (Google Analytics, XML sitemap submission)
  • favicon creation

Creative Energy Team site

Notes

The site’s look is inspired by another site that the client had liked. The white container, background folds, and photo vignettes are similar, but obviously the Creative Energy Team site has important differences. The most prominent of these differences are the logo, which is designed by someone else, as well as the glow effect in the background and the navigation menu.

Background Folds

Creating the background folds in Photoshop was more difficult than I expected. For the initial fold, I used a large, soft, and round brush to paint just outside of an elliptical selection. As a result, the fringes of the brush appeared inside the selection while the rest was cut out. The painted layer was then stretched and its opacity was modified. For subsequent folds, I either repeated the entire process or just copied the layer and varied the copy’s length and/or opacity.

Creative Energy Team, background folds

Navigation Menu

Instead of using Flash-based navigation like the mentioned site, I extolled the virtue of usability to the client. I experimented with the jQuery-based Superfish solution before using a different one that I had modified. The menu proved to be unusable because gaps somehow appeared between sub-menus and their respective main-menu links. I then settled with the trusty Son of Suckerfish solution.

During this project, I learned how to preserve the styling of a main-menu link when the user navigates to a sub-menu link.

Creative Energy Team, navigation

In typical HTML structure, sub-menu links technically aren’t children of main-menu links. They have a common ancestor though, that is, the parent <li> element of each main-menu link. Whenever the user hovers on a sub-menu link, s/he is still—on a broader scale—hovering on the parent of the main-menu link, although not on the main-menu link itself. Realizing this relationship had been my main hurdle.

Photo Vignettes

The client had bought licences for the stock photos that I edited with Photoshop. I used a round brush with a large Master Diameter and a low Hardness setting to paint spots of white around the edges of the photos. The size and softness of the brush quickly created the vignette effect that the client wanted.

Creative Energy Team, photo vignette

Comments are closed.