How to Create Pixel Art and Animations with Piskel Tutorial 4 - How to Use Layers

TodaysTuts
21 Oct 201606:13

TLDRThis tutorial explains the use of layers in Piskel for creating pixel art and animations. The presenter demonstrates how to separate the potion and bottle into different layers, allowing for independent animation. Techniques for selecting and manipulating pixels, adjusting layer opacity, and merging layers are covered. The tutorial sets the stage for animating the consumption of the potion, revealing the empty bottle layer beneath.

Takeaways

  • 🎨 Layers in Piskel are like clear sheets of paper that you can draw on and stack to create a final image.
  • 🔄 To animate an object, separate parts of it onto different layers, such as the potion and the bottle in this tutorial.
  • ➕ Add new layers by clicking the plus sign in the layers panel, which is located on the right side of the screen.
  • ⬆️⬇️ Reorder layers by using the 'Move Layer Up' and 'Move Layer Down' arrows to adjust their stacking order.
  • 📝 Edit the layer's name for better organization, such as naming them 'Bottle' and 'Potion'.
  • 🔀 Merge layers to combine them, but be aware that this will replace pixels on the bottom layer with those on top.
  • ❌ Delete unnecessary layers using the 'Delete Selected Layer' option to keep your project clean.
  • 👁️ Adjust the opacity of a layer to see through to lower layers or create transparency effects.
  • ✂️ Use selection tools like the Lasso tool to select and cut out specific areas, like the potion from the bottle.
  • 🖌️ Fill in areas with color using the Pen tool and the colors picked with the Color Picker tool.
  • 🔄 The actual preview shows how the sprite will look when saved, with all layers at full opacity unless adjusted.

Q & A

  • What is the purpose of using layers in Piskel when creating pixel art and animations?

    -Layers in Piskel are used to separate different elements of the artwork, allowing for independent editing and animation without affecting other parts of the image. They function similarly to clear sheets of paper stacked on top of each other, with each layer containing its own artwork that contributes to the final image.

  • How does the layering system in Piskel help in animating a sprite?

    -The layering system allows for the animation of individual elements of a sprite separately. For example, a potion and a bottle can be on different layers, enabling the potion to be animated as if it's being consumed without altering the bottle's appearance.

  • What is the initial step to create a new layer in Piskel?

    -The initial step to create a new layer in Piskel is to press the plus sign, which is labeled 'Create a New Layer'. This adds a new layer to the top of the existing layer stack.

  • How can you reorder layers in Piskel?

    -You can reorder layers in Piskel by using the 'Move Layer Up' and 'Move Layer Down' arrows, which allow you to change the stacking order of the layers to adjust which parts of the artwork appear on top.

  • What is the consequence of merging a layer with the layer directly below it in Piskel?

    -Merging a layer with the one directly below it in Piskel results in the top layer's pixels replacing those of the bottom layer. Any pixels on the bottom layer that are behind the top layer's pixels will be lost in the process.

  • How can you delete a layer in Piskel?

    -To delete a layer in Piskel, you can click on the 'X' icon next to the layer's name, which is labeled 'Delete Selected Layer'.

  • What is the purpose of the opacity setting for layers in Piskel?

    -The opacity setting for layers in Piskel allows you to adjust the transparency of a layer, making it possible to see through to lower layers or to create visual effects. It ranges from 0 (completely transparent) to 1 (fully opaque).

  • How do you select specific pixels for editing in Piskel?

    -In Piskel, you can select specific pixels for editing using the Shape Selection tool, Rectangle Selection tool, or the Lasso Selection tool. These tools allow you to select pixels based on color, area, or freehand selection around the desired pixels.

  • What is the Lasso selection tool used for in Piskel?

    -The Lasso selection tool in Piskel is used for making freehand selections around irregularly shaped areas. It allows for precise selection of pixels by clicking and dragging the mouse around the desired area.

  • How can you change the colors used in your artwork in Piskel?

    -In Piskel, you can change the colors used in your artwork by using the Color Picker tool. This tool allows you to select a color from the artwork by clicking on the desired color with the left mouse button for the primary color and the right mouse button for the secondary color.

  • What does the script suggest will be the next step after setting up the layers?

    -The script suggests that after setting up the layers, the next step will be to animate the potion so that it appears to be consumed over several frames, revealing the empty bottle on the bottom layer.

Outlines

00:00

📚 Understanding Layers in Piskel

This paragraph introduces the concept of layers in Piskel, a sprite animation tool. It compares layers to clear sheets of paper that can be stacked to create a composite image. The video script explains how to add, reorder, merge, and delete layers, as well as how to adjust their opacity. The tutorial also covers the process of selecting and transferring the potion from the bottle to a separate layer, emphasizing the importance of layer management in animation.

05:04

🖌️ Filling and Preparing Layers for Animation

In this paragraph, the focus shifts to the practical application of the layers created in the previous tutorial. The script describes how to use the pen tool to fill in the bottle with the selected primary and secondary colors. It then discusses adjusting the potion layer's opacity to reveal the empty bottle beneath, setting the stage for the animation of the potion being consumed. The paragraph concludes with an invitation for viewers to support the creator on Patreon and to engage with the content through comments, likes, and subscriptions for further tutorials.

Mindmap

Keywords

💡Pixel Art

Pixel art is a form of digital art where images are created on the pixel level. Each pixel acts as a 'mini-brushstroke', allowing artists to craft detailed images with a limited color palette. In the context of the video, pixel art is the medium used to create the potion sprite, which is a small, detailed image representing a potion in a video game or animation.

💡Animation

Animation refers to the process of creating the illusion of motion and change by making a series of pictures appear sequentially. In the video, the creator is looking to animate the potion to give the impression that it is being consumed over time, which involves creating a sequence of frames that show the potion level decreasing.

💡Layers

In digital art and animation, layers are a fundamental tool that allows artists to work on different parts of an image separately. Each layer is like a transparent sheet that can be drawn on independently, then stacked on top of each other to form the final composite image. In the script, the potion and the bottle are placed on separate layers to facilitate the animation process.

💡Piskel

Piskel is a free online editor for creating pixel art and animations. It provides a user-friendly interface with tools for drawing, selecting, and animating on a pixel-by-pixel basis. The video tutorial specifically focuses on how to use Piskel's layering system to create an animated sprite of a potion being consumed.

💡Sprite

A sprite, in the context of video games and animation, is a two-dimensional image or animation that is integrated into a larger scene. Sprites are used for characters, objects, and elements that need to be animated or displayed within a game or animated sequence. The video script describes the process of animating a 'potion sprite' to show it being consumed.

💡Opacity

Opacity refers to the degree to which an object or layer allows light to pass through it, which in digital terms translates to the transparency of a layer. In the video, adjusting the opacity of the potion layer is discussed as a way to show the potion's consumption effect, where a lower opacity makes the potion appear more transparent or 'emptier'.

💡Selection Tools

Selection tools in digital art software are used to select a specific area of an image for manipulation. In Piskel, the Shape Selection tool, Rectangle Selection tool, and Lasso tool are mentioned. These tools are essential for isolating parts of the image, such as the potion, to move it to a separate layer or to apply effects.

💡Color Picker

The color picker is a tool that allows users to select a specific color from an image to be used for drawing or filling. In the script, the color picker is used to select the colors for the bottle's lip and neck to shade in the area where the potion was, after it has been 'removed' to the potion layer.

💡Pen Tool

The pen tool is a common feature in graphic design software that allows for freehand drawing or precise path creation. In the video, the pen tool is used to fill in the bottle with the selected colors after the potion has been removed, creating the effect of an emptying potion.

💡Merge

Merging layers in digital art software combines two or more layers into a single layer. When the top layer is merged with the bottom layer, the pixels from the top replace those of the bottom where they overlap. In the tutorial, the creator explains the merge function as a way to combine layers but chooses not to use it to preserve the separate animation elements.

💡Lasso Tool

The lasso tool is a selection tool that allows for freehand, irregular selections by 'drawing' a loop with the mouse. In the script, the lasso tool is used to select the potion for cutting and pasting onto a separate layer, which is ideal for complex shapes that cannot be easily selected with other tools.

Highlights

Introduction to animating a potion sprite to simulate consumption.

Explanation of the concept of layers in Piskel, akin to clear sheets of paper.

Demonstration of how to add a new layer to the layer stack in Piskel.

Instructions on how to reorder layers using the Move Layer Up and Move Layer Down buttons.

Guide on renaming layers for better organization.

Description of the merge layer function and its implications on pixel visibility.

Explanation of how to delete a layer using the Delete Selected Layer option.

Tutorial on adjusting layer opacity using the 1a icon.

Step-by-step process of cutting out the red potion from the Bottle layer and pasting it into the Potion layer.

Use of the Shape Selection tool for selecting pixels of the same color.

Utilization of the Rectangle Selection tool for selecting pixel areas.

Application of the Lasso selection tool for irregular shape selection.

How to make the potion layer visible while adjusting other layers' opacity.

Previewing the sprite's final look with full opacity for both the bottle and potion layers.

Technique for setting layer opacity to specific percentages for animation effects.

Using the Color Picker tool to select and apply colors from the sprite.

Filling in the bottle with selected colors to prepare for the animation.

Teaser for the next video, which will cover animating the potion consumption revealing the empty bottle.

Call to action for viewers to support, like, share, and subscribe for more tutorials.