Vector based "8-bit" pixel art?

[chris-c-thomas]

Hello,

I'm a web developer and somewhat of a beginner using design software. I have no problem extracting assets to use in development but actually creating things is new for me. Anyway, I'd like to create a series of icons or illustrations in an 8-bit pixel style. I'd like them to be vector based though so I can scale them in size easily. I have both Designer & Photo for Mac and am attempting it in Designer.

I want to know if I'm going about this correctly. I started by creating a 500px x 500px artboard and set grid lines to be every 20px so that I have a grid of 25 x 25 squares. I created a 20px x 20px square layer for each section of the grid an duplicated them over and over until I had 625 of them covering the whole board. I filled them with various colors and had a large background layer behind the individual square as well. When I removed the grid lines though I noticed that the individual squares didn't seem to line up correctly even though they were snapping to my grid lines. It looks like the sample I attached.

What should I do differently to create these square pixel illustrations? I'd like to be able to export to SVG as well.

 

 

[MEB]

Hi chris-c-thomas,

Welcome to Affinity Forums

Did you have enabled Snap to grid in the Snapping Manager (menu View ▸ Snapping Manager...) to ensure the squares on the first line and the copied lines were all perfectly aligned to the grid or did you do it by eye? From the image seems the squares are not perfectly aligned however you may have captured it at an arbitrary zoom level which would also cause the same effect of the captured image. Check if the X,Y coordinates of some of the rectangles are not integer values in the Transform panel. Or simply attach the .afdesign file here for inspection...

[chris-c-thomas]

27 minutes ago, MEB said:

Hi chris-c-thomas,

Welcome to Affinity Forums

Did you have enabled Snap to grid in the Snapping Manager (menu View ▸ Snapping Manager...) to ensure the squares on the first line and the copied lines were all perfectly aligned to the grid or did you do it by eye? From the image seems the squares are not perfectly aligned however you may have captured it at an arbitrary zoom level which would also cause the same effect of the captured image. Check if the X,Y coordinates of some of the rectangles are not integer values in the Transform panel. Or simply attach the .afdesign file here for inspection...

Yeah, it appears I wasn't duplicating them when they were completely aligned. I've zoomed in much more to make sure everything is exact. As a test, I have two squares snapped next to each other and zoomed in. When I remove the grid I can still see a faint line in between the squares. I'm not sure if this is to indicate they're separate layers or if the gap will show when I export the final object. The background is blue, the squares are red.

Also, is it possible to use my mouse/trackpad to select multiple squares at once? I know I can marquee select them but I'd like to do something like hold "command" and select multiple layers on my artboard NOT select from the layers panel.

[MEB]

You shouldn't see any gap on vertical/horizontal aligned shapes/edges when you are seeing the canvas at 100% zoom (or 200%, 400% etc). In case of doubt check the X,Y coordinates in the Transform panel. Juts for reference you can increase the number of decimal places displayed in the Transform panel (and other fields) going to Affinity Designer Preferences, User Interface section and increasing the value in the Pixels field in the Decimal Places for Units Types section.

The best and easiest way to ensure they are correctly aligned when you are creating them is enabling Snap to grid as i explained above.

 

To select multiple objects on canvas press and hold ⇧ (shift) and click on them.

[chris-c-thomas]

Thank you so much for your help @MEB

[v_kyr]

Hmm if you want to have it anyway as SVG then IMHO it's easier to generate a grid through two scripting loops or the like than drawing that manually. - For example ...

let gridw = 500
let gridh = 500
let spacing = 20

for i in stride(from: 0, to: gridw+spacing, by: spacing) {
    print("<line x1=\"0\" y1=\"\(i)\" x2=\"\(gridw)\" y2=\"\(i)\" stroke-width=\"2\" />")
}
for i in stride(from: 0, to: gridh+spacing, by: spacing) {
    print("<line x1=\"\(i)\" y1=\"0\" x2=\"\(i)\" y2=\"\(gridh)\" stroke-width=\"2\" />")
}

---------- Will then produce ------------------

<line x1="0" y1="0" x2="500" y2="0" stroke-width="2" />
<line x1="0" y1="20" x2="500" y2="20" stroke-width="2" />
<line x1="0" y1="40" x2="500" y2="40" stroke-width="2" />
<line x1="0" y1="60" x2="500" y2="60" stroke-width="2" />
<line x1="0" y1="80" x2="500" y2="80" stroke-width="2" />
...
...

... gives you the relevant SVG line drawing commands for your grid. - And yes, devs are lazy here, aka why doing it by hand when a prog can generate the needed commands easier.

Of course you can also build up your grid out of fillable rects here instead of lines!

• grid.svg
• grid.afdesign

 

[MEB]

Affinity Designer doesn't support scripting. This must be generated externally and imported as an SVG.

[v_kyr]

Yes with scripting I meant some other third party interpreted language here, nowadays you can script in any web browser with JS, Python, Perl, Swift Playground (the shown example) ... or whatever. You can even use system shell scripts for such simple things. - Just let a little bit of prog code generate the boring task of writing SVG code/commands into a file which you afterwards import and reuse in AD.