YouiDraw Painter User Guide

Introduction to YouiDraw Painter

What is the YouiDraw Painter

With Painter you’ll find many tools you need to unlock new artistic possibilities. Work with dozens of customizable brushes, paper textures that look and feel just like the real thing!

Screenshot 2014-09-30 14.12.08

Back To Top

System Requirements


Operating System: Windows XP / Mac OS X 10.6 / Linux / Chrome OS

Browser: Chrome 35 / FireFox 30 / Safari 8

Memory: 1 GB RAM

Screen Resolution: 1280*800

Internet Connection: Required for initial use, updates, data sync, login and for help access.

Language: English



Operating System: Windows 7+ / Mac OS X 10.7 + / Chrome OS

Browser: Chrome latest version

Memory: 2 GB RAM

Screen resolution: 1280*800 / 1366*768 or larger

Internet Connection: Required for initial use, updates, data sync, login and for help access.

Language: English


Back To Top

The YouiDraw Painter interface

Screenshot 2014-09-30 14.12.08_n

1. File Button 2. Top Tools Properties 3. Left Toolbox 4. Canvas Workspace


• File Button:

Screenshot 2014-09-30 14.30.18 Let you NEW, OPEN, SAVE a project, clear your canvas or change the project size, and undo, redo your steps.

• Left Toolbox:

Screenshot 2014-09-30 14.31.17 Use select tools to copy, cut or delete a area that you selected.
Screenshot 2014-09-30 14.32.41 Use pencil tools to choose 7 different style to draw, include Plain, Sketchy, Shaded, Web, Trail, Ribbon, Flur.
Screenshot 2014-09-30 14.31.57 Use brush tools to paint with different colors and different style brush.
Screenshot 2014-09-30 14.33.03 Bucket tools let you change the area color that you selected.
Screenshot 2014-09-30 14.33.29 Use eraser to erase graphic on the canvas.
Screenshot 2014-09-30 14.34.10 Use shape tools to add rectangle, round-rectangle, circle, convex, concave and gear shape quickly.
Screenshot 2014-09-30 14.34.36 Insert an image from your local drive by image tools.
Screenshot 2014-09-30 14.34.55 Add a text onto canvas.

Screenshot 2014-09-30 14.36.48

Set front color or background(stroke) color, also can use gradient or pattern. When we use it for shape or text, it means fill color and stroke color.

• Top Tools Properties:

Display all settings about the current tools which you’re using.
Screenshot 2014-09-30 14.37.53
Screenshot 2014-09-30 14.38.02
Screenshot 2014-09-30 14.38.23
Screenshot 2014-09-30 14.38.42

• Canvas Workspace:

In the center of the YouiDraw Painer interface is the workspace. This workspace shows your shapes, text, and other elements visually, just as they will be displayed as they will appear in a browser.

Screenshot 2014-09-30 14.41.18

Back To Top

Open source components

  • Thanks the Logo idea from Dribbble user Mike Smith (Guerrilla).
  • jQuery dropdown: Copyright 2013 Cory LaViska, LLC. Licensed under the MIT.
  • Free SVG Package Licensed under the GPL / CC BY 3.0
  • Purchased Commercial License SVG from &
  • Pricing Table Copyright (c) 2013 Thibaut Courouble. Licensed under the MIT.
  • provided few ideas for example.
  • Other open source modules: jQuery / jQueryUI / jQuery SVG / jgraduate / jPicker / canvg / colorpicker / Opentype / Paperjs / jSize / jqtree / perfect-scrollbar / w2ui

Back To Top

How to use Paint Tools


Screenshot 2014-09-30 14.45.22
1. Click select button Screenshot 2014-09-30 14.31.17 on the left toolbox.
2. Drag your mouse to select an area.
3. Drag the area to move the selected area or right click on it to copy, cut, delete, crop it.

Back To Top


Screenshot 2014-09-30 14.49.05

1. Click the Pencil button Screenshot 2014-09-30 14.32.41 on the left toolbox.
2. Choose one of 7 styles in type list and set the size, opacity and other option to paint.
3. Global Path: Connect with other path before you did this.
4. Random Color: use random color without the color you set.

Plain(Random Color):    Screenshot 2014-09-30 15.01.06      
Sketchy(Single Color):   Screenshot 2014-09-30 15.01.13
Shaded(Single Color):    Screenshot 2014-09-30 15.01.18
Web(Single Color):         Screenshot 2014-09-30 15.01.24
Trail(Random Color):      Screenshot 2014-09-30 15.01.29
Ribbon(Random Color)Screenshot 2014-09-30 15.01.33
Fur(Random Color):        Screenshot 2014-09-30 15.01.39

Back To Top


Screenshot 2014-09-30 15.04.36

Choose kinds of brush, set size and space of brush then paint.
1. Click Brush button Screenshot 2014-09-30 14.31.57 on the left toolbox.
2. Choose a brush type from the brush list, and set size, space, opacity. Choose a color you want to use by color settings.
3. Click and drag your mouse on canvas.

Screenshot 2014-09-30 15.06.38

Back To Top


Screenshot 2014-09-30 15.08.33

Use a color, gradient or a pattern fill into a selected area.
1. Select an area by select tools Screenshot 2014-09-30 14.33.03.
2. Choose a color, gradient or pattern by color settings.
3. Click Bucket tools on left toolbox, and click your mouse onto the area you selected.

Back To Top


Screenshot 2014-09-30 15.09.34

Erase all thing that the eraser through.

1. Click Eraser tools Screenshot 2014-09-30 14.33.29 on the left toolbox.
2. Click and drag your mouse on the canvas.

Back To Top

Add Shapes

Screenshot 2014-09-30 15.10.38

1. Click Shape tools Screenshot 2014-09-30 14.34.10 on the left toolbox.
2. Choose a sheep type from the shape list, you can add rectangle, round-rectangle, circle, convex, concave and gear shape quickly.
3. Choose color style by color settings, then click and drag your mouse on the canvas.

Back To Top

Insert Image

Screenshot 2014-09-30 15.12.25

1. Click insert image button Screenshot 2014-09-30 14.34.36 on the left toolbox.
2. Choose an image from your local drive.
3. Click mouse on the canvas, then you can add it, use the manipulator to adjust the size.

Back To Top

Add text

Screenshot 2014-09-30 14.38.42
1. Click Text tool Screenshot 2014-09-30 14.34.55 on the left toolbox.
2. Choose font, size, opacity and border size on the top properties.
3. Choose color by color settings.
4. Click mouse on canvas, and type your text into the text editor.

Back To Top

Color Settings

Screenshot 2014-09-30 15.15.17

Screenshot 2014-09-30 15.16.11

Screenshot 2014-09-30 15.16.27

Set fill color and border color for shapes and texts, also can use gradient or pattern.
1. Click the color button on the left toolbox.
2. Choose what type fill color you want use by the 3 tabs, then set it easily.
3. The first color for fill, and the second color for border.

Back To Top

Download and Save your work

Save and Download your work

Screenshot 2014-09-30 15.19.55

Click the file menu button, then you can choose “Save” option to export your work to an image, and download it.

PS: Some browser will open your image in a new tab, you can right-click on it and choose “save image as…”

Back To Top

Upgrade to Premium Account

Sometimes, the free version may had some limitation, you need to upgrade to premium account to enable this function.
1. Visit our website homepage:
2. You can find a “PRICING” link on the main menu, click it to visit Pricing List page.

Screenshot 2014-09-28 17.33.06
3. You can subscribe our monthly or yearly plan to get unlimited function. (You can unsubscribe at anytime.)

Screenshot 2014-09-28 17.33.32

Back To Top

Keyboard shortcuts

Keyboard shortcuts

Delete: “Delete


Return: “Crop
Shift+Command+Z: “Redo
Command+Z: “Undo
Command+C: “Copy
Command+V: “Paste
Command+X: “Cut
Command+A: “Select All
Command+S: “Save

Windows / Chrome OS

Enter: “Crop
Control+Z: “Undo
Control+Y: “Redo
Control+C: “Copy
Control+V: “Paste
Control+X: “Cut
Control+A: “Select All
Control+S: “Save

Back To Top

Release Notes

Release Notes


1.add login with email function.
2.project file can save to youidraw drive.


1.fix a bug of can’t export multi-layer SVG file.
2.change drive icon.

2015.2.11 multiple nodes when press shift key, support arrow key select(up,down..)
2.fix node layer change bug when group/ungroup,union/subtract.


1.fix maximum is 100(up to 1000) files when show google drive.
2.fix some project can’t open after save(long length number can’t open after compress it).
3.fix bug of open from google drive don’t have waiting screen.
4.fix set group color/border bugs.
5.fix close all projects UI issue.


1.change canvas size by project setting
2.fix bug of align node function does not work
3.refresh file list after save, save as, when reopen file dialog.
4.add shot cut of save as press ctrl/cmd+shift+s.

2015.1.5 font bold,italic,underline, line through when export image.
2.add variants option of font.
3.set ‘Arial’ as default font
4.add more more(200+ ) google fonts.
5.fix can’t sign in bug(sign window was blocked when save).
6.fix bug of can’t save file sometimes.


1.add paypal subscription. tip when fail to open file  from google drive.
3.fix auto login bug.
4.fix user’s information wasn’t update bug.


1.add google font ‘Forum.ttf’ etc.
2.add sign, loading, saving, waiting screen.
3.add modified state on toolbar tab.
4.add open and download file in local device function.

2014.11.20 files can order by time and name. empty space to clear current select node.


1.add sign in with Dropbox, Microsoft and Facebook.
2.add save and open file from Dropbox and local device.
3.change file extension name, .yid to .ydr, .yil to .ylc.
4.popup a window to save when export file.


1.fix use keyboard to change node position does not work.
2.remove some unnecessary scroll-bar in export and drive-file dialog.
3.change save tip when close a project, now have three buttons to choose.
4.fix sometimes when opened app closed, Start now button does not work.
5.don’t support IE.


1.export entire always have a background.
2.remove watermark when preview export image.
3.reduce area of watermark.


1. Fixed text position incorrect after google font loaded.
2. Fixed web font does not work when use https.
3. Fixed text position incorrect when edit it.


1. Changed stroke width range to 0.1 ~ 50.
2. Fixed bug when cancel select font file in import text path function.
3. Fixed IE has bug in export, content disappear.


1. Shape flip(h & v), when drag it.
2. Added horizontal and vertical flip button.
3. Enter to change group size, optimize drag operation.
4. Optimized align grid function.
5. Fixed group undo position incorrect.


1. Fixed bold italic status of text bug.
2. Invoice display issue when have discount.
3. Fixed account information incorrect after paid.
4. Added manage google drive button.
5. Resize fullscreen dialog when window size changed.
6. Fixed alpha of color and gradient bug.


1. Fixed web-font export does not work when export png.
2. Fixed some time save project to google drive failed bug.


1. Fixed current drive folder change when press key/up when edit node position.
2. Changed project thumbnail to png with transparency.


1. Free user added watermark when export.
2. Fixed some bug of Insert SVG function.
3. Fix group’s children can’t copy bug.


1. Added copy, paste to context menu.
2. Prevent copy fill pattern when add new node.
3. Added Insert Image in file menu.
3. Fixed drawing toolbox pattern button size bug
4. Fixed a bug of can’t export image pattern.


1. Fixed menu does not work after use google translate.

2014. 8.7

1. Fixed color dialog is invisible,let it moveable.
2. Added lock, visible button on node tree and node list.


1. Freehand point support multi-select and operation.
2. Add rename item to context menu
3. Press ctrl+R and Return key to rename and edit and end edit
4. Click edit button for text show convert to outlines tips.
5. Auto calculate price when use coupon code
2. Show account type in account information dialog


1. Fixed can’t drag shape to canvas bug
2. Added export to PDF and print function
3. Start app, when log in success, click Ok button to continue
4. Add project preview page.


1. Fixed design bug of shape combine. fix bug of divide.


1. Updated share file dialog, need input name, select type.
2. Added home page, user guide link to apps


1. Fixed fill pattern bugs and fill dialog function.
2. Set export jpeg image quality
3. Added more setting to grid
4. When scale canvas (drag freehand point) need scale some appropriate,add line to rotate point


1. Find inner shadow export bug(chrome bug), fix it


1. New file in specify fodder from google drive
2. Add save as function
3. Add replace share function


1. Show rotate,position,size data when drag in canvas


1. Check project when share it, no content show on canvas can’t be shared.
2. Added download browser icon.


1. Erase every thing in current layer, try fix crush bug.
2. Fixed hard to select only has stroke shape, like line, arc..


1. Fix import large svg can’t save and open file
2. Show context menu when edit shape, remove pt, close shape,convert bezier


1. Fixed time is not suit or error in firefox and safari
2. Painter: fixed bug of rect does not hide when use pen
3. Added custom cursor, when select tool


Back To Top