✨ ️ Draw on the smartphone

3,847

AriaVon

AriaVon

Presentation

Mobile phones are so convenient that they allow us to draw anywhere, all we need is our fingers or a stylus. The only drawback is the size, but there are some ways to overcome this inconvenience. So, this time, I'm sharing the process and tools I use when I want to draw on small devices. Without further ado...

 

Let's begin!! (o・ω・o)

1. First steps

First of all, if you're new to the smartphone version, you can review the following tutorial, which covers everything from the basics: Downloading the program, the free and paid formats, and an explanation of the Studio and Simple mode interfaces, including 3D models, among other things.

 

IMPORTANT: If you don't have a license, the smartphone version allows you to enjoy all features free for 30 hours per month.

2. The hands

Using only your fingers to draw illustrations is very tiring, especially at first, but here are some tips you can apply to minimize discomfort:

 

Keeping your nails short will prevent overexertion and improve precision.

Time is an important factor; take short breaks and relax your eyes.

It would also be a good idea to use a stand that tilts your phone to prevent you from rounding your back like a shrimp. You have to take care of your back; a straight spine is a happy spine.

Don't keep your controller floating for too long; you'll tire quickly; rest it on a surface.

Although we can draw with our fingers, using a pencil is ideal to avoid injuring our hand using only our fingers. There are many good and affordable ones on the market.

Relax your hands: If you decide to use only your fingers, to ensure a comfortable and injury-free work time, you have the option of using a stress ball or doing some hand relaxation exercises. In the Tai Chi classes I take, we've been taught some movements to relax the wrists. I'm sharing one of them with you, ideal for avoiding carpal tunnel syndrome. For this exercise, you should:

 

Interlace your fingers, leaving a space like a baseball between your palms.

Now rotate your wrists forward for one minute, then backward for another minute. Done, it's that easy.

3. Let's draw between simple mode and study mode

✦ The canvas

When you launch the app, you'll find a wide selection of resources, but to create a new canvas, go to the "Draw" option. On the next screen, you'll find templates with standard sizes for different projects; the one you use will depend on the type of project. In my case, I'll choose a custom 1000 x 1000 px.

 

To change/select the "dpi," go to the "Advanced Settings" option.

Below are some considerations regarding the measurements that can be used for printing or digital printing.

 

PRINTING: If you want to print the illustration, it's advisable to have a resolution of 300 dpi (DPI is the amount of information the canvas has; the more information it has, the sharper the print will be). For the canvas size, I recommend choosing between an A4 (21.00 x 29.70 cm) or an A5 (14.80 x 21.00 cm).

 

DIGITAL: To display illustrations on social media with good quality, it's recommended to have a resolution of 72 dpi. Regarding size, it's recommended to have a 2160 x 2700 px canvas as a base. This is the ideal size so that Instagram doesn't cut off the illustration.

- FIT CANVAS -

 

If we later determine that the canvas is not the right size, we can easily change it using the "Fit Canvas" option using the three dots in the top right corner.


✦ The sketch

We can create the sketch directly in the app as we normally would, but we also have the option of doing it the traditional way, then taking a photo or scanning it. In this case, I'll use photography. So, let's see how to process a traditional sketch into a digital one.

 

- CAMERA ANGLE -

 

Avoid taking the photo at an inclined angle to avoid distortion. A parallel angle is ideal. To control the angle, you can use the camera stabilizer found on most modern phones.

Another important consideration is to avoid casting shadows on the image and to achieve the softest possible colors.

- IMPORT -

 

The CLIP STUDIO PAINT app has two drawing interface models: Studio Mode (1), which features all the program's features, and Simple Mode (2)**, which is a simplified interface with the most essential illustration features and is ideal for small screens. I'll use both modes throughout the illustration, but mostly Simple Mode.

To import an image from simple mode, press and hold the "New Layer" icon. This will bring up a series of options, including "Gallery," which we'll select. This option will take us to the file explorer, where we'll select the photo for the drawing.

The imported image will be added as a preview with the corresponding nodes that will allow us to better fit it to the canvas. Once everything is adjusted, click OK.

- EXTRACT LINE -

 

Once imported, a message will automatically appear asking if we want to extract the line. We'll accept it. The next step will open the line filter adjuster. The line density is up to each user. Finally, we finalize the action by clicking "Accept".

If we deactivate the background we can notice the transparency of the image.


✦ Touch gestures and keyboard shortcuts

TOUCH GESTURES: Before we start drawing, let's learn some features that will help us have a more comfortable workflow. Touch gestures will save a lot of time by minimizing the number of actions and movements on the canvas. These are enabled by default, but if you want to disable any of them, you can do so from the option: Preferences and Help > Touch Gestures.

The program's gestures are:

 

● Draw with your finger: If this option is disabled, the app will only recognize actions made with the stylus; it does not work with styluses.

● Redo with three fingers and undo with a two-finger tap. You can also undo and redo using the arrows at the top.

● Move the canvas by swiping with two fingers/rotate the canvas with two fingers.

● Eyedropper by long-pressing: If you hold down one finger on the part of the canvas where you want to add a color, the eyedropper circle will appear. You can move it around the canvas without lifting your finger from the screen.

 

Note: Here you can also find the option to switch from light mode to dark mode. Dark mode is ideal for nights when there is little light or when your eyes are tired.

KEYBOARD SHORTCUTS: If you have a keyboard that can connect to your phone, either via Bluetooth or an adapter, you can use it for an efficient and comfortable workflow. The program's tools and windows have default keyboard shortcuts that make them extremely easy to access. This way, you can use one hand for gestures and shortcuts while drawing with the other; this makes it much faster.

 

The default list of Simple Mode commands can be viewed from: Preferences & Help > Keyboard Shortcuts.

For example, you can switch between tools without having to open the tool menu manually.

 

Note: Unfortunately, commands in Simple Mode cannot yet be edited; hopefully, they will become more customizable in future updates.


✦ Lineart

Tools Menu: Clicking on the brush icon at the bottom will display the tools menu. Here you'll find essential tools, such as: Transform, Eyedropper, Brush, Lasso, Liquify, Eraser, Fill, Shape, Filter, and Effect.

 

Layers Palette: Clicking on the icon at the bottom right will display the layers palette. Sliding the palette to the left will reveal the details of its name. Clicking on a layer's thumbnail will display a menu where you can control layer visibility, erase options, opacity, etc. Clicking on the three dots at the end of the floating menu will display the full options for editing the layer, such as: blending mode, border, snap to layer below, etc.** Also, to change the layer name, click on the name in the drop-down menu.

- SKETCH COLOR -

 

As a first step, I'm going to change the color of the sketch to make it easier to differentiate the sketch from the lineart.

 

I'll activate the "Lock Transparent Pixels" feature on the sketch layer. Then, I'll change the color to blue and use my trusty brush to paint the line.

 

To better distinguish between the two layers (sketch and lineart), I recommend lowering the opacity of the sketch.

- STABILIZATION -

 

Now, on a new layer above the sketch, we need to start cleaning up, but first, the stroke. To achieve firm strokes and avoid hand shake, we can use the stabilizer. Within the brush list, in the upper right corner, there are three dots. Pressing them displays a box with the following text: Change all stabilization settings/start and end. Pressing them will open the stabilizer menu.

 

Stability is measured on a scale from 0 to 100, with 0 being zero and 100 being a firm stroke. When drawing with higher stabilization, the strokes will feel slower.

 

These stabilization settings will apply to all brushes.

 

Stabilization is ideal for lines, but for applying color, it's best to turn it off.

- SYMMETRY RULER -

 

The fact that the illustration in this example is frontal allows me to use a small shortcut, and that's the symmetry ruler. The rulers aren't compatible with simple mode, so you'll have to switch to study mode for a moment. To switch to study mode, go to the three dots on the right side. A list of options will appear in the menu, from which you'll choose "Switch to study mode."

 

Once in study mode, go to the subtool selector in the upper left corner, where you'll find the rulers.

TIP: If you want to achieve perfect vertical or horizontal symmetry, keep the SHIFT key activated while positioning the ruler on the canvas, and deactivate it when finished. In the tablet or mobile version of the program, you can activate this key from the EDGE keys side panel.

You can't use the ruler to mirror all elements because this will create an unnatural effect, so you have to deactivate it in some areas to paint them individually. To deactivate or remove the ruler, press and hold the icon located on the layer thumbnail and select the corresponding option from the menu.

To return to easy mode, go to the three lines in the top left corner and select "Switch to Easy Mode" from the menu.

Once the lineart is finished, you must hide the sketch layer using the eye-shaped icon found in the layer settings.


✦ Color base

Once the clean drawing is complete, it's time to apply the colors. Again, in simple mode, at the bottom, you'll find a colored circle; clicking on it will reveal the color wheel. Below this, you'll also find the color set and the color slider. At the top, you'll find the primary color, the secondary color, and the transparency.

 

Use the circle to select the colors, and inside, use the square to select the color luminosity and saturation.

- SELECTION AREA -

 

Using the lasso and the fill bucket to paint entire blocks is very efficient. In my case, to apply the base colors, I divide the illustration into large blocks (hair, skin, eyes, and lips) that I paint on individual layers. Let's see how:

 

We'll select the area we want to paint using the lasso tool found in the tools menu. In the tool properties, there are two very useful functions: "Add to Selection" and "Remove from Selection" (second icon from right to left), both of which are used to add to or remove from the selected area; and invert selection (third icon), which allows you to edit anything outside the selection but not everything inside the selection.

On a new layer below the sketch, we'll use the fill bucket, applying it within the selected area.

 

To move the layer between layers, hold it down and drag it to the desired position.

With this feature, you can fill closed spaces and, by modifying some settings, even fill spaces with slight openings. An important aspect to keep in mind is that within the tool settings, the Refer to all layers option must be disabled to prevent the program from considering the sketch lines as boundaries.

 

To exit the selection, press the Clear selection floating button at the top.

- COLOR SET -

 

A tip for working faster is to use color sets. We can add our favorite colors to them and have them just a tap away for future illustrations.

 

To import or create a color set, click the three lines on the left, then the "+" sign. If we choose "Search for new sets", we'll be redirected to the Clip Studio ASSETS page. We'll download the set, and that's it. If, on the other hand, we choose "New color set", a new set will be created where we can add our own colors.

If we hold down on a palette, a menu will appear where we find the options to: duplicate set, delete and rename. To add a color, just click on the plus symbol.


✦ Brushes

Let's talk a little about brushes so you know how to use them.

Let's see, the first icon in the toolbar is a shortcut that lets you quickly switch between the eraser and the brush. It's ideal for correcting mistakes in less time.

• BRUSH

 

To change the brush, click on its respective icon or click on the icon with two brushes in the center of the menu. A list of brushes and their categories will appear.

 

• ADD BRUSHES

 

Although the program has many excellent default brushes, it never hurts to have access to other varieties. To download new brushes, click the “+” symbol at the top, and in the options, select “Add recommended brushes.”

Scroll down to the bottom of the recommended brushes and select the option: Search for new brushes. The Clip Studio ASSETS page will open; the service that allows you to search for materials to download. Once the download is complete, the brushes will be displayed in the Download category. If you long-press on a brush, the modification options will appear (rename, delete, duplicate, etc.).

 

NOTE: To download ASSET materials, you must have a CLIP STUDIO user account. Registration is completely free.

Import from Studio Mode: On the other hand, if we have a brush that we have already modified in studio mode and we want to add it to simple mode, we just have to choose the option «Import from Studio Mode» and choose the brush in the menu.

• BRUSH SETTINGS

 

To modify brush settings, click the arrow next to the brush. Here you can control aspects such as color mixing, density, and the watercolor border, among others. The number of settings depends on the brush type.

• USING BRUSHES

 

It's simple: two bars appear at the bottom: the top bar corresponds to the brush size, while the second corresponds to the opacity. Some uses for opacity include creating different textures with the same brush and mixing colors.

To be able to erase areas without losing the texture of the brush, you have to use the brush itself, but instead of having a color selected, you have to choose the "Transparency" found on the color wheel.

• MIXING BRUSHES

 

Among the various brush categories, we find one dedicated to mixing. Here are a series of brushes that help with color mixing, but you need to know their characteristics to determine which ones are most useful. Play with the opacity of the brushes to achieve different blending finishes.

 

Color Blending and Blur: These brushes produce blurred results and cause textures to be lost. If overused, they leave an unpleasant result, but they are good for softening edges.

Fingertip: This simulates how paint runs when stretched.

Paint Blender, Wet Blender, and Texture Blender: These three will maintain texture and add it if it doesn't exist. You'll have to experiment with which one works best for your particular needs.


✦ Lights, shadows and 3D models

After the base colors, what we need to do is determine where the light is coming from. If you don't know how light illuminates an object, giving it its three-dimensional characteristics, then you can use a 3D model to guide you.

Simple mode has some full-body models in the materials section, but if we want more specific models of a face, for example, we'll find them in Studio mode. They're located in: Studio Mode > Materials Folder > 3D > Head.

 

Selecting and dragging it will show up on the canvas with all the modification options. To edit the angle of the light, and therefore the shadows, go to Tool Properties (wrench icon) > Light Source.

 

Dragging the circle modulates the direction of the light.

We can create different types of faces from these heads. To learn how to modify the facial features of 3D models, I recommend visiting this official tutorial on this feature:

 

 

● APPLICATION STRUCTURE:

 

Once we know the position of the highlights and shadows in our illustration, the next step is to paint them. To make the process easier, we can use the layer functions; here are some examples:

 

➀ Use "Snap to Layer Below". Its function is to create a false clipping. This means that what is drawn on this layer will only be visible relative to the boundaries of what is drawn on the layer it refers to (the layer below). If the clipping is removed, everything drawn outside the edges of the base layer will become visible. This setting is fundamental to my workflow. What I do is create a new layer above the base color by activating this function; on it, I will paint the details of the shadows.

Multiple clipping layers can also be applied to a single layer. For example, the source layer would be the hair block (1), and the layers above it would be shadow layers linked to it. This method is also non-destructive, so making changes without losing your progress is extremely easy.

Use "Lock Transparent Pixels". This is a feature that allows us to paint without leaving the painted border and without having to create new layers linked to the base layer. When activated on that same layer, only colored pixels can be drawn on; transparent ones are completely ignored. This feature can be found in the layer options; it's the square icon with a small lock. The downside is that this is a destructive option; whatever we do can't be undone so easily.

 

Done, we now have the highlights and shadows in sketch form. In the following steps, we'll render them.

If you'd like to learn more about adding highlights and shadows to a face, I invite you to check out the following tutorial:

 

 


✦ Liquify and Flip Canvas

● LIQUIFY: The position of the eyes isn't ideal, but it can be fixed in a moment. The Liquify tool allows you to make corrections and modify the shape of the area where it's used. It's a tool that works well when finalizing the illustration. With it, we can edit, change the position, and size of some parts of the illustration without having to erase anything, especially if we've already finished it.

 

In the tool properties, we find: Mode and Intensity. In Mode, we find seven options: Nudge, Zoom, Shrink, Nudge Left, Nudge Right, Rotate Right, and Rotate Left. Intensity, on the other hand, modulates the level of distortion of the tool.

It's that easy to change the shape and size, perfect for improving proportions. Let's look at the following image and play "Spot the Differences" :)

To learn more about this tool, I recommend reading this official tutorial:

 

 

- FLIP CANVAS VIEW -

 

Remember that it's essential to rotate the canvas to correct errors that aren't immediately noticeable. Within the three-dot section, you'll find the option "Flip View Horizontally". The blue icon that appears when you activate the option will allow you to return to the base view.


✦ Color

Now let's look at the color process step-by-step, but first, let me explain the workflow I follow.

 

- WORKFLOW -

 

For a better workflow, you need to manage the layers. Below, I'll share the logic I follow.

 

All the layers I used for the sketch are placed in a folder named sketch (1). Then, I create a layer above the folder where I'll create the lineart (2). When I'm done, I hide the sketch folder.

Now, I create a new folder below the previous two, which I'll call "Color" (3). I paint the base color of each element on an individual layer; for example, the skin on one, and the eyes, lips, and hair on another, in their corresponding individual layers within the folder.

Finally, I create layers above the base color layers, which I adjust to the layer below, as explained in the "Lights and Shadows" section.

 

To move a layer within a folder, simply hold down on it and drag it to the folder. Once the program indicates that they can be grouped (with a blue border over the folder icon), release it.

TIP: If you find it difficult to distinguish between so many layers and folders, what you can do is add a color mark to them. To do this, go to Studio mode. Once there, go to the icon in the upper left corner of the layer window. This list of colors is used to color the layers. You can choose a default color or choose another with "Choose another color". When you return to Simple mode, you will see the marks on the side of the layer.

- CHOOSING COLORS -

 

Giving color to anything is as simple as following the three-tone scheme. This method consists of choosing three colors: a base color, a light color for the highlights, and a dark color for the shadows.

 

● BASE COLORS: When choosing a base color, and in general for most colors with a few special cases, avoid shades that tend toward gray. For base colors, we should position ourselves within an upper area and then move diagonally downward.

SHADOWS: It's the same for shadows, moving diagonally between gray and saturated tones. In this case, we can similarly move toward another nearby color to achieve a color variation. Another thing: these first shadows shouldn't be too dark; we'll work on that kind of depth later.

● LIGHT: For the lights you have to return once again to the left corner, but without touching the pure white.

DEEP SHADOWS: Once we've established the highlights and shadows, it's time to intensify the deep shadows to create a more concrete effect of depth. In this case, we'll need to move diagonally toward the blacks. These deep shadows should be applied to the occlusion zones. Occlusion zones are points where neither direct nor ambient light reaches.

● REFLECTIONS: To give a little extra to the colors, it's ideal to add reflections. We must know that every object, including skin, hair, and the environment, reflects its tones to other nearby objects. Skin, for example, is highly reflective. To choose the colors for the reflections, what I do is move towards gray tones. And if, for example, most of the illustration is dominated by warm tones, the colors of the reflections will be in cool tones and I'll apply them to the shadow areas.

I apply these highlights with a brush, lowering the opacity and then blending it. The new color resulting from the blending of the two will be the one I select to continue painting the rest of the highlights in the same category.

- COLOR SLIDER -

 

I recommend using the Color Slider located below the color wheel. These sliders allow for greater precision in color selection. You can use this tool to calculate the lightness and saturation of a selected hue from the color wheel.

 

To use it, choose a color and then move the sliders to obtain different saturations and lightnesses. For example, if you take the base color of the skin and, starting from there, slightly adjust the lightness to darken it, and then slightly adjust the saturation to move it away from the grays, you'll get a good shade.

- PAINTING THE LINEART -

 

Another important step in my process is painting the lineart, and to do this, I do the following:

 

Duplicate the lineart layer and hide the original layer with the eye icon.

I'll move this duplicate layer into the color folder; the layer should be at the top of all the other folders.

I activate "Lock Transparent Pixels" on the duplicate and begin painting the line.


✦ Render

There's no magic formula for rendering; most of the process is trial and error. You have to observe, add, and improve missing or unnecessary elements over and over again until you get a result you like. However, there are some guidelines I can share.

 

BLENDING MODES -

 

When adding color, it's good to use blending modes because they allow you to subtly adjust the color tone. Blending modes can be divided into four main groups, but the two most important are those that add light and those that darken. My favorites are Multiply (to darken) and Add, Overlay (to brighten). These modes are found in the layer settings; they're the first option.

● LIGHT MODES: I use the modes that add brightness to illuminate the brightest areas, for example, for the hair I will create several layers, overlapping each other, with which I will illuminate the colors a little. First, I will paint with an orange tone, then a pinkish one, and finally another with a blueish tone for the highlights.

● DARKNESS MODES: Now comes my favorite part: shading the image to add the light areas. For this illustration, I'll use a light source coming from the top left, so:

 

I create a layer above the folder, but below the lineart layer, activating the Snap to Layer Below option, then setting the blending mode to Multiply.**

Now, I choose a skin color that's dark, but not too dark. With it, I paint the entire layer (easy to do with the paint bucket). Then, I lower the layer's opacity as much as I see fit.

Finally, I use the eraser to remove the areas where the light should be.

● SATURATED EDGE: When direct light hits the skin or any other object, a saturated edge of light is created between the shadow and the light. To achieve this effect, we'll use the Overlay mode.

 

Create a new layer above the multiply layer. This layer must also be set to the Snap to Layer Below option.

Now, using the airbrush and an orange hue, I paint along the edge of the light and shadow. I blur this band of light slightly with the Color Blend tool.

Finally, using the Blur tool with a small size and lower opacity, I blur the edge of the light and shadow slightly on the multiply layer.

If you'd like to learn more about all the blending modes, I invite you to check out this tutorial:

 

 

- FILTERS -

 

With filters, we can improve contrast, tone, light, and more. Some standard filters are predefined, but if you want to make your own adjustments, go to the option: Adjustments. This tool is found in the Tools menu, under the Filters option.

 

If we don't like all the colors, we can easily modify them from here. It's important to note that adjustments can be applied to an individual layer or to the entire layer. The option to choose between these two will always be displayed when you select the tool from the menu.

- CORRECTING FINISHES-

 

Now comes the part that, for me, is the most fun: correcting details. What we need to do now is sculpt. Basically, we have to hide the lineart, blend colors, and define the volumes until we're satisfied.

To do this, the first thing I do is put all the layers and folders I created for painting the skin into another folder, which I call "All." Then, I'll create another folder inside "All" above the color (in this case, above the blending mode and lineart layers), which I name "Details." It's within this folder that I'll create layers to clean up the drawing.

 

I do all of this from the "Studio Mode" interface because it's easier to modify and group layers than in "Simple Mode."

Throughout the process, I put everything into subfolders so that when I apply a filter or paint the background, it's easier to combine the layers. In the end, the structure should look like this: When you collapse the "All" folder, only the original lineart layer, the sketch folder, and the "All" folder should be visible.

Once everything is well organized, I start cleaning.

- TRANSFORM -

 

If a proportion isn't correctly positioned, we can move it, transform it freely (ideal for positioning elements in perspective), flip it, or rotate it in a few simple steps:

 

Select the area with the selection tool.

Once selected, we'll see a menu bar at the bottom where we'll find a cross with an arrowhead icon. This will be the transform icon.

Clicking on this icon will open the transform menu, as seen in the following GIF (to enlarge it and see all the options, drag the window up).

The free transformation allows for more comprehensive modifications, and the mesh transformation is not far behind. This transformation is the third option in the menu, and in the features section, we find the number of nodes that can be added. To use it, simply move the nodes you need to the optimal position.

- CUT AND PASTE -

 

If we select an area with the selection tool, we'll see the tool's menu, where we'll find two options: "Copy and paste to another layer" (as the name suggests, it makes a copy of the selected area and pastes it onto a layer above the original) and "Cut and paste to a new layer" (this doesn't create a copy, but instead directly takes it from the original and pastes it onto a new layer above it).


✦ Effects

Effects are also good for adding final touches. My favorites are Chromatic Aberration and Noise. Effects can be applied to folders or layers. I like to create a copy of the folder containing all the layers and merge that copy into a single layer, which I use to add filters and effects. To complete the entire duplication and merging process, I'll briefly switch to Studio mode. Once there, I go to:

 

DUPLICATE LAYER/FOLDER: What I usually do first is create a copy of my main folder so I don't lose the information on the individual layers if I want to modify them later. To do this, press and hold the folder, and in the pop-up options, choose "Duplicate Layer."

 

MERGE LAYERS: To merge the duplicated folder, go to the same menu as in the previous section, but in this case, choose the option "Merge Selected Layers."

- CHROMATIC ABERRATION -

 

This effect creates the illusion of color decomposition. This and the other effects can be found in the Tools Menu, under the Effect option. By choosing the one you like, you can control its intensity and see a before-and-after preview.

By default, the effect will be applied to the entire layer, but if you want it to be applied only to a specific area, you must first select the area with the lasso tool; the effect will be applied within the boundaries of the selection.

- NOISE -

 

The same applies to the noise effect. In the options, we find two types: colored noise and black and white noise. I like this effect because it easily adds texture to the illustration.

If you'd like to learn more about the features of filters and effects, I invite you to check out this tutorial:

 

 


✦ Tonal correction layers

Tonal correction layers allow us to edit shadows, midtones, and highlights. The ones I most recommend are: Tone Curve, Color Balance, and Gradient Map.

 

These layers are not available in Simple mode, so you'll need to switch to Studio mode to use them. Tonal correction layers can be found by going to Menu > Layer > New Tonal Correction Layer. There are nine layers in total that can be used.

When we finish editing the color with the correction layers, we can return to studio mode. The color will remain edited, but the correction layer cannot be edited. To modify it, we must return to studio mode and double-tap the small correction layer icon in the layers window.

If you'd like to learn more about tonal correction layers, I recommend checking out the official guide. I also covered these layers in more detail in the "Tools for Adding Color" tutorial I mentioned earlier.

 

 

- RESULT -

 

After refining the last details, I got the following result:

4. Save/Export

The mobile version saves progress automatically every so often. Also, when you leave the canvas using the arrow in the top left, the process is automatically saved before exiting.

To share or save to the device, go to the three dots in the top right corner. The options will appear: "Export Image" and "Export Timelapse". When you choose either option, you'll be asked if you want to share or save it to the device. Once you've chosen between the two options, a window will appear where you can choose to save (PNG, JPG, or PDF). When you're done, click "Save".

 

For the timelapse, the procedure is the same. In the window that appears, you can choose the duration, aspect ratio, resolution, and whether you want it to include the CLIP STUDIO PAINT logo.

UPLOAD TO THE CLOUD

 

To upload a file to the cloud, first go to the "In this app" section in the projects section. From the new screen, select the project and click the slider at the bottom of the project. A message will appear asking you to confirm whether you want to upload the file to the cloud. Click Accept. Once accepted, the cloud icon will turn blue, and you can view the upload process in the "Data transfers" section in the settings.

 

Done, you can now access the project on all devices linked to your account.

 

NOTE: To upload or download a project from the cloud, you must have a CLIP STUDIO user account.

🎬 (Extra) Let's animate a blink on the mobile

As a bonus, let me explain how to make a small animation on your phone from a finished illustration. The steps are very simple, I hope you like it.

 

The animation tools are not compatible with Simple Mode, so I'll do everything in Studio Mode.

If you'd like to learn more about the Studio Mode interface, I invite you to visit this official tutorial:

 

 

- CANVAS -

 

Open a new project. In the "Drawing" section, select the "Advanced Settings" option. Once in the canvas window, select the "Animation" option in the "Artwork Type" menu.

 

Now, within the settings that appear, go to the "Timeline" section. There, change the "Speed" to 8 and "Duration" to 24. Done.

- TIMELINE -

 

To view the timeline window, click and hold on the window bar. The "Palette Bar Settings will appear. In the list, find the "Timeline option, select it, and click OK.

 

This will cause the timeline icon to appear in the window bar. Clicking it will open the timeline window.

 

To pin the window and prevent it from automatically hiding when you click anywhere else, select the pin option located in the upper right corner of the window in question.

- IMPORT IMAGE -

 

Now you need to import the illustration. To do this, you must:

 

Go to the Layers window and delete the layer that is automatically generated when you open a new canvas. Just the layer, not the folder.

Then, open the Timeline window and make sure the first frame is selected (the red bar shows the active frame).

Finally, go to the three lines in the upper left corner. In the options, scroll down until you find the one that says "Import" and then choose "From device storage."

- RASTERIZE -

 

The next step is to go to the layers window and select the image you're importing. Press and hold the layer to bring up the options menu. From among the options, choose "Rasterize." This step allows you to draw on the layer.

- FRAMES -

 

This animation will have five frames, of which the first and fifth will be the base illustration, so nothing needs to be done for them. The structure will be as follows:

 

(A) The first frame will correspond to the open position.

(A1) The second will represent the eyelid lowering slightly from the "A" position.

(B) In the third position, the eyes will be closed.

(B1) The fourth corresponds to the eye opening from the "B" position.

(C) Finally, we will have the eyes open once more.

• SECOND FRAME

 

We'll start by selecting the second animation cel in the timeline (if it's difficult to see the cels, you can zoom in with the magnifying glass icon).

Once there, go to the layers window and duplicate the base layer. This duplicated layer will automatically dock onto the second animation cel.

Now, using the Lasso selection tool, we'll select the upper eyelashes of both eyes. To make it easier, I recommend selecting both at the same time.

 

To select multiple separate elements, activate the Add Selection option in the Lasso tool properties.

Once selected, we'll need to move them down a bit using the Transform tool (you can find the shortcut in the action bar).

Moving the tabs will leave a colored space that we'll need to fill by painting.

 

To increase viewing space, I recommend rotating the device horizontally.

• THIRD FRAME

 

For this third frame, we'll repeat the steps. This time, we'll duplicate the layer we duplicated in the previous step, but in this case, we won't move the eyelashes. Instead, we'll paint the shape of the fully closed eyes on top of the base eyes.

 

Remember to make sure you have this third layer selected before starting to paint to avoid painting on another layer.

FOURTH FRAME

 

For this frame, we'll duplicate layer number one. The duplicated layer will appear with the name "1a". Now, select cell four in the timeline and hold down on it until the menu appears. On the left, there will be a list with the names of the layers created so far. Among the options, choose the name of the layer we duplicated (1a).

 

Now, once again using the lasso tool, we'll lower the eyelashes to the middle of the eye, or even further, to simulate a pair of eyes opening.

FIFTH FRAME

 

We'll start by selecting the fifth animation cel in the timeline. We'll hold it down until the window mentioned in the previous frame appears. We'll select the base layer, the one containing the layer we imported. Done, that's it.

 

With that, we're done. Now we need to check the animation. To activate playback, go to the three lines and from there to the animation section. In the options, we'll find "Play/Stop". To create a shortcut for this button, we can add it by clicking on the circle with the arrow at the end of each option. The shortcut will be added to the "Quick Access" window located in the window bar; it's the first option.

While playing the animation, I noticed a very large gap between blinks. To reduce this gap, I'll trim the number of frames, reducing them from 24 to 15. To do this, go to the end of the 24 frames where you'll find the separator that marks the frame limit (blue strip). Hold it down and drag it to the desired frame.

 

You'll notice the girl changes position. That was my mistake. I accidentally moved the layer without realizing it, but I fixed it using the "Align and Arrange" tools.

There you go, it looks much better now.

- EXPORT -

 

The save option can be found in the three lines; in the menu, search for: File > Export Animation. Many options will appear, but the ones I usually use are movie or GIF. The GIF option will save the animation as a loop, which will be convenient for such a short animation. I'll leave all the options you can modify before saving as is, except for the file name and size. I'll change that to the name and size I like. Now, just click OK.

 

If the file isn't found in your gallery, it's because it was saved in the program's folder. You'll have to search for it using your device's file explorer and move it to another location if you want.

- RESULT -

Farewell

I hope this tutorial helps you paint beautiful illustrations on your mobile phone. It would be a great help if you gave me a thumbs up. Thanks for reading! See you later! (⌒‿⌒)

 

Bye bye.

 

Learn more about me at:

Comment

New

New Official Articles