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.

Tools

The next thing I had to do now that the buttons were created was to produce the tools that the users will need to draw.
The tools have changed throughout the weeks in their appearance having being altered till myself and Tim are completely happy with them.  Below is the work that I have produced using a combination of the software packages Illustrator and Photoshop.  Tools have changed to show consistency throughout the website on all the buttons and tools that will be used.  

The brush starts off simple and has progressed to represent a tool that could be used on a drawing package but as a group we felt that the tools should have the same sketchy look and feel as the buttons do, so this is why it has evolved over the weeks and finish with the bottom one.

The pencil design again started out with quite a simple look which I wanted to improve upon and create a 3D look which I think came across very well but as a group we decided that it looked out of place with the buttons having the look of a sketch effect which worked well with what the site was about.

The crayon tool had the same treatment as the others in the fact that it has altered through the weeks going from a simple to a 3D look then a sketch effect design to be consistent with the other tools.

I designed a paint tin that would be used for the fill tool.  A simple drawn tin in Illustrator turned into a 3D tin then the finished tool looks like all the others with the sketch effect.

A felt tip tool was designed in Illustrator but we made the decision that the tool would not be included as we only needed the three, pencil, crayon and paint brush.

 Felt tip tool.

All the above tools will be in the panel situated on the left hand side of the site where the user will choose how what to use when creating their drawings.  The other tools that need to be produced are the colour palette and the line width tool.

Buttons for the left panel

The buttons required for the left panel were undo, redo and clear.  Now like the previous buttons created for the top banner I wanted to continue the theme of the sketch effect buttons, so I drew the designs free hand and scanned them into the computer.  A circle was again placed around the design to portray the effect of a button.

Buttons for the top banner

In our meetings we had made a decision on the different sections that we would incorporate within the product.  This now allowed me to design and produce the buttons for these sections.
A button needed to be designed for the following sections that would be accessible from the top banner of the site : Home - Image Bank - Save - Facebook - Twitter - Information - Assistance.

My first attempt on the save, info and assistance buttons:

The style that I wanted to portray was one that could be associated with the product in the style it had been produced.  A sketchy look would suit the site and what it was about so I started again on the buttons and attempted to be consistent throughout on the creation of all the buttons.

The buttons below I sketched by freehand and scanned them into the computer,  cleaning them up using Adobe Photoshop and placing a circle around them.  

I feel the buttons relate more to the product with the sketch effect they have rather than being perfect.  It is a drawing/sketch application that we are producing and these buttons co-inside with the product.  The Facebook and Twitter button has been combined though this may change and the colour maybe also be altered to continue the black and white look.