This tutorial is for all levels, whether you’re a beginner who is just learning how to draw or an advanced artist looking to hone your animal illustration skills! I’m going to share two ways of sketching animals.
Free Drawing Konva Demo
There are many ways to implement free drawing tools in Konva.
I see two most common and simple ways:
- Konva-based vector graphics (simple)
- Manual drawing into 2d canvas (advanced)
Free drawing with Konva nodes
So the first and probably the simplest ways is:
- Start a new Konva.Line on mousedown / touchstart
- Add new point into the line while mousemove / touchmove
That way works ok for many applications. Also it is simple to store the state of the drawing somewhere in vector representation (like React store or JSON saving into database).
Show source code!
html>
html>
head>
script src=“https://unpkg.com/[email protected]/konva.min.js”> script>
meta charset=“utf-8” />
title>Konva Free Drawing Demo title>
style>
body
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
>
style>
head>
body>
Tool:
select id=“tool”>
option value=“brush”>Brush option>
option value=“eraser”>Eraser option>
select>
div id=“container”> div>
script>
var width = window.innerWidth;
var height = window.innerHeight – 25;
// first we need Konva core things: stage and layer
var stage = new Konva.Stage(
container: ‘container’,
width: width,
height: height,
>);
var layer = new Konva.Layer();
stage.add(layer);
var isPaint = false;
var mode = ‘brush’;
var lastLine;
stage.on(‘mousedown touchstart’, function (e)
isPaint = true;
var pos = stage.getPointerPosition();
lastLine = new Konva.Line(
stroke: ‘#df4b26’,
strokeWidth: 5,
globalCompositeOperation:
mode === ‘brush’ ? ‘source-over’ : ‘destination-out’,
// round cap for smoother lines
lineCap: ’round’,
lineJoin: ’round’,
// add point twice, so we have some drawings even on a simple click
points: [pos.x, pos.y, pos.x, pos.y],
>);
layer.add(lastLine);
>);
stage.on(‘mouseup touchend’, function ()
isPaint = false;
>);
// and core function – drawing
stage.on(‘mousemove touchmove’, function (e)
if (!isPaint)
return;
>
// prevent scrolling on touch devices
e.evt.preventDefault();
const pos = stage.getPointerPosition();
var newPoints = lastLine.points().concat([pos.x, pos.y]);
lastLine.points(newPoints);
>);
var select = document.getElementById(‘tool’);
select.addEventListener(‘change’, function ()
mode = select.value;
>);
script>
body>
html>
Free drawing manually
The first approach has limitation if we want to use some low-level 2d canvas API directly. If you need advanced access to the canvas it is better to use Native Context Access
We will create special offscreen canvas where we will add all drawings.
With native access to the canvas we can use low-level 2d context functions.
To display the canvas on the stage we will use Konva.Image .
Show source code!
html>
html>
head>
script src=“https://unpkg.com/[email protected]/konva.min.js”> script>
meta charset=“utf-8” />
title>Konva Free Drawing Demo title>
style>
body
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
>
style>
head>
body>
Tool:
select id=“tool”>
option value=“brush”>Brush option>
option value=“eraser”>Eraser option>
select>
div id=“container”> div>
script>
var width = window.innerWidth;
var height = window.innerHeight – 25;
// first we need Konva core things: stage and layer
var stage = new Konva.Stage(
container: ‘container’,
width: width,
height: height,
>);
var layer = new Konva.Layer();
stage.add(layer);
// then we are going to draw into special canvas element
var canvas = document.createElement(‘canvas’);
canvas.width = stage.width();
canvas.height = stage.height();
// created canvas we can add to layer as “Konva.Image” element
var image = new Konva.Image(
image: canvas,
x: 0,
y: 0,
>);
layer.add(image);
// Good. Now we need to get access to context element
var context = canvas.getContext(‘2d’);
context.strokeStyle = ‘#df4b26’;
context.lineJoin = ’round’;
context.lineWidth = 5;
var isPaint = false;
var lastPointerPosition;
var mode = ‘brush’;
// now we need to bind some events
// we need to start drawing on mousedown
// and stop drawing on mouseup
image.on(‘mousedown touchstart’, function ()
isPaint = true;
lastPointerPosition = stage.getPointerPosition();
>);
// will it be better to listen move/end events on the window?
stage.on(‘mouseup touchend’, function ()
isPaint = false;
>);
// and core function – drawing
stage.on(‘mousemove touchmove’, function ()
if (!isPaint)
return;
>
if (mode === ‘brush’)
context.globalCompositeOperation = ‘source-over’;
>
if (mode === ‘eraser’)
context.globalCompositeOperation = ‘destination-out’;
>
context.beginPath();
var localPos =
x: lastPointerPosition.x – image.x(),
y: lastPointerPosition.y – image.y(),
>;
context.moveTo(localPos.x, localPos.y);
var pos = stage.getPointerPosition();
localPos =
x: pos.x – image.x(),
y: pos.y – image.y(),
>;
context.lineTo(localPos.x, localPos.y);
context.closePath();
context.stroke();
lastPointerPosition = pos;
// redraw manually
layer.batchDraw();
>);
var select = document.getElementById(‘tool’);
select.addEventListener(‘change’, function ()
mode = select.value;
>);
script>
body>
html>
7 Tips for Realistic Animal Portraits: Painting Wildlife with Perfection
As an artist who has spent countless hours observing and painting wildlife, I understand the challenges and joys of capturing the beauty of our natural world. Painting wildlife can be a rewarding but also challenging experience. Striving to depict the unique characteristics and personalities of each animal is what I really love. In this article, I’ll share some tips on how to get started painting wildlife and how to bring your animal art to life.
-
Research Your Subject: Before you start painting, take some time to research your subject. Study photographs, watch videos, and observe the animal in its natural habitat if possible. This will give you a better understanding of the animal’s anatomy, behavior, and unique features, which will be crucial in creating a realistic painting.
For this, I suggest trying out all of these mediums and seeing how they work for you. It is a lot less about the perfect type of paint and more about what fits your style as an individual artist.
- Practice Your Brushstrokes: To capture wildlife realistically, you need to be able to paint with precision and accuracy. Practice your brushstrokes on a separate panel or canvas to perfect your technique. Better yet, work on simple studies of all the animals you like painting most. Experiment with different brush sizes, strokes, and pressure to create a variety of textures and effects during these studies. Remember we cannot perform a symphony without rehearsing. My favorite brush to use for wildlife is this dagger brush .
- Create a Focal Point: When painting wildlife, it’s essential to create a focal point that draws the viewer’s eye. This could be the animal’s eyes, nose, or any other distinctive feature. Using light and shadow to create this depth is often the best way to accomplish this.
- Pay Attention to Detail: To create a realistic painting, you need to pay attention to the details. Observe the animal’s texture, patterns, and movement, and try to capture these nuances in your painting. Don’t forget to add small details like whiskers, fur, or feathers, as they can make a significant difference in the final result. A lot of beginner painters and artists forget about the direction of the fur and the length of the hairs. So be sure to take your time and study what you see.
- Practice Patience: Painting wildlife takes time and patience. Don’t rush the process, and take breaks if you need to. Allowing your painting to dry completely before adding additional layers or details is a good way to start out. As you improve, you’ll become more confident with your brushstrokes and be able to paint more within fewer layers. Remember that it’s okay to make mistakes and that each painting is a learning experience.
The hard truth is that there’s no one piece of advice that will unlock the magic for you. You have to endure the lows before you can break through to higher levels of wildlife painting. But hopefully this article has given you some things to consider and ideas to ponder when it comes to your approach to animals.
Grow Your Painting Skills and Resources
Instant access to 1000s of royalty-free reference photos of landscapes and wildlife as well as step by step oil painting videos. Checkout My Memberships for more info.
I’m Chuck Black, landscape and wildlife artist based in Southwest Montana.
Explore More
Oil Paint vs Acrylic Paint: A Side-by-Side Comparison
Matboards 101: A Guide to Choosing, Cutting, Mounting, and Buying
Building an Art Community: Email Marketing for Artists and the Power of an Email List
Back to The Painter’s Block
Note: By purchasing through these links, you’re supporting our site at no extra cost to you.© 2023 Wildlife and Art LLC,
Chuck BlackSubscribe to my newsletter for a chance to win a print each month
Sketching from a reference photo in Procreate
We’ll start with walking through sketching in Procreate. If you want to skip ahead to analog sketching, click here!
To start, you’ll want to import your reference photo. You can do this by tapping the wrench icon in the top left corner of the screen. Under the “Add” menu, select “Insert a Photo.”
This will pull up your camera roll, and you can select a reference image from there. Once your photo is imported you will want to turn down the opacity of that image so you can see what you’re sketching on top of that. Pull up the layers panel and tap the “N” next to the reference photo layer. Then pull the scrubber down to about 30% to turn down the opacity.
Next, you’ll want to add a new layer where you’ll draw your actual sketch. It’s important to keep the photo and the sketch separate because you want to have the ability to turn the reference image off eventually.
With the sketching layer selected, it’s time to grab your sketching brush! I like to sketch using the built-in free Procreate brush called Peppermint. You can find it under the “Sketching” group of brushes.
I also like to sketch with a bright red pencil when I’m drawing digitally. This allows me to really see what I’m drawing especially when I’m tracing over a reference photo like this. If I were using a black pencil it might get a little lost against the desaturated tones of the photo. To make your pencil red, tap the color palette icon on the top right and select the reddest red you can get!
Note that this is just my personal preference. You can sketch using whatever color you want. This sketch won’t show up in the final illustration, so choose any color you like!
Now it’s time to sketch! My best tip for sketching is to keep it really simple and loose. This is not the time for perfection. You can always refine your lines when you start inking your illustration.
In a sketch, the goal is to get an idea of the shape and form of the animal. I want to make sure that the animal is recognizable, but I don’t want to overwork it by worrying too much about the details.
In this example, I also want to add in a few of the spots on this jaguar so I can reference them when I ink the illustration later. This helps me get a general idea of the shape, size, and positioning of these details.
The last step to your sketch is to add your own flair! If there are any elements that you feel are missing, this is the time to add them. For example, in my reference image, you can’t see this jaguar’s tail and I want that to be a part of the illustration. No problem! I’ll just add one in myself!
If you don’t want to trace over your reference photo and would prefer to just use it as a guide, you can do that by tapping the wrench icon and toggling on “Reference” under the “Canvas” menu.
From here you can import a photo, and it will pop up in a smaller box next to your artboard that you can reference as you’re drawing.
Both of these techniques are great ways to sketch in Procreate depending on your level of comfort with drawing animals. I love being able to trace directly from a photo, but if that’s not your thing, the reference box is a great option as well!
Sketching for analog artwork
In the Procreate example, our main form of sketching was to trace over our reference image. You can definitely do this with analog artwork using tracing paper or transfer paper, but I tend to paint simplified motifs so I find that tracing can overcomplicate things with analog artwork.
I keep it old school and start with really loose thumbnail sketches. A thumbnail sketch is a small, rough sketch where you can play with different forms, compositions, and positions of your motif. In this example, I was planning to paint a fox, so I experimented with different positions the fox could be in like standing, sleeping, and looking off to different sides. Lean on your reference images here to help you if you’re feeling stuck getting started. And remember, these sketches don’t have to be anywhere near perfect. They’re just here to help you decide on the composition of your illustration.
When you decide on a composition you like, work on a few more refined versions of that animal position. In my example, I liked the fox looking off to the right, so I did a few more versions of this in my sketchbook before doing the final sketch on watercolor paper. You can see that this sketch is still pretty rough, but there are more defined shapes.
When I’m ready to take it to watercolor paper I use my more refined sketch as a guide and start to think through where I want to add whitespace in this illustration. With my painting style, pencil marks indicate where I’m going to leave whitespace. So I break down my motifs into simple shapes that will be broken up by whitespace. From here I sketch the final motif on the paper I’ll be painting with. Since watercolor is a transparent medium I’m careful to sketch super lightly so you can’t see any pencil marks if I accidentally paint over them.
The biggest lesson I’ve learned with sketching is to keep it simple! This works well with my modern style and has helped me paint all kinds of motifs even if I was feeling intimidated by them! Knowing that your sketch doesn’t have to be perfect is so freeing and it will help you get your ideas on paper more easily. I’d encourage you to practice sketching often so it doesn’t feel as overwhelming when you’re starting a new piece.
Ready to take your animal sketch to the next level?
Join me in my full-length classes that will help you turn your sketch into a stunning illustration!
