missymoon Posted May 26, 2017 Share Posted May 26, 2017 Hello all, I'm brand new to this and I hope someone can help here. I'm a vector artist and working on doing phaser to help code interactivity on my apps. I work in adobe illustrator. Does anyone know what the proper export settings are for my images created in there? Phaser supports .png which is no problem for me, I just need to know what raster settings I should use when exporting to .png for phaser. I've looked and looked and cannot find the answer to this. Every time I see a tutorial, the assets have already been created and they don't talk about how to export them out of Illustrator. Any help at all is appreciated. If there is a topic on this already, please let me know and I'll go to it. Link to comment Share on other sites More sharing options...
samme Posted May 27, 2017 Share Posted May 27, 2017 What are the export options? Probably the standard Save for Web will work. Link to comment Share on other sites More sharing options...
deepsky88 Posted May 30, 2017 Share Posted May 30, 2017 I use Gimp to create maps and sprites and i export images with the png standard, no problem for me, u can simply load that images in phaser like u see in the tutorial. Link to comment Share on other sites More sharing options...
missymoon Posted May 31, 2017 Author Share Posted May 31, 2017 Hi deepsky88, I'm trying to get more specific numbers. When you say png standard, is the resolution 72dpi? When I try that from illustrator my images look a little fuzzy in the web browser. Hi samme, I have the export options to save for web from Adobe Illustrator. That gives me gif, jpeg, png-8 and png-24. I also have the option to export as a png with resolutions 72, 150 and 300 dpi. Link to comment Share on other sites More sharing options...
samme Posted May 31, 2017 Share Posted May 31, 2017 The nominal resolution (dpi) doesn't matter because browsers always use 1 dot = 1 pixel. But 72 is fine. PNG-8 is 256 colors and PNG-24 is millions. You can use PNG-24 to keep it simple. For fuzziness, see https://helpx.adobe.com/illustrator/using/drawing-pixel-aligned-paths-web.html. I think if you make a new document from the Web profile, Align New Objects to Pixel Grid is on by default. Link to comment Share on other sites More sharing options...
missymoon Posted June 1, 2017 Author Share Posted June 1, 2017 I read that article and it helps. I'll take a look at things further and experiment with it. Thank you for the link. Link to comment Share on other sites More sharing options...
missymoon Posted June 6, 2017 Author Share Posted June 6, 2017 Hi Samme, That adobe article lead me to more research and I found out this is a common problem with illustrator and designing for web. I've got a good work around for my current files with aligning all objects to the pixel grid and then exporting the file out of photoshop. It's not quite as crisp as when viewed on the ipad but it's very close. Now I know for future documents to do the web setting and to align all objects with the pixel grid. Thanks again for pointing me in that direction, it helped me figure out the problem. samme 1 Link to comment Share on other sites More sharing options...
Recommended Posts