Tutorial and User Guide for Pixel Art tool Pyxel Edit

in #pixelart6 years ago



I’ve recently been inspired by @jonny-clearwater’s Pixel Art weekly competitions. I’ve always loved Pixel Art, but never really had a reason to spend time on it. Jonny has very generously provided that reason for something like 50 weeks now.

There are some amazing Pixel Artists on Steem, here is some inspiring work I’ve enjoyed:

@shoumi@drawsgood@eqko
DQmYCNYvGNtsFD71Tcj4ro3PrtqiruGqpZxR235YoRGAWRN.pngDQmfUUkfKgAu6y5miPNJYDsGFPdoa6rXSoyCaJabHoSZCBz.gifU5duBWeTNrsLrXVg8ecBVFv79vAU7RP.gif
SourceSourceSource

The reason for this post is that I’ve started to enter Jonny’s competition myself, and it’s hard, especially starting out fresh and going up against some incredible talent in this space. I’ve learnt a lot just in the last week, and I’ve started using a program called Pyxel Edit over Adobe Photoshop. Pyxel Edit is significantly cheaper than Photoshop ($9USD over $43.99AUD ($33.28USD) monthly for all of Adobe) and it’s definitely been designed in a way to streamline the Pixel Art workflow and process…

Those are the Pros… the Cons are pretty frustrating… there is no User Guide or Documentation for Pyxel Edit, and it looks like the Developer has stopped working on the product, which is a shame because there are a couple of little things that could make this program amazing.

There are video tutorials for Pxyel Edit available, which are great when you first start out, but super annoying when you’ve got a simple question and have to rewatch multiple videos to find your answer.

Since there is no User Guide for Pxyel Edit, and since Steemit ranks really high on Google, I thought I’d take it upon myself to create one for all the future Pixel Artists out there.

Welcome to the…


Pyxel Edit User Guide


This User Guide will concentrate on the PC version of the program, Mac commands will not be covered.

How to get Pyxel Edit

  1. Head to the website http://pyxeledit.com/
    Pyxel Edit 1.png

  2. Click on the Get menu
    Pyxel Edit 2.png

  3. Fill out the payment details
    Pyxel Edit 3.png

You can download Pyxel Edit and then you’ll get an e-mail from Humble Bundle with the product key. Click on the link on the e-mail and you should be good to go.

Features of the Pyxel Edit website


The Learn tab does have some information on it:
Pyxel Edit 4.png

The Forum actually seems to be fairly up to date. There have been a number of posts and comments in the last couple of days:
Pyxel Edit 5.png

Pyxel Edit 6.png




Pyxel Edit Initial Screen

  1. Click on the Pyxel Edit icon on your desktop or Start Menu:

  2. This is the full screen before you start a document:
    Pyxel Edit 7.png

  3. Full screen with labels:
    Pyxel Edit 8.png

Breakdown of Pyxel Edit Screen


- Tools
Pyxel Edit 50.png

Primary Colour : Shortcut key is C>/b>. The colour in this primary colour box is the colour that all your tools will use. If you draw with the pencil, or use the bucket tool, this is the colour that you’ll get.

Secondary Colour : the second colour is used for only some of the tools, for example, the colour replacer tool. The colour replacer tool will replace the colour in the secondary colour box with the colour in the primary colour box. It’s also useful to keep a second colour you’re using to easily flick back and forth between them.

Swap : Shortcut key is X. This tool swaps the primary and second colours… so the secondary colour becomes the primary colour when this tool is used.

Default colours : This tool will reset your primary and secondary colours back to Black and White.

Selection Tool : Shortcut key is S. Hold Shift to add to your selection. Hold Alt to remove bits from your selection. If you hold Crtl and drag you can transform the selection or Alt drag to transform a copy of the selection. You can drag the selection to move it or double click to select the entire tile.

Magic Wand : Shortcut key is W. The wand is used to select odd shaped sections… you click on the bit you want to select with the magic wand and it should select exactly that shape.

Pyxel Edit 51.png

Pen/Pencil : Shortcut key is D. The Pen is what you draw with. You can use it to draw freehand, or you can hold Shift to make straight lines. You can also hold Shift and Ctrl to make isometric lines. Holding Ctrl plus Alt and drag to change the brush size. The primary colour is the colour used by the Pen tool.

Eraser : Shortcut key is E. This is the tool to delete/erase pixels. Hold the Shift to erase in straight lines. Hold Ctrl plus Alt and drag to change the eraser brush size. It’s used similarly to the Pen tool, but it removes pixels instead of drawing them.

Bucket : Shortcut key is F. This tool fills an entire area with the primary colour. The area will need an unbroken border or you might fill the entire image with the primary colour. Holding Ctrl will fill that area with transparency instead of a colour, and holding Shift will fill outside the tile bounds.. ie, multiple tiles.

Color Replacer : Shortcut key is K. This tool is similar to the Pen tool, except it doesn’t draw any new pixels. Instead it takes pixels that are the same as the secondary colour and replaces that colour with the primary colour. Very useful tool.

Color Picker/Sampler : Shortcut key is Alt. This tool is used so much when creating pixel art… especially when the artist is trying to get all the pixels exactly right. Using the shortcut key saves a lot of time. Click the Color Picker on any colour in your work and that colour will then become the primary colour.

Pyxel Edit 52.png

Tile Placer tool : Shortcut key is A. This tool is very useful during animating. Right-click with this tool to copy a tile.. and then you’ll automatically paste into any other tile that you normally click. Ctrl-click to make a new tile from the canvas. Shift-click to erase a tile from the canvas. This tool also has more advanced uses. Ctrl-right click to unmap a tile in the canvas and if you Shift-right click you can place a clone of the current tile. Without these functions, animation becomes time consuming as you try to copy and paste your pixels in the exact right position. This tool does it automatically.

Offset tool : Shortcut key is O. This tool offsets the contents within a tile. This means you can move your pixels around in one tile without affecting any of the others… and without needing to select your tile by double-clicking or by using the selection tool.

Animation Frame Range Tool. This tool sets the start and the end frames of animations. You might have 12 tiles in your document, but the top 4 are an idling animation, the 2nd four are a walking animation and the last 4 are a running animation. You’d use this tool to exactly set which tile belonged to which animation.
Left-click to set the start frame. Right click to set the end frame.
Click and drag to set the full range.

Animation Frame Manager Tool. This tool helps you to copy, paste, insert or delete animation frames. This includes the content of all layers. Left-click a frame to replace it. Right-click a frame to pick it. Left-click an edge to insert the frame and right-click an edge to cut that frame out.

Pan Tool : Shortcut key is Space. This saves so much time, as you can quickly look around your work by holding the spacebar while you zip around looking at the various sections and tiles of your document.

Zoom Tool : Shortcut key is Z. Zoom in to see your work in greater detail. You can also use the scroll wheel on your mouse if you have one. Another huge time-saver.

Zoom to Fit Image : Shortcut key is 0. That shortcut key is a zero rather than the letter O. This key quickly zooms out to the most pleasing full fit of your image and centers it.

Maximise / center frame : This tool is useful if you are working on multiple documents at the same time… it basically opens your different documents into different windows/panels instead of your documents being full-sized on different tabs.

Undo : Shortcut key is Ctrl + Z. Undoes the last action. Unlike Photoshop, this program doesn’t have a history panel, so this tool becomes essential.

Redo : Shortcut key is Ctrl + y. Redoes the last action that was undone.

And the other panels aside from Tools... in case you forgot:
Pyxel Edit 8.png

- Animations
This section allows you to add animations to your art. You can add multiple animations. You might have an animation for walking, but a different animation for running… this is very helpful since you can use many of the same layers with both animations.
You can also control the animation speed, and which tiles are included in which animations.

- Frame Edit
Shows the current frame… and you can draw directly in this panel. This helps with trying to line up sprites in your animation. Especially since in the main window the tiles are side-by-side so it’s often not easy to tell if you’re working on the exact same pixel in each tile.

- Playback
This bit is super useful, it’s a pulled back version of your document so you can instantly see how the animation is moving… and lets you find where pixels aren’t quite working. It also only shows you your image in a single tile view… which is really helpful when you’ve got 24 tiles going and the screen looks confusing.

- Layers
Think of layers like panes of glass. You can draw an image on one pane, and a different image on another pane, but when you put one of those panes directly behind the other, it kind of looks like one image. Layers are particularly useful in animation of pixel art. You might put each arm, each leg and the head on a separate layer so that as you animate you can move them individually.

- Tiles
Tiles can be the animation frames, or they can be components of a larger image. This panel allows you to add, delete and edit Tiles as required.

- Palette
This is where you add in colours that you reuse often. You have access to all the possible colours in the Tools menu, but this palette lets you save your favourite colours.

- Preview
Gives you a little window into how the full image looks. You spent a lot of time zooming in and out and so this preview window can save you a lot of time.




Starting a new Pxyel Edit Document


Pxyel Edit provides the user with the power to animate their pixel art easily. This is done by providing the user with tiles… think of each tile as the cell in a roll of film. A tile is typical displayed for 0.1 of a second before the next one is shown. Your animation will be displayed on each tile, with only the moving parts being different.

  1. After opening Pyxel Edit, click on the File Menu and select New…
    Pyxel Edit 9.png

  2. You’ll have the choice between an Animation Document or an Image Document. If you want to create an animation, click on the Tiled Document or animation tab, or if you want to just create a non-moving pixel art piece, select the Single Image Document tab.

  • Tiled document or animation

Pyxel Edit 10.png

Select how many tiles you want across, and how many tiles down. These numbers multiplied will be how many tiles/frames you have in your animation.
Choose the width and height of each tile (which will also be multiplied by the total number of tiles to make the full image). When you export your animation into a GIF file, it will be the height and width of a single tile.

  • Single Image Document
    Type in the height and width of your image. If you’ve copied an image from somewhere else, you can just click on the Use clipboard size button.
    Pyxel Edit 11.png

The choices here aren’t set in stone, you can adjust the size of the image, the number of tiles, the size of the tiles and you can choose to animate a single image easily in Pyxel Edit.

Regardless of which type of document you’ve chosen, click on the Create button.
Here you have a fresh new document.
Pyxel Edit 12.png

It’s often intimidating drawing straight onto a blank white sheet, so add in a background as a background layer.

  1. Click on the + symbol in the Layers panel
    Pyxel Edit 13.png

  2. You can’t double-click on the layer to name it, so click on the Cog button to get to the Layer Settings.
    Pyxel Edit 14.png

  3. Change the name from Layer 1 to background.
    Pyxel Edit 15.png

  4. Pick a fairly non-distracting colour from the palette.
    Pyxel Edit 16.png

  5. Click the bucket from the toolbar
    Pyxel Edit 17.png

  6. Click the bucket on your canvas and it’ll change to your non-descript colour.
    Pyxel Edit 18.png

Now you’re ready to start drawing your pixel art.




Drawing pixel art

  1. Create a new layer for your art work by clicking on the + symbol in the Layers Panel.
    Pyxel Edit 19.png

  2. Give the layer a new name and click OK.
    Pyxel Edit 20.png

  3. Select Black from the Palette.
    Pyxel Edit 21.png

  4. Select the Pen tool from the Toolbar.
    Pyxel Edit 22.png

  5. Draw the outline/shape of your character.
    Pyxel Edit 23.png

  6. The Rectangle tool can save a lot of time when drawing blocks. Select the Rectangle tool from the Toolbar.
    Pyxel Edit 24.png

  7. Click the Filled checkbox if you want a solid block.
    Pyxel Edit 25.png

  8. Drag the filled rectangle from the top corner that you want it to the bottom corner.
    Pyxel Edit 26.png

  9. Click back on the pen tool and draw in the arms and legs.
    Pyxel Edit 27.png

  10. One you’re happy with the basic shape, it’s time to colour your character. Click on the Color Replacer tool in the Toolbar.
    Pyxel Edit 28.png

  11. The Color Replacer tool works but replacing the bottom colour of these two colours… so with black on white, it wouldn’t work because there is no white in our image at the moment. Instead, click the Swap button to swap the black and white so white is on top.
    Pyxel Edit 29.png

  12. Click on the White square on top and pick a colour that you’d like your character to be.
    Pyxel Edit 30.png

  13. Once you’ve picked a colour, click OK.
    Pyxel Edit 31.png

  14. Run the Color Replacer over your character.
    Pyxel Edit 32.png

  15. Continually pick colours and fill in your character until you’re happy with it. One great thing about Pyxel Edit is that it suggests new shades for you. So if you want a shade lighter to fill in, say, the stomach area… Click on the Pen Tool, then click on your Primary Colour.
    Pyxel Edit 33.png

  16. Using these suggestions, you can add highlights and shadows to your character, as well as related lighter and darker colours. Finish off your character by adding different colours for the details. Highlights and shading can give your character some depth.
    Pyxel Edit 35.png




Saving your work


Pyxel Edit autosaves a lot… but you’ll want to save your work with a descriptive file name.

  1. Click on the File menu.
  2. Click Save As.
  3. Choose the folder you want to keep it in. Pyxel Edit saves files with a “.pyxel” extension… which can’t really be used by any other program… so when you’re finished with your work you’ll need to save as a normal image file or animation… like JPEG, PNG or GIF.




Exporting to a JPG file


Once you’ve finished your pixel art, you’ll likely want to share it with the world.
You won’t be able to show anyone your kitten.pyxel file unless they have Pxyel Edit themselves, but you can save as a JPEG or PNG file that any browser or File Explorer can view.

  1. Click on the File menu.
  2. Click on Export.
    Pyxel Edit 36.png

You’ll get the Export options box.
Pyxel Edit 37.png

If you leave everything as the default, you’ll save as a PNG file in the same scale you created the image.
Using the File Format drop down box, you can choose between PNG, JPG, GIF and BMP file types.

  1. Click the Save button if you’re happy with these settings.

This is the size of the image as is:



However, in the Export Options box, you can adjust the Pixel scale, this is an example of the pixel art with a Pixel Scale of 4:



And for comparison, Pixel Scale 10:






Animating your pixel art


In this example, we currently have a single image of a little kitten creature.
Pyxel Edit 38.png

We can easily create a simple animation.

  1. Go to the Document menu and select Resize Canvas…
    Pyxel Edit 39.png

  2. You can keep the Width and the Height the same, here you want to change the number of tiles in the document. The number of tiles will be the Tiles Wide multiplied by the Tiles Height. For this example we only want 4 tiles for our animation. Type in the number ‘4’ in the Tiles wide box and click on Resize.
    Pyxel Edit 40.png

  3. Zoom out by scrolling the mouse wheel so you can see all 4 tiles. You can also hold down the Space Bar to drag your tiles to get them centered.
    Pyxel Edit 41.png

  4. Click on the Animation Frame Management Tool… and then right-click your mouse button on your first tile… this will copy all the layers, and then you can easily click on the other frames to paste everything (all visible layers) to the other frames.
    Pyxel Edit 42.png

  5. If you had put different limbs on separate layers, and didn’t want to copy the full image to every frame, then you would change the visibility of those layers and only copy the layers that would appear in every frame. Our example is very simple, so it’s fine to copy everything as is.
    Pyxel Edit 43.png

  6. In the Animations panel, click on the + button to create a new animation.
    Pyxel Edit 44.png

  7. Change the name to something descriptive. In this example we’ve used ‘Waving’.
    We’re leaving the other fields with the default values. The Frame Time multiplier sets how fast you’d like the animation to cycle through the frames. The Base Tile is 0, which is the first tile in our set. If you wanted to start your animation on tile 2, you’d change this to 1. Length is 4 tiles… meaning there will be 4 frames in our animation.
    Click OK
    Pyxel Edit 45.png

  8. Change your character slightly in each frame to suggest movement. Moves that are too big will look jerky when animated.
    In this example, we’ve moved the character’s left arm up and down in the last 3 frames and made the eyes smaller in the last 2 frames.
    Pyxel Edit 46.png

  9. Click the Play button on the preview screen to see your animation in action.
    Pyxel Edit 47.png

  10. Make sure you save your work… animation can be extremely time-consuming.




Exporting to a GIF file


In order to share your new animation with the world, it needs to be exported to a GIF file. GIF files can be read by most browsers and shared through most social media platforms.

  1. Click on Export and select Export Animation(s)…
    Pyxel Edit 48.png

  2. Select the Animated GIF tab. Choose the Pixel Scale that you want… in this example we’ll choose a scale of 4.
    Pyxel Edit 49.png
    Click Save

  3. Here is our animated GIF.






I hope you enjoyed this tutorial and user guide. I'm be no means an expert, but please feel free to ask any questions in the comments below and I'll do my best to answer them.

With the exception of the example art in the table at the start, all artwork in this post is my own... all screen shots are from the Pyxel Edit tool taken by myself with my licenced copy. This article is exclusive to Steem and is intended to assist all beginner users of Pyxel Edit and anyone interested in creating their own Pixel Art.

Sort:  

You have been scouted by @promo-mentors.

We are a community of new and veteran Steemians and we are always on the lookout for promising authors.

I would like to invite you to our discord group https://discord.gg/vDPAFqb.

When you are there send me a message if you get lost! (My Discord name is the same as here on Steemit)


Good work providing this tutorial. I look forward to seeing your entries for @jonny-clearwaters pixel art weekly contest now!

Coin Marketplace

STEEM 0.35
TRX 0.12
JST 0.040
BTC 70557.88
ETH 3560.83
USDT 1.00
SBD 4.75