Is my workflow OK?

[johnnyivan]

Hi Everyone,

I'm just starting out at this!

Can you tell me if this is a reasonable way to create artwork and sprites for characters?

1. Draw in Adobe Illustrator (and do most of the fill colour). Nice and crisp.
2. Bring into Adobe Photoshop for: any final 'finishing/embellishment' > slicing > exporting to PNGs

I *think* that once it's in Photoshop, whether as an imported or pasted raster image — OR — as a 'Smart Object', once I start working on it in raster mode there's kind of no going back. Unless, the Illustrator art is just un-filled linework, and I colour and embellish on different layers under and over the Smart Object.

This is almost what I did years ago on Story Apps: but I Drew in Illustrator in black line only > and did all Colour in Photoshop on the linework and fills. It was a bit convoluted.

** 1 little snag I'm having in Photoshop though, is exporting decent quality PNG sprites from slices, with clean transparency edges. Perhaps someone has a tip on that?

Thanks for reading, I hope you can offer your thoughts.
John

[Mike at BrashMonkey]

Your workflow sounds fine. One other option to help mitigate that "point of no return" when converting to raster image is to work on it at something like 2x resolution and scale it down at final export. This way your "working" art is x2 and easier to work with and edit, because reducing to half size hides a bit of sloppiness and imperfections quite nicely.

I'm not sure about your Photoshop snag though.. what do you mean by "clean transparency edges"? Are you shooting for pixel art with no alpha anti-aliasing at the edges?

[johnnyivan]

Hi Mike,

Thanks. I'm exporting the slices/files nice and big from Illustrator. I think I've finally found a way to make it work. AI and AP are really terrible for this sort of thing.

I'm now getting lovely Alpha transparency with PNG-24. See the attached image showing with assets placed over black just to test them. Some have ragged edges, some are nice and clean with semi-transparent shadows ) over the red bar).

Re: Resolution

I think that is one of the most misleading and confusing words that ever gets used in relation to Digital art for onscreen use. And it's used because apps like Adobe's keep using it in the most inappropriate ways. I get confused myself sometimes and have to remind myself that resolution or DPI is meaningless and can be ignored in onscreen graphics. But it's still an issue that the DPI selector is there in those apps when exporting or creating new graphics.

Like, if I put my exported Illustrator slices/png images (supposedly 72dpi) into a new Photoshop document I'm not sure what resolution to make it at. As I said, the resolution should be inconsequential, but Photoshop makes it consequential—when you paste your PNGs into the new document. They'll be big, or small, or sharp or blurry. Some day, I'll get my head around it and know what can be ignored.

John

 

[Mike at BrashMonkey]

Careful not to conflate "resolution" with "DPI", while you can interchange the words when speaking for print, you can not interchange the words when speaking about screen resolution.

For graphic artists who create on-screen visuals, especially video games, "resolution" never refers to DPI, (which as you expressed is completely meaningless for video games), but instead refers to how many pixels across and high the entire target screen is, This is the screen resolution.
Ancient consoles like the atari 2600 were very low resolution. Later consoles like Megadrive and SNES were low resolution, and modern consoles tend to run in what we'd call high resolution, such as 1920x1080 and beyond.

The point is if you create your art at print like resolutions, which many artists who learned digital art specifically for print and are used to drawing at 300 DPI and above, they will accidentally create their video game art with a final screen resolution. 

The workflow I suggest is to first sketch out a mock up of a screen for your game at the actual target screen resolution. For example, if you're making a retro pixel art game you might set up your mock up screen to a total resolution of 256x240 (NES screen resolution). This will help you figure out the exact size you want the player character, props, and environment tiles etc should be, as well as figuring out where HUD elements should go, how big they should be etc.

Once you're happy with your mock-up, you now know exactly how many pixels across and vertically your character sprite should be etc. IN cases like this, where you're going for retro pixel art style, then it would be counter-productive to work at 2x or 4x, as it's best to just create and work with the low res pixel art from the beginning.

If, however your target screen resolution and style are higher res, and not a pixel art style, then it makes sense to first create your mock-up at actual target size (for example 640x480 or 1920x1080) and then enlarge the mock-up to 200 percent before starting to clean up the art and cutting it up into layer/pieces for body parts etc.

Whenever you need to edit the art, you work at the 2x resolution (200 percent), but once you're ready to export for use in Spriter you can export at 50 percent to bring it back down to the final required resolution.

I hope that all made sense. 

[johnnyivan]

Yep, DPI is irrelevant with screen graphics—correct, Mike?

But when you're told to produce designs and graphics for devices with resolutions of 72dpi, 144dpi (?), 230dpi (I'm making these up now), etc., that's just mis-direction isn't it?

I think what they should say is

"design for devices with resolutions of 1024 x 768, 768 x 480", etc etc. Isn't that right?

I remember how surprised I was when I first saw how 2 graphics of the same pixel dimensions, but saved at different (print) resolutions (72dpi and 300dpi) were the same file size and displayed identically in a web browser.

----

DPI is really an instruction to the printer how many dots to print per linear inch, when the graphic is printed.

----

As I say, I think Photoshop, Illustratior etc., really confuse things when we're working on non-print stuff. What I fail to remember to understand properly is the 're-sample' checkbox, when image sizes are adjusted. I usually have to think for a while about that.

-----

Re: working big. In Illustrator, I can export my slices at 200% or 500%  size, say, and all is good. What happens if the resulting PNG assets are brought into Spriter and then resized down in there as I start to rig? Is that an option?

Thanks for your attention and efforts on this, Mike.

John