How to draw on the computer with a stylus & tablet for beginners

The best way to draw on a computer is by using a Stylus and Graphics Tablet with an art creation program. As beginner, you may draw with a mouse but this can a bit tricky to use. For more information on how create digital artwork on computer, read on!

This tutorial will outline some of the basic and professional ways in which you can draw on your computer or smartphone. If you don’t have a drawing tablet or stylus, or a large budget there are other low cost ways to start creating digital art – even as novice or ‘newb’.

Create Digital Artwork
Tablet & Stylus

Beginner – drawing on your computer and creating digital art

Drawing on a computer can be more straight forward than you think. I started out using a regular old rubber ball mouse and Microsoft Paint when I was child – long before a Stylus and tablet came into my life.

So, the absolute bare essentials for drawing and creating digital art for you computer are as follows :-

– A regular old mouse
– A keyboard
– A computer
– A graphics program (digital art software)

Should be noted… it doesn’t have to be an Apple mouse. Maybe something from the 80’s?

Is creating digital art easy?

Yes and no, getting started with creating digital art can be very easy and low cost. Getting to a stage where you could call yourself a professional artist takes time and years of practice. The best ways of getting started with creating digital art is by downloading graphics software and get practicing to improve you digital drawing techniques.

I wish I could find my very first digital drawing, it was created on a Windows 3.2 in the era of the awesome floppy disk – you can read a bit about me here.

What digital art software should I use?

There are so many to pick from, but for the sake of just creating something you can call ‘digital art’, begin with something you may already have, MS Paint In Windows. by delving into Paint, select a colour and away you go!

Gimp Icon
Gimp Logo

There are other art programs out there which are also free such as Gimp and Krita. I have personally never used Krita but the results on the website show what it is capable of and it has also been given a recommendation from a reputable digital art magazine IFX (Link(. This magazine is dedicated to creating fantasy, digital and traditional artwork.

Advanced digital artwork software

As both a designer and digital artist, I use 2 main programs to create my art and design work, these programs being: Abobe Illustrator and Adobe Photoshop.

Adobe Illustrator often gives very clean cut appearance that you may seen in books, posters, life style magazines etc – this is called ‘vector art’.

Adobe Photoshop is a versatile piece of software that behaves like a drawing and painting tool and offers an intuitive work flow. The example below shows the two different program styles and what they can create. This is just an example created by me – Jimmsdesign.

Vector Art and raster art example - how to draw digitally. Painted, flat, vector.
style examples, Photoshop Vs Illustrator

It should be noted that these programs can both be tricky to master and you may be more drawn to one that the other. You can get a free trial or purchase a subscription to use the software by going to Adobe Creative Cloud (link) and downloading it. If you are just starting out on your journey to becoming a digital artist or illustrator, I would test a free program first.

What type of graphic artist or designer do you want to be?

As budding digital artist, designer, illustrator or painter what sort of outcomes are you looking to achieve? If you are unsure and just trying your hand at creating digital art on a computer that is fine a starter step.

Here is what may suit you more if…

Adobe Illustrator may suit you more if you want to become a designer or a clean cut vector artist. The way a vector drawing behaves inside a program is a quite a different to raster art program such as Photoshop. Adobe Photoshop is great If you are wanting to work as a traditional illustrator, digital painter, game artist etc.

There are thousands of examples of digital artists on social media with websites and professional blogs. Some to mention : Behance, imagine FX, Artstation. Design Week are filled with a colossal range of talented designers and artists.

Imagine FX Magazine
Artwork Copyright Future Publishing – Imagine FX – Source – wikipedia

This person here is a terrific vector artist and designer – Vicky Doodles

What equipment to use for drawing on a computer?

Very old computer mouse for drawing on a computer!
If you are actually drawing on a computer with these legendary relics… Kudos to you. Image Source – Wikpedia

Using a mouse to create digital artwork (beginner)

The humble computer mouse has been around for decades and is often the first got and very basic tool for drawing on a computer. You can still use a mouse be it a optic or USB (these still around?) to create digital art in MS Paint, Paint Shop Pro and Photoshop or any other 2D graphics software.

Using a computer mouse when trying to draw onto a computer is fairly simple. It is often a case of selecting a colour, a brush shape and size and drawing around the white space. As I already mentioned, I can recall using paint has far back as Win 3.2 back in the early 90’s. the left mouse button and start applying pixels or digital paint.

A computer mouse in action | digital drawing

This example shows the end result of some digital artwork created using a mouse in Photoshop. It’s a bit trickier to use although it’s not bad for straight lines!

Drawing with a mouse! Visual example
Drawing with a mouse! (An Apple Smart Mouse)

I would advise moving on from a computer mouse at some stage if you are thinking of getting serious with drawing on a computer, be it for graphic design, illustration or your own sanity.

If you are thinking of spending many hours drawing and creating digital artwork, using a different input will save on potential wrist ache also.

Using a stylus and graphics tablet to create artwork (beginner + intermediate)

The day I plugged in a Wacom graphics tablet was the day I changed the way I created digital artwork on a computer. Using a drawing or graphics tablet can make the experience of creating artwork on a computer much more organic.

Below is an example of me sketching something in Photoshop using a Stylus, Tablet. It’s quicker, smoother and much more human way for creating a drawing, or in this example a black line sketch.

Drawing with Stylus and Tablet example
Drawing with Stylus and Tablet. Handles, curves and waves and is much easy to flow with

Reasons why a stylus and tablet are great options for drawing on a computer

– It will offer a greater level of control when trying to draw on a computer – when you get used to it.
– It will offer a better work flow.
– It may reduce wrist strain when drawing
– The stylus and pen often come with pressure sensitivity, allowing for a greater level for control and hopefully moving you closer to the digital artwork you want to create.
– Short cut commands can be added to the drawing tablet to speed up the work flow.

Once I started using a tablet after a couple of days it became second nature to me.

Drawing Tablet Equipment
Tablet as shown in top of post

How long does it take to learn how to draw with Wacom drawing tablet?

When drawing with a Stylus and Wacom tablet it can take as little as 1 hour to start creating digital artwork.

I tried an experiment on a friend to see if he could use the drawing tablet… he found it strange at first but quickly got used drawing on a Wacom Tablet (Intuos Pro).

It should also be added that he is neither an illustrator or an designer, or a somebody who can use Photoshop! Within 1 hour, he was drawing! That is how quick you could pick it up, although what who drew on the day wouldn’t look amiss from something a 7 year old would bring home – that is beside the point.

He could use the tech.

Have the drawing technology wont make you an digital artist overnight. It takes time.

A Cintiq allows you to draw straight onto a computer screen

Cintiq display, used to create digital drawings and artwork
Cintiq Display – draw straight onto it

Using a Cintiq removes the disorientation of drawing from a Tablet to screen, you can work straight onto the display using your drawing stylus. You will create the graphic art you want sooner but it is a higher price point as this technology is generally more expensive.

A Cintiq is one the best tools to create professional digital art on a computer. It acts just like pen paper offering great results without technological limitations.

My professional use of Cintiqs is very limited due to it’s price and being satisfied with Bamboo (now Wacom Intuos Pro) tablet. Cintiqs are great quality and are top of the range pieces of equipment. If you are a beginner I would recommend starting with one of the cheaper tablets first.

This video, shows a Cintiq in action. This is not me by the way.

How to draw on Smart tablets and Smartphones

In recent years technology has come a very long way for digital artist’s, designers and illustrators. We are no longer confined to just drawing onto a computer, we can now create artwork on the go with smartphone and stylus.

Tablet artwork
This artwork was not created by myself.

David Hockney has created artwork on his tablet (iPad) and exhibited it without limitations or reduction to the quality of his style. The only observation I have made is that the edges if the pixel perfect brush strokes is that they have a slight spongy and blurry feel, but that could be due to the scaling up of the artwork from a tablet or phone – a smaller screen blow up big can reduce image quality.

You can read a bit more about his David Hockney artwork here :

You can now create digital artwork from your Samsung, Iphone, Ipad, or most ‘Smarttech’ which is available online.

Drawing on a tablet or a Smartphone using stylus can be and low cost way of trying your hand at digital drawing or painting. This the equipment you will need to draw on a Smartphone or Digital tablet :

– A Smartphone or Tablet
– Drawing or graphics software download onto your phone or tablet. You can look on the app store or Google play to find an application that suits your phone or spec.
– A tablet or smartphone stylus.

It should be noted that I have used a Wacom Bamboo Stylus Mini to create artwork on my phone just for doodling. It’s light, small and convenient. But gave me personally ‘meh’ results.

Bamboo Mini Stylus - draw on Smartphone or tablet

Summary | how to draw on a computer using a Stylus and Tablet.

If you skipped the the basics on how to create digital artwork on your computer this how to do it simple steps.

1) Buy a stylus and drawing tablet of your choice.
2) Install the hardware on your computer.
3) Check the drivers are up to date – calibrate the software to your computer
4 )Download a graphics program such as Photoshop or one of free applications mentioned previously.
5) Open the software.
6) Start creating digital art!

Summary | how to draw on a computer using a Mouse (PC) in quick steps

1) Check your mouse is installed
2) Open the relevant art program such as (MS paint) or if you have something better – great!
3 )Voila! Start creating your masterpiece.

Credits – All the best with your digital art journey and creating digital awesomeness on your computer.

Thank you for reading, hopefully this post has given you some insight into how to create digital artwork and an idea of tools you can use to draw onto a computer.

If you would like any professional assistance please feel free to contact me on my website.

You may be also interested in reading this :
Handling black in print
Creating artwork for game
Reducing Banding in Photoshop

How to make a custom cursor in Stencyl? – In simple steps

The following block shows a simple method for making your own custom cursor in Stencyl.  Please refer to the Stencyl community help section for further details on coding blocks.

Stencyl Logo - Copyright Stencyl
Big Stencyl logo

Getting started with your custom Stencyl cursor

This ‘how to’ covers some basics for making a custom cursor in Stencyl. In a nutshell, you need to hide the default operating system cursor and swap out for your own custom cursor, which will be an actor type.

Cursor

Part 1 : Graphics

A ) Firstly you will need to draw your one custom cursor in graphics program of your choice. I used Adobe Illustrator to draft up this pointer and exported it as a .PNG – Dims 29px 27 px, remember to save your .PNG in logical place in your project folder.

Part 2 : Importing a Cursor As An Actor Type

a ) Open Stencyl and navigate to your game project (assuming you have already made a project)

b ) In the upper left corner press on the “Actor types”and create a new actor. You will then need to add a frame and import your newly created cursor!

Actor from stencyl
Example

Part 3 : How To Make it work

a ) Click on ‘actor behaviours’ and create a new behaviour! This will be a basic behaviour to make your Cursor work in your game.

b ) Click “add event” in the top of the panel. Add > When updating

c )You can either navigate through the code blocks manually or you can search for them. Using the image shown.

Stencyl code block
Stencyl Custom Cursor Code Block

That’s how to make a basic Cursor in Stencyl!

Don’t forget to attach the block to the Cursor Actor, the green button in the top right will allow you to do this – “Attach to actor”

Run game!

Bug with cursor full screen * untick fullscreen mode!
Bug!

Please take into account that the flash player from Stencyl ( when tested from the game ) game glitches in full screen mode. The main default operating system mouse will still be visible despite having the cursor hidden.

This could be an apparent issue with the flash player. – Dated from May 2016.

Try unticking the full screen mode… Not the best

Notes : this bug happens on a iMac OSX i5 10.9.5

This post is edited originally from here > personal blog.

If you are looking to download stencyl you can download the software here.

If you need assistance with some of you game design assets have a look at the design portfolio here

You may also be interested in reading how to make a board game

How we created a killer Kickstarter page quickly on shoe string budget

This post covers how we planned, created and constructed a Kickstarter page down to the most intricate detail with a demanding deadline. We wanted to create a page that would both captivate prospective backers and sell a product… the page needed to be created quickly.

The crowdfunding page is a final hurdle, the last and important bastion of your project which shouldn’t be ignored.

Kickstarter Logo

How to create a killer Kickstarter page

As you may or may not be aware, creating A Kickstarter isn’t a small undertaking.There are so many contributing factors that can influence the success of your campaign, these can range from the product you are trying promote, the size of your audience, your marketing, page design, your authenticity – the design of the page is a single element of a much larger project.

Rough diagram for creating a Kickstarter page
Rough diagram for creating a Kickstarter page (feel free to share)

This post focuses on the page design, being a designer this was my largest part in creating project.

HOW TO START YOUR PAGE DESIGN

Plan your page design

If you are well underway with creating a Kickstarter or a crowdfunding project then you are probably fully aware of how much you have on your plate. You may considering, the video, the hero header that pulls backers to your page but, have you considered the ‘content’ on your actual page once you have potential backer the page?

Research and ‘rough out’ your Kickstarter page

You shouldn’t just jump into your graphics package and start making pretty things. Before getting stuck into the details of your Kickstarter it would wise to look at other successful campaigns and inspect what cool elements they have on their pages. When we created pages, we did a lot of research and studied a lot of cool page designs. You shouldn’t copy but it is worth looking at the best bits of campaigns to see what they are doing right – especially if they are promoting a similar product.

Now start designing your page

If you have an idea of how you want your page to behave or act now could be a time to move onto your graphic design. The page only about creating a fancy theme, it needs to have easy to read content packed with relevant and interesting information about your campaign and product. Sell the value of you campaign and product.

Keep it clear and concise

As above you, you need to keep your page easy to navigate. The backer should be able to skim the content easily and pick out the useful data. Such as ; what the product is, rewards and when you are intending to manufacture the game.

Make the rewards stand out

Web users are impatient. Make the rewards easy to find in the body of your page and make them look exciting. You want to grab a potential buyers attention and drive them to make a call to action. For example – ‘back your campaign’.

Be Authentic

The crowdfunding community can sniff out anything that is a little bit ‘off’ with your campaign – it’s like blood the shark. Be as honest and as open as possible to save yourself the trouble. You should be clear and open with your backers, you want them to trust you! Using rendered images, fluffy ‘Maybe’ language, or concealing parts of the project will only arouse suspicion when at this delicate stage you want to win trust.

Tell a story

Who are you and why are you doing a Crowdfunding campaign? Don’t be afraid to create a story about why you want funding and why others should feel as passionate about your campaign.

Validation

To convince a backer that you are able to fulfil your demand, you will need a to make sure you cover a fews things on your page. Do you have previous experience in what you are trying to create? How many years experience do you have? Do you have a trusted supplier? Etc etc. You don’t have to focus on all the fears of your project, but mentioning a couple can add an extra layer of sincerity to you and your project.

Make it interesting

Keep your page interesting, you want to hold the backers attention for as long as possible. Writing line after line of text about your campaign is too much. You need to break up the information and make it easy to skim. Vary the page by including diagrams, illustrations, photo’s, animations, videos, timelines and any other element that could stimulate the reader. This is about designing your content and how you intend for it to be read. Make it great for ‘them’ not you.

A killer page isn’t a guarantee

With all of this excitement about creating a killer Kickstarter page getting bouncing with joy, I feel it is only responsible for me to say his – A killer Kickstrarter page doesn’t guarantee success.The page is a slice of a very big crowdfunding cake, an important slice, but not the only part.

The page design is important but it is useless If you are creating it for no audience to see it.

But don’t scrimp on the page design either

The crowdfunding page is an import stage to the campaign, don’t neglect it. The page design is your last port of call – a landing page – to convert a speculate backer into your product champion!

That was a guideline that will hopefully fast track your page design

That was a guideline to create a cool page quickly. The page I designed came from study and collaboration and a little sauce of our own. Below outlays my involvement in the creating the Kickstarter.

Guess poo, was a parody game about ‘guessing’ what poo your opposing player has. You can read more on my crowdfunding design services here >

The Characters – the character were an important part of game, this is where I can go to twon on creating characters that will capture the infantile fun and playful nature of Guess Poo. The Character Illustration are a composite drawing created by me using a pen and illustrator.

Guess Poo character vector art for crowdfunding page
Poo characters created by me

Time Line – a pooing timeline, how could I resist. A game about poo, it would have to be a sewage pipe. Pipeline

Vector graphics of kickstarter page
The Time + the top of the Kickstarter Page
character design
Lovely…

Video intro, placed at the start of the video on the Kickstarter Page.

Did you know?

That you can integrate your campaign with Google analytics and see how many visits the page is getting? I would recommend doing it, it will show you the peaks times for you campaign.

Thank you for reading, if you would like help with you campaign or design project feel free to get in touch.

You may wish to read how we created a successful game or look at my design services.

The Design Journey – The path to a great results.

That word… Design

Design is many things, across many different mediums. You may hear the word ‘Design’ being used and ‘over’ used in many places. In business, I have on occasions felt that the word ‘Design’ can have negative connotations when talking to non-design based businesses. The word ‘design’… that expensive word, can bring MD’s out in a financial rash – Design = expense. Design shouldn’t be seen solely as an expense, it should be seen as investment in your business, whether you are

Design should be more than just taste or making something pretty, it’s many things depending on the niche and problem it is trying to solve. I am a visual designer with history in creating websites, banners, brands, animations and game content. My attitude to design, it should solve a problem, convey a feeling or a message or all of that was mentioned. Design should be applied in a way that can push your product, message or marketing material to the next step using visuals, imagery and media, I like to create pieces that invoke excitement, create buzz and perhaps sell a product depending on the challenge.

I have created some illustrations to capture the nuances of the creative design Journey as it works for me. This isn’t a step by step process, it’s more discussion on how the journey often looks, at a slightly humorous slant.

Design is a Journey

With design, it can take time to arrive at the final result. It takes time to explore the relevant paths before finalising the best route to take in order to achieve the best outcome. People see this = The result

The Design Journey - you take a lot away from a journey
Journey Hidden Behind Results

When the journey can look like this

‘Why not just use the one path?’ or ‘It looks easy’ I am glad in one respect that it ‘looks’ easy – maybe I did something right. Perhaps it’s the path I took to slick or polished outcome, perhaps it’s practice.

Squiggle path to success - design

Not always an easy road

Quality results which applies to design is rarely ‘easy’. Occasionally very quick – but not easy. If you went with your first unresearched approach it may look something like this.

Comic Sans… = no

But it was quick!

Going with your first design isn’t necessarily good design, effective or as it should be for the task. You may strike it lucky, but why leave business down to luck? Fast isn’t strictly good, it’s just ‘quick’ and ‘quick’ isn’t always best.

Design that looks straight forward in the end, may have taken different routes to success. When starting a substantial project I like to plan, like with most journeys. When creating a design it can be similar, how much is the budget, time, does it have brand look and feel, who is it for, market research, these are all factors that should be considered when creating a design, be it a website or a product.

With design, it can be as if cutting a path through bracken

Plan your journey

Before going on a long trip, do you plan what you are going to take? What if you are going away for two weeks and failed to pack tooth past, under-wear, or a passport? You plan it. A good design service should be the same for anything of size – granted you don’t need to plan for your regular trip to metaphorical trip to the shop, you already know that route.

I often have a destination or a planned end. But my root make look something like this. Exploring all of the best roots and discovering from time to time better ways of doing things. Ideas can be tricky to ‘Process’ and itemise but the end results will show something.

Design Forks

Design Diagram
Sketch or paths for a project

A polished design

A good design can be part of polishing something or pushing an existing concept to it’s maximum potential.

Saving the best polish

I hope you have enjoyed having an insight into my design journey. If you would like to share my approach or sign up to my newsletter that would be great. I can sherpa you to creating something that you could be proud of.

You can reach me here : Design

Speed tips for Photoshop layers!

Speed tips and shortcuts for Photoshop layers!

If like me you need work layers in Photoshop any time saving measure is a bonus. I have a compiled a short list of shortcuts for making the best use of Photoshop’s layers for both the Mac and PC – Enjoy!

(Swap CMD for CTRL on Windows)

Photoshop Layer Icons
Photoshop Layer icons
Photoshop Layer UI
Layer Graphics

Change the layer order,
move it up and down :

  • Cmd+[ Move Down
  • Cmd+] Move Up 
  • Cmd+Shift+] = to move it to the bottom of the stack
  • Cmd+Shift+[ = Move it to the top of the stack

Direct select a layer

With move tool selected (V) hold Cmd to highlight the layers directly from the art board. This will also highlight groups.

Duplicate a layer 

Ideal for copying a layer! Cmd + J to copy a selected layer! Or you can drag the selected onto the ‘New” icon! OR right click and duplicate – A personal fave.

Colour Coordinated

In addition to organizing you layers into folder and groups, why not colour coordinate the layers so you glance at groups? Brown for dirt, green for sea etc. Right click and select a colour.

New Layer Cmd+Shift + N brings up the new layer dialogue.

Cycle Through Blend Modes

Need to see what a multiply, saturation, or overlay will look like on the fly?

Shift + (Minus or plus, top right of the keyboard)

Layer Opacity
With the layer selected you can quickly change its opacity by pressing >

Shift + (Minus or plus, top right of the keyboard)
Shift + 22, 30, 23 (a number from the top row) typing the number in quick succession will change the layers opacity percentage. Hold shift and then press “22” the layer will be 22% “30” = 30 %.

Very handy for digital painting or retouching.

Group Layers

Select your layers and press Cmd + G to group them together. If you are not grouping your numerous layers… you should start. For sanity’s sake.

The original text for this was created and added to blogger in 2016 (Jimm Odell Blog). This has since been tweaked and added to this blog – the professional blog.