637837 - Increase mobile screen shot resolution for Press Kit photos

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Caitlin Looney]

Attachment: onetouchbookmarking_portrait

Per this bug: Bug 637518
We'd like to increase the screen shot resolution to as close to 300 dpi as we can so we can use them in the professional phone images we're getting developers for the Press Kit and features page.

Attached are 4 screen shots that we'd like worked on. I may add 2-3 more based on the phone images that come in. 

We're targeting this project to be done by Friday, March 11, so would be great to get these increased by Tuesday, March 8.

Comment 1

[Caitlin Looney]

Attachment: StartPage_portrait

Comment 2

[Caitlin Looney]

Attachment: TabbedBrowsing_portrait

Comment 3

[Caitlin Looney]

Attachment: Typing_AwesomeScreen_portrait

Comment 4

[Caitlin Looney]

Attachment: Sync Setup

Comment 5

[Caitlin Looney]

Attachment: Site Menu

Comment 6

[Caitlin Looney]

Attachment: Tab Sync_landscape

Comment 7

[Caitlin Looney]

Attachment: addons_manager

Comment 8

[Caitlin Looney]

Hey Tara - Added a few more images that need increasing for the Rev Guide. I suggest using Rhonda for all of these because she's working on the Mobile Rev Guide as well and can swag out the ones she increases into the existing guide. Plus, I want to ask her if she can photoshop out or hide the red alerts in two of the screenshots. Thanks!

Comment 9

[Tara (musingt)]

Thanks Caitlin.  So, aside from the separate bug we have to insert these into the mobile phone image, what did you need us to do with these screenshots exactly?  Is it making them print-ready? I'll have to better understand what you need, and see whether we can knock it out with Silver Orange.  S.O. is currently totally swamped with other F4 stuff.  So, not sure if I can drop this on their plate or not.  If you share more details, I can check and get back to you asap.

Comment 10

[Erica Jostedt]

caitlin can add more details but jumping in here just to mention that the updated request is high res versions of screenshots for print versions of the rev guide.

Comment 11

[Tara (musingt)]

Thanks Erica. The main thing I'm trying to understand is scope of work for S.O.

Comment 12

[Caitlin Looney]

Thanks for jumping in and clarifying, Erica.

Comment 13

[Caitlin Looney]

Attachment: FirstRun_landscape

Comment 14

[Caitlin Looney]

Tara,

Rhonda says: "I took a look at the image that was attached, and unfortunately its a bit too small for print. If possible, it would be great to get the images at about 4" x 3" at 300 dpi, or higher. Im just estimating the max size the window of the phone would be on the printed piece, but that should probably work at the size above.

Also--I can get rid of the red triangle on all of them too."

Comment 15

[Caitlin Looney]

Can we get these bumped up by S.O asap, or should we ask Rhonda?

Comment 16

[Tara (musingt)]

Hi!  Just responded to your email.  Thanks for following up in the bug as well.

So, unless Rhonda has the same phone and set up as you to take the screenshots, I don't see how she could do it (unless I'm missing something).  And it's the same for S.O.  They'll at least probably be better set up to do it, IMO.  So, why don't you ask Rhonda and see what she says first, but otherwise we'd probably have to ping S.O and see what they say

Comment 17

[Caitlin Looney]

Not sure why she'd need the phone is she has the images. Also, I thought you said we already pinged S.O to see if they could do this and how  long it would take/what's involved -- any input from them?

Comment 18

[Tara (musingt)]

No input from them yet. Yes, I did ping them as well.  I guess I"ll just comment on the bug now since we have two threads going :)

Since the images are small, she can't just scale them up.  They'd have to be re-done in bigger size and higher resolution.  Taking a small image and just scaling it up pixelates the graphic and we lose quality.  So, I believe they'd have to re-do the screenshot.  There are software programs that we can use to do this, but they usually don't work too well, depending on the screenshot.

Comment 19

[Stephen DesRoches]

Attachment: Resized Screens.

Sorry. I'm just catching up on this now. I was not being cc'd on the bug and was under the impression that an email would be sent if anything was needed.

Tara: You are right that the ideal situation would be to take a screenshot at a native 300ppi printing resolution but that would require 1200x900 pixel screen resolution to do so. Browsers typically don't look very good at that size and it creates an unnecessary amount of white space.

For the previous screenshots, we have been taking the screenshots at 1024x768 (which is a nice balanced size for the UI) and then resizing up. Here is the trick to ensure pixel sharp edges with no anti-aliasing.

using Photoshop
1. In the Image Size dialog, turn off "Resample Image" and change the resolution to 150ppi. Click ok. (this change does not affect anything but the printer output)
2. Go back to Image Size, turn back on "Resample Image" and use "Nearest Neighbor (preserve hard edges)" from the flydown list.
3. Double the resolution from 150ppi to 300ppi. This will perfectly scale the screenshot up by doubling each pixel equally.
4. If the starting screenshot was 1024pixels wide at 72ppi, it should now be 2048 at 300ppi. (approx 7"x5" of printing resolution at 300ppi)

* to confirm this. If you view the original file at 100% and the new resized file at 50% side by side. They should look exactly the same.

In terms of time for silverorange: resizing images is not as time consuming as setting up the windows and taking new screens. For example: Installing the 8 different languages and grabbing 10 windows from each took much longer then resizing them up to 300ppi after the fact.

* some of the screenshots attached were already a bit fuzzy.

* you could replace steps 1-3 by resizing 72 directly to 288ppi if you don't absolutely need the 300. The key is that the increase must be a multiple of the original.

Attached are the resized screens.

Comment 20

[Tara (musingt)]

Thanks Stephen.  Caitlin was checking on a few things in hopes of taking care of these another way, which is why I hadn't bugged you guys again.  Thanks for working on this though. Really appreciate it.

Caitlin, do you have what you need here to move forward?  Please comment.  thanks!

Comment 21

[Caitlin Looney]

Thanks. I thought John resolved this last week, apologies for any confusion. Yes, we were able to duplicated the images with a tablet so Rhonda is increasing the size to print-ready. Thanks.

Comment 22

[Tara (musingt)]

Thanks.  Closing...