Oekaki guide

Getting your Oekaki working

Welcome to the in-depth guide to the Chickensmoothie Oekaki; The tools, functions, basic use, rules and explanations.

What is the Oekaki? How does it work? What is Java?

The Oekaki on Chickensmoothie is a Java-based drawing application called Chibi Paint which Nick integrated into the CS forum. In the Oekaki area you can draw and post a variety of pictures and doodles for other users to see! To begin however, there are some things you might not know or understand about the Oekaki, and when you first load it it looks a bit complicated and daunting! Never fear, this guide will run you through just about every single tool and option on here so you know what you can use and what it does.

You will need to ensure you have the most recent version of Java correctly and fully installed on your comptuer to use the Oekaki. If you are having issues loading, or the image blanks out, or your Java is not up to date, it is reccommended that you uninstall / reinstall it fully and restart your browser.

If you are still having issues, please use the text search in the [url=http://www.chickensmoothie.com/Forum/viewforum.php?f=6]Suggestions and Problems[/url] forum for the word 'java' and you will be able to find all the help responses concerning these issues that have been mentioned thus far.

The Java Website, where you can download / update: [url=http://www.java.com/en/]Click me to get Java![/url]

Getting to know your tools

Now that we have this accomplished we can begin your oekaki! It's always ideal for your first drawing to either start in Beginners or in Sketches and Experiments, as indicated by the colourful arrows below.

Once you are in the area you will draw in, press this button here to begin a new drawing on a blank canvas. The next thing that will load is a blank drawing space with various boxes scattered around. I have outlined each of these areas with a different colour to help guide you through what they are and what you can do with them below.

thumb

Here is a list of the sections by colour I will use to define and name them by for ease of distinction. You can also click them below to go to that particular explanation ~

[color=#01DD3A][b]Oekaki Menu[/b][/color]

[color=#DD0101][b]Oekaki Tools[/b][/color]

[color=#A04EFC][b]Canvas Options[/b][/color]

[color=#E221FF][b]Line Style Box[/b][/color]

[color=#EE8C00][b]Colour Palette[/b][/color]

[color=#CEB800][b]Colour Drop Box[/b][/color]

[color=#8CDB1B][b]Textures Menu[/b][/color]

[color=#43CFFD][b]Brush Options[/b][/color]

[color=#0238D4][b]Layers Box[/b][/color]

[color=#280A23][b]Canvas[/b][/color]

---

[color=#01DD3A][b]Oekaki Menu[/b][/color]

---

This is the menu for the entire Java application of Chibi Paint that you just loaded. Let's run through briefly what is under each section of this menu and what it does. Most of this is self explanitory and if you wish, you can skip this explanation and go to the next step where we learn about your tools.

[size=95][b]File

[/b]

• [b]Save Oekaki:[/b] Performs a save of your current image and presents you with options after saving. This does the same as Save Pic located on the [color=#A04EFC]Canvas Options[/color] toolbar.

[b]Edit

[/b]

• [b]Undo:[/b] Undoes the last action or stroke you did on the drawing. Control+Z is the shortcut on your keyboard for this.
• [b]Redo:[/b] Remakes an action or stroke you may have just undone. Control + Shift + Z is the shortcut on your keyboard for this.
• [b]Clear History:[/b] [b]NOT USEFUL.[/b] It is not reccomended to press this, as it will clear all previous remembered actions and you [b]will not[/b] be able to undo them.
• [b]Cut:[/b] Cuts out an area you have selected with the marquee on the [color=#DD0101]Oekaki Tools[/color] box and removes it from view.
• [b]Copy:[/b] Copies an area you have selected with the marquee on the [color=#DD0101]Oekaki Tools[/color] box and remembers it.
• [b]Copy Merged:[/b] Creates a merged selected image of ALL the layers within your marquee and remembers it.
• Paste: Creates a new layer with the most recent Copy, Cut or Copy Merged image you have created using the above options and pastes the selection onto it.
• [b]Select All:[/b] Selects the entire canvas space for you.
• [b]Deselect:[/b] Removes your selection box tool, no matter where you have selected.

[b]Layers

[/b]

• [b]Duplicate:[/b] Creates an identical copy of the layer you are currently on, and pastes the copy on a new layer above the current one. This will also add the word 'Copy' to the layer name of your duplicate.
• [b]Merge Down:[/b] Merges the layer you are currently on with the one below it, combining them into one whole layer. The layer name retained will be that of the lower layer.
• [b]Merge All Layers:[/b] As you can imagine, merges every layer on your [color=#0238D4]Layers Box[/color] into just one layer.

[b]Effects

[/b]

• [b]Clear:[/b] Clears everything on the current layer. Can also be done with the Delete key on your keyboard.
• [b]Fill:[/b] Will fill either your marquee selected area, or your entire current layer (if nothing is selected) with the colour you have selected on your [color=#EE8C00]Colour Palette[/color].
• [b]Flip Horizontal:[/b] Will flip only your current layer horizontally. (Left<=>Right)
• [b]Flip Vertical:[/b] Will flip only your current layer vertically. (Up <=>Down)
• [b]Invert:[/b] Inverts everything on your current layer to the opposing colour on the pallette. In example, black to white, red to aqua, etc.
• [b]Blur:[/b] Blurs the current marquee selection, or entire layer (if nothing is selected) by a set amount (Blur Amount), and a set amount of times (Iterations).
• [b]Noise:[/b] Creates a Noise image of your current marquee selection or currently layer.

[b]View

[/b]

• [b]Floating Mode:[/b] Launches your Chibi Paint application in a Floating window above your webpage. This is [b]incredibly useful[/b] if you are experiencing scroll related issues, or want to expand your space to work with. If you use this, DO NOT leave the page you came from on your internet browser or you will lose your work. You must always save your image and close the floating box if you want to move around the forum again on the page you came from.
• [b]Zoom In:[/b] Zooms closer into your canvas image. This is the same as the zoom in button on the [color=#A04EFC]Canvas Options[/color].
• [b]Zoom Out:[/b] Zooms further away from your canvas image. This is the same as the zoom out button on the [color=#A04EFC]Canvas Options[/color].
• [b]Zoom 100%:[/b] Returns your view to the original canvas size so you can see everything as it will be seen when your save and post your work.
• [b]Use Linear Interpolation:[/b] A very complex term and a not very useful tool for most people. It looks at the zoomed in version of your drawing, smoothes out harsh edges, and displays them in a 'constant' state which does not distort the image when scrolling in and out. It will not affect the finished drawing and overall it's not really helpful. I reccommend just avoiding it to save confusion.
• [b]Show Grid:[/b] Displays a grid over the top of your canvas which can aid some users into correct propotioning or perspective. Overall not that useful for general doodling.
• [b]Grid Options:[/b] Displays the size option for the grid.
• [b]Palettes:[/b] A very handly option. If you accidentally close or lose one of your tool boxes, in example: [color=#0238D4]Layers Box[/color], you can re-open it. Here you can also toggle on and off all your tool boxes that are available. if you press Toggle Palettes, it will make all your tools viewable/unviewable.

[b]Help

[/b]

• [b]About:[/b] Provides a popup box with all the information about the Chibi Paint application and version, about the editing done to the application, and distribution licenses and links. You will probably look at this once and then never again!

[/size]

---

[color=#DD0101][b]Oekaki Tools[/b][/color]

---

This box loads to the left of your workspace. It has a variety of useful tools with which to draw and colour. Below I have written out their names next to their icons, and I will explain what they do. Most of them are very self explanatory, however.

[b]Marquee

[/b]

This is a selection box tool that allows you to grab certain areas of your canvas in order to manipulate them, in example; to copy them, erase them, or cut them out. To use this tool, left click+hold your mouse button to one corner of what you want to select, and drag the box shape you see around the specific area or part you want to highlight. Let go of your left mouse button when it is all within the box and you will see a dotted-line box around your selection. This is now your Marquee'd area that you can copy, cut, duplicate or fill.

[b]Move Tool

[/b]

For moving around things you have drawn on a layer. You can only move what is on your currently selected layer. You can also use the move tool together with the Marquee tool to move only a selected area around.

[b]Flood Fill

[/b]

For filling in a specific area or layer with one select colour. Pick your colour with the [color=#EE8C00]Colour Palette[/color], select the Flood Fill tool and click on the canvas to fill your layer. Alternatively, you can use your Marquee to select one area, and fill inside of it after selecting it.

[b]Rotate Canvas

[/b]

This is used for rotating your canvas freely to different angles so that you can draw at whatever angle you like. This is helpful if you plan on drawing something hanging upside down, in example. To rotate, left-click hold and move your mouse to move the canvas. No matter what angle you draw at, however, all saved oekakis will be posted at the same horizontal position you started at, which is important to remember for when you post. Double-clicking on the Rotate Canvas icon will set your canvas back to its original position.

[b]Pencil

[/b]

This tool does literally work like a pencil. When creating lines and colouring you will notice the difference from the pen tool. It is a lot sharper and it doesnt blend the way the pen tool does when working with opacity. If you scribble back and forth on one spot, it will not get darker until you let go of your left mouse button and begin again over the same spot. You can get a realistic pencil feel using this tool.

[b]Pen

[/b]

Exactly like a pen, it has slightly smoother edges and is usually nicer for making lineart. If you continuously draw in one stroke (not letting your mouse button go) with a low opacity, it will continue blending over and getting darker, like a real pen would do to paper.

[b]Airbrush

[/b]

Works like a real airbrush, creating a spray effect that's useful for blending, shading and highlighting. Useful for softly shaded effects rather than sharp, harsh definite shadowing.

[b]Watercolour

[/b]

As if you had a wet brush to paint, this tool blends your colours on your layer in a watery fashion, smoothing them together to combine and make new shades. Can be one way of shading and building up tones when colouring in.

[b]Eraser

[/b]

A sharp-edged eraser that will 'rub out' whatever you run it across. Very useful for fixing any size mistake! Handy for cleaning up colour that is outside of your lineart.

[b]Soft Eraser

[/b]

Softer-edged than the previous eraser, this is a little more useful for gently cleaning up edges which are too harsh/pixellated, or for removing small areas of colour gently by repeatedly rubbing over a spot on your canvas.

[b]Smudge

[/b]

For literally 'pushing' your colours about on the canvas, smudging them together. Very useful for creating certain textures in backgrounds or for pushing around the edges to soften them up.

[b]Blender

[/b]

Self explanatory, it blends together colours on your canvas to create new shades and textures.

[b]Dodge

[/b]

A simple tool for bringing lighter areas to your coloured drawing. It can however be very harsh and you may want to move the [color=#43CFFD]Brush Options[/color] around to how you want it. Useful for creating harsh lighting effects and light flares.

[b]Burn

[/b]

The opposite to Dodge. This brings darker areas to your colouring. Can create a sense of 3D-ness when used together with the Dodge tool.

[b]Blur

[/b]

For creating an out-of-focus look to your drawings, by altering the [color=#43CFFD]Brush Options[/color] you can slightly fuzz your lines and colours and blur them. Sometimes useful for things in the background of your pictures when your focus is on the front.

[b]Colour Picker

[/b]

For selecting a colour that already exists on your image should you need to use it again. Simply select the Colour Picker, hover your mouse over the colour and click. You can also select colours without this tool by right-clicking on any colour you wish to re-use again.

---

[color=#A04EFC][b]Canvas Options[/b][/color]

---

All of these buttons are quick-click options to most of the functions you can find on the [color=#01DD3A]Oekaki Menu[/color] along the top. These will be a lot faster for you to use when you are working. It is also useful for doing critical saves during your work.

[b]Zoom In

[/b]

Zooms closer into your canvas image. This is the same as the zoom in button on the [color=#01DD3A]Oekaki Menu[/color].

[b]Zoom Out

[/b]

Zooms further away from your canvas image. This is the same as the zoom out button on the [color=#01DD3A]Oekaki Menu[/color].

[b]Zoom 100%

[/b]

Returns your view to the original canvas size so you can see everything as it will be seen when your save and post your work.

[b]Undo

[/b]

Undoes the last action or stroke you did on the drawing. Control+Z is the shortcut on your keyboard for this.

[b]Redo

[/b]

Remakes an action or stroke you may have just undone. Control + Shift + Z is the shortcut on your keyboard for this.

[b]Save Pic

[/b]

Saves your picture and gives you some posting options. This is the same as pressing File > Save Oekaki on the [color=#01DD3A]Oekaki Menu[/color].

[u][color=#FF0000]If you select this Save Pic option on a new drawing, you will get the following options:[/color][/u]

[b]Yes, post it now

[/b]

Posts the picture as it currently is, and takes you to posting mode where you can add a title and a small post about it.

[b]No, keep drawing

[/b]

Saves the picture to the oekaki, but does not post it. You can carry on drawing knowing you have saved the picture in that state incase something happens to your internet browser/connection.

[b]No, i'll finish it later

[/b]

Saves the picture, and takes you back to the oekaki forum you came from, but does not post your picture. You can continue your picture later by going back to where you were, clicking 'New Drawing' and selecting the image you were working from by looking below the blank image. See picture below.

[b][color=#FF0000]If you come back later and decide you no longer want to continue that picture and want to delete it, you again need to select 'New Drawing' and load the image you were working on by clicking on it. Once you load it, look below the picture for the deletion option. See picture below.[/color][/b] [b][color=#FF0000]Once you have saved and posted your finished picture, you might decide to go back and edit it again, to add or change something. When you do so, your saving options will be a little different.[/color] [/b]

[b]Yes, view the post [/b] Takes you back to your newly saved image and the thread it is on. [b]No, keep drawing [/b] Saves the updated picture to the oekaki, but keeps the Oekaki open to allow you to keep on editing that same drawing. Your changes will be visible in the forum immediately.

---

[color=#E221FF][b]Line Style Box[/b][/color]

---

From left to right, your options are:-

[b]Freehand

[/b]

Allows you to draw completely freehand and wherever you click and drag your mouse is where a line will appear. You can draw whatever way you like with no restriction.

[b]Straight Line

[/b]

For creating straight lines from Point A to Point B. To make this line, click-hold your left mouse button. This is where the line will start. While holding down, move the mouse to where your line will end, and let go. You will now have a straight line.

[b]Bezier/Curved Line

[/b]

For creating those hard to do curvy lines that are perfectly rounded. You start your line the same way as a straight line. Click-hold your left mouse button to start it, drag to the end, and let go of your button. Now, without clicking, move your mouse. You will notice there is a curvy, arch-like line floating around as you move, this is showing you the curve you are trying to make and the direction it will be facing. If you click again you will now see that the arch is back, and you can move it again. For example, let's move it the other way. Now you can create an S-like shape. Click again and your final curvy line will appear. Experiment with this tool, you can do all sorts of curves and shapes! Watch the animation below for a visual of what I just described.

---

[color=#EE8C00][b]Colour Palette[/b][/color]

---

This palette is where you pick absolutely any colour you want to use on your drawing! On the right side is a [b]Colour Slider[/b] bar. Below it is a [b]Hexadecimal[/b] bar. They both have individual uses.

[b]Colour Slider Bar:[/b] If you click-hold on the bar to the right and drag up and down, you will notice you are moving through the spectrum of colours. Similarly, you can just click on whatever colour and it will take you to that colour range. The colour you are on is indicated by a tiny bar. See image right.

[b]Hexadecimal Bar:[/b] When you click on this bar, you will get an automatic pop-up asking you for a hexadecimal colour number. This means the code of numbers and letters from 0-9 and A-F that a colour is represented by. For example, let's go for a vivid red, this is code #ff0000. We type this into the box and press enter/ok. The colour will automatically jump to the colour you have chosen. Neat huh! See the animation left for a visual explanation of what I just described.

If you do not know how to find the Hexadecimal colour code for the colour you want, try [url=http://www.december.com/html/spec/color.html][i]this site[/i][/url]. I find it very useful to find the colour I need. It provides the name, and the #Code by every colour.

---

[color=#CEB800][b]Colour Drop Box[/b][/color]

---

Also called the Colour Swatches box, this is your own individual palette for saving particular colours you want to re-use, so you don't have to look for them again or use the colour dropper so often! As you can see, the palette comes with 5 basic colours and 20 empty boxes you can fill. First, you need to use the[b] [color=#EE8C00]Colour Palette[/color][/b] to find the colour you want. You then click on an empty box on the [b][color=#CEB800]Colour Drop Box[/color][/b] and voila! You have now saved a colour for using throughout this drawing session. You can click it time and time again to get the colour back onto your pen or brush. See the below animation for a visual example of what I am talking about.

To replace a colour you already have on the box, simply select the colour with your colour picker, then right click on the box you wish to change to the colour you currently have selected. Voila! You must also be aware that as soon as you save and post your drawing, or save it and leave the application, that all these colours on the [b][color=#CEB800]Colour Drop Box[/color][/b] will [u][b]not be there[/b][/u] when you return. This is just how the program works. If you really want to save all your colours, I recommend making a seperate layer called 'Colours' and making small colour patches on it to remember them. You can always hide this layer and use it again next time then!

---

[color=#8CDB1B][b]Textures Menu[/b][/color]

---

An optional but decorative part of your colouring experience on the oekaki. This box contains a set palette of different textures that you can apply to the canvas. I'll briefly explain the left side of this box and what these options do.

[b]Inverse

[/b]

Basically the inverse of a texture is putting the colours the other way around. In example, the last texture with the spots. We will use a white background and a red brush. As you can see from the image to the right, inversed simply switches the places the colours will occupy.

[b]Mirror

[/b]

This is simply like switching the texture brush horizontally. The pattern will go in the opposite direction.

[b]Brightness

[/b]

This will adjust how light or dark your texture brush is when used. It starts at 0, and you can slide the bar left or right.

[b]Contrast

[/b]

This will define the difference between the dark and light on the texture. It starts at 0, and you can slide the bar left or right.

---

[color=#43CFFD][b]Brush Options[/b][/color]

---

This box shows you all the different features of the colouring tool/brush you are currently using. From top to bottom they are as follows -

Dropdown box

This contains all different types of brush, how they are edged, how soft or hard they are, etc. Experiment with them until you find one that suits your purpose :)

Size Previewer

Looks like a circle in the middle of the space. Click on or around it and drag to manually alter the size.

Brush Size bar

Works the same as the Size Previewer, you can click or drag along the bar to change the brush size.

Opacity

Changes the opacity of the brush. Opacity is how see-through or 'light' a brush is. If something with full opacity is painted, it stays that colour, if something of lower opacity is painted, it starts lighter and builds up with the strokes.

Color

Determines how much of the colour shows up when you make brushstrokes

Blend

Alters the blending properties of your brush on the canvas as you paint. Higher blend will alter how much more your colours merge underneath your strokes.

Spacing

Alters the distance between brush strokes in a single path. You can make them close together for a fluid constant look, or space them further apart to make a trail of brush strokes.

Scattering

Does what it says on the label. Scatters your brush strokes around, not always on the point you click. You can create small to large clusters of dots or strokes to create a textured effect.

Smoothing

Hard to explain unless you try it yourself. It applies an amount of fluidity to your brush. It may be useful for you, or you may notice no difference.

---

[color=#0238D4][b]Layers Box[/b][/color]

---

Layers are an essential tool in creating and modifying your oekaki images. They can be toggled on (viewable) or off (unviewable), can be renamed, can be moved up and down in view, and can have their type changed. When you first load the oekaki, the only layer you will have is Layer 1 and it will be completely white in colour. Every new layer you make from now on will be automatically transparent. To make any layer transparent, simply Effects>Clear it (on the [color=#01DD3A][b]Oekaki Menu[/b][/color]) or press Delete on your keyboard, it will however erase whatever is on that layer.

When you select a layer to work on, the layer on the layer box will go dark grey. All other layers will stay white. If you click on a layer, you will notice it change colour to grey. See image to the right.

To toggle a layer on or off (make it viewable or not) you need to press the circle to the left of the layer name. Black means viewable. Clear means unviewable. This does not delete your layer, you just can't see it until you toggle it back on again. This only affects the currently selected layer. See animation on the left.

The [b][size=150]+[/size][/b][size=95] and [/size][b][size=150]-[/size][/b][size=95] buttons below all the layers are to Add and Delete layers. [/size]

[b][size=150]+[/size][/b][size=95] will add a new layer above your currently active layer.[/size]

[b][size=150]-[/size][/b][size=95] will delete your currently active layer.[/size]

---

[color=#280A23][b]Canvas[/b][/color]

---

You really don't need a picture for this! It's the big blank white box you see right in the middle of the workspace.

It is what you create all your drawings on and what gets saved and posted for others to see when you do so.

Tips for using the canvas space

• Just remember, do not simply write words on the canvas and post those, as a moderator will lock or delete it! The oekaki is for drawing on, you must at least make the effort to draw on it. If you want to write words, that's what regular posts are for.
• Don't do your initial sketches or drawings zoomed all the way in. When you post it then, it will be so very hard to see because it will be so small! Make your first sketches on a new layer, and you can use it as a pre-zoom guide so that when you do zoom in, your picture will be the correct size when you go back to Zoom 100%.
• Before you do anything, we recommend making a new layer first to do your sketching on (see previous post about layers). You can always draw over it on another layer then and toggle it off.
• The first layer you see on the oekaki is always flat and white, try not to draw on it! Make a new layer because all new layers are transparent and you can colour above and below them :)
• You do not need to use the entire canvas space, but just remember that it's all there for you! You might as well put something in it =D

---

Related Help Pages

Frequently Asked Questions about the Oekaki (coming soon)

Java - Common Problems and Resolutions (coming soon)

Art Guidelines - General rules concerning images on site (coming soon)

Tips and Tricks for the Oekaki (possibly coming soon)

Video Tutorials (possibly coming soon)

---

Thanks for reading, if you have anything to link to/from here or questions to be answered, feel free to ask me on Chickensmoothie.

-- Vampiric