Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

web design vs. print design

how much of a transition is this?



8:46 pm on Jun 24, 2004 (gmt 0)

10+ Year Member

I have a client that I have done web design for. He recently asked me if I would take care of some of his printed work too. Right now, it's just a small ad for a magazine but there could be more later. ALL the graphic work I have ever done has been intended for use only on the computer.

The ad specifications sound easy enough to set - it's a 4 5/8" W x 2 3/8" H four color cmyk ad.

I'd like to take it on but before I agree, I want to make sure I don't run into problems and produce shoddy work.

Does anyone here do both web & graphic design and know of potential problems I can run into jumping into this new medium I know next to nothing about? Any tips for making the transition?


12:35 pm on Jun 25, 2004 (gmt 0)

10+ Year Member

I routinely work in both print and web. A common problem I encounter is when someone doesn't understand image resolution.

On the web, images are displayed at 72 pixels per inch. For print you will need to set your images at 300 pixels per inch for photographs and scanned artwork, and 600 pixels per inch is the recommended minimum resolution for highly detailed line artwork. Note that these numbers are "rule of thumb" and individual needs for any particular project or piece of artwork may necessitate different settings.

Of course, if you're using scalable vector graphics this is not as much of an issue.

Second thing I encounter is ignorance of color models - all the time I see people submit artwork as RGB (for monitor) colors instead of CMYK or Pantone spot colors (for print only).

Finally, learn how to make a printer-freindly PDF document, using your chosen printing company's press specifications (preferred image resolution, font embedding, et al). A properly formatted PDF will eliminate hours of headaches when it comes to reproducing your documents in print. Your chosen printer should be able to provide you with the proper PDF settings and how to install them in Adobe Acrobat.

One more thing - improve your proofreading skills! Catching a typo on a webpage after launch may be embarassing, but it's easy to fix. Catching a typo after a full color print run is embarassing and *expensive* to fix.


11:19 pm on Jun 25, 2004 (gmt 0)

10+ Year Member

Thanks for the tips!

One thing I'm not sure about: I'm allowed to use 4 colors. When I think 4 colors, I think colors not including black, white, and shades of grey. Is this what they mean, or does it include black + greys. For example, when I save for the web in photoshop only using 4 colors, it counts the blacks and greys as colors. I called the magazine to ask them this directly but they haven't returned my call yet.


11:30 pm on Jun 25, 2004 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

4 color process = CMYK (Cyan/Magenta/Yellow/Black). Thousands of colors can be achieved using the CMYK color model. Same goes for the RGB color model. When you save for the web in Photoshop, I believe it automatically converts CMYK to RGB as that is what is required for the web.

4 colors = Usually any combination of Pantone spot colors (from the Pantone Formula Guide previously known as the PMS Guide (Pantone Matching System)). Typically you'll see this type of printing in silkscreen processes.

You cannot take a 72 dpi image and increase the resolution to 300 while constraining proportions. Although you can take a 300 dpi image and scale it down to 72 dpi with no loss in quality. Remember, it is always easier to scale down than to scale up when working with Raster based images.

With Vector art (outlines), you can scale up or down to any size as there is no loss in image quality due to everything being in outlined format. Vector based art is usually generated in Adobe Illustrator and is required for all print jobs when dealing with spot colors (for color separations).

From this point forward, you should be developing designs at 300 dpi CMYK and then converting them for the web. It is much easier to work backwards from print to the web. It will be a transition to take all of the previous web and convert it to print as you'll have to redo everything in hi-res.


11:51 pm on Jun 25, 2004 (gmt 0)

10+ Year Member

4 color process = CMYK (Cyan/Magenta/Yellow/Black). Thousands of colors can be achieved using the CMYK color model.

Thanks, I understand this but the way my client worded it to me was this:

It's a horizontal ad that is 4 5/8" W x 2 3/8". I'm allowed up to 4 colors. They can take the following file formats: Quark, Photoshop, Illustrator, & Pagemaker. Color images must be saved in CMYK mode.

It could have been a misunderstanding on his part if they meant 4 color process though, and not a limit of 4 colors allowed to be used in the ad. I should probably wait until the magazine returns my call and get the specs directly from them.


12:35 pm on Jun 28, 2004 (gmt 0)

10+ Year Member

Usually, when someone says 4 colors, they mean 4-color process, or CMYK. As you already know, this is full-color printing.

But I would not assume anything based on what the client said, as clients are generally pretty ignorant when it comes to artwork specifications and will frequently get something confused. I would wait until the publisher returns your call.


1:50 pm on Jun 30, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Apart from the large difference in resolution and the output being subtractive, knowing cross platform issues is handy. Particularly from MAC to PC. MAC's tend to handle PC files better. PC's just dont get MAC files - thanks bill! That's the tendancy. Files like GIFs and JPEGs are not a problem but more complex quark illustrator and PSD files can be useless translated across the two.

Get a good grip of both operating systems as this will help you produce better sites especially when you are transferring data from print to web media (which might mean from MAC to PC).

I would study colour models too. Know the difference between RGB, LAB, CMYK, HSV and CIE.




12:27 pm on Jul 1, 2004 (gmt 0)

10+ Year Member

Limbo brings up a good point about MAC vs PC. Most of the time the issue is font incompatability. But then again, this goes back to my earlier advice about making solid PDF files - if you can make a press-ready PDF with all fonts and images embedded correctly, you will not have to worry about most cross-platform issues.


1:05 pm on Jul 1, 2004 (gmt 0)

WebmasterWorld Senior Member leosghost is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

the upto 4 colors is because some printers now use more than the Y/M/C/B model that we are all used to ...someone here on WebmasterWorld is a printing and printers guru ..might be pmkpmk or a similar nic ...there was a thread where they explained it so well that I'm not even gonna try ....

BTW don't worry most people make the transition from web to print far better than from print to web ...

What was said earlier about typos is the first law ...

Best is to have at least 3 people other than yourself check your text for typos ....

( I just found one on the new beta MSN search page "about" ...they can correct it real fast cos its a web page ...were it a page in print and in production /distribution they would have just annoyed most of the 60 million inhabitants of France ...and they'd look "mega mega dumb" ..for now you can let them off with just one "mega".


1:56 pm on Jul 1, 2004 (gmt 0)

10+ Year Member

In respect to your first post, I have been wondering the same thing recently.

I have just been offered a job as a graphic designer for a company to produce all of their catalogues, flyers etc. However although I have been trained in all of the relevant programs I feel I am more of a web person, used to designing the interfaces for cd-roms and presentaions etc. I'm concerned that the two are different things and I won't be able to make the change.

I found this an interesting read recently... [andybudd.com...]

It talks about the web being information design, but imo that is what catalogue production etc is anyway. Hopefully I'm write and its just my nerves playing havoc.


2:08 pm on Jul 1, 2004 (gmt 0)

WebmasterWorld Administrator rogerd is a WebmasterWorld Top Contributor of All Time 10+ Year Member

I do think that layout skills can be quite different for print vs. web. Web designers tend to be less exacting on layout since their design will be compromised by different browsers, screen resolutions, etc. A print designer who specializes in magazine ads, catalog covers, etc. knows that what he/she designs will be printed exactly that way, and hence will spend time tweaking the position of elements, choosing and sizing the font down to the decimal size, etc.

I think a good designer can work in both media without much difficulty. However, understanding the different limitations and technologies takes a bit of time.

For a web designer transitioning to print, I'd recommend spending time looking at good examples of print design - fashion, architecture, and design magazines; high-end catalogs; billboards, and other stuff. See what works for you and would be appropriate for the industries you work in.


5:31 pm on Jul 1, 2004 (gmt 0)

10+ Year Member

I do both web & print.

The magazine is referring to four color process, CMYK, as stated above.

Pantone Matching System puts out a nice swatch book which will show you how colors will look in CMYK, instead of just guessing.

If you are using a layout program, such as Quark and PageMaker, be sure to remember to give the magazine the fonts. If you decide to do it in Illustrator, change the fonts to Outlines, and this is not a concern in Photoshop.


8:19 pm on Jul 1, 2004 (gmt 0)

10+ Year Member

" and this is not a concern in Photoshop"

That's not true: I get clients sending me Photoshop files with missing fonts on a regular basis.


11:41 pm on Jul 1, 2004 (gmt 0)

10+ Year Member

Yes you will need the fonts for p/shop too unless it has been flattened.

I notice InDesign wasn't mentioned...


Featured Threads

Hot Threads This Week

Hot Threads This Month