Welcome to the MacNN Forums.

brainchild2b · Oct 30, 2002, 10:13 PM

How does apple create those super high resolution screenshots that are 5mb a piece in it's media resources section? They have a gorgeous one of itunes that you can download and for print media.

How the hell did they do that? I want to be able to do something similar with my screenshots.

IEEE1394 · Oct 30, 2002, 10:36 PM

Are they really screenshots, or just mockups? I seem to rememeber that the OS X movies on their site weren't screen-captured, they were directory movies.

Mac Guru · Oct 30, 2002, 10:39 PM

They're hand rendered by Apple's advertising dept. If you zoom into 100-200% in photoshop they're OBVIOUSLY faked.

I only wish you could capture them like that.

Mac Guru

King Bob On The Cob · Oct 30, 2002, 11:02 PM

The latest Snapz Pro does a really good job of capturing them. And then export as tiff and play around with it in PhotoShop.

wataru · Oct 30, 2002, 11:39 PM

Originally posted by King Bob On The Cob:
The latest Snapz Pro does a really good job of capturing them. And then export as tiff and play around with it in PhotoShop.

That still won't get more than 72dpi. Nothing can, since things are drawn for the screen and therefore can't have more than that.

brainchild2b · Oct 31, 2002, 12:12 AM

i guess i will need to get a 24inch monitor and set it to the highest resolution and resample to 300dpi

Rickster · Oct 31, 2002, 04:50 PM

Um, that will just get you a really big screenshot, not a more detailed one. Either mock it up in Photoshop or wait for Apple to make a resolution-independent GUI architecture.

Millennium · Oct 31, 2002, 05:40 PM

Sorry to say it, brainchild, but those screenshots are fake. They're done completely by hand to make it look better.

C.J. Moof · Oct 31, 2002, 05:52 PM

Where da heck is the Media Resources part of apple.com? Their find tool doesn't know anything about it, I haven't found my way to exploring my way there, didn't see it in the site map....

TIA,
CJ

Mediaman_12 · Oct 31, 2002, 06:35 PM

Originally posted by C.J. Moof:
Where da heck is the Media Resources part of apple.com? Their find tool doesn't know anything about it, I haven't found my way to exploring my way there, didn't see it in the site map....

TIA,
CJ

They are in the 'Press' section, heres the link http://www.apple.com/pr/ theres a 'Product Photography' section for each product.

brainchild2b · Oct 31, 2002, 06:53 PM

Right it will get me a bigger screenshot which translates into better looking when i resample it to 300dpi for printer output (only because it gets smaller than screen size)

drmbb2 · Oct 31, 2002, 06:55 PM

LISTEN to Wataru and Rickster - a SCREENSHOT, is, by definition, at 72 dpi

Sorry

We get this so much at work, it's just annoying. Yes, you can "dress them up" in photoshop or whatever, but the underlying resolution is fixed.

brainchild2b · Oct 31, 2002, 07:38 PM

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

spiky_dog · Nov 1, 2002, 03:10 AM

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

You have thought this out enough to realize that this method won't work because the menu bar, palettes, and all interface elements will be inordinately small, right? To get this to work you'd need an interface all drawn with vectors along with a high res monitor... sort of like that high res IBM display project which I'm too lazy to find the link for (200 dpi! iirc)

DeathMan · Nov 1, 2002, 04:01 AM

It doesn't matter if you have a screen that will go up to 24,000X20,4800, The biggest you're going to be able to make an icon is 128X128. That's the limit. Otherwise you're faking it w/photoshop and it shows.

The point is is that it doesn't matter how good the resolution on you screen is, you could get the same results on a 640X480 monitor. The icons just look bigger, they are still the contain the exact same amount of data. There will be zero benefit to having a bigger or better screen.

brainchild2b · Nov 1, 2002, 10:37 AM

I know everything will be super small and basically it will be a screenshot full of desktop pattern. I'm not trying to capture anything in particular Just a big page of screen for a cover sheet. Thanks everyone for your input!.

mrwalker · Nov 1, 2002, 01:36 PM

I love all this DPI stuff!

I get loads of publicity request for a company I work for. A typical conversation is:

Them: "Can you send us images at 300dpi?"
Me: "How big are you going to print them?"
Them: "We print them at 300dpi."
Me: "I can make any image 300dpi, but it might end up the size of a stamp. DPI is a density, not a print size. You have to tell me how big the output is going to be or the DPI setting is irrelevent."
Them: "Urgh, just send whatever you have."

In the end I send the same stuff on CD.

When I'm printing images from computer screens, I normally increase the image size in photoshop by factors of 2 with the resample box unchecked. That way you send more information to the printer and get nice sharp edged pixels. That's how it looks on a good flat panel monitor, I like it to print like that too.

-mrwalker

codywalton · Nov 1, 2002, 03:30 PM

Them: "Can you send us images at 300dpi?"
Me: "How big are you going to print them?"
Them: "We print them at 300dpi."
Me: "I can make any image 300dpi, but it might end up the size of a stamp. DPI is a density, not a print size. You have to tell me how big the output is going to be or the DPI setting is irrelevent."
Them: "Urgh, just send whatever you have."

In the end I send the same stuff on CD.

Whoa... that just gave me Deja Vu. I think I've had that conversation with 100 different clients.

tooki · Nov 1, 2002, 05:03 PM

It may very well be possible to take vector screen shots. Years ago, there was a special screen capture shareware that, instead of taking a screen shot from the frame buffer, took it from the QuickDraw commands used to draw the screen. You got beautiful printouts from it. (That was in the days of System 7. I have no clue what that app was called, and I doubt it's on the net.

)

No doubt someone could write a similar program for OS X that makes a vector PDF of the screen.

tooki

diskobolos · Nov 1, 2002, 06:04 PM

Originally posted by brainchild2b:
How does apple create those super high resolution screenshots that are 5mb a piece in it's media resources section?

Did you see the recent Jaguar ad that shows a huge hi res dock and has some lame headline like "It's like a whole new mac for $129..." it's been running in Time.

Apple does horrible lame pathetic print ads. They come out with a new OS that has so much you could say about and the only thing they come up with is some lame ass recycled line about how it's like getting a new mac. I remember seeing the same line for OS 9 but I think the price was $99 back then.

I hope chiat didn't do that ad because it sucked and apple should fire it's internal ad team.

aleph_null · Nov 1, 2002, 06:49 PM

Originally posted by tooki:
It may very well be possible to take vector screen shots. Years ago, there was a special screen capture shareware that, instead of taking a screen shot from the frame buffer, took it from the QuickDraw commands used to draw the screen. You got beautiful printouts from it. (That was in the days of System 7. I have no clue what that app was called, and I doubt it's on the net. )

No doubt someone could write a similar program for OS X that makes a vector PDF of the screen.

tooki

yeah, that would work very nicely for any path-rendered graphics in X. those are resolution-independent graphics, just like circles, rounded rects, and so on were in QD. but much of aqua is based on single-resolution bitmaps. probably the UI guys at Apple built very high-rez versions of all the UI elements, spit out downsampled tiffs for the final OS resources, and use higher-rez copies for the media materials.

if i recall correctly, IRIX had (has?) UI elements that were in fact resolution-independent.

aleph_null · Nov 1, 2002, 06:50 PM

Originally posted by aleph_null:

probably the UI guys at Apple built very high-rez versions of all the UI elements, spit out downsampled tiffs for the final OS resources, and use higher-rez copies for the media materials.

actually, now that i'm looking at the downloaded images ... nope. they look pretty faked. how silly.

blixa · Nov 1, 2002, 06:57 PM

On a related note: In the NeXT and Rhapsody days, you could open an application's nib in Interface Builder, add a button, and connect it to the window's print: action. This would produce nice high-res versions of that window (except it had this stupid button you just added :) ). This was great fun for about half an hour.

I haven't tried it on OS X > X Server 1.0, so I don't know if it still works, but I bet it does. This would only work for Cocoa apps, though. Also, Aqua is much more bitmap-oriented, so I doubt most of the interface elements would scale up nicely like they did in the NeXT days of boring rectangles. I would be unsurprised if the window titlebars and stuff looked nice and sharp like in those apple pr "screenshots".

Originally posted by tooki:
It may very well be possible to take vector screen shots. Years ago, there was a special screen capture shareware that, instead of taking a screen shot from the frame buffer, took it from the QuickDraw commands used to draw the screen. You got beautiful printouts from it. (That was in the days of System 7. I have no clue what that app was called, and I doubt it's on the net. :( )

No doubt someone could write a similar program for OS X that makes a vector PDF of the screen.

tooki

chris.p · Nov 1, 2002, 07:54 PM

what part of the os are you trying to take a picture of? if its just the desktop, it would be easy to fake in photoshop or illustrator- all you need is a stripey bacground for the interface elements (easy) lucia grande for the menu headers (easy) and illustator to make the menu items (they are silohettes- easy) app screen shots would be a different matter on the other hand...

WJMoore · Nov 2, 2002, 12:16 AM

Originally posted by blixa:
On a related note: In the NeXT and Rhapsody days, you could open an application's nib in Interface Builder, add a button, and connect it to the window's print: action. This would produce nice high-res versions of that window (except it had this stupid button you just added ). This was great fun for about half an hour.

I haven't tried it on OS X > X Server 1.0, so I don't know if it still works, but I bet it does. This would only work for Cocoa apps, though. Also, Aqua is much more bitmap-oriented, so I doubt most of the interface elements would scale up nicely like they did in the NeXT days of boring rectangles. I would be unsurprised if the window titlebars and stuff looked nice and sharp like in those apple pr "screenshots".

Nice tip! I tried it out on one of my programs (the print button it the round one in the top right corner) and it ceratinly did work. The screenshot/printout does indeed contain some non-bitmap elements such as the group boxes and all text. All other UI elements are bitmapped though.

Wesley

Moonray · Nov 2, 2002, 07:28 AM

Originally posted by brainchild2b:
lol trust me i know. I work in DPT. ...

Department of Parking and Traffic? Nice to hear you guys are allrounders

-

Mithras · 10:23 AM

It works!

Here's a zoomed-in view of Apple's calculator. I just followed blixa's instructions by adding a button to the calculator window, and attaching it to the window's print: action.

[EDIT: took the giant picture out of the window.]
[ Click here to see the hires screenshot ]

There are some funny artifacts, like the black splotches in the corners, and the lines that cross the whole picture.
And like WJMoore said, the widgets will still be bitmapped, so they get blocky when you zoom in on the PDF that the print button produces. But you can make up some hi-res Aqua gelcaps pretty easily, and most of the rest looks fine.

I wonder if Apple could modify the Universal Access Zoom feature so that fonts are increased in size ala PDF/Postscript, rather than treated as bitmaps? That would be pretty amazing.

Judge_Fire · Nov 2, 2002, 02:15 PM

It's PPI!
There is no 72!

J

Richyfp · Aug 9, 2003, 11:09 AM

With the addition of PDF 1.4 to Panther's Preview.app, are we any closer to getting PDF screenshots that have editable text and vector paths??

Also, does Quartz in Panther use the full PDF 1.4 specification and is there any news on support for PDF 1.5 (Acrobat 6) format?

JLL · Aug 9, 2003, 11:38 AM

Originally posted by Richyfp:
With the addition of PDF 1.4 to Panther's Preview.app, are we any closer to getting PDF screenshots that have editable text and vector paths??

No, and what does PDF 1.4 have to do with it?

Richyfp · Aug 10, 2003, 07:13 AM

Originally posted by JLL:
No, and what does PDF 1.4 have to do with it?

Nothing per se, but the fact that Apple are making changes to Quartz may signal a change in the screencapture utility.

Some justification of your "no" would also be nice...

voodoo · Aug 10, 2003, 08:16 AM

Originally posted by JLL:
No, and what does PDF 1.4 have to do with it?

always the smartass huh?

JLL · Aug 10, 2003, 10:34 AM

Originally posted by Richyfp:
Some justification of your "no" would also be nice...

A screen grab is, well, a screen grab of what is shown on screen (which is a bitmap), and that's not meant for editing.

If you save a PDF by using Print, the text is selectable though.

LightWaver-67 · Aug 10, 2003, 10:46 AM

As others have said:

A screen-grab is a screen grab. A 20 pixel by 20 pixel widget will always remain 20 x 20 no matter WHAT desktop resolution you are set to... it will just seem relatively larger or smaller to the resolution.

Having said that... it's irrelevant to what rez you do the screen-shot at... you can just increase the resolution (shrinking absolute size) in P-Shop... but that's not gonna help you gain Hi-Rez anythng.

Again, as noted before... those High-Rez, print-ready images of apps & windows are mock-ups based on the actual source images. I'm sure that before they are ever shrunk-down to a widget size, they are designed at a higher rez.

I'm willing to bet that there are Hi-Rez PShop or Illustrator files of almost every TYPE of element floating around in the Apple design department... they just composite together those elements for print stuff.

Sorry for stating and re-stating what others have said... but all this talk of resolutions & stuff went astray for the original intent of the question: "How does Apple get those Hi-Rez screenshots...?" They don't. They make them from scratch.

Richyfp · 10:58 AM

Originally posted by JLL:
A screen grab is, well, a screen grab of what is shown on screen (which is a bitmap), and that's not meant for editing.

If you save a PDF by using Print, the text is selectable though.

OK, maybe not for editing, but it's possible to secure a PDF such that editing is not possible, but copying is, right?

I just think that would be a handy and very cool addition to the OS, especially if you could configure the PDF with all the font embedding, security and compression features that are available from the PDF format. Could all be configured through a preference pane or from Grab.app. Oh well...

LightWaver-67: I understand the whole resolution argument, but I'm not wanting an increased resolution, just text that is selectable on Adobe/Acrobat Reader and the various compression and security features. I just thought that this was a fitting thread to post in.

version · Aug 10, 2003, 10:57 AM

Originally posted by aleph_null:
yeah, that would work very nicely for any path-rendered graphics in X. those are resolution-independent graphics, just like circles, rounded rects, and so on were in QD. but much of aqua is based on single-resolution bitmaps. probably the UI guys at Apple built very high-rez versions of all the UI elements, spit out downsampled tiffs for the final OS resources, and use higher-rez copies for the media materials.

if i recall correctly, IRIX had (has?) UI elements that were in fact resolution-independent.

yup, IRIX has some lovely GUI features that have been there for years, Apple would do well to pinch some of them.

MindFad · Aug 10, 2003, 11:55 AM

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.

MindFad · Aug 10, 2003, 12:05 PM

Well, I tried again at a lower quality (so it would go faster), and it worked like a charm. For the higher quality (if you have the patience or hardware -- it takes awhile), trace the image at 10 color threshold and 1 pixel setting. Then export as an Illustrator document (exporting as EPS crashed me). Weee, fun.

Jan Van Boghout · Aug 10, 2003, 01:11 PM

Originally posted by MindFad:
Well, I tried again at a lower quality (so it would go faster), and it worked like a charm. For the higher quality (if you have the patience or hardware -- it takes awhile), trace the image at 10 color threshold and 1 pixel setting. Then export as an Illustrator document (exporting as EPS crashed me). Weee, fun.

Do you have an example for those of us who don't have Flash?

I'd like to see

Skywalkers new Hand · Aug 10, 2003, 01:51 PM

I don't see how you could as everything on your screen is 72dpi.

You are going to have to fake it from scratch if you want high rez.

For example, enlarge your icons to 128 take a screengrab then shrink them down to a normal size for your mockup.

superblue · Aug 10, 2003, 09:41 PM

Originally posted by MindFad:
If you don't want to go with mocking it up yourself, have you tried tracing the bitmap in Flash?

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

LightWaver-67 · Aug 11, 2003, 12:44 AM

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...!!!

Phoenix1701 · Aug 11, 2003, 07:08 AM

So... beautiful... must... touch...

You do, of course, realize that you've now posted a mockup of something interface-related on the MacNN forums, and will therefore be compelled and cajoled and basically annoyed until you do a full-screen shot with all manner of nifty controls and widgets. Think of it sort of like a high-resolution Aqua theme. Consider this your first cajoling... ye flipping gods that's beautiful work!

LightWaver-67 · Aug 11, 2003, 07:55 AM

If you only knew how quick & easy that was.

Any designer on this forum is capable of doing that, if not MUCH better. But thanx for the kudos. And here I was thinking it looked heinous because I didn't spend any time getting the colors to be exact or making a 'decent' brushed metal texture...

no full-rez, full-window stuff for me. I'm all-about the tease. Hehehe... I got the ball rolling, but others here have much more time to bang-out something like that.

G'day... Peace...!

Developer · Aug 11, 2003, 08:00 AM

Originally posted by LightWaver-67:
If you only knew how quick & easy that was.

Can you give a tutorial/walkthrough? This looks

great!

LightWaver-67 · Aug 11, 2003, 02:28 PM

Originally posted by Developer:
Can you give a tutorial/walkthrough? This looks great!

Well, again... thanks for the kudos... but it's really no-biggie. If I find some time this week... I might show a down & dirty step-by-step of how I did it... but it takes about 10-times as long to build a step-by-step walkthrough and host it, as opposed to the actual DOING of it... so don't be surprised if I don't get to it right away...

I'll strongly consider it though. Unless Adam or someone else want's to step-up and do it...?

Later...

awaspaas · Aug 11, 2003, 04:40 PM

How about just posting your Illustrator file?

LightWaver-67 · Aug 11, 2003, 06:24 PM

Originally posted by awaspaas:
How about just posting your Illustrator file?

It's roughly a 1MB file (because of the embedded images) but here it is. Pretty straight forward.

http://www.rockkstar.com/widgets.ai

Or click this

Enjoy...!

Mediaman_12 · Aug 11, 2003, 06:48 PM

Originally posted by LightWaver-67:
It's roughly a 1MB file (because of the embedded images) but here it is. Pretty straight forward.

http://www.rockkstar.com/widgets.ai

Or click this

Enjoy...!

<off topic> well I didn't now that would happen. That freeware OSX PDF plugin there is had a bash at opening that .ai file in a safari Window
mental note: right click .ai files when downloading them from a web link.
</off topic>

awaspaas · Aug 11, 2003, 07:22 PM

Open the pod bay door, Hal.

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