I create the graphics in a procreate alpha png, then I use Pastebot, since that is the only tool I know, which preserves png transparency when you crop an image… Then I copy the image and paste it into my Dropbox…
Nice addition @Simeon, well done!!! Oh, is there a way to create these retina images, if I upload the images through my Dropbox on my Mac? It would be awesome, if I could create these non-retina images in codea…
I mostly use PS Touch (for more image-y things) and TouchDraw (for vectory things). When I need to do pixel art I mostly fall back to the desktop. Still waiting for a good pixel editor on iOS…
I was using PS Touch for sprites, but I’ve found a better solution (for me at least). Inkpad is a vector based art app for the iPad and I’ve been using it to create sprites. The advantages of this app over PS:
Can zoom almost infinitely (instead of 400% like PS)
Create your art on layers and adjust colors in each layer easily (this works in PS too, but I find Inkpad is a bit easier to manipulate)
Can add shadows easily and add/remove outline with a click and for an entire layer.
You can pick up shapes and move them around without redrawing the rest of the image.
You can make pixellated sprites (see tutorial below) and or vector based images.
Here’s how you can use Inkpad to make pixel/sprite art:
1. Create a new image
2. Choose "Custom Size" and set to desired sprite size.
3. Click "Create"
4. Once the canvas is created, select settings (the gear icon)
5. Change "Snap to Grid" to ON
6. Change "Grid" to ON
7. Set Grid Spacing. You might use a grid of 1 to create a detailed sprite or a grid of 2 or 4 to make something blockier like the retro art style of Superbros.
8. Use the rectangle tool to draw your areas. Use the layers to separate different parts of the drawing to allow for quick picking and editing (Ex. maybe the whole body is in one layer, shirt in another, pants in a further layer. This allows you to use the "select all in layer" and change the color.
9. When you are done, click the action menu (envelope with arrow...the last icon on the top right) and choose "Copy Drawing"
10. Now go into a Codea project, type sprite() and click on the sprite picker.
11. Choose "Paste Image From Pasteboard" and then give it a name. Your image is ready to use in any project.
I use a package on the PC, a vector based package, called Xara Photo and Graphic Designer 7 (previously known as Xara Studio or Xara Extreme). I purchased this for use in a web design course as I saw it as crucial to any website designers arsenal; of tools.
I don’t use @codexier 's approach - I simply build up the image in vector graphics and export the sprite as a .png, scaling as necessary. The only issue is, sometimes, if you scale down the image you do get some loss in definition - but that’s not usually a problem.
One advantage of the package is that it is supplied with a library of vector art - some of which are superb.
post-processed in unix with the net-pbm utilities.