How to Create Pixel Art and Animations with Piskel Tutorial 6 - Saving and Exporting

TodaysTuts
25 Nov 201604:23

TLDRThis tutorial on Piskel guides users through saving and exporting pixel art and animations. It covers saving to a Piskel account, choosing privacy settings, and saving offline. The export options include scaling the sprite, exporting as a GIF with a white background, PNG spritesheets with customizable columns and rows, a ZIP file of individual frames, and a C file with frame arrays. The tutorial encourages engagement and subscription for more content.

Takeaways

  • 🖌️ To save a sprite in Piskel, click the disk icon and provide a title and description.
  • 🔒 Logged-in users have additional options, such as saving to a private gallery.
  • 👀 The public checkbox determines if the sprite is available to the public in your gallery.
  • 📂 The 'Save to Gallery' button saves the sprite to your Piskel account's gallery.
  • 🌐 'Save offline in browser' allows you to save the sprite as a piskel file in your browser's local data.
  • 💾 You can also save the sprite as a piskel file directly to your hard drive.
  • 🔍 The 'Scale' feature lets you increase the size of your sprite or animation up to 32 times the original scale.
  • 🎨 Piskel offers four export options: GIF, PNG spritesheet, ZIP file of PNG frames, and a C file with frames as an array.
  • 🚫 When exporting as a GIF, the opacity of the sprite is not preserved, and a white background is applied.
  • 🔄 The PNG spritesheet can be customized with different columns and rows to suit your needs.
  • 📁 The ZIP file option allows you to download individual frames of the animation with a prefix name.
  • 🛠️ The C file export renders the frames as an array, useful for developers working with sprite animations in code.

Q & A

  • What is the first step to save a sprite in Piskel?

    -To save a sprite in Piskel, click on the disk icon.

  • How can you name and describe your sprite in Piskel?

    -You can name your sprite under the title section and provide a description for it.

  • What are the benefits of having a Piskel account for saving sprites?

    -Having a Piskel account allows you to upload all of your sprites to a gallery and decide if you want them to be available to the public or not.

  • How can you make your sprite private in the Piskel gallery?

    -You can make your sprite private by checking the 'private' option in the gallery settings.

  • What is the 'save offline in browser' option in Piskel?

    -The 'save offline in browser' option allows you to save the sprite as a Piskel file in your browser's local data.

  • How can you load a previously saved Piskel file?

    -You can load a previously saved Piskel file under the import tab.

  • What is the 'Scale' option used for in Piskel's export options?

    -The 'Scale' option is used to increase the size of the sprite or animation up to 32 times its original scale.

  • What happens to the opacity when exporting a sprite as a GIF in Piskel?

    -When exporting a sprite as a GIF, the opacity is not preserved, and a white background is applied.

  • How can you share a sprite as an animated GIF with a public URL?

    -You can upload the animated GIF to a public URL and share the link with others.

  • What is a png spritesheet and how can you export it from Piskel?

    -A png spritesheet is a collection of images arranged in a grid. In Piskel, you can export it by setting the scale and columns/rows to organize the frames as desired.

  • How can you export each frame of an animation as a separate PNG file in Piskel?

    -You can download a zip file containing PNG files for each frame of the animation, with the option to give each frame a prefix name and split each layer into its own PNG file.

  • What is the purpose of exporting frames as a C file in Piskel?

    -Exporting frames as a C file allows you to render the frames as an array, which can be useful for certain programming and development purposes.

Outlines

00:00

🖌️ Piskel Sprite Saving and Exporting Options

This paragraph introduces the various methods for saving and exporting a completed sprite in Piskel. It begins with the basic save process, including naming and describing the sprite, and the additional options available to logged-in users, such as saving to a private or public gallery. The paragraph also covers the offline browser save feature and the direct save to hard drive option. The export options are then explored, starting with the 'Scale' feature that allows resizing of the sprite. It then details the four main export formats: animated GIF (noting the loss of opacity), PNG spritesheet with customizable columns and rows, a ZIP file containing individual PNG frames, and a C file with frames rendered as an array. The paragraph concludes with a call to action for viewers to support the creator on Patreon and to engage with the content by commenting, liking, sharing, and subscribing for more tutorials.

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 video, the term refers to the technique used to create the animated potion sprite, which is a small, detailed image that is part of a larger scene or animation.

💡Piskel

Piskel is a free online editor for creating pixel art and animations. It provides tools for drawing, animating, and exporting pixel art in various formats. The video tutorial specifically uses Piskel to demonstrate how to create and save an animated sprite, showcasing its features and capabilities.

💡Saving

In the context of digital art and animation, saving refers to the process of preserving the work in a file format that can be reopened and edited later. The script mentions saving a sprite by clicking the disk icon and naming it, which is a fundamental step in the workflow of creating pixel art in Piskel.

💡Exporting

Exporting in digital art and animation is the process of converting the work into a different file format that can be used in other applications or shared online. The video discusses various export options available in Piskel, such as GIF, PNG spritesheet, and C file, each serving different purposes for the created animation.

💡Sprite

A sprite in digital art and animation is a two-dimensional image or animation that is integrated into a larger scene, often used in video games. The script describes saving and exporting a 'potion sprite,' which is a specific type of sprite created during the tutorial.

💡Animation

Animation refers to the process of creating the illusion of motion in a sequence of images. In the video, the potion sprite is animated, meaning it has multiple frames that, when played in sequence, give the appearance of movement or action.

💡GIF

GIF stands for Graphics Interchange Format, which is a bitmap image format that supports both static images and simple animations. The script explains that the potion sprite can be exported as an animated GIF, although it notes that the opacity is not preserved in this format.

💡PNG

PNG stands for Portable Network Graphics, a raster-graphic file format that is used for lossless data compression. The video mentions exporting the sprite as a PNG spritesheet, which is a collection of images arranged into a single image file, often used in video games for animations.

💡Spritesheet

A spritesheet is a larger image file that contains several smaller images or sprites arranged in a grid. These sprites can be extracted and used individually in a game or animation. The script explains how to export the potion sprite as a PNG spritesheet with different configurations of columns and rows.

💡C File

In the context of the video, a C file refers to a file containing C programming language code, which can be used to render the frames of an animation as an array. This is useful for developers who need to integrate the animation into a software project written in C.

💡Opacity

Opacity in digital art refers to the degree to which an object or image allows light to pass through it, which can also be thought of as the transparency level. The script points out that when exporting as a GIF, the opacity of the sprite is not preserved, resulting in a white background being applied.

Highlights

Introduction to saving and exporting options in Piskel.

How to save a sprite by clicking on the disk icon.

Naming and describing your sprite for better organization.

Benefits of having a Piskel account for additional saving options.

Option to make your sprite public or private in the gallery.

Saving the sprite to your personal gallery with a single click.

Viewing saved sprites in the 'My Gallery' section.

Saving a sprite offline in your browser's local data.

Exporting a sprite as a piskel file to your hard drive.

Importing saved files using the import tab.

Scaling up the size of your sprite or animation with the Scale option.

Exporting options available for different uses and formats.

Exporting as a GIF with considerations for opacity.

Sharing your sprite via a public URL for animated GIFs.

Exporting as a PNG spritesheet with customizable columns and rows.

Downloading a ZIP file containing individual PNG frames.

Exporting as a C file with frames rendered as an array.

Encouragement to support the creator on Patreon and subscribe for more tutorials.

Casual Browsing

How to Create Pixel Art and Animations with Piskel Tutorial 2 - Getting Started

2024-07-12 03:10:00

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

2024-07-12 05:10:00

Piskel, a free and open-source pixel art designer - App pick

2024-07-12 04:20:00

Creating pixel art animations with AI

2024-09-27 13:01:00

Piskel | Getting Started Pixel Art Drawing

2024-07-12 04:00:00