How do you export art with the grid?

Help
1

How can I export my art with the grid on? I am a beginner and I want to make something like this but I’m not sure how I can do it.

670ddd6c1151dc7eff8edbed844725c4
670ddd6c1151dc7eff8edbed844725c4564×837 205 KB

2

Alt+PrintScreen? Then paste.

3

Hi @tomoki,

Welcome to the forum. Another option, though it’s a bit of a trek if you’re a beginner:

  1. In Aseprite, save your work with the .svg extension. It will give you an option to scale up the export.
  2. Open the .svg in a code or text editor.
  3. Add a stroke-width and stroke attribute. Depending on how big or small a scale you chose on export, your stroke width may have to be less than a pixel wide.
  4. Save changes, adjust stroke width, save, repeat. Preview the changes in a web browser like Firefox, Edge, Safari or Chrome.
  5. If you have software like GIMP or Inkscape, you can use that to convert back from a vector to a raster image (.png, .jpg).

Here’s an sample of what a modified Aseprite SVG file looks like at the top:

<?xml version="1.0" encoding="UTF-8" ?>
<svg version="1.1" width="32" height="32" xmlns="http://www.w3.org/2000/svg" stroke="#000000" stroke-width="0.1">
<rect x="0" y="0" width="1" height="1" fill="#FF004D" />
<rect x="1" y="0" width="1" height="1" fill="#FF0D49" />
<rect x="2" y="0" width="1" height="1" fill="#FF1746" />
<!-- ... -->
</svg>

test2
test2512×512 2.79 KB

One problem with this approach is the thin outer border around the whole image. Each stroke is drawn from the center of the edge, and the outer half of the stroke is clipped. If you feel like jumping down that rabbit hole, see this thread on Stack Overflow… but it’s probably easier to expand the canvas by a bit on all sides.

Best,
Jeremy

1 Like