HAND DRAWN IS ALL THE RAGE JUST NOW, SO GET YOUR PENS AND PAPER OUT AND START DOODLING THIS WORDPRESS DESIGN MOCK UP
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.
01 Create a new document
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.
02 Import the header
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’.
03 Set up your layers
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.
04 Start to paint
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.
05 Work in the effect
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.
06 Finishing it off
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!
07 Create the content area
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.
08 Roughen the boundaries
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.
09 Add a logo
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.
10 Give it a background
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
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.
12 Open the design elements
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.
13 Bring in the date box
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.
14 Add headings and content
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.
15 Add sidebar content
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.
16 Add primary navigation
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.
17 Take a step back
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.
18 Organise your layers
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!
No comments:
Post a Comment