As the web 2.0 beta bandwagon reached fever pitch, there was always going to be a backlash. Hand-drawn, watercolour, ripped and rough edges are becoming hugely popular as the antithesis to everything polished, glassy and reflective. Starting with a simple sketch, you can build up a design that is uniquely yours. You don’t need to be a master draughtsman either; simple, scratchy textures are just as effective as intricate works of art.
In this tutorial, we’re going to use hand-drawn sketches that have been scanned into Photoshop and paint over them to achieve a watercolour effect. Feel free to use your own, as the process is the same regardless. We’ll roughen the edges using Layer Masks, bring in hand-drawn elements for the heading backgrounds, a customised date display box and a low-tech RSS button. The end result will be a blog template that we’ll be using in our companion WordPress walkthrough on page 70.
(This originally appeared in Issue 149. Written by Sam Hampton-Smith)
Open Photoshop and create a new document. We’re going to design to fit 1,024 x 768px, so choose a document size of 1,000 x 1,000px at 72dpi, with a transparent background. If you accidentally create a document with a background layer, double-click on this to convert it to a normal layer.
Create a new layer, then select File>Import and choose the file ‘blog001.jpg’ from the CD (or locate your own scan). Size it so that there’s a small gap down each side, and hit Enter on your keyboard to accept the import. Use the Eraser tool to remove the word ‘heading’.
Select the empty bottom layer and fill it with white. We’re going to paint on a layer between the sketch and background layers to ensure the lines of the sketch stay strong. Set the sketch layer to use the Multiply blending mode so that the layers underneath shine through.
Create a new layer beneath the sketch and call it ‘paint’. Select your Brush tool from the toolbox and a dark blue foreground colour. Select the Overlay blending mode and an Opacity of 25 per cent and layer the paint on bit by bit, using a medium-sized brush to fill the eye’s iris with blue.
Pick out some of the texture in the iris by painting over these areas again. By painting and then painting again, varying the size of your brush and being a little rough around the lines, you can quickly build up a layered watercolour effect. Add different colours, too.
Work over the whole sketch, painting and repainting as necessary. It’s fine to leave some bits unpainted, and overwork other bits; the look we’re going for is omemade,
organic and imperfect. When you’re finished, take a step back and admire your work!
We’re going to set the content area of the template to be a white background with black text. Create a new layer and use the Rectangular Marquee tool to draw out a selection to represent the content area. Make your foreground colour white, then fill the selection by pressing Alt+Delete.
Ctrl-click on the layer with the content area to load it as a selection. Click on the Add Layer Mask button at the bottom of the Layers panel, and a Layer Mask will be added with your selection. Paint with black on the layer mask at 25 per cent Opacity to roughen up the top edge.
We want a simple text-based site logo here. Type in your name or text and right-align your text, with each word on a new line. Use the Polygonal Lasso tool to draw some rough shapes behind the text, fill these with black on a new layer beneath the text and set the text to white.
Select a cream colour to act as the background, and fill the background layer. Using the same settings as before (25 per cent, Overlay) and a rough brush, paint random details over the background to add texture. Select Filter>Texture>
Texturizer to add a canvas texture to the background. 11 Get a footer
Import the footer sketch (‘blog003.jpg’) and use the Eraser tool to remove the notes. Set the blending mode of the footer layer to Multiply, choosing Edit>Transform to resize it for this design. We’ve plumped for a simple messy crosshatch here, but you can go as intricate as you like.
The rest of this process is largely laying out where the blog posts should go, setting up navigation and designing the page architecture. Open the design element sketches up by choosing File>Open and locating ‘blog002.jpg’ and copy and paste from this file into your design template.
Rather than having a bit of text to tell you when the entry was posted, a calendar graphic would be better. Using the Rectangular Marquee tool, select the correct bit and copy/paste it into the template. You may need to resize and rotate it slightly. Create text layers for the day and month.
Repeat for the main blog post area and the Previous Posts link. We’ve created a sketched version of the typical RSS button, so copy that across and position it at the bottom of the template, underneath the footer. Some elements might need the blending mode to be set to Multiply.
Most blogs have a sidebar that gives quick access to archives, blogrolls, etc. Add one by using the dividing line sketch rotated to vertical, and use the same backgrounds for headings. Define the colour of the links and render your link text in this colour to see how the site will look.
Make a white box as per step 7, roughen this as before and add text for the blog’s main pages. Bring in the navigation hover sketch and set it above the text like a crown. Add a layer style of Color Overlay set to Screen blending mode to match the crown to your navigation text.
Zoom out to 100 per cent and look for anything that doesn’t look right. We decided that the logo would look better if we used the same hatched background as the post titles, so we revisited step 9 and replaced the black background with further copies of the heading sketch.
It will be far easier to convert this design into HTML if the layers are appropriately named and organised. Here, we’ve grouped the layers into like parts; all the blog post elements are together in a folder/layer group, and so on. Once that’s done, you’re ready to start building your site!