How to draw a USB key icon in Photoshop
Here's another cool Photoshop tutorial by Eren Göksel.
In this tutorial, I’ll show you how to illustrate a USB key floating in the air and reflecting on a surface. We’ll be adding numerous details that will make this illustration shine. Notice how the PSDTUTS name reflects off the floor in the illustration. These are the little details that add a degree of realism to your work.Make a Floating in Air USB Key Illustration
Previously on Boing Boing:
• How to create a super shiny pencil icon in Photoshop
• Photoshop tutorial: drawing a glass of beer
the latest
latest episodes
People who strive for realism usually end up creating something like this, which looks obviously fake. Funny how that works.
Unless the device is tapered to a smaller size toward the plug, the perspective is incorrect. The back should appear smaller than the front for a uniform rectangle.
Or, am I smoking crack AGAIN?!?
<snarky>Or, you could take a photo of a real usb key and only need to photoshop the hover+reflection! Or, even better, photograph the key as you drop it over a shinny surface!</snarky>
Regardless, these are good tutorials.
People who strive for realism usually end up creating something like this, which looks obviously fake. Funny how that works.
Perhaps, but are you implying that people who *don't* strive for realism make things that look *less* fake? That would indeed be funny.
Oddly, yes. When you look at this image, it jumps right out and hits you: this is fake. Why? Because it's trying to look real, and failing.
In contrast, if you look at something that isn't trying to look real, then you don't even consider it in the context of how real it looks, you accept it as a symbol representing the object. Our brains just don't work like cameras.
If you look at the work of any good artist, you'll see that they all have something in common: not one of them is trying to make something that looks like a photograph. It is worth careful consideration of what exactly they are trying to do (it varies depending on style).
it's an axonometric projection. i think its isometric too, but i can't tell.
in any event:
http://en.wikipedia.org/wiki/Axonometric_projection
http://en.wikipedia.org/wiki/Isometric_projection
these sort of drafting techniques are often used for representing objects with 'realism'. they're supposed to be realistic, but not real.
@1 -
Are you trying to say this is 'shopped? How can you tell? Is it in the pixels or something?
What would Donnie Hoyle say?
#6 - I was gonna say that. If it's drawn at 30/60 degrees, it is indeed isometric. These drawing/drafting techniques have been around for centuries. Sad that they don't teach drafting to anyone any more or people would know this.
Funny how many are only capable of seeing "real" or "obviously fake". It simply doesn't occur to many that there are practical uses for illustration styles located along the many points in between.
Yeah, definitely isometric. It's interesting to see something in that stylized perspective done with all this shininess; when it's clearly fake (as in all those huge pixel-city perspectives BB likes to link to now and ten) it doesn't jump out, but with all this 'realism' the underlying drawing's unreality really leaps out at you. As does the lack of details like the internals of the connector.
It's the same sort of phenomenon as the "Uncanny Valley", really: as one measurement of 'realism' climbs higher, the way the others avoid realism stand out.
Which is why you normally don't see isometric drawings done with this level of shading!
@8 You're Such At Photoshock. Yes, you really do. That's what Donnie sez.
Shadow should be equidistant between the original and reflection. FAIL.
The shading and highlights are wrong in the reflection. The light source is above and slightly to the rear of the object. There should be no highlighting in the reflection, it should be darkened with the only light source bouncing up from the glass at the angle opposite the source. Also the shadow is too small, it should be larger than the object's dropped footprint due to light spread. Good effort, but kinda amateurish.
I could have done the same thing in Illustrator, really. It would be resolution-independent.
I've been making virtual images for promotional products for nearly a decade. It's all about knowing how to create highlights and lighting effects. The following are a few images I did six or so years ago (Haven't updated the site in five years. My apologies if it doesn't work properly.)
http://www.grafissimo.com/virtual/
but why do this in photoshop? i'd simply do it in illustrator... vectors man, vectors!
I thought this was a pretty good tutorial - too often they're just a list of instructions, and you don't really end up knowing what you're doing or why. This one was a lot better.
And why use paintshop instead of illustrator? Maybe because you have a copy of paintshop but don't have a copy of illustrator?
What a bizarre discussion. I thought this was supposed to be the most graphically-educated generation ever, but this thread seems to have attracted some outliers.
There's more to illustration than photo-realism. Just because you're using a tool called Photoshop doesn't mean everything you produce with it needs to look like a photograph.
THRUST VECTORING OWNS THE SKY
*cough*cough*
Ahem:
THRUST VECTORING OWNS THE SKY
Problem with photorealism in vector is it is damned time-consuming. A simple fork and tape measure (link below) took me hours. Had this not been for a two-color silk screen job where quality was paramount, the original photo would have done just fine.
http://www.grafissimo.com/Forkj0408856-test.jpg
I think for the most part, there aren't that many practical applications for photorealism in vector, unless you want a billboard that looks good at close range. The design costs are rather hefty. Still, people like to show off their chops.
Nelson C: It's not always about being artistic. If you are a working graphic designer and someone wants to include an image in a print catalog for a product they don't yet have, you had better be able to deliver. What's more some clients want photorealistic images because they look better than a photograph. I really don't see much of a call for fake-looking photorealism, but I'm sure we will be nostalgic for the 1990s at some point.
Shrdlu @21: Well, sure, hyper-realism has its place, too. But so does... what can we call this? Diagramatic? As others have pointed out, this is essentially technical drawing. I think that Scientific American used this style for a while, before they went all 3D graphics for their diagrams, and you can see similar style in newspapers from time to time.
So I guess this is an 8 gigabit (1 gigabyte) memory device?
Details, details.
Nelson C: I call it lazy. Then again, we all have deadlines and editors who could care less.
Shrdlu @24: Well, now you're just being nasty.