How to Create Pixel Art and Animations with Piskel Tutorial 4 - How to Use Layers
TLDRThis tutorial covers how to use layers in Piskel to animate a potion sprite. By separating the potion and bottle onto different layers, you can manipulate each independently. The video explains how to create, reorder, rename, merge, delete, and adjust the opacity of layers. It also demonstrates the use of various selection tools to transfer the potion pixels to a new layer, and how to use the color picker and pen tool to shade the bottle layer. The tutorial ends by preparing for the next step: animating the potion being consumed.
Takeaways
- 🎨 Layers in Piskel are like transparent sheets of paper that can be drawn on and stacked to create a final image.
- 📚 The Layers panel is located on the right side of the screen in Piskel.
- 🔄 You can add, reorder, merge, and delete layers using the provided buttons in Piskel.
- 🖌️ The Shape Selection Tool selects all pixels of the same color that share at least one side.
- 📏 The Rectangle Selection Tool allows you to select all pixels within a dragged rectangle area.
- 🔗 The Lasso Selection Tool is used for selecting irregular shapes by clicking and dragging around the desired area.
- ✂️ Once selected, you can cut and paste parts of your sprite onto different layers.
- 👁️ The active layer's visibility and opacity can be adjusted, affecting how it appears during sprite creation.
- 🌈 The Color Picker Tool helps in selecting primary and secondary colors from the sprite for drawing.
- 🎭 Adjusting layer opacity allows for effects such as transparency, which can be set on a scale from 0 (transparent) to 1 (opaque).
- 🍾 The tutorial will demonstrate animating a potion being consumed, revealing an empty bottle in the process.
Q & A
What is the main goal of this tutorial?
-The main goal of this tutorial is to explain how to use layers in Piskel for creating and animating a pixel art potion sprite.
Why is it useful to understand layers in Piskel?
-Understanding layers in Piskel is useful because it allows you to separate different elements of your art, making it easier to animate and edit them without affecting other parts.
How does the tutorial describe a layer?
-The tutorial describes a layer as a clear sheet of paper on which you can draw, and then place another clear sheet on top of it. You can see the art on the bottom sheet through the top sheet and draw on the top sheet without altering the bottom sheet.
Where is the layers panel located in Piskel?
-The layers panel is located on the right side of the screen in Piskel.
How can you add a new layer in Piskel?
-You can add a new layer in Piskel by pressing the plus sign labeled 'Create a New Layer'.
What is the function of the 'Move Layer Up' and 'Move Layer Down' buttons?
-The 'Move Layer Up' and 'Move Layer Down' buttons allow you to reorder the layers by moving them up or down in the stack.
How can you merge layers in Piskel?
-You can merge layers in Piskel by using the merge button, which combines the selected layer with the layer directly below it. Note that this action will replace any pixels on the bottom layer that are behind pixels on the top layer.
What does the opacity setting do in Piskel?
-The opacity setting in Piskel allows you to adjust the transparency of a layer. The opacity is set on a scale from 0 (fully transparent) to 1 (fully opaque).
What are the three selection tools mentioned in the tutorial, and what are their purposes?
-The three selection tools mentioned are: 1. Shape Selection Tool (Z shortcut) - selects all pixels of the same color that share at least one side. 2. Rectangle Selection Tool (S shortcut) - selects all pixels within a rectangular area. 3. Lasso Selection Tool (H shortcut) - allows you to drag around an area to select an irregular shape.
How do you use the Color Picker tool in Piskel?
-The Color Picker tool, which can be accessed with the O shortcut, allows you to select a color for your primary and secondary colors by clicking on the desired color in your sprite. Left-click selects the primary color, and right-click selects the secondary color.
Outlines
🎨 Layer Management and Potion Animation in Piskel
This paragraph introduces the concept of using layers in Piskel to animate a potion being consumed. It explains the basic functionality of layers as transparent sheets that can be stacked and edited independently. The video script guides the viewer through creating new layers, renaming them, and adjusting their order and opacity. It also covers the process of cutting out the red potion from the bottle layer and pasting it into a new potion layer. The importance of the layer's opacity is demonstrated, and the tools available in Piskel for selecting and editing specific areas of the artwork are discussed, including the Shape Selection, Rectangle Selection, and Lasso Selection tools.
🖌️ Coloring and Preparing for Potion Animation
In the second paragraph, the focus shifts to coloring the bottle and preparing the animation for the potion consumption effect. The script describes using the pen tool to fill in the bottle with primary and secondary colors, as selected with the Color Picker tool. The process of adjusting the potion layer's opacity back to fully opaque is detailed, setting the stage for the animation that will reveal the empty bottle as the potion is consumed. The paragraph concludes with a teaser for the next video, where the animation of the potion being consumed will be demonstrated, and ends with a call to action for viewers to support the creator, engage with the content, and subscribe for more tutorials.
Mindmap
Keywords
💡Layers
💡Opacity
💡Shape Selection Tool
💡Rectangle Selection Tool
💡Lasso Selection Tool
💡Color Picker
💡Pen Tool
💡Merge Layers
💡Cut and Paste
💡Animation
Highlights
Now that we’ve finished our potion sprite, I’d like to animate it to look like it’s being consumed.
Before we start with the animation, first we need to understand how to use Layers in Piskel.
An easy way to think of a layer is like a clear sheet of paper. You can draw on the sheet, and then place another sheet on top of it.
The layers stack on top of each other, combining together to create the final image.
The layers panel is on the right side of the screen. Right now, we have one layer, called layer 1.
We can add another layer on top of that by pressing the plus sign, Create a New Layer.
You can reorder layers by pressing these arrows, Move Layer Up and Move Layer Down.
We can also edit the layer’s name with this button. I’ll set the bottom layer to be called Bottle, and the upper layer to be called Potion.
This next button allows you to merge a layer with the layer directly below it. If you do this, you will lose any pixels on the bottom layer that are behind pixels on the top layer.
You can also delete a layer with the X, Delete Selected Layer.
You can change the opacity of a layer by clicking on this 1a icon.
The Shape Selection tool selects all pixels of the same color that share at least one side.
The rectangle selection tool allows you to drag a rectangle area out, which will select all pixels underneath.
The last option is the Lasso selection tool, which allows you to drag around the area you want to select.
With the lasso tool, click and hold the mouse button, and drag around the area you want to select.
You can cut and paste the selected potion area onto the potion layer.
In the sprite preview, the bottle and potion are both fully opaque.
To change the opacity of a layer, click on the 1a icon, and set the value on a scale of 0 to 1.
The Color Picker tool lets you select a color for your primary and secondary colors by clicking on the color you’d like.
I’ll use the Color Picker tool to select the primary and secondary colors, and then use the pen tool to fill in the bottle.
We now have two finished layers: the bottle layer and the potion layer.
In the next video, we’ll animate this potion so that it is consumed over several frames.