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

TodaysTuts
21 Oct 201606:13

TLDRIn this tutorial, you will learn how to use layers in Piskel to animate a potion sprite. The video explains the concept of layers, compares them to clear sheets of paper, and demonstrates how to add, reorder, rename, merge, and delete layers. It also covers changing layer opacity and using selection tools like Shape Selection, Rectangle Selection, and Lasso Selection to move parts of your sprite between layers. Finally, you'll see how to use the Color Picker and Pen Tool to complete your animation. The tutorial sets the stage for animating the potion to look like it's being consumed in the next video.

Takeaways

  • 🎨 Layers in Piskel are like transparent sheets of paper that can be drawn on and stacked to create the final image.
  • 📈 To animate a sprite, separate elements like the potion and bottle should be placed on different layers for individual editing.
  • 🔄 The layers panel is located on the right side of the Piskel interface, allowing for layer management such as adding, reordering, and merging.
  • ➕ Adding a new layer can be done by pressing the plus sign in the layers panel, placing a new layer on top of the existing stack.
  • ⬆️⬇️ Reordering layers is possible with the 'Move Layer Up' and 'Move Layer Down' arrows to adjust the stacking order.
  • 📝 Layer names can be edited for better organization, such as naming them 'Bottle' and 'Potion'.
  • 🔄 Merging layers combines the top layer with the one below, but be cautious as it can result in loss of pixels from the bottom layer.
  • ❌ Deleting a layer can be done using the 'Delete Selected Layer' option, which removes the selected layer from the project.
  • 🔄 Adjusting layer opacity is possible through the '1a' icon, allowing for transparency settings from 0 (completely transparent) to 1 (fully opaque).
  • 🛠️ Tools like the Lasso selection tool are essential for selecting irregular shapes and cutting out elements like the potion from the bottle layer.
  • 🖌️ The Color Picker tool helps in selecting specific colors from the sprite for editing, such as choosing colors for shading the bottle.
  • 🔄 After separating elements onto different layers, the next step is to animate the sprite, showing the consumption of the potion and revealing the empty bottle.

Q & A

  • What is the main purpose of using layers in Piskel?

    -The main purpose of using layers in Piskel is to separate different elements of an image, allowing for independent editing and animation without affecting other parts of the artwork.

  • How is a layer in Piskel described in the tutorial?

    -A layer in Piskel is described as a clear sheet of paper where you can draw, and then place another sheet on top of it. Layers stack on top of each other to create the final image.

  • What is the initial number of layers provided in Piskel when starting a new project?

    -When starting a new project in Piskel, there is initially one layer provided, called Layer 1.

  • How can you add a new layer in Piskel?

    -You can add a new layer in Piskel by pressing the plus sign, which creates a new layer on 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 to change the stacking order of the layers.

  • What is the function of the 'Merge Layer' button in Piskel?

    -The 'Merge Layer' button in Piskel allows you to merge a selected layer with the layer directly below it, which can result in losing some pixels from the bottom layer that are behind pixels on the top layer.

  • How can you delete a layer in Piskel?

    -You can delete a layer in Piskel by clicking on the 'X' icon next to the layer you want to remove.

  • What tool in Piskel helps you to select a color for your primary and secondary colors?

    -The Color Picker tool in Piskel helps you to select a color for your primary and secondary colors by clicking on the desired color on the canvas.

  • What is the opacity scale range in Piskel and what does each value represent?

    -The opacity scale in Piskel ranges from 0 to 1, where 0 represents full transparency and 1 represents full opacity.

  • How can you change the opacity of a layer in Piskel?

    -You can change the opacity of a layer in Piskel by clicking on the '1a' icon next to the layer name and adjusting the value on the scale from 0 (transparent) to 1 (opaque).

  • What is the next step after setting up the layers in the tutorial?

    -The next step after setting up the layers in the tutorial is 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 pixel art tool, and explains the process of animating a potion sprite to simulate consumption. It compares layers to clear sheets of paper that can be stacked and drawn on without affecting the layers beneath. The tutorial covers how to add, reorder, merge, and delete layers, as well as how to adjust layer opacity. The focus is on separating the potion and the bottle into different layers for individual manipulation.

05:04

🖌️ Selecting and Coloring in Piskel

The second paragraph delves into the tools Piskel offers for selecting and coloring. It discusses the limitations of the Shape Selection and Rectangle Selection tools for the task at hand and highlights the Lasso Selection tool for its ability to select irregular shapes. The paragraph demonstrates how to cut and paste the potion into a separate layer and adjust its opacity. It also introduces the Color Picker tool for selecting and applying colors to the bottle, concluding with a preview of the animated sprite and a teaser for the next video where the potion will be animated to be consumed.

Mindmap

Keywords

💡Pixel Art

Pixel art is a form of digital art where images are created on the pixel level. It is often used in video games and animations to create a retro or stylized look. In the context of the video, pixel art is the main focus as the creator is teaching how to make a potion sprite, which is a small image used in games or animations.

💡Animation

Animation refers to the process of creating the illusion of motion in a sequence of images. It is a key aspect of the video, as the creator aims to animate the potion to show it being consumed. The animation process involves creating a series of frames that, when played in sequence, give the appearance of movement.

💡Layers

In digital art and animation software, layers are a way to organize different parts of an image or animation. Each layer can be modified independently, allowing for complex compositions. In the video, the creator uses layers to separate the potion from the bottle, making it easier to animate the consumption effect.

💡Piskel

Piskel is a free online pixel art editor that is used in the video to create and animate the pixel art. It offers various tools for editing and organizing pixel art, including layers, which are central to the tutorial.

💡Sprite

A sprite is a two-dimensional image or animation that is integrated into a larger scene in video games or animations. In the video, the 'potion sprite' refers to the image of the potion that the creator is animating to show it being consumed.

💡Opacity

Opacity refers to the degree to which an object or image is transparent or opaque. In the context of the video, adjusting the opacity of a layer allows the creator to control the visibility of the potion layer, making it possible to see through to the bottle layer beneath.

💡Selection Tools

Selection tools in digital art software allow users to select specific areas of an image for editing. In the video, the creator uses the Lasso selection tool to select the potion pixels for cutting and pasting onto a separate layer.

💡Color Picker

A color picker is a tool that allows users to select a specific color from an image or a color palette. In the video, the color picker is used to choose the colors for shading the area inside the bottle after the potion has been 'consumed'.

💡Pen Tool

The pen tool is a common feature in digital art software used for drawing and editing paths. In the video, the pen tool is used to fill in the bottle with the selected colors after the potion has been removed.

💡Merge

Merging layers in digital art software combines the contents of two or more layers into a single layer. In the video, the creator explains that merging a layer with the one below it will result in the top layer's pixels replacing those of the bottom layer.

💡Preview

A preview in the context of digital art and animation is a representation of how the final product will look. In the video, the creator refers to the actual preview to show what the sprite will look like when saved, with both the bottle and potion layers fully opaque.

Highlights

Introduction to animating the potion sprite to simulate consumption.

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

Demonstration of adding a new layer to the project.

Instructions on how to reorder layers using the provided arrows.

Guide on renaming layers for better organization.

Description of merging layers and the implications it has on the artwork.

How to delete a layer using the 'X' button.

Tutorial on adjusting layer opacity with the '1a' icon.

Technique to cut out the red potion from the 'Bottle' layer and paste it into the 'Potion' layer.

Introduction of the Shape Selection tool and its functionality.

Limitations of the Rectangle Selection tool for the potion sprite.

Utilization of the Lasso Selection tool for irregular shapes.

Process of making the potion layer transparent for editing.

Using the Color Picker tool to select and apply bottle colors.

Filling in the bottle with selected colors using the Pen tool.

Restoration of the potion layer opacity to full visibility.

Preview of the final sprite appearance with both layers fully opaque.

Teaser for the next tutorial on animating the potion consumption.