I'm interested in learning how to create digital 2D graphics used in games for two reasons: 1) I want to extend my knowledge in what graphics designers and graphics artists do, how it works, the process, time, etc. as I see this is valuable knowledge to a game designer (not a game designer in the graphical sense). 2) I want to be able to create more simple graphics both for conceptual/demonstration purposes and for implementation in my own future projects. What I am interested in learning are: * GUI design. I have a feeling Photoshop may come in handy here, but generally creating the looks of menu screens, dialogue boxes, flashing text, etc.. * Cartoon-esque graphics. This includes both cartoon-like models and creating cartoon-like environments. I suppose it's similar to sprites, except they're not sprites and are not sprited. Information about the animation process is also welcome. * 2d/3D polygon models - This is basically just 3D models made up in whatever way, but used in 2D games. Fire away, I guess. I'm completely new to visual arts and graphics design in game development so I have NO idea where to begin. Even if your suggestions do not apply to any of the three above-mentioned traits, it would be nice to have some sort of starting point. Primarily, it's to give me an understanding of visual arts as well as giving me the opportunity to work with 2D graphics since I'm mostly interested in 2D games. Thanks in advance!

Well, for starters do you understand the difference between vector graphics and bitmap graphics? The difference between concepting and illustrating? It's so common for people, even beginner artists, not to understand these that I attempted to explain them right in my freelance art webpage:
sunandshadow's webpage Please ignore the spammage, I'm not currently looking for a job because I'm in the middle of a big one. And specific to your example, when you are talking about (concept) designing GUIs, Photoshop is pretty inappropriate for that because it is a program for doing illustration (finished, elaborate, perfect in every detail, and SLOW). In general concepting should be done with pencil, paper, and scanner, maybe some markers. For uses that are mainly geometrical and don't have organic elements (people, animals), a vector program can also work.

I am totally confused by your description of cartoons as like sprites only not. *_* Cartoon IMHO is just a visual style, comparable to western comic style, anime style, and the many traditional schools of art like art nouveau, art deco, primitivism, impressionism, cubism, ukiyo e, etc.

Models on the whole have no relation to 2D art unless one is post-processing them. Yes you can export screenshots of a 3D model and use these screenshots as sprites, but that's considered part of 3D art unless you are modifying the screenshots in some way with a 2D art program. You can however have 2D vector 'models', this is what Flash animation is all about, and is a digital version of stop-motion animation done with construction paper, such as the original southpark (they went all digital at some point).

From the technical end of things, as a designer it's important to understand resolution (I can't tell you how often people don't realize that picking a lower screen resolution for their game is going to automatically result in the game looking like it's from the early 90s, no ifs ands or buts). Also colorspace (RGB vs. CMYK and however many bits of depth), color palettes, and framerate.

Just read the text about vector graphics on your website. I have heard about vector graphics and bitmap before, and this is basically what I meant by cartoon-ish. Like I said, I'm completely new to this, and my description - faulty though it was - came from these Flash animations we've all seen.

I think what I was asking for is basically: what tools do I need to start working with any one of these things? Software, hardware, certain equipment or other handful items including certain pens, paper, scanners, literature, etc.

You said something about a vector program? You mentioned Adobe Illustrated, Inkscape and Flash on your website, and I'm going to check them out. I assume these are for making vector graphics, so this basically covers the main interest of mine. You said I could use a vector program for GUI, is this something you would recommend to anyone or a beginner, or would you recommend something else for a beginner? And, I'm guessing that doing any type of polygon/3D model would require me to have appropriate software. I suppose 3ds Max and Maya are standard softwares?

Thanks a lot for an incredibly helpful reply :)


EDIT: Worth mentioning (again) that I'm looking specifically for software and other tools geared towards in-game usage (such as menus, character models, basic environments, etc.).

Another question: If a game is programmed in X language (Java, C#, etc.) is it still possible to use models and animate them and have them implemented in a game? The same wold apply to GUI.

Flash, Inkscape, and Illustrator are all vector-art programs, yes. Flash is a bit different because it is more animation and programming focused and has its own scripting language and the actual Flash software is and IDE. Inkscape is basically a free clone of Illustrator the same way Gimp is basically a free clone of Photoshop - they have slightly different features and terminology, and the free versions lack a few features because they haven't had time or staff to implement them yet. Inkscape I know does not have Illustrator's Gradient Mesh feature, but that's only used for doing particularly complicated coloring, like flames or something like that.

I don't know what features they do or don't have for animation because I'm only a beginning animator. I do know that vector graphics, just like 3D models, can be exported as sprite frames, and in that form they can be used with pretty much any programming language suitable to games, and also can be further worked on in a bitmap program. Also sprites can be converted to movies and vice-versa, although if the movie used any kind of compression a sprite extracted from it would look like crap. A final animation is a set of still images presented at a set speed, that's all. There are many different ways of making an animation, which might be faster to use, easier to edit, or good for producing art with a particular type of look, but all prerendered frames of animation look the same to a programming language and function the same in a game. The exception is if you are having the game render polygons, that's an entirely different kettle of fish and the reason many game engines are either 2D or 3D, not both. (There's also a more minor exception if you want the user to be able to customize the colors or images, or layers of clothing on a character sprite, but that's pretty easy to automate.)

Although I can make simple icons completely in Inkscape, it is pretty much limited to lines, flat color fills, and gradients (and can include opacity and blurriness a bit). So Inkscape (or Illustrator or presumably Flash) is great for lines and shapes and making them look consistent from frame to frame, but I usually do any complex coloring in Photoshop (or Gimp).

I said you could use a vector program for GUI concepting, please note again the difference between making a concept for a gui and making final art for a gui. Should be fine for a beginner though - just use the rectangle tool to make a big rectangle representing your screen, then block out any sub-areas like menu bars, also you can easily give the rectangles rounded corners or make circles or ovals, it will even automatically make star-shapes. All programs mentioned in this post include standard transform tools like flip horizontal or vertical, rotate, and scale. A final GUI is just a set of still images (excluding animations incorporated into the gui), so you could basically produce one with any art program; the choice of program is again about speed of creation, ease of editing, and suitability for particular art styles.

Vector programs are a different paradigm from bitmap programs, so you do not need to know how to use a bitmap program to learn how to use a vector program. The basic difference between the two is that the vector program's main tool is the pen tool, while the bitmap program's main tool is the brush/pencil tool (brush and pencil are actually the same too with different default settings). At any rate, whatever program you want to learn to use there are undoubtedly tutorials on the internet which can teach a beginner how to use them.

I know very little about 3D art, so I'll just point you to the sticky in this forum where people recommend various programs and leave the topic to someone who knows more about it.

EDIT: Flash is as far as I know the only art program specifically geared to in-game usage; for everything else the artist provides sets of images and it's up to the programmer to make the game display them at the correct time and place, and make the picture of a button correspond with the clickable field for the button, and be coordinated with the animation and sound effect of the button getting clicked, etc. (Hypercard used to be another art program which included a scripting language and was geared to games, but I believe it is long defunct - if it does still exist its really nonstandard because you never see it used.)

Quote: Original post by sunandshadow
And specific to your example, when you are talking about (concept) designing GUIs, Photoshop is pretty inappropriate for that because it is a program for doing illustration (finished, elaborate, perfect in every detail, and SLOW).

I disagree with this assertion.

While pencils, paper, markers (or some other kind of wash) and possibly white out are the fastest means of developing a concept for communication with others, this does not mean Photoshop is inappropriate for the same purposes. In fact, Photoshop, properly used, is a tremendous asset even in the concept development phase. One of the books I recently purchased, Color Drawing by Michael E. Doyle, significantly revised its contents to incorporate the use of digital tools into its workflows. It targets architects, and one of its common approaches is to scan in line drawings, manipulate them in Photoshop, then plot the image and put finishing touches again by hand.

Once you learn to use it effectively, Photoshop isn't slow. It can be extremely fast, in fact, because of the ability to vary pen size automatically, effectively drawing in forms at rates that would be impractical with a similarly sized physical instrument. Another killer feature is custom brushes, which allow you to create a semblance of detail work quickly.

Quote: Original post by Metallon
I think what I was asking for is basically: what tools do I need to start working with any one of these things? Software, hardware, certain equipment or other handful items including certain pens, paper, scanners, literature, etc.

Physical media
Paper, pencils, erasers, pens, color pencils, markers. Watercolor can also be useful for creating washes.

Digital media

• Adobe Photoshop is the drawing and image manipulation application, though there are several runners up, pretenders to the throne and specialized sidekicks. GIMP aims to be a free version of Photoshop. Painter focuses on natural media, as does Art Rage. Paint.NET is a half-way point between MSPaint and Photoshop, and a free download for Windows. Sketchbook Pro is aimed more at the professional design (think industrial design, not web or graphic design) market, but it by far the best pen-based user interface among media applications.


• Adobe Illustrator is the leading vector graphics package. Inkscape is an open source application designed to be similar, with a limited amount of interoperability. Nothing else in the market is really worth talking about yet.


• Adobe Flash is the leading vector animation package, though it is perfectly capable of working with and generating (rendering) raster images and sequences. A surprisingly capable alternative here is Pencil, though it is purely raster-based.


• The 3D modeler space is extremely crowded, particularly if you include tools with more specialized strengths (mudbox, Rhino, Z-form, modo, etc), but the major options here are 3ds MAX, Maya, XSI, Lightwave and Blender - of which only Blender is open source, though most of the others offer academic or learning editions which are free, albeit with usage restrictions.

Quote: You said I could use a vector program for GUI, is this something you would recommend to anyone or a beginner, or would you recommend something else for a beginner?

Overall, I'd say yes, using a vector art program for creating your GUI is a good idea for a beginner. While there is some difficulty in learning the tools, the advantages in terms of being able to re-render the GUI for different resolutions and scales quickly and painlessly is worth it. Most beginners start out using game libraries that accept raster images only, but it is trivial to obtain raster images from vector images. (The inverse is possible, but quite a bit more work; even with the assistance of tools built into Illustrator or Inkscape, the user has to edit control points and specify colors and gradients and so forth.)

Quote: Another question: If a game is programmed in X language (Java, C#, etc.) is it still possible to use models and animate them and have them implemented in a game? The same wold apply to GUI.

The programming language does not restrict the type of assets (models, images, sounds, etc) you can use in the game. Libraries of code exist to help you load most file formats into your game, regardless of language.

Quote: Original post by Oluseyi

Quote: Original post by sunandshadow
And specific to your example, when you are talking about (concept) designing GUIs, Photoshop is pretty inappropriate for that because it is a program for doing illustration (finished, elaborate, perfect in every detail, and SLOW).

I disagree with this assertion.

While pencils, paper, markers (or some other kind of wash) and possibly white out are the fastest means of developing a concept for communication with others, this does not mean Photoshop is inappropriate for the same purposes. In fact, Photoshop, properly used, is a tremendous asset even in the concept development phase. One of the books I recently purchased, Color Drawing by Michael E. Doyle, significantly revised its contents to incorporate the use of digital tools into its workflows. It targets architects, and one of its common approaches is to scan in line drawings, manipulate them in Photoshop, then plot the image and put finishing touches again by hand.

Hmm. I have years of experience using photoshop and find it quite slow, and have regularly heard other people say a piece done in photoshop took them anywhere for 8 to 40 hours (that's for final stuff not rough concepts), but I can see how line drawings of architecture would be particularly quick and easy to throw some color on, and also I've heard people talk about speedpainting which is practicing techniques for very quickly producing impressive pieces in photoshop or painter.

I probably also should have added that if one has a tablet and gets good at using it that would also make drawing directly in photoshop or similar a lot faster.

Quote: Original post by sunandshadow

Quote: Original post by Oluseyi

Quote: Original post by sunandshadow
And specific to your example, when you are talking about (concept) designing GUIs, Photoshop is pretty inappropriate for that because it is a program for doing illustration (finished, elaborate, perfect in every detail, and SLOW).

I disagree with this assertion.

While pencils, paper, markers (or some other kind of wash) and possibly white out are the fastest means of developing a concept for communication with others, this does not mean Photoshop is inappropriate for the same purposes. In fact, Photoshop, properly used, is a tremendous asset even in the concept development phase. One of the books I recently purchased, Color Drawing by Michael E. Doyle, significantly revised its contents to incorporate the use of digital tools into its workflows. It targets architects, and one of its common approaches is to scan in line drawings, manipulate them in Photoshop, then plot the image and put finishing touches again by hand.

Hmm. I have years of experience using photoshop and find it quite slow, and have regularly heard other people say a piece done in photoshop took them anywhere for 8 to 40 hours (that's for final stuff not rough concepts), but I can see how line drawings of architecture would be particularly quick and easy to throw some color on, and also I've heard people talk about speedpainting which is practicing techniques for very quickly producing impressive pieces in photoshop or painter.

I probably also should have added that if one has a tablet and gets good at using it that would also make drawing directly in photoshop or similar a lot faster.

How long a painting or anything takes depends on what you're making, not what kind of application you're using.

There is a wide amount of tools available for the job, but generally photoshop will be the most versatile of them all, with the exception of anything with vectors.

using photoshop is pretty much the standard, its a strong program with many uses, from making GUI elements or just drawing big paintings from scratch in it.

Buying a wacom though is pretty much something one will have to do to get any further with it, its a strong part of any kind of digital artistry (and a good way to avoid carpal tunnel)

I find drawing easier than 'digitalling' with a pixel product so started to use ArtRage to sketch my sprites before taking them into PSP7 or GraphicsGale.
Rendering animations from Poser is also good to get a template.
I had thought Interface Design was well thought of but it gets a slating on Amazon.com

Quote: Original post by sunandshadow
Hmm. I have years of experience using photoshop and find it quite slow, and have regularly heard other people say a piece done in photoshop took them anywhere for 8 to 40 hours (that's for final stuff not rough concepts), but I can see how line drawings of architecture would be particularly quick and easy to throw some color on, and also I've heard people talk about speedpainting which is practicing techniques for very quickly producing impressive pieces in photoshop or painter.

I probably also should have added that if one has a tablet and gets good at using it that would also make drawing directly in photoshop or similar a lot faster.

You don't use a tablet? Well, that just about explains everything.

I own one, an Intuos3, and am working toward purchasing a Cintiq next year. The big one - 20WSX - not the little 12-incher. It makes that much of a difference, not just because of the ability to draw directly to screen, but also because of the speed-up in making menu selections through quick strips, the rocker switch and the eraser nub on the other end of the pen.

Photoshop + Tablet = WIN.

I bought a tablet at one point, but not being able to look and draw in the same place was making me insane. If I did art for a living I would buy a tablet computer where you draw on the screen, but I don't have the money to spare.