[Superchicken]

Originally posted by LightWaver-67:
Here's what it looks like when I zoom into MY screenshots:



heheheh...

Just kidding... that was a quickie Illustrator mock-up... but If I can do that (without auto tracing) in 10-15 minutes... you can do some kick-ass stuff if you take your time and do it right.

Mine was quick & dirty, but you get the point.

Have fun with it...!!!

I noticed the colour was off, BUT that is awsome man... you do that with Ilistrator? Hmm some day I'm gona have to bother to learn that App. I can do tons in Fireworks, Photoshop I focus mainly on colour correction since all I've got is Elements... but man... you tottaly put me to shame graphics wise... good thing I'm gona be a pastor

[moki]

Originally posted by brainchild2b:
lol trust me i know. I work in DPT. I'm just going to take the image really large in 72dpi then when i resample in 300dpi the QUALITY will not get better but the picture will still fill my 8x10 page. The only reason it will look better than with 72dpi is simple because the image elements will be smaller.

I realize you can't make 72dpi have more detail just because you upsample

That's correct. People who purchase Snapz Pro X from us sometimes ask us that question to. When you're starting with a 72dpi bitmap, it isn't possible to get more resolution than you started with.

Years ago for MacOS 9, I wrote a little something that captured the QuickDraw commands and allowed you to get object-oriented screenshots. This meant that fonts printed out at high resolution, etc. -- but it was never released due to issues with it.

I've looked into whether this was possible under OS X, and it may be -- but the problem is that much of what you see on the screen is rendered with bitmaps that have no more than 72dpi to start with.

So you're not suddenly going to get, for instance, Aqua scrollbars that look better printed because the bitmaps that make them up are 72dpi to start with.

What you can try doing, though, is using Snapz Pro X to take a screenshot and scale it to 400% with Snapz Pro X. Snapz Pro X does a pretty good job scaling screenshots up... then in your page layout program, use those source images and scale them down 400%, and they'll look pretty good printed out.

[LightWaver-67]

Originally posted by awaspaas:

(p.s. thanks a lot for the file, I learned a lot!)

My pleasure... see how easy it is once you see the source file(s)...? Just a few gradients are all you need.

enjoy...

Keep in mind... there's SO much more that can be done... that was just a "quickie" hack-job... but you see now how EASILY the Mac design department can create Hi-Rez mock-ups of their UI stuff.

[MindFad]

Originally posted by superblue:
Why on earth have you brought Flash into this? If you want to trace bitmaps into vectors - Freehand is your tool.

Sure, plenty of apps can do it. It was all I had, and I was giving an example of how you could use, not because you had to use Flash. Look, you made me go and use a "rolleye."

[MindFad]

Well, here's the 9x8 300DPI traced image I attempted. I didn't realize the pixels wouldn't scale as well when vectorized. I guess that would still print out chunky, then? I dunno, I tried.

Image (761K)

And if anyone wants to play with the Illustrator file: mail.sit.

At least you can technically make it as big as you want. Well, good luck. Mockups never hurt anyone.

[Don Pickett]

Originally posted by MindFad:
If you don't want to go with mocking it up yourself, have you tried tracing the bitmap in Flash? Lower the threshold and pixel length, you might lose a tad bit of quality and have to redo your text, but it would be resolution independent. I'm trying that now, but Flash isn't dual aware apparently, and it's taken like 8 minutes with a 1056x792 screenshot.

Oooh, it finished. AND UNEXPECTEDLY QUIT ON EXPORT. SON OF A BITCH! Well, it worked at least. Practically every pixel turned into a vectors. Text within widgets was fine, and I would've only have to fix the text on plain white areas. Stupid ****in Flash.

From experience, all the fake screen shots are done in Photoshop. During the dotcom boom I got paid to do this a few times: some company wants a mock-up of their app to look nice and pretty on a website and me and a few others would spend a week or two in Photoshop "making" the app. Talk about yer layers.

[Developer]

Originally posted by LightWaver-67:
http://www.rockkstar.com/widgets.ai

Or click this

Enjoy...!

Thanks. Unfortunately I don't have Illustrator to open it and the Photoshop rendition is not very illustrative (except looking gorgeous again).

It would be really great if you'd eventually would find the time to make a step by step guide on how you did it. I believe this would be of general interest.

[Phoenix1701]

It's not so much the technical prowess that impressed me (though you certainly have that -- I don't know Illustrator nearly as well as I'd like. I think you did most of those nifty looking effects with gradient meshes, but I haven't a clue how to make those!) as much as the attention to detail. The fact that you didn't make the sunken border around the back/forward arrows as thick as the separator, because optically it looks thinner, for example. Also, I think the JPEG artifacting helped you out a bit; in the original, it looks rather like the sunken border around the widgets isn't just a straight linear gradient, but rather that it's darker on the outside, adding another realistic touch. In the Illustrator file, though, it *is* just a straight gradient, so...

But yeah, a tutorial would be nice. *grin*

[LightWaver-67]

Originally posted by Phoenix1701:
It's not so much the technical prowess that impressed me (though you certainly have that -- I don't know Illustrator nearly as well as I'd like. I think you did most of those nifty looking effects with gradient meshes, but I haven't a clue how to make those!) as much as the attention to detail. The fact that you didn't make the sunken border around the back/forward arrows as thick as the separator, because optically it looks thinner, for example. Also, I think the JPEG artifacting helped you out a bit; in the original, it looks rather like the sunken border around the widgets isn't just a straight linear gradient, but rather that it's darker on the outside, adding another realistic touch. In the Illustrator file, though, it *is* just a straight gradient, so...

But yeah, a tutorial would be nice. *grin*

Ummm... again... this was a 'quickie' that I 'threw-together' to make my point. By NO MEANS was this an attempt to accurately replicate the UI. It was merely to show that Hi-Rez mock-ups can be done very quickly.

If I really wanted to accurately portray the elements, I'd have done things a bit different. I used "simple" gradients for this demonstration, but had it been a "real" client, I'd have done more complex design and used BOTH Illustrator & Photoshop.

Now... I know you were just being light-hearted... but I just wanted to clarify that I am fully aware of all the flaws & inconsistencies in that example.