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!
System Requirements
Minimum:
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
Recommended:
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
The YouiDraw Painter interface
1. File Button 2. Top Tools Properties 3. Left Toolbox 4. Canvas Workspace
• File Button:
Let you NEW, OPEN, SAVE a project, clear your canvas or change the project size, and undo, redo your steps.
• Left Toolbox:
Use select tools to copy, cut or delete a area that you selected.
Use pencil tools to choose 7 different style to draw, include Plain, Sketchy, Shaded, Web, Trail, Ribbon, Flur.
Use brush tools to paint with different colors and different style brush.
Bucket tools let you change the area color that you selected.
Use eraser to erase graphic on the canvas.
Use shape tools to add rectangle, round-rectangle, circle, convex, concave and gear shape quickly.
Insert an image from your local drive by image tools.
Add a text onto canvas.
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.
• 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.
Open source components
- Thanks the Logo idea from Dribbble user Mike Smith (Guerrilla).
- jQuery dropdown: Copyright 2013 Cory LaViska, LLC. Licensed under the MIT.
- icomoon.io Free SVG Package Licensed under the GPL / CC BY 3.0
- Purchased Commercial License SVG from tooopen.com & graphicstock.com
- Pricing Table Copyright (c) 2013 Thibaut Courouble. Licensed under the MIT.
- Ownbusinesscard.net provided few ideas for example.
- Other open source modules: jQuery / jQueryUI / jQuery SVG / jgraduate / jPicker / canvg / colorpicker / Opentype / Paperjs / jSize / jqtree / perfect-scrollbar / w2ui
How to use Paint Tools
Select
1. Click select button 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.
Pencil
1. Click the Pencil button 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): 
Sketchy(Single Color): 
Shaded(Single Color): 
Web(Single Color): 
Trail(Random Color): 
Ribbon(Random Color): 
Fur(Random Color): 
Brush
Choose kinds of brush, set size and space of brush then paint.
1. Click Brush button 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.
Bucket
Use a color, gradient or a pattern fill into a selected area.
1. Select an area by select tools .
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.
Eraser
Erase all thing that the eraser through.
1. Click Eraser tools on the left toolbox.
2. Click and drag your mouse on the canvas.
Add Shapes
1. Click Shape tools 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.
Insert Image
1. Click insert image button 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.
Add text
1. Click Text tool 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.
Color Settings
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.
Download and Save your work
Save and Download your work
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…”
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: https://www.youidraw.com/
2. You can find a “PRICING” link on the main menu, click it to visit Pricing List page.
3. You can subscribe our monthly or yearly plan to get unlimited function. (You can unsubscribe at anytime.)
Keyboard shortcuts
Keyboard shortcuts
Delete: “Delete”
MAC OS X
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“
Release Notes
Release Notes
2015.4.18
1.add login with email function.
2.project file can save to youidraw drive.
2015.3.19
1.fix a bug of can’t export multi-layer SVG file.
2.change drive icon.
2015.2.11
1.select multiple nodes when press shift key, support arrow key select(up,down..)
2.fix node layer change bug when group/ungroup,union/subtract.
2015.1.27
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.
2015.1.16
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
1.support 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.
2014.12.26
1.add paypal subscription.
2.show tip when fail to open file from google drive.
3.fix auto login bug.
4.fix user’s information wasn’t update bug.
2014.12.19
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
1.drive files can order by time and name.
2.click empty space to clear current select node.
2014.10.28
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.
2014.9.19
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.
2014.9.13
1.export entire always have a background.
2.remove watermark when preview export image.
3.reduce area of watermark.
2014.9.6
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.
2014.9.4
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.
2014.9.3
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.
2014.8.25
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.
2014.8.22
1. Fixed web-font export does not work when export png.
2. Fixed some time save project to google drive failed bug.
2014.8.18
1. Fixed current drive folder change when press key/up when edit node position.
2. Changed project thumbnail to png with transparency.
2014.8.14
1. Free user added watermark when export.
2. Fixed some bug of Insert SVG function.
3. Fix group’s children can’t copy bug.
2014.8.11
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.
2014.8.10
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.
2014.8.6
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
2014.8.01
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.
2014.7.29
1. Fixed design bug of shape combine. fix bug of divide.
2014.7.28
1. Updated share file dialog, need input name, select type.
2. Added home page, user guide link to apps
2014.7.24
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
2014.7.23
1. Find inner shadow export bug(chrome bug), fix it
2014.7.19
1. New file in specify fodder from google drive
2. Add save as function
3. Add replace share function
2014.7.11
1. Show rotate,position,size data when drag in canvas
2014.7.10
1. Check project when share it, no content show on canvas can’t be shared.
2. Added download browser icon.
2014.7.8
1. Erase every thing in current layer, try fix crush bug.
2. Fixed hard to select only has stroke shape, like line, arc..
2014.7.2
1. Fix import large svg can’t save and open file
2. Show context menu when edit shape, remove pt, close shape,convert bezier
2014.6.28
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