General Question: How to best present websites in print?

C
Posted By
cooderbrown
Jun 29, 2004
Views
737
Replies
32
Status
Closed
If there is a better website for this type of question – please let me know!

I’m creating a portfolio and printing samples on tabloid size paper from an Epson 2200.

Screen captures have always done a decent job as long as the screen capture is printed at 100%. Typically fuzzy – but decent.

However – I’d like to put multiple screens on a page and scale to do so…

But scaling seems to make them look infinitly worse (the screen capture is a jpg or tiff)…I really want the images to look good and don’t want to leave a stone unturned.

Are there any trade secrets out there? Does anyone have some good tips?

Thanks!

MacBook Pro 16” Mockups 🔥

– in 4 materials (clay versions included)

– 12 scenes

– 48 MacBook Pro 16″ mockups

– 6000 x 4500 px

AS
Ann_Shelbourne
Jun 29, 2004
Why don’t you just make a PDF which can be downloaded from your website?
LT
Laurentiu_Todie
Jun 29, 2004
I built my site at print resolution and resampled it down for the web.
JB
Jonathan_Balza
Jun 29, 2004
However – I’d like to put multiple screens on a page and scale to do so…

Assuming that the page you are talking about is printed, and not web, then don’t resample, just change the resolution of the image. I think that should fix the problem that you are talking about. If you absolutely DO have to resample, then when you resample down, don’t use "Nearest Neighbor" interpolation. Only use that when resampling web pages up.
GB
g_ballard
Jun 29, 2004
I built my site at print resolution and resampled it down for the web.

I built my site at screen resolution and redid the pages I wanted to print at print resolution.
AS
Ann_Shelbourne
Jun 29, 2004
I think that I may have misunderstood your problem: I thought that you wanted visitors to your site to be able to print your material at better-then-screen resolution.

If you are trying to show several existing pages (from a printed document) on a single web-page: assemble your layout in Illustrator or InDesign and save for the web as a JPEG.
C
cooderbrown
Jun 29, 2004
I am creating a portfolio that encompasses 3 or 4 years of web work…to recreate at print resolution would be…a formidable task…

From now on I could create them at print resolution – the only caveat to that would be the increase cost of images buying them at print quality as opposed to a lower resolution.

I will definitely experiment with the resolution w/o resampling.

I didn’t know what tricks were out there to be had… I tried PxlSmart from extensis on a whim – blew up to 300ppi then scaled down – it was a decent result as long as you don’t look to close!

gBall – I will probably do that with sites that are feasible.

Ann – while I’m not trying to do what you are saying, I have done some cool things with that method in the past – basically faking 3d by skewing 2d images (give appearance of folders, etc.

CB
RS
Richard_Sohanchyk
Jun 29, 2004
I assume you’re trying to collect web pages to PRINT out in your portfolio to show people. Try SnapZPro. I use it to take screen shots and they come out pretty decent. I also sampe up to 150 dpi instead of 300 and it prints a little better then trying to get to 300 which usually kills the image or makes it so small you can see it anyway.
C
cooderbrown
Jun 29, 2004
Question…How would one screencapture product make any difference from another? It’s taking pictures of the same thing?
C
cooderbrown
Jun 30, 2004
Jonathon’s ideas is nails!

1 – I created a new file at 150ppi.

2- I then took my screen captures, 1 at a time and resized them WITHOUT resampling them.

3 – I drug those files into the new 150ppi file and printed out the results…

While it’s still not perfect – it blows away my previous attempts. There will just be some back and forth, adjusting resolutions, to get my sizes the way I want them.

Rock-N-Roll!

Rich – I did download SNapZ and tried it…no avail.

Thanks all! Cb
L
Larryr544
Jun 30, 2004
cooderbrown – If I understand you right you are blowing up the web content and then scaling it down. Each scaling operation whether up or down will degrade the final quality. Choose a size and DPI and then do it with Image > Image Size in PS CS.

Screen capture is a bitmap operation so simply use Grab which is part of OS X.
C
cooderbrown
Jun 30, 2004
No – not blowing up then scaling down…just scaling down from a screen grab…But, to reiterate…when I scaled down – everything blurred out – whether I did it in image size our whether I did it by scaling (I expected it by scaling)…

What I’m doing is putting 4 screen captures on 1 page. 2 are large and 2 are small, then printing out that page. I want to make them as sharp as possible without taking 2 weeks to rebuild them at print resolution.

Jonathons idea was great – however – it only works with one initial size…ONCE I set the size of the new document – everything pastes relative to that (easier to see in practice than explain online)…
What I am going to try next is to copy 2 into one document at a set resolution – copy the two others into a new document at a different resolution – print out both sets, then literally cut and paste one set onto the page containing the other set – it sounds hokey – but I’m willing to experiment for the moment.

You know, as an aside, my lack of understanding print resolution absolutely drives me batty. I have spent a 10 year career in tv then web…while I have done print – it’s limited. But i think my problem is universal. I am geared computer-wise, and have been for web, for 6 years. That means I haven’t needed a gig of ram, a terabyte of storage, or a library of high res images to draw from – we’re a small operation and I’m proud of the work I’ve done. Doing a portfolio is the absolute only time I have needed clear, sharp images – and yeah, I’m sorta frustrated, but have really appreciated all the help and suggestions so far.
Like I said, just an aside!
JB
Jonathan_Balza
Jun 30, 2004
Do you have access to InDesign or Illustrator? That would be your best option, just like Ann said, especially if you are wanting to print out multiple screenshots on a page, and make them different sizes.

The image->image size method would be great, if only you were doing just one screenshot on a page at a time. His method works, too… although it’s a little unconventional.
RS
Richard_Sohanchyk
Jun 30, 2004
Question…How would one screencapture product make any difference from another? It’s taking pictures of the same thing?

SnapZpro allows you to take a shot of just what you need. A conventional screen capture takes a shot of the entire desktop which you then need to open in a photo editing program and crop. You also have the option of choosing which format to take the screen capture: pict, eps, tif, etc. Saves a little bit of work on the back end.
P
progress
Jun 30, 2004
how many times must i say this…?

up or downsample web image using nearest neighbour and they are 100% fine. You must upsample by integer amounts ie 2x 3x 4x and down sample by diving by only 2.

no fuzziness whatsoever
C
cooderbrown
Jun 30, 2004
Jonathon & Ann:
Yes – I have both (Indesign and Illustrator) + Quark…(like I said, I have done print, just not a lot).

Tonight I will try importing into probably Illustrator and see how it works.

Should I pay any attention to the size beforehand do you think? I mean do you think it may be best to try the resolution trick – then saving the photoshop file to import into illustrator? Or do you think that the image will hold it’s integrity if I scale the full size screen capture in Illustrator?

I’ll try to fit some tests into today…
AS
Ann_Shelbourne
Jun 30, 2004
<< SnapZpro allows you to take a shot of just what you need. A conventional screen capture takes a shot of the entire desktop which you then need to open in a photo editing program and crop. >>

You don’t need SnapzPro to make screen shots of selected areas.

Cmd. Shift 4

Then drag a marquee over the precise are that you want and a PDF file called "Picture 1" will appear on your desktop — it can then be opened/placed in your applications in the normal way.
RS
Richard_Sohanchyk
Jun 30, 2004
True. I’m so conditioned to using SnapZPro for capturing motion for training videos that I automatically use it for everything.
AS
Ann_Shelbourne
Jun 30, 2004
Cooder:

If you scale the screen-shots to 50% they should print reasonably well.

However, you would do so much better if you assembled your composite page (in InDesign or in Illustrator) from the original files or scans which were used to create the web-images in the first place.
C
cooderbrown
Jun 30, 2004
Cool.

I’m very familiar with cmd-shift 3 and 4 (what got me into this mess to begin with! I’m smiling)…I was just curious if there was something magical about snapZ other than their obtrusive interface! No offense Richard…I’ve used it before!

I will build from originals whereever I can.

I will left everyone know the results.

And again. Thanks.
C
cooderbrown
Jun 30, 2004
Ann – perfect! Or as close as is reasonable based on my expectations!

Cool…this also saves me haveing to re-build.

1 – I opened my 4 original comp files in Illustrator
2 – drug each into a new file sized to tabloid
3 – scaled each but made sure that I was reducing no less than 50% 4 – printed out on the Epson 3000 at 1440 dpi

Looks like this may be a surefire recipe. I’d sure like to know how illustrator does what PS itself can’t – that’s interesting.

Now tonight I’ll duplicate the process on the Epson 2200. I keep having a problem with oversaturated and dark "blues" on the 2200 – so I’ll have to work on that. Any ideas?

Thanks everyone – this post solved my problem.
AS
Ann_Shelbourne
Jun 30, 2004
Glad that it worked:

Regarding the printing: you will do better if you send RGB files to the Epson.

And you may want to play with the Epson’s Custom settings to tweak the Cyan and Magenta inks if you don’t have a good profile for the Epson.

Incidentally, do NOT use Kodak’s paper.
R
Ram
Jun 30, 2004
you will do better if you send RGB files to the Epson

Much better!

If you send a CMYK file to the Epson the printer driver first converts it to an RGB file, then back into a different kind of "cmyk" file. Remember that the Epson 2200 is NOT a CMYK printer but CcMmYyK, seven inks, not four.
C
cooderbrown
Jun 30, 2004
GADS – I’ve been using Kodak paper…

Kodak Premium Picture Paper – tabloid size…

Why not Kodaks paper?

I’ve used it for years – however…the Epson 2200 is new this month…

and what paper would you recommend? (is there a specific type of epson paper for this type of application)

?
R
Ram
Jun 30, 2004
Cooder,

Of all the papers I have tried on inkjet printers, including my current Epson 2200, Kodak paper consistently gives the poorest results by far. I’m pretty sure you’ll find it simply unusable.
AS
Ann_Shelbourne
Jun 30, 2004
Why not Kodak paper?

Because you will get just the sort of results which you are complaining about!

[How do you think that I guessed that you might be using Kodak paper?!]
C
cooderbrown
Jun 30, 2004
Wow – you guys are fast with the responses— isn’t it 5 yet on the coast?!?

I’m in the midwest and have already fed the kids!

Again – thanks alot everyone. You’ve been extremely helpful.
R
Ram
Jun 30, 2004
Ann and I are on opposite coasts.
C
cooderbrown
Jul 1, 2004
Last question (famous last words)…

I went to Epson’s site to learn about their papers…and was overwhelmed by the choices. And the Costs!

Do you all have a personal preference?

Everthing seems to be "formulated to meet the demanding needs of the professional graphics"…that narrows my choices to about 30!

I want "kick butt" pages to place in my porfolio. Would probably be glossy stock (unless their was an argument against it – maybe a semigloss…

But $50 for 20 sheets leaves me VERY little wiggle room for mistakes. But it IS my portfolio, so I understand the investment (if it’s an overwhelming favorite amongst you all)..

But let me ask – do you all have a less expensive choice that I can run the gamut of mistakes and compositional issues on?

Let me restate the obvious – you all have been amazingly helpful, and I owe you an eternal thanks. Ramon, I think you even helped point me to the 2200 a couple months ago. It takes great folks, with great patience, to make killer forums. Sooner or later,

Thanks! Cb
AS
Ann_Shelbourne
Jul 1, 2004
My choice would be to use a glossy stock if your images are mainly photographic; and a coated matte paper if the content is more graphic or typographic.
BB
Berry_Banks
Jul 1, 2004
You could buy some sample papers at inkjetart <http://www.inkjetart.com/samples.html> and print a few different types to see what you like best.
RS
Richard_Sohanchyk
Jul 1, 2004
Kodak is junk. I made a mistake and ordered it once to save $$$. Tabloid paper costs a fortune. Absolutely kills me when I make a mistake or a client says, "Gee, that comma really bothers me, delete it and run another proof." After viewing maybe 5 bw tabloid proofs. The epson glossy 8.5 x 11 is only $20 for 100 sheets at Costco. Or is it 120 sheets now.
C
cooderbrown
Jul 1, 2004
Yeah – I’m looking around for paper now…

The inkjetart link is really cool. Thanks for that tip – once I get settled in with a comp process, I’d sure like to experiment with some artwork of my own.

The tabloid paper IS expensive (even the dreaded Kodak) – just need to get a good workflow – and get comfortable with different settings and different papers. You know – I think a person gets a little spoiled once you see tabloid printouts…maybe it’s just me – I just love seeing my work big! But I can use letter size for the pre-comp work- so thanks for reminding me.

Must-have mockup pack for every graphic designer 🔥🔥🔥

Easy-to-use drag-n-drop Photoshop scene creator with more than 2800 items.

Related Discussion Topics

Nice and short text about related topics in discussion sections