Assistance Menu Buttons

The assist button when clicked on will provide a small menu below the top banner where users can use the assistance tools on offer, these are the grid tool, step by step tool and the free hand tool.
The grid tool will bring a grid over your image, the step by step tool will provide six steps to choose from which will be located at the bottom of the screen and the free hand tool will provide the user an opportunity to draw illustrations of their own choice rather than selecting an existing drawing from our database.

Arrow Tools

The arrow tools will be utilised at the tool panel, as the user will be able to open and close this panel so when the panel is out the arrow will able on the left showing the option to close it and when closed it will appear on the right giving the option to open it.
The arrows will also be used on the image bank pages where the users will use them to search through the images available to them to draw.

Tool Panel Alterations

Some minor alterations have been done to the tool panel.  The following items have been re-designed to give a better effect of a sketched look : redo button, undo button and the paint tin tool.
The previous undo and redo buttons I had designed didn't give the desired look of the sketch effect, slightly drawn too neatly so I re-produced these:

The paint tin looked too neat also and when I looked back over the previous designs I had create I ended up working on the original one I'd done and worked on that producing a tool that looked well with the other tools portraying the desired effect I was looking for.

Drawings

The actual content that the users will be drawing I have produced using Adobe Illustrator.  I have drawn the illustrations in steps that users can easily follow and learn how to draw in six easy steps.  We are looking to allow the users the opportunity to start at any of the steps, giving them the freedom to begin drawing the illustration at a stage that they are comfortable and confident at.
Here are just a few drawings that I have done that will be in the animal section.  Hoping to produce at least 10 -15 illustrations for each section, animals, transport and people.

Final Top Banner Buttons

The buttons for the top banner are now all completed and we are happy with the outcome. They will appear as black and white having the look of a sketched drawing, when the user rolls over they will grow larger and when clicked on the buttons change to colour.  I have produced the working buttons in Adobe Flash.

Home

Image BankSave

Facebook/Twitter

Assistance

Information

Button Alterations

The buttons for undo and redo have been altered to look more like an 'undo' and 'redo' button rather than just a right and left arrow.  I kept in mid the sketch effect look whilst re-designing them and create the new buttons shown below using Adobe Photoshop.

I decided that the buttons would look a lot better on there own without a circle around them like previously.

Another alteration made was on the Facebook/Twitter button in which the decision was made to have it in black and white like the others.  

This now fits in with the other content and doesn't look out of place, though the facebook logo is much darker than the twitter logo so this will be altered as together both are much darker than the other buttons on the page.

The logos are now much lighter and appear much better on the page with the other buttons.

The top and side banners needed to be separated from the main interactive area where the users would draw, now to do this I had originally used just a basic line though I thought this looked out of place slightly with the other content having a drawn/sketched look about them.  This prompted me to look at the various brushes within Photoshop to see if I could produce a roughly draw line that would fit in with the theme I was attempting to create.  I tried many different styles but chose to use the brush named 'hard pastel on canvas'  thought this gave the best effect and look.

 Used to separate main interactive area.

I thought the brush worked well so I decided to use this to produce the buttons for the image bank sections.  Users will use the buttons to navigate to the image bank of drawings they wish to view.