Lilac Creative

Things are looking a little different around here! When ExpressionEngine 2.0 beta was released last December, I started planning for a site redesign to be implemented once EE2 was out of beta (which happened last month with the release of ExpressionEngine 2.1). Initially, there were three things I wanted to “upgrade” in this redesign: the ExpressionEngine templates, my site content, and the visual design itself. ExpressionEngine 2 has some great new templating features (i.e. snippets and global variables) that really help simplify templates, and making use of those, I was able to get rid of a lot of redundant code in my templates and template groups. I used Google Analytics to identify content on my site that wasn’t being used. I ditched anything that wasn’t getting significant hits, and reorganized my navigation to make the site necessities easier to get to. The visual design came together slowly, in between client projects. By the time I was ready to translate the design into HTML and CSS, I started considering a fourth upgrade for my new site design: HTML5.

The Viability of HTML5

There’s been lots of buzz about HTML5 lately, but it’s still currently in the Working Draft stage of its development, which means nothing is finalized and a lot could change in the development process. Just how viable is the HTML5 specification, and should I use it for my site? These were the questions I was asking myself as I approached the coding point of my site redesign.

So I started doing some reading on the subject. I read arguments for and against using HTML5 now. Arguments against using HTML5 right away argued that HTML5 is still in the Working Draft stage of its development, and could therefore change a lot before a stable specification is settled upon. Arguments for adopting HTML5 today pointed out that most browsers already support HTML5 elements (with IE being the exception—big surprise there), and IE is easily accomodated by including a quick and easy javascript shiv to force IE to recognize the new elements.

In the end, I decided I wanted to give HTML5 a shot with this redesign, mostly so I could try out the new specification and get a feel for it.

Calling It What It Is

One of the things I like best about HTML5 is the new elements—they enhance web semantics. Before HTML5, I would wrap my header in a div named “header”, my nav in a div named “nav”, and my footer in a div named “footer”. Now each of those commonly used page sections is its own element. The whole point of web semantics in HTML is to correctly organize and identify the purpose of a site’s content while keeping it separate from the presentation of the content, and the new elements allow HTML authors do just that.

In the same vein, HTML5 forms introduce new input field types such as email, url, color, and tel for telephone numbers.

Useful HTML5 Articles and Resources

Below are some of the articles and resources I checked out when considering HTML5:

• 5 Reasons Why You Can Use HTML5 Today
• Why designers should care about HTML5
• A Preview of HTML 5
• W3C HTML5 Working Draft
• W3C HTML5 Forms Specifications
• HTML5 Gallery - A gallery of sites already using HTML5

Have you tried your hand at HTML5 yet? I’d love to hear why or why not!

Thanks for stopping by the site! I'm going to be taking a little summer break from July 3rd to July 19th. While I'm gone I'll be without internet access (except via Blackberry) for part of the time, so if you send me an email or an inquiry, please be patient. I'll respond to emergencies as soon as possible, and other inquiries as I'm able. Hope everyone has a fun, safe Canada Day and 4th of July!

This month's desktop is dual screen! Pretty spring flowers and colors flow seamlessly across the layout. One side has a linear calendar for April and the other features a stanza from Shelley's "The Sensitive Plant". Use one or the other, or if you have a dual-screen setup like me, use them together! Here's what it looks like on my setup (I actually cleaned my desk off for this shot!):

April Wallpaper - Right Side

Click to download widescreen version - 1680 x 1050

Click to download fullscreen version - 1600 x 1200

April Wallpaper - Left Side

Click to download widescreen version - 1680 x 1050

Click to download fullscreen version - 1600 x 1200

I've been having lots of fun makin' wallpapers lately! Here's another one for your enjoyment. This one's got a bit of steampunk inspiration to it: a rich and slightly grungy wood panel with a glass pane revealing the inner workings of gear-driven mechanism. Last but not least, some gold-leaf lettering across the glass reads "Clock Works". Enjoy!

Click here to download 1680 x 1050 version (widescreen).

Click here to download 1280 x 1024 version (fullscreen).

Well, I was supposed to be on my way home from Michigan today, but a snowstorm moved in and I'm stuck here. So I thought this would be the perfect opportunity for me to share how to make the colorful watercolor-textured background used in my last desktop wallpaper. This tutorial is a quick and easy one; it primarily makes use of Photoshop brushes and layer blend modes, and requires that you have a nice selection of watercolor brushes at hand. The two sets I used for this project are BittBox's Watercolor Photoshop Brushes, and Splatter Photoshop Brushes. They are free downloads, but please be courteous and read his TOU. Ready to get started?

Step 1: Creating a Colorful Base

Open up a fresh file in Photoshop. Since I was making a widescreen wallpaper, I started out with 1680px x 1050px canvas. Create a new layer above the white background layer, and with a large round soft brush (I used a 300px round brush with hardness set to 0%) paint areas of color on the new layer. Let areas of the white background show behind your color layer around the edges or in the corners. It should look something like this:

Step 2: Blending the Colors

Now we're going to soften the colors and blend them into each other using a Gaussian Blur filter. From the Filters menu, select Gaussian Blur and set the blur to around 80.

Step 3: Adding Some Watercolor Brush Strokes

Create a new layer above your color layer. Break out your watercolor brush stroke brushes, and using a medium gray color, "stamp" a couple different brush strokes around the edge of your new layer like this:

Set your brush strokes layer blend mode to Color Burn. Then duplicate your color layer and drag it so that it is positioned above your new brush strokes layer in the Layers Palette. Right click on the copied color layer in the Layers Palette, and select "Create Clipping Mask" from the menu that pops up. Then adjust the opacity of the gray brush strokes layer to suit your tastes. It should look something like the image below:

Step 4: Another Brush Stroke Layer

Next create another new layer above your first brush stroke layer and it's clipped color layer. Add another "stamped" watercolor brush stroke to the center of this layer, again using a medium gray color.

This time change the blend mode of this layer to Linear Burn. Again, copy the bottom color layer and drag it so that is positioned above your newest brush stroke layer in the Layers Palette. Clip the color layer to the brush stroke, and adjust the opacity of the brush stroke layer to suit.

Step 5: Lightening It Up with Some Splatters

Now it's time to get messy. Break out your watercolor splatter brushes, and on a new layer (above the layer we created in step 4 and its clipped color layer) throw a few splatters down in medium gray. This time change the blend mode of your splatter layer to Screen, and (yep, you guessed it) copy the color layer again, drag it above your splatter layer in the Layers Palette and clip the color layer to the splatter layer. Adjust the splatter layer's opacity to your liking. It should look something like this now:

Step 6: Tweak It Your Way

You can add as many splatter and stroke layers as you want. Play around with different blend modes to see what effects you can come up with. I also added a pattern overlay style to each of my clipped color layers, using a watercolor paper texture pattern to give more texture and depth to each of my paint strokes and splatters. Enjoy and have fun!