Piskel Explosion Tutorial

RedletterDan
21 Sept 202006:57

TLDRIn this tutorial, Mr. McLaughlin guides viewers through creating a pixel art explosion using Piskel, a free online tool. Starting with a circle and adding layers of color to simulate the fiery and smoky elements, he demonstrates techniques for animating the explosion's progression. Tips include using the selection tool for movement and adjusting colors to give depth. The tutorial concludes with advice on refining the animation and saving the final product as a GIF for sharing.

Takeaways

  • 😀 The tutorial is about creating a pixel art explosion using Piskel.
  • 🎨 The Piskel app can be accessed at piscolapp.com and is free to use.
  • 📝 The tutorial suggests creating a circle as the base for the explosion with a blue tint.
  • 🖌️ A duplicate frame is filled with off-white to add contrast to the explosion.
  • ✨ A bright yellow flash is added with sharp edges for a dynamic effect.
  • 🔥 Small pieces of shrapnel or flames are painted around the explosion to enhance the effect.
  • 🌫️ A smoke cloud is created by painting over the explosion with a dark color and then erasing unnecessary parts.
  • 🔴 Dark red bubbles are outlined for the fiery part of the explosion, filled with yellow for brightness.
  • 🔄 The selection tool is used to move and duplicate parts of the explosion to create a fading effect.
  • 🌀 The colors of the explosion are adjusted to give the impression of shifting and changing flames.
  • 🌬️ Smoke is added and manipulated to give the impression that it lingers longer than the fire.

Q & A

  • What is the main topic of the 'Piskel Explosion Tutorial' video?

    -The main topic of the video is creating a pixel art explosion using Piskel, an online animation and pixel art editor.

  • Who is the presenter of the tutorial?

    -The presenter of the tutorial is Mr. McLaughlin.

  • What is a recommended source for finding tutorials on various topics?

    -A recommended source is the online presence of Pedro Matos, known as Saint Eleven, who has tutorials for a wide range of topics.

  • Is it necessary to have an account to use Piskel?

    -While it's not necessary, creating an account on Piskel is suggested as it's free and allows for more features.

  • What is the first step in creating the explosion in the tutorial?

    -The first step is to draw a circle using either the circle tool or by hand.

  • What color is suggested for the initial circle to avoid being boring?

    -A blue tint is suggested instead of solid black to avoid being boring.

  • What tool is used to speed up the filling of the circle with color?

    -The bucket fill tool is used to speed up the process of filling the circle with color.

  • What is the purpose of duplicating the frame and changing the color to white?

    -Duplicating the frame and changing the color to off-white is part of creating the initial stages of the explosion animation.

  • What does the tutorial suggest to make the edges of the yellow flash look more dynamic?

    -The tutorial suggests keeping the edges sharp and pointy, similar to super saiyan hair, to make them more dynamic.

  • How does the tutorial describe the process of creating the smoke cloud in the explosion?

    -The smoke cloud is created by painting a dark color over the explosion area and erasing any extra tips that are not needed.

  • What is the importance of using the selection tool in the tutorial?

    -The selection tool is used to cut and paste parts of the explosion to create a sense of movement and fading effect.

  • How many frames are there in total for the animation by the end of the tutorial?

    -There are eight frames in total for the animation by the end of the tutorial.

  • What is the recommended way to check the animation sequence?

    -The recommended way to check the animation sequence is by using the animation preview window in the top right corner of Piskel.

  • How can viewers share their finished animations from the tutorial?

    -Viewers can share their finished animations by saving and downloading them as gifs, and then sharing on social media platforms.

Outlines

00:00

🎨 Creating Pixel Art Explosion

In this video script, the creator, Mr. McLaughlin, introduces a tutorial on making a pixel art explosion using piscolapp.com. He references a tutorial by Pedro Mateos, known as Saint Eleven, for additional inspiration. The process begins by drawing a circle and using a color tool to fill it with a blue tint. A duplicate frame is then filled with an off-white color, followed by the addition of a bright yellow flash with sharp, pointy edges. The tutorial continues with the creation of a smoke cloud and fiery explosion using various shades of red, yellow, and orange to add depth and dynamism. The use of the selection tool is highlighted for moving and adjusting the explosion's elements.

05:02

🔥 Enhancing and Animating the Explosion

This paragraph continues the pixel art explosion tutorial, focusing on the animation process. The creator discusses the importance of movement and change in each frame to achieve a convincing animation effect. The process involves cutting and pasting sections of the explosion, adjusting colors, and gradually adding more smoke while reducing the fire elements to simulate fading. The creator emphasizes checking the animation preview to ensure smooth transitions and suggests increasing the number of frames for a more detailed animation. The tutorial concludes with instructions on saving and downloading the animation as a GIF, and encourages sharing the finished work on social media platforms.

Mindmap

Keywords

💡Pixel Art

Pixel art is a form of digital art where images are created on the pixel level. It is often associated with the style of video games and computer art from the 1980s and early 1990s. In the context of the video, pixel art is the technique used to create the explosion, with each pixel carefully placed to form the desired visual effect.

💡Piskel

Piskel is a free online tool for creating pixel art and animations. It is mentioned in the script as the platform where the tutorial takes place. The video demonstrates how to use Piskel to create a pixel art explosion, highlighting its user-friendly interface and features.

💡Circle Tool

The circle tool is a feature within Piskel that allows users to draw perfect circles. In the script, the circle tool is used to create the initial shape of the explosion, emphasizing the ease with which one can start their pixel art project with this tool.

💡Bucket Fill

The bucket fill is a tool in Piskel that fills a selected area with a chosen color. It is used in the tutorial to quickly color the circle with a blue tint and the subsequent frames with off-white and yellow, demonstrating an efficient way to apply color to larger areas in pixel art.

💡Duplicate Frame

In the context of the video, a duplicate frame refers to the process of copying an existing frame in the animation to create a new frame that can be modified. This technique is used to build upon the initial explosion frame, adding layers and details to the animation over time.

💡Shrapnel

Shrapnel in the video refers to the small pieces or bits of material that are depicted as flying out from the explosion. The term is used metaphorically to describe the pixel art elements that represent debris or fragments in the animation, adding to the realism of the explosion effect.

💡Smoke Cloud

A smoke cloud in the script represents the visual element of smoke that forms part of the explosion animation. It is created by painting a dark color over the explosion and then erasing parts of it to form the cloud shape, contributing to the overall dynamic and evolving nature of the animation.

💡Flames

Flames are depicted as the fiery part of the explosion in the pixel art. The script describes using a selection tool to create bubbles of dark red and filling them with yellow to represent the fire, emphasizing the importance of color choice and layering in creating a realistic and visually appealing effect.

💡Selection Tool

The selection tool in Piskel is used to define a specific area of the artwork. In the tutorial, it is used to select and move parts of the explosion outwards, creating a sense of expansion and depth in the animation. This tool is crucial for manipulating specific elements without affecting the entire frame.

💡Animation Preview

The animation preview is a feature in Piskel that allows users to view their animation sequence in real-time. It is used in the script to ensure that each frame of the explosion animation is moving and shifting correctly, providing a way to assess and adjust the overall flow and pacing of the animation.

💡GIF

A GIF, or Graphics Interchange Format, is a type of image file that supports both static and animated images. In the context of the video, the final pixel art explosion is saved and downloaded as a GIF, allowing the creator to share their animation on various platforms and with others.

Highlights

Introduction to making a pixel art explosion using Piskel.

Using Piskel to create pixel art without the need for an account or payment.

Starting with a circle and using a circle tool for precision.

Filling the circle with a blue tint instead of solid black for visual interest.

Utilizing the bucket fill tool to quickly color large areas.

Creating a duplicate frame and changing the color to off-white for contrast.

Adding a bright yellow flash with sharp edges for a dynamic effect.

Incorporating a white highlight in the middle for added detail.

Adding yellow shrapnel or bits of flame for a more explosive look.

Creating a smoke cloud with a dark color and erasing unnecessary details.

Introducing fiery elements with dark red bubbles and yellow centers.

Using the color picking tool for easy access to recently used colors.

Creating depth in the explosion with a mix of orange and yellow.

Using the selection tool to move and paste parts of the explosion.

Adjusting the fire's intensity by erasing and moving colors around.

Adding more smoke to the animation to simulate lingering effects.

Repeating the process to create a total of eight frames for the animation.

Checking the animation preview for smooth transitions and adjustments.

Customizing the animation speed and preview size for better visualization.

Saving the animation to the gallery and downloading it as a GIF for sharing.