Technique for creating a hand drawn website style

We first got into the blogging world with our website blog “We Are not Freelancers“. The site is a combo of the “Ten Pixel Method” and hand drawn characters and letters.

hand drawn font

A lot of people who we have met say they wish they could create something similar but will not because they can’t draw.

We say anyone can draw if you use a simple technique.

David gives you a quick lesson on how to create a hand drawn website using the ‘don’t lift the pencil‘ technique.

Hand drawn technique video tip

Brought to you by: From-The-Couch

Supporting Elements

There are also few more hand drawn elements within the footer and header design.

hand drawn elements

Photoshop batch processing of actions – Video Tutorial

This tutorial will show you how to use batch processing with Photoshop actions and more specifically how to create an action to crop and resize images using batch processing in Photoshop.

Batch processing allows you to apply an action to a large group of images all at once so there is no need to open each image by hand and apply the action Photoshop can do it all for you.

Before you do this tutorial you may want to look at my actions tutorial

Video Tutorial

[Feed readers please visit post for video tutorial]

Text Tutorial

These Images and text support the video Tutorial

Step 1 – The Action


Go to Window > Actions or use keyboard shortcut ( Alt + F9 )

Make your action that you want to batch process I made a video tutorial about creating actions you can watch that to refresh your memory, and I briefly show you in the current video how to create an action.

Step 2 – Batch Processing


Once you have your action go to File > Automate > Batch this will take you to a screen where you can change certain options as in the next step.

Step 3 – Batch Processing Screen


Play: Set – Select the folder from the dropdown list where you created your action

Play: Action – Select action from the dropdown you want to perform.

Source: Folder > Choose the folder where all you images are. i would highly recommend you make a copy of this folder as a backup just in case you make a mistake and you cant get your images back.

Destination: Folder > Choose the folder where you want to save all your images once the action has been performed.

File Naming: [document name] will keep the current file name in lower case and + [extension] will add the file extension such as jpg, gif, bmp

Click Ok when you have the correct settings and this will start the processing.

Step 4 – The Output


When the processing is finished you can check your files by going to your destination folder this should have your processed files in. Your source folder should have you original files, they should be exactly the same and should not have had the action applied to them.


You can probably see how batch processing can save you a lot more time using actions that you have created, if you are applying an action to a whole group of images you may want to test it on a few of the images to make sure that you get the desired results for each of the images.

Batch processing can be used for a whole host of different things maybe you need to re-colour a group of images or add a certain border to them, the possibilities are endless.


Do you use batch processing? What do you use batch processing for? Let me know in the comments below.

Photoshop Actions – Creating Folder Structures for Web Designs – Tutorial

This tutorial will show you how to create Photoshop actions and more specifically how to create an action to create a folder structure for your web design layouts

When creating a screen design of a web page organisation is key, keeping layers in folders enables you to quickly move or hide any layers that you need to. When you initially open Photoshop you should create folders to do this, hence a Photoshop action to do it all instantly, every time you want to design a new layout, here is how.

Video Tutorial

Text Tutorial

These Images and text support the video Tutorial

Step 1 – Actions Panel


Go to Window > Actions or use keyboard shortcut ( Alt + F9 )

Step 2 – A Folder for your Actions


Create a new (label 1 step 2) folder to keep any actions that you make, you can put them all in one folder so you know where they are or create new folders depending on the type of action you are creating.

Step 3 – Create folders and layers for organisation


Create a new action (label 2 step 2) and give it a descriptive name so you can easily tell what it does, you can give it a shortcut key as well using the F1-12 keys , some are already occupied by Photoshop default shortcuts but you can overwrite them.

Here are the defaults using F1-12 keys

  • F1 – Adobe Online Help
  • F5 – Brush style palette
  • Shift + F5 – Fill Layer Dialogue Box
  • F6 – Colour, Swatches, Styles palette
  • F7 – Layers, Channels, Paths palette
  • F8 – Navigator, Info palette
  • F9 – Actions, History, Presets palette

Step 4 – Create a new document


Create a new canvas that is suitable for your web design layouts ( Ctrl + N ) you can even give it a default name

Step 5 – Folder Structure


You have your blank canvas and now you need to create your folders that you will use to organise your web designs make as many folders as you need.

Step 6 – Stop Recording and Test


Hit the stop button (label 3 step 2) so that no more actions or mouse clicks are recorded your action should now be complete hit the shortcut key you assigned it in the video it was F2.


There are so many ways you can use actions to record your clicks and settings try and experiment and think about what you do the most in Photoshop and try to create an action for it…maybe cropping images!.


Was this tutorial clear and easy to understand? do you use any actions in Photoshop, if so please let us know in the comments below.