Learning how to create graphics
February 8, 2012 4:53 PM Subscribe
Learning to create realistic UI graphics/icons
Are there any good learning resources books/sites on creating realistic looking (but not photo realistic) graphics?
Is there a formal term for this type of art?
Some examples:
Volume knob
Drive icon
This could apply to creating Apple/iOS style icons/interfaces.
Are there any good learning resources books/sites on creating realistic looking (but not photo realistic) graphics?
Is there a formal term for this type of art?
Some examples:
Volume knob
Drive icon
This could apply to creating Apple/iOS style icons/interfaces.
Bjango has a bit about noise textures and making rounded rects.
posted by ignignokt at 5:43 PM on February 8, 2012
posted by ignignokt at 5:43 PM on February 8, 2012
There are some pretty decent Photoshop tutorials that touch on what you are trying to accomplish at psdtuts (and a few using illustrator as well). Just keep digging.
posted by teedee2000 at 7:49 PM on February 8, 2012
posted by teedee2000 at 7:49 PM on February 8, 2012
Here are some Inkscape (free download) tutorials for drawing icons of a lightbulb and a coffee cup.
posted by holloway at 8:11 PM on February 8, 2012
posted by holloway at 8:11 PM on February 8, 2012
Ok, this looks fun. There are TONS of tutorials out there about this, but you probably already know that. You don't mention any software up there so step one is probably getting photoshop or illustrator. You could do this with either but I think for your purposes I think photoshop would get the job done way more intuitively. Maybe the first time you start try to replicate an existing icon as precisely as you can as a training exercise.
The first thing to realize about that style of icon is that isn't about being realistic so much as it is about pulling off a convincing Trompe-l'œil. Using subtle bits of shading and highlight to indicate different surfaces and depths here is key. You don't need to aim for realism, even a flat rectangle with a darker stroke on the bottom and a lighter stroke on the top can be enough to create the illusion of depth.
The second thing to figure out is that these things is that working on them is more like creating and arranging parts than it is like drawing. A working photoshop document of one of these probably isn't just a layer or two with all the details on them, its more likely to be like 50 god damn layers each with a single element on them stacked and arranged precisely.
I'll talk a bit about the component parts I'd use to recreate that volume knob in photoshop since it looks way way simpler than the other one. Dust off the gradient tool, cause here we go:
Brushed metal core: this looks like a radial noise gradient with the colors trimmed down to only include a few shades of gray. Layered on top of that is a highlight layer, it looks like they made a white shape sort of like the radiation symbol, blurred it, and tuned its opacity down a few notches. Actually, maybe it's not a blurred shape maybe its an angle gradient
Outer edge of the knob: I'm not sure what's supposed to be going on in the darker circle on the knob but the ring around that is just a layer with a circle on it stuck under the layer with your metal center in it. Fill in that circle with a vertical gray to lighter gray gradient. Protip: A cheap way to make it look beveled is to stick another layer under it with a circle that is like a single pixel bigger than your gradient circle and put the same gradient on it but reverse the direction of it.
I think we're ready here with the knob. Let's put a fucking drop shadow on that shit.
Sunken area around the knob: This is just a circle with some color and a little bit of subtle noise for texture. The recessed look is accomplished by putting a ring around it (or a slightly bigger circle under it) and then sticking a vertical gradient on it. Simple.
Markings around the knob: To the untrained eye these are just gray marks, but look closer dear reader, they have a subtle white highlight under them. The-white-highlight-underneath technique is how Apple fans communicate to one another that, look, this text isn't printed, oh no, it has been tastefully carved into the surface. You can make that magic happen with a drop shadow. Set the blending mode to normal or screen or something, the color to white, and the distance and size to a single pixel.
posted by cirrostratus at 9:23 AM on February 9, 2012 [2 favorites]
The first thing to realize about that style of icon is that isn't about being realistic so much as it is about pulling off a convincing Trompe-l'œil. Using subtle bits of shading and highlight to indicate different surfaces and depths here is key. You don't need to aim for realism, even a flat rectangle with a darker stroke on the bottom and a lighter stroke on the top can be enough to create the illusion of depth.
The second thing to figure out is that these things is that working on them is more like creating and arranging parts than it is like drawing. A working photoshop document of one of these probably isn't just a layer or two with all the details on them, its more likely to be like 50 god damn layers each with a single element on them stacked and arranged precisely.
I'll talk a bit about the component parts I'd use to recreate that volume knob in photoshop since it looks way way simpler than the other one. Dust off the gradient tool, cause here we go:
Brushed metal core: this looks like a radial noise gradient with the colors trimmed down to only include a few shades of gray. Layered on top of that is a highlight layer, it looks like they made a white shape sort of like the radiation symbol, blurred it, and tuned its opacity down a few notches. Actually, maybe it's not a blurred shape maybe its an angle gradient
Outer edge of the knob: I'm not sure what's supposed to be going on in the darker circle on the knob but the ring around that is just a layer with a circle on it stuck under the layer with your metal center in it. Fill in that circle with a vertical gray to lighter gray gradient. Protip: A cheap way to make it look beveled is to stick another layer under it with a circle that is like a single pixel bigger than your gradient circle and put the same gradient on it but reverse the direction of it.
I think we're ready here with the knob. Let's put a fucking drop shadow on that shit.
Sunken area around the knob: This is just a circle with some color and a little bit of subtle noise for texture. The recessed look is accomplished by putting a ring around it (or a slightly bigger circle under it) and then sticking a vertical gradient on it. Simple.
Markings around the knob: To the untrained eye these are just gray marks, but look closer dear reader, they have a subtle white highlight under them. The-white-highlight-underneath technique is how Apple fans communicate to one another that, look, this text isn't printed, oh no, it has been tastefully carved into the surface. You can make that magic happen with a drop shadow. Set the blending mode to normal or screen or something, the color to white, and the distance and size to a single pixel.
posted by cirrostratus at 9:23 AM on February 9, 2012 [2 favorites]
This thread is closed to new comments.
posted by jeb at 4:57 PM on February 8, 2012