v.plonk!

Recipe for "Stylish Skinned MyOpera-Site"

What you need:
19MB capable graphics program (for example Paint.NET)
140MB vector graphics program (like Inkscape)
1 text editor with syntax highlighting (like Notepad++, VIM, jEdit or Textmate)
2-3 HTML/CSS debugger (Dragonfly, Firebug, etc.)
350kB of images (a bit more or less won't hurt)

Furthermore:
an image generator
an open font library
a pinch of CSS3 code snippets

Preparation time:
90min

Cooking time:
120min

Decoration time:
30min


Preparation
You need a high quality basic image from your global image dealer or hunt a nice image with your own camera. Make sure that your image has enough fat (space) around it so you'll be able to cut it to your preferred size. Cut and resize it to a total width of 920px and make sure that its right side has a good blending with a width of about 265px. Copy and save the lowest line of that image into a second image for later decoration of the background.

Now load your vector graphics program, import your fresh and already prepared image and add the navigation to it. Make sure not to add too many things into it at once or else it might burn (and crash the computer). So do it like your grandma always told you: "Save often save early, my dear."

Now just create a 1:1 screenshot of the image including the menu and reimport it into your image graphics editor. There you cut the menu in some tasty pieces of menu graphics. Save the pieces and the background seperately now and head to your image generator, where you create 2 fresh and delicious images for your site.

Last thing to do is to add some spicy backgrounds for the comments and the shadow of your future site.


Cooking
Use a fresh CSS file (or take one you're already used to) and add some sweet fonts at its top (not anywhere else, or it might spoil the whole meal!). Now open your old site in your favorite HTML/CSS debugger and start the actual cooking by changing the background of the head, using the prepared image.

Add the menu by including the small menu images and spice up their behaviour. For further improvement you might want to stir the menu parts a little bit, but don't overdo it... your guests won't like to twist and turn their eyes just to enjoy the meal.

Now add the background graphics for the whole page, the shadows and the lovely content background. Add some spices here and there and verify the taste of your meal. When you think it tastes fine, go on by adding the background chunks for the sidebar and comments.


Decoration
To prepare the dishes, you add a few nice gimmicks like rounded borders in the sidebar or the included fonts for headlines, special links or even code snippets:

pre {
	font-family: "Droid Sans Mono", "Courier New", monospaced;
}

Make sure that your new meal looks good from (almost) every angle, then sit back and...

...write a blog post about it.