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

TodaysTuts
25 Nov 201604:23

TLDRThis tutorial guides users through saving and exporting pixel art and animations in Piskel. It explains how to save sprites with various privacy settings and offers multiple export options, including scaling, GIF, PNG spritesheets, and ZIP files. The video also covers exporting as a C file, providing a comprehensive guide for creators looking to share their work.

Takeaways

  • 🖌️ To save a sprite in Piskel, click the disk icon and provide a title and description.
  • 🔒 Logging into a Piskel account offers additional options like saving to a private gallery.
  • 🎨 You can choose to make your sprite public or keep it private through the gallery settings.
  • 💾 Save your sprite offline in your browser's local data or as a piskel file to your hard drive.
  • 📂 The import tab allows you to load previously saved piskel files.
  • 🔍 The 'Scale' feature lets you increase the size of your sprite or animation up to 32 times the original scale.
  • 🖼️ Export options include downloading as a GIF, though the opacity will not be preserved.
  • 🔄 For sharing, you can upload an animated GIF to a public URL provided by Piskel.
  • 📑 Export as a PNG spritesheet with customizable columns and rows to organize the animation frames.
  • 🗂️ Download a ZIP file containing individual PNG files for each animation frame with optional prefix names.
  • 📝 For developers, you can export the frames as a C file with the frames rendered as an array.
  • 🌟 Encouragement to support the creator on Patreon, engage with the content, and subscribe for more tutorials.

Q & A

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

    -The first step to save a sprite in Piskel is to 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 when saving sprites?

    -Having a Piskel account allows you to upload all of your sprites to a gallery and gives you additional options compared to not having an account.

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

    -You can make your sprite private or public by checking or unchecking the 'public' checkbox when saving the sprite to your gallery.

  • 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 saved Piskel file?

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

  • What is the 'Scale' option in the export settings of Piskel?

    -The 'Scale' option allows you 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 are the different ways to export a sprite as a PNG in Piskel?

    -You can export a sprite as a PNG spritesheet with various column and row configurations, as individual PNG files in a zip file, or with each layer in its own PNG file.

  • How can you export the sprite frames as an array in a C file?

    -Under the 'Others' export option, you can export the frames as an array in a C file.

Outlines

00:00

🖌️ Saving and Exporting Sprites in Piskel

This paragraph introduces the process of saving and exporting sprites created with Piskel. It begins with the option to save a sprite by clicking the disk icon and naming it. The paragraph explains the benefits of having a Piskel account, such as uploading sprites to a personal gallery and setting the visibility of the sprites. It also covers the ability to save the sprite to the gallery, save offline in the browser, and save it as a Piskel file to the hard drive. The paragraph concludes by briefly mentioning the export options available in Piskel.

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 stylistic look. In the video, pixel art is the main subject, as the creator demonstrates how to make an animated potion using Piskel, a pixel art tool.

💡Piskel

Piskel is a free online editor for creating pixel art and animations. It provides a user-friendly interface for artists to design sprites and animations frame by frame. The video tutorial specifically uses Piskel to guide viewers through the process of creating and saving an animated sprite.

💡Sprite

A sprite, in the context of video games and animations, refers to a two-dimensional image or animation that is integrated into a larger scene. The video script describes the process of creating a 'potion' sprite and the various ways it can be saved and exported.

💡Exporting

Exporting in digital art and animation is the process of saving or converting a project into a different format that can be used in other applications or shared. The video explains different export options available in Piskel, such as GIF, PNG, and C file formats.

💡Saving

Saving in the context of the video refers to preserving the work done in Piskel, either locally on the user's computer or in the user's Piskel gallery if they have an account. The script details the steps to save a sprite and the options available for doing so.

💡Gallery

In Piskel, a gallery is a feature that allows users to upload and organize their sprites and animations. The video mentions the option to save sprites to a personal gallery, which can be set to public or private, depending on the user's preference.

💡Opacity

Opacity refers to the degree to which an object or image allows light to pass through it, which in digital terms, is the transparency level. The script mentions that when exporting as a GIF, the opacity of the sprite is not preserved, resulting in a white background.

💡GIF

GIF stands for Graphics Interchange Format, which is a bitmap image format that supports both static images and simple animations. The video explains that Piskel allows users to export their animations as GIFs, although with a limitation on preserving opacity.

💡PNG

PNG stands for Portable Network Graphics, a raster-graphic file format that supports lossless data compression and is widely used for images on the internet. The video describes exporting a sprite as a PNG spritesheet, which can be configured in various ways to organize the animation frames.

💡Spritesheet

A spritesheet is a larger image containing several smaller images in a grid-like pattern, where each small image represents a frame of an animation. The video script discusses how to export a spritesheet in Piskel, with options to adjust the number of columns and rows.

💡C File

A C file, in the context of the video, refers to a file containing C programming language code. The video mentions the option to export the frames of an animation as an array in a C file, which can be useful for developers integrating the animation into software or games.

Highlights

Introduction to saving and exporting options in Piskel after completing an animated sprite.

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

Adding a description to your sprite for better organization.

Advantages of having a Piskel account for additional saving options.

Privacy settings for your sprites through the public checkbox.

Saving the sprite to your Piskel gallery with one click.

Viewing saved sprites in the My Gallery section.

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

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

Loading saved files using the import tab.

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

Exporting options available for different uses, such as GIF, PNG, and C file formats.

Exporting the sprite as an animated GIF with limitations on opacity.

Creating a public URL for sharing the sprite as an animated GIF.

Exporting as a PNG spritesheet with customizable columns and rows.

Downloading a ZIP file containing individual PNG frames of the animation.

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

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