Doratoon User guide

How to use Doratoon? Check below step by step.

Working with Photos

Doratoon offers a plethora of features and options when it comes to working with photos. Because the still images play a vital role in making any animation more informative, it is important to understand what functions does this web app offer to come up with professional and industry-standard presentations.

That said the following sections explore all the features related to the pictures in detail.

Part 1: How to Add Photos

Doratoon has a built-in photo library that consists of still images, SVG files, shapes, etc. You can use any of these royalty-free pictures in your projects without violating any copyright laws. To add photos to your Doratoon work, you can follow the instructions given below:

Step 1: Get to the Prop Pane

After starting a new Doratoon project, click Prop from the toolbar on the left. When the Prop pane appears, click More on the Image section to reveal all the available photos.

Doratoon

Step 2: Add Photo(s) to the Canvas

Scroll the Image pane, and click the picture you find suitable to add it to the Canvas. You can repeat this process to add as many photos as you want to have in your project.

Doratoon

Step 3: Customize the Photo

Use the scaling handles at the corners of the photo to increase or decrease its size, use the options presents in the floating toolbox at the top of the image for further customizations. You can even personalize the photo and add animations to it with the buttons, menus, and sliders available under the Style and Animation tabs present in the pane on the right.

Doratoon

Part 2: How to Upload, Classify, and Manage Photos

Doratoon lets you upload your personal photos to use them in your projects. After uploading, you can categorize them for easy accessibility. This means you can create a separate container for each project, and add the relevant image(s) to it so it becomes easy for you to locate the photos that are only related to that particular assignment. The good thing is, be it your photos, videos, or even the audio tracks, anything that you upload can be found in the ‘Mine’ pane that can be accessed from the side toolbar as well. To add, categorize, and manage your custom photos, the steps given below can be followed:

Step 1: Upload a Photo

Select any category except for Scene from the toolbar on the left (Prop is selected here in continuation from the previous section), click Upload from the top of the center pane, click Image from the menu that appears, and locate and upload an image from your computer’s local hard drive to Doratoon.

Doratoon

Step 2: Create a Category Folder

Click the Classification tab under the Material section of the Mine pane. If Mine doesn’t get selected automatically when you upload a photo, select it manually from the toolbar on the left, expand the Material section from the center pane, and then click the Classification tab. When the Classification box opens up, click New Classification, enter a name for the new category, and click Done or press Enter.

Doratoon
Doratoon
Doratoon

Step 3: Manage the Photo

Click Manage from the Material section of the Mine pane, click to select the photo(s) that you want to manage, click Move, when the Move box appears, choose the category folder that you created earlier, and click OK to move the selected image(s) to the folder. Alternatively, you can also select the unwanted photos when in the Manage mode, and click Del from the available options to delete the selected picture(s) as required.

Doratoon
Doratoon
Doratoon
Doratoon

Part 3: How to Use Framed Photos

Having a photo framed in Doratoon means drawing a border around the image to make it visible more prominently. Luckily, the Style tab on the right of the Doratoon’s Canvas allows you to add a frame around the pictures with merely a few simple clicks. The process of doing this is given below:

Step 1: Add a Photo

Use the method explained earlier to add a photo to the Canvas.

Step 2: Set Frame Width and Color

Make sure that the photo you want to add a frame to is selected on the Canvas. Pick a number from the Frame drop-down list present in the Façade section of the Style tab on the right to set the width of the frame. Next, from the same section, click the Frame Palette box, and define a color for the frame as well.

Doratoon
Doratoon

Step 3: Set Frame Corners

From the Façade section itself, click to select the line type (continuous or dashed) from the Round corner label, and then enter a value in the input field to define the roundness of the corners of the frame.

Doratoon

Part 4: How to Work with Photo Layers

Doratoon creates a new layer for each photo that you bring to the Canvas, and depending on the order of that layer, the image becomes partially visible, fully visible, or gets completely hidden behind another picture altogether. Therefore, it is imperative to understand how to use the layers while working on a Doratoon project. You can learn layer adjustments by following the steps given below:

Step 1: Add Photos to the Canvas

Use any of the methods explained above to add two or more photos to the Canvas. It is important to add at least two photos to understand the concept of layers.

Step 2: Align the Photos for Better Understanding

Place the second photo above the first one. Make sure to align this second photo in a way that it partially covers the first picture.

Step 3: Change the Layer Order

Select the second image, hover the mouse over the Layer icon present in the toolbar at the top, and click bottom or down from the menu that appears to move the second photo below the first picture. If you have multiple photos added to the Canvas, you can play around with all the available options in the Layer menu to place the images in an order that best suits your project requirements.

Doratoon
Doratoon

Part 5: How to Crop, Add Shadow, and Apply Filters to Photos

Doratoon even enables you to edit the photos using the intuitive tools that can be accessed from the Style pane on the right after you select an image. For example, you can crop the pictures, add a shadow effect to them, or apply filters to make them more lucrative and eye-catchy. The steps given below explain how you can do all this after you have added a photo to the Canvas in Doratoon:

Step 1: Crop the Photo

After adding a photo to the Canvas, make sure that it is selected, and click Clip from the Style tab in the right pane. When the Shape crop box opens up, click any of the available shapes to crop the image in that design, and click OK. For basic cropping, click the Diy Crop button from the top of the box, and use the cropping handles on the image to adjust the crop area as needed.

Doratoon
Doratoon

Step 2: Add Shadow to the Photo

Make sure that the photo is selected on the Canvas. From the Shadow section in the right pane, click to select the Element radio button. Click to open the Color box and choose a color of the shadow. Now, use the X and Y sliders to position the shadow of the selected photo as needed. Use the Blur slider to add the blur effect to the shadow. Optionally, you can also select the Border radio button from the Shadow section, and perform the same actions to add a shadow to the border of the picture if need be.

Doratoon
Doratoon

Step 3: Apply Filters to the Photo

As before, select the photo on the Canvas, and use the sliders under the Filter section in the right pane to apply various filters like brightness, contrast, hue, saturation, etc. to the image.

Doratoon

Part 6: How to Add and Loop Playback of Dynamic Photos

Dynamic photos are the animated short images that can spice up your Doratoon projects. Because such images animate, you can control the number of times the animation is repeated when you add them to the Canvas. You can learn how to add a dynamic image and specify its loop count by following the steps given below:

Step 1: Add a Dynamic Photo

Make sure that Prop is selected in the toolbar on the left, click More on the Lottie section, and click your preferred dynamic image to add it to the Canvas.

Doratoon

Step 2: Set Infinite Loop

While keeping the dynamic photo on the Canvas selected, turn on the Effect switch from the right pane to enable an infinite playback loop. Note: By default, this switched is already turned on, and you only need to do it manually if it is not.

Doratoon

Step 3: Set Specific Number of Loops

Turn off the Effect switch from the right pane, click to open the drop-down list, and choose the number you want to loop the animation of the dynamic image for.

Doratoon

Part 7: How to Add Editable Shape Photos, Infographic Photos, and Copy the Photos

With Doratoon, you can add shape photos that can be edited according to your needs. Furthermore, you can add infographic images for the better elaboration of your data. In addition, you can even copy the photos that you have added to the Canvas, and paste them on the same or a different scene page. The steps given below explain how these things can be done:

Step 1: Add Editable Shapes

Select Prop from the toolbar on the left, and click More from the Shape category of the Prop pane that appears in the middle. From the Shape pane that appears, click your preferred shape to add it to the Canvas. Now, use the scaling handles and the options present in the right pane to edit the shape as needed.

Doratoon
Doratoon

Step 2: Add Infographic Photos

While keeping Prop selected, click More Prop from the bottom of the center pane. When the Material Center box appears, hover the mouse over the BUSINESS menu present at the right-most area, and click INFOGRAPHIC from the available list. Now, scroll and click your preferred infographic image from the gallery to add it to the Canvas.

Doratoon
Doratoon
Doratoon

Step 3: Copy an Image

Select and then right-click the image on the Canvas that you want to copy, and click Copy from the context menu that appears. Alternatively, you can also press the Ctrl + C keys on the keyboard to copy the photo. To paste the photo, you can go to the destination location, right-click anywhere on the Canvas, and click Paste (or press Ctrl + V on the keyboard).

Doratoon
Doratoon

Part 8: Add and Manage Hand-Painted Photos

Hand-painted photos are the images that give an illusion of being drawn when you play the Doratoon video. After you add a hand-painted photo, you can manage the time duration it would take to get the photo fully drawn on the scene page during the playback session. You can learn how to do all this by following the instructions given below:

Step 1: Add a Hand-Painted Photo

Select Prop from the toolbar as before, and click More from the SVG section in the Prop pane. From the gallery that appears next, scroll and click a hand-painted image of your choice to add it to the Canvas.

Doratoon
Doratoon

Step 2: Adjust the Drawing Time

While keeping the photo selected, click the Hand-paint duration icon from the floating toolbox at the top, and drag the slider on the Hand drawn time setting box to adjust the drawing time for the hand-painted image.

Doratoon
Doratoon
Scroll to Top