How To Write a Web Application – Part 3

Creating Backgrounds in Photoshop

Original layout background examples

It is time to open up Photoshop and attempt to draw the backgrounds to bring the site design to life. Looking closely at the original free layout from Template World, I see that each background section, including the menu has a little shadowing to give the impression of contour.

Straight away I decide to replicate this idea of shadowed backgrounds myself, but I also decide that apart from the background images, all other items on the page will be flat and without shadow. There are limits, and I can’t see myself drawing thngs like you can see on the right where they have the Jobs send CV here graphic placed in a rounded box with a shadowed background.

Having designed the layout in my last post in the series, I set about making backgrounds in Photoshop. It turned out to be quite easy.

Fill a rectangle with the colour of your choice, then use either a black to white gradient set at about 60% opacity, or a darker version of your chosen colour to white gradient at say about 60% opacity to apply a shadow to the top section of the rectangle.

If you do this you start with the first image below, and end up with the second:
Without shadowing With shadowing

If none of that made any sense, I found this web 2.0 styling tutorial that describes the same thing, only much better than I have!

Next I designed a logo. Probably not the best logo in the world I hear you say, but it will do for now. I made it from text, applied a gradient, a shadow plus outlines and stuck a few pin icons into it, then placed it on a shadowed background that would seamlessly fit in with the web site shadowed background image.

My LogoThat brings me to the name I have chosen for the web site and application. In homage to that fabulous Essex boy Russell Brand, (whose turn of phrase I rather like, without wanting to further glamourise his rather debauched lifestyle) and his autobiography entitled My Booky Wook, I chose My Money Woney.

The idea behind such a ridiculous name is that book-keeping is probably the most mind-numbingly tedious of pursuits, and I want to make the process as pain-free and irreverent as possible.

In terms of jazzing up the general internal layout, I created a home page, and some subsidiary pages. On the home page I placed rounded rectangles as created by the rather brilliant Stu Nichols of CSS Play. Now while these lack shadows and other artistic accoutrements, they are made without the use of images and only with CSS. This means you can forget the headaches associated with having to artificially reduce the amount of text you want to write just to make it fit into a drawing of a pre-determined size. The curved rectangles are resizeable at run time.

Here are the prototyped results.

I tested all the layouts for various platforms and browser versions in Browsercam, and all seemed well. I think.

Trackbacks

  1. […] bookmarks tagged writing Writing a New Web Application – Part 3 saved by 9 others     ooohhhyeah bookmarked on 12/30/07 | […]