Pixel Art Export Blurry

Community Beginner ,
Oct 31, 2020

Copy link to clipboard

Copied

I'm currently making a custom minecraft skin for my partner and made a 64x64 pixel template and used the Rectangular Grid Tool and the Live Paint tool to make an exact pixel by pixel representation of the skin. However, no matter how I export, the pixels end up all blurry and mushed and it seems like estimates are being made around borders of the art and the back ground.

 

In Illustrator...

defaultxf28vlv5sc4b_0-1604171912867.png

 

Upon export (I need it to export to a 64x64 png exact, I've tried all differnt methods of exporting still can't make it work) looks something along these lines...

defaultxf28vlv5sc4b_1-1604171993399.png

 

I can't attach the original .ai file for some reason to this post but here are two examples of the messed up exports.

TOPICS
Draw and design, How to, Import and export, Print and publish, Tools, Type

Views

104

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

2 Correct Answers

Community Beginner , Oct 31, 2020
defaultxf28vlv5sc4b Community Beginner , Oct 31, 2020
Thank you so much Ton!      A few notes, I first had to make the rectangular grid tool selection pixel perfect which aligned most of the pixel art to where it wasn't blurry in the pixel preview, however some pixels were still unaligned (had slightly lighter shade overlaps into an adjacent pixel), but I just manually adjusted those handful of pixels using the Direct Selection Tool to make it work. (https://helpx.adobe.com/illustrator/using/best-practices-creating-web-graphics.html) I also referen...

Likes

Translate

Translate
Jump to answer Jump to answer
Adobe Community Professional , Oct 31, 2020
Ton Frederiks Adobe Community Professional , Oct 31, 2020
Try using a Web preset. Work in pixels as units. Set up your Artboard as 64 x 64 px. Use View > Pixel Preview. Use Eport for Screens Scale > 1x

Likes

Translate

Translate
Jump to answer Jump to answer
Community Beginner ,
Oct 31, 2020

Copy link to clipboard

Copied

Right now, an alternative I'm using is to use the pencil tool in photoshop, still any tips and help will be truly appreciated! 🙂

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Oct 31, 2020

Copy link to clipboard

Copied

Try using a Web preset.

Work in pixels as units.

Set up your Artboard as 64 x 64 px.

Use View > Pixel Preview.

Use Eport for Screens Scale > 1x

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Beginner ,
Oct 31, 2020

Copy link to clipboard

Copied

Thank you so much Ton!

 

     A few notes, I first had to make the rectangular grid tool selection pixel perfect which aligned most of the pixel art to where it wasn't blurry in the pixel preview, however some pixels were still unaligned (had slightly lighter shade overlaps into an adjacent pixel), but I just manually adjusted those handful of pixels using the Direct Selection Tool to make it work. (https://helpx.adobe.com/illustrator/using/best-practices-creating-web-graphics.html) I also referenced this for anyone else who sees this discussion post.

 

    This is my first time reaching out on such a forum, thank you for making it an enjoyable experience Ton!

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Oct 31, 2020

Copy link to clipboard

Copied

Good to hear that helped!

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more