Custom export options?

Talk about Pixelmator Pro, share tips & tricks, tutorials, and other resources.
User avatar

2019-06-20 12:06:15

I watched the Elaine Giles video about the Pixelmator Pro and decided to check it out.. so I download the 30-day trail. Everything look and works great but when I tried to export my document... I only have size/scale options for the 'Export for Web' which only have x0.5, x1, x2, x3

I want to create assets for Xcode. I start with document with size 300x300 and want to export 100x100, 200x200, 300x300 (my 3x version of 100). How can I do that? The x0.5 scale will make my sprite with size 150x150... there is no why to add 0.25 scale option..

In the Pixelmator version I was using the Image size option with holding the alt key when clicking OK then exporting.. which was horrible workflow but I was able to change document size?

I'm missing something or the "Pro" version is not really Pro?
User avatar

2019-06-20 12:21:20

Image

A very basic pixel art... the image at @3x export is blurry... how to keep it sharp?
User avatar

2019-06-20 15:33:11

The algorithms used in scaling are something that seem to be in very active development at Pixelmator HQ so I'll prefix this by saying that my comments refer to Pixelmator Pro 1.3.4. What I say below my not apply to later versions.
Pixelmator Pro has recently gained the ability for the user to choose algorithms for scaling. These are available when using Tools > Image Size and the Transform part of the Arrange tool. The Nearest Neighbor algorithm will preserve pixel boundaries so is appropriate for pixel art. Unfortunately (as of 1.3.4), the choice of algorithm has yet made it to the Export for Web part of the app so that will probably use Bilinear. Bilinear works really well on landscape photos of grazing sheep but is pretty rubbish for pixel art. So... I'd recommend resizing prior to export: either the whole image by using Tools > Image Size... or a layer by using the Transform part of the Arrange tool where you can select the Nearest Neighbor algorithm.
Hope this helps.
- Stef.
User avatar

2019-06-21 06:29:47

I just tried the Image Size.. option but it seems that it doesn't work.

1) Created a document 40x40/72 res
2) Draw a square with 1 px brush
3) Change the image size to 20x20px
4) The resulted image it's not a square... the red line is what is missing after resizing

Image
Image
Image

I'm doing something wrong?
User avatar

2019-06-21 07:33:47

I've got to apologise. I was only responding to your blurry 3x export post. Let me address your missing pixels for now. I'll go back and address your original post afterwards.
Nearest neighbour is a very simple scaling algorithm and very suitable for scaling up pixel art (so long as you do it by integer amounts and scale *up* only).

The nearest neighbour algorithm for scaling up 2x is something like this.
1. Add in a blank column of pixels avery other column
2. Populate those pixels by copying the pixels to the left of them.
3. Add in a blank row every other row.
4. Populate those pixels by copying the pixel above them.
This will give you nice doubled up pixel art look.

The nearest neighbour algorithm scaling at 0.5x is something like this:
1. Delete every other column of pixels and discard the information containted within.
2. Delete every other row of pixels and discard the information containted within.

Now these are nicely reversible, provided that you scale *up* before your scale *down*. The algorithm will delete redundant duplicated pixels. However, scale something down that has a 1 px edge in it and you have a 50% chance of keeping it, depending of whether it it on an even or odd row or column. I think you know what happenned to your pixels, now.

I've got a few other things to do right now but I'll happily share what I do when I have multiple copies of the same thing to create a different sizes. I use the artboard approach (below). More later.
Image
User avatar

2019-06-21 07:36:33

(aside) I'm not sure if it's just my internet onnection or if there's a problem with the community forum but I'm having to do several refreshes to see the images today.
User avatar

2019-06-21 11:13:47

by st3f 2019-06-21 07:36:33 (aside) I'm not sure if it's just my internet onnection or if there's a problem with the community forum but I'm having to do several refreshes to see the images today.
I have the same issue
User avatar

2019-06-21 11:17:18

by st3f 2019-06-21 07:33:47 I've got to apologise. I was only responding to your blurry 3x export post. Let me address your missing pixels for now. I'll go back and address your original post afterwards.
Nearest neighbour is a very simple scaling algorithm and very suitable for scaling up pixel art (so long as you do it by integer amounts and scale *up* only).

The nearest neighbour algorithm for scaling up 2x is something like this.
1. Add in a blank column of pixels avery other column
2. Populate those pixels by copying the pixels to the left of them.
3. Add in a blank row every other row.
4. Populate those pixels by copying the pixel above them.
This will give you nice doubled up pixel art look.

The nearest neighbour algorithm scaling at 0.5x is something like this:
1. Delete every other column of pixels and discard the information containted within.
2. Delete every other row of pixels and discard the information containted within.

Now these are nicely reversible, provided that you scale *up* before your scale *down*. The algorithm will delete redundant duplicated pixels. However, scale something down that has a 1 px edge in it and you have a 50% chance of keeping it, depending of whether it it on an even or odd row or column. I think you know what happenned to your pixels, now.

I've got a few other things to do right now but I'll happily share what I do when I have multiple copies of the same thing to create a different sizes. I use the artboard approach (below). More later.
Image
Do you duplicate the layer and change its size? Please share more details it will be very appreciated :)

I tried creating two duplicated layers and changing the size with the Transform tool but only works when setting the scale % to 200 but when scaling by hand (diagonal dragging) to the same height.. it's not the same

Also is there a convert to smart object option? That will copy the change from the small sized sprite to the larger once?

Image (maybe showing):
Image
User avatar

2019-06-21 14:05:04

Hi John.
Onto the meat of the the matter. I share it, not necessarily as best practice but as what works for me. You may find all, some, or none of it useful but, if I share it in its entirety you can pick and choose.
First I start with a big canvas. The one above is 2048px by 2048px but that's fairly arbitrary as you can change it later without scaling contents by using Tools > Canvas Size...
Then add your logo at a size that is useful to you. With pixel art, you might start with the smallest and scale up. With other art you may start large and scale down. In the example I posted above the circle and the § are both vector objects so I'm fairly free with how I scale. The pride flag is a bitmap grabbed from wikipedia and, if I thought about what I was doing at the time, should be scaled using the Nearest Neighbour algorithm to avoid the chance of a row of pixels that is an average of two rows. I'd rather have this be sharp.
So, let's say you've created an icon in a size you want. It may be a single layer, it might be several.
• Select all the layers you want, right click on them in the layers panel and group them. We're going to be exporting the group so we want a group to enclose the object.
• You can optionally label the icon with its pixel dimensions and purpose as I have but, if you do, keep this text out of the group (because you don't want to export it).
• Quick tip. If your icon has a transparent padded area around it, create a rectangle (solid fill no stroke) as a background and keep that shape at the back of the group. This will tell Pixelmator Pro's Export functionality the size of the export and the position of the image within the exported size. You can hide it once you've got the export set up.
• Right-click on the group and select 'Add for Export'. Set the file format as desired but keep the scale at 1x. It will pick up the name of the group but you can change it by double-clicking on the name.
• Tweak the Pink Export outline if you need to. I noticed that some of mine were wrong in the image I uploaded earlier and have since fixed them. :grimacing:
Now create another. If you're using pixel art, you might want to duplicate it and scale it to 200% using the Nearest Neighbour algorithm.
Tweak the image to get it as you want it to be and set it up for export as above.
When you have the images as you want and have hidden any shapes used for positioning, go to 'Export for Web...', right-click on one of the items for export and pick 'Export All'. All your prepped images will be exported together at the same time.

Advantages of this method:
• I now have a library of icon sizes that I can duplicate and amend for a new project.
• I can fine-tune the image used for each individual size (useful when working with small icons where every pixel counts).
• I can make variants and keep them together with the originals.
• I can export all icons really easily.
Disadvantages of this method:
• There's quite a bit of set-up up-front (but for me that pays off down the line).
• If I need to make an amendment to all (e.g. turn them green), I have to amend all instances (but with the number of icons I'm dealing with I'm not worried by that).

Hope some of this helps. If you have any questions please fire away. I'll help if I can.
- Stef.
P.S. Have reported the issue of images not loading the the forum here: viewtopic.php?f=6&p=53252
User avatar

2019-06-21 15:22:43

"Also is there a convert to smart object option?"
No, there are no aliases, clones, smart objects, or externally linked images. If you have an object that is heavily repeated throughout an image it can be a bit of a pain to change it.