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

TodaysTuts
25 Nov 201604:23

TLDRThis tutorial guides viewers through saving and exporting pixel art and animations in Piskel. It covers saving sprites with or without an account, adjusting privacy settings, and uploading to a gallery. The export options include scaling, GIF, PNG spritesheet with customizable columns and rows, individual PNG frames, and a C file with frames as an array. The video encourages viewers to support the creator and subscribe for more tutorials.

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 sprites to a personal online gallery.
  • 🔒 You can choose to keep your sprites private or public in your Piskel gallery.
  • 💾 Piskel allows saving sprites offline in your browser's local data or as a file on your hard drive.
  • 🔄 The 'Scale' feature enables resizing of sprites or animations up to 32 times the original size.
  • 🎨 Export options include GIF, PNG spritesheet, and more, with various settings for layout and scale.
  • 🚫 Note that exporting as a GIF does not preserve opacity, applying a white background instead.
  • 🔗 Piskel provides a URL for sharing animated GIFs of your sprites.
  • 📚 PNG spritesheets can be configured with different columns and rows to suit your needs.
  • 🗂️ You can download a ZIP file containing individual PNG files for each frame of the animation.
  • 💻 For developers, Piskel offers exporting frames as a C file with rendered arrays.
  • 📢 The tutorial encourages supporting the creator on Patreon and subscribing for more content.

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 provides additional options compared to not having an account.

  • How can you make your sprite available to the public through your Piskel gallery?

    -You can make your sprite public by checking the box that allows your sprite to be available through your gallery.

  • What does the 'Save offline in browser' option do 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 maximum scale you can apply to a sprite in Piskel?

    -You can scale the sprite up to 32 times its original scale in Piskel.

  • What format does Piskel use to export an animated sprite, and what is the limitation of this format?

    -Piskel uses the Gif format to export an animated sprite, but the opacity is not preserved, and a white background is applied.

  • How can you download a sprite as a PNG spritesheet in Piskel?

    -You can download a sprite as a PNG spritesheet by setting the scale and columns to your desired configuration in the export options.

  • What is the purpose of exporting a sprite as a zip file containing PNG files for each frame?

    -Exporting a sprite as a zip file containing PNG files for each frame allows you to have individual control over each frame of the animation, which can be useful for further editing or integration into different platforms.

  • What is the C file export option in Piskel, and how is it used?

    -The C file export option in Piskel allows you to export the frames as an array in a C file format, which can be useful for developers who want to integrate the sprite into their C programming projects.

Outlines

00:00

🖌️ Piskel Sprite Saving and Exporting Options

This paragraph introduces the various methods available for saving and exporting sprites in Piskel. It explains how to save a sprite by clicking the disk icon and naming it, as well as adding a description. The paragraph also discusses the benefits of having a Piskel account, such as uploading sprites to a personal gallery and setting the visibility of the sprites to public or private. It further explains how to save the sprite to the gallery, offline in the browser, and as a piskel file to the hard drive. Additionally, the paragraph outlines the export options, including scaling the sprite size, and exporting as a GIF, PNG spritesheet, individual PNG frames in a ZIP file, or as a C file with an array of frames.

Mindmap

Keywords

💡Pixel Art

Pixel art is a form of digital art where images are created on the pixel level. Each pixel is a single point in a grid of pixels and can be individually manipulated to form an image. In the context of the video, pixel art is used to create the animated potion sprite, which is the main subject of the tutorial.

💡Piskel

Piskel is a web-based application designed for creating pixel art and animations. It provides tools for editing and animating individual frames and layers. In the video, Piskel is the software used to demonstrate the process of saving and exporting sprites and animations.

💡Saving

Saving in the context of the video refers to the process of preserving the work done in Piskel. It includes naming the sprite, providing a description, and choosing whether to make it public or private. The script mentions saving to a Piskel account gallery or saving offline in the browser or as a file to the hard drive.

💡Exporting

Exporting in the video script pertains to the various ways to get the finished sprite or animation out of Piskel for use elsewhere. Options include scaling the size, saving as a GIF, PNG spritesheet, or a ZIP file containing individual frames, as well as exporting as a C file.

💡Sprite

A sprite, in the context of the video, is a two-dimensional graphic that is part of a larger scene or animation. The video focuses on creating and saving an animated sprite of a potion, which is a small, often animated graphic used in video games.

💡Animation

Animation in the script refers to a sequence of images displayed in order to create the illusion of movement. The potion sprite is animated, meaning it has multiple frames that, when played in sequence, give the appearance of the potion moving or acting.

💡Scale

The term 'scale' in the video is used to describe the process of resizing the sprite or animation. The script mentions that the potion, originally 16x16 pixels, can be scaled up to 32x32 or even up to 32 times its original size using the slider in Piskel.

💡GIF

GIF, as mentioned in the script, is a graphic file format that supports animations. The video explains that the sprite can be exported as an animated GIF, but notes that the opacity is not preserved, resulting in a white background being applied.

💡PNG Spritesheet

A PNG spritesheet is a collection of images arranged in a grid, often used in game development. The video script explains that the potion animation can be exported as a PNG spritesheet with various column and row configurations to suit different needs.

💡C File

In the context of the video, a C file refers to a text file containing C programming language code. The script mentions exporting the frames as an array in a C file, which would be useful for developers who want to integrate the animation into a software project written in C.

💡Patreon

Patreon is a platform where creators can receive financial support from their audience through monthly subscriptions. The script ends with a call to action for viewers to support the creator on Patreon if they found the content helpful.

Highlights

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

Explanation of how to save a sprite by clicking the disk icon and naming it.

Adding a description to the sprite for better organization.

Advantages of having a Piskel account for saving and managing sprites.

Option to make sprites public or private through the Piskel gallery.

How to save the sprite to the Piskel gallery for easy access.

Using the 'Save offline in browser' feature to store sprites locally.

Saving the sprite as a piskel file to the hard drive for later use.

Importing saved piskel files using the import tab.

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

Exporting the sprite as a GIF, with a note on opacity preservation.

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

Exporting the sprite as a PNG spritesheet with customizable columns and rows.

Creating a sprite sheet with horizontal rows of frames by adjusting columns and rows.

Downloading a ZIP file containing individual PNG files for each frame.

Customizing the prefix name for each frame in the ZIP file.

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.