Web design to print design
Web design to print design.
This section is aimed at web designers who wish to get into designing for print. Some knowledge is assumed when dealing with graphic formats and the various software packages available.
The following tips are aimed at people already creating websites etc. but have no knowledge of what is required in the field of commercial printing. Actually, there is a vast difference between the two. Designing artwork to look good on a user’s monitor is fairly straightforward compared to the technicalities of getting the same artwork into print. Commercial print will require you to have a working knowledge of such issues as: bleeds, trapping, colour correction, screen resolutions (not monitor screens), tints, spot colour, process colours (CMYK), interpolation, pagination, a working knowledge of printing presses, spot UV varnishing and many other issues.
However, do not be put off by the above as, with any job, your knowledge will expand with experience.
When designing websites, always create high resolution imagery.
If you are not doing so already, then get into the habit of producing any bitmap (pixel-based) artwork to at least 300dpi. This may seem very obvious to many of you, but the amount of so-called, print-ready files I’ve received from web designers created at 72dpi is surprising. You probably already know that if a client has asked for a particular image to be enlarged then that can cause you a problem, as pixel-based images (jpegs, tiffs, gif’s etc.) don’t take kindly to this process. OK, Photoshop will let you ‘up’ the image from 72 to 300dpi but it does this using ‘interpolation’, which is a big word that describes the adding of similarly-coloured pixels around an image. This is a big no-no for web and print design.
Start your workspace in Photoshop, or your preferred pixel-based program at 300dpi. Many designers prefer to set the workspace to at least twice the anticipated final size. When the artwork is complete, make a folder named ‘hi-res artwork’ for instance, and save all your original, double-sized images in there. Should the client ever want anything enlarging, then you have the perfect source file ready and waiting.
If your main working tools for web design are Macromedia Dreamweaver & Fireworks, then I would suggest you invest in print-friendly programs such as: Adobe Illustrator / Photoshop, Macromedia Freehand (similar to Illustrator) and, if the budget allows: either QuarkXpress or Adobe In-Design for layout purposes.
Fireworks users: many designers send their print-ready files as FW .png’s. I won’t go into the ins and outs of this file format but would recommend you do not use Fireworks for print purposes. It causes a lot of problems, but is brilliant at what it was designed for – web design.
- Always set your workspace to 300dpi when working with pixel-based software
- Make your images larger than needed, in case the client requests the image to be enlarged
- Store all hi-res files separately from your working files
- Garner a working knowledge on the issues of spot colour & process colour (very important!) . . . more on this HERE
What software will I need?
The average commercial print shop will carry three main programs – one for pixel-based work, one for vector-based work plus a page layout program.
Pixel-based work - Adobe Photoshop is by far the most popular and arguably the best program for this type of work. Web graphics are generally in RGB format, which is the format used by a computer screen to display colours. For print, the mode will need to be changed from RGB to the CMYK colour space. Photoshop is ideal for creating graphics for brochure / flyer work and a host of other print-related tasks. It is also ideal for checking graphics that have been supplied to you such as: the Image Resolution (File menu>Image>Image Size) and the existing Colour Mode (File menu>Image>Mode).
What to do if you have been supplied a low-res (72dpi) file.
First thing you need to do is check the image size (File menu>Image>Image Size).
If the image is larger than the final size it is to be printed at, then it may just be usable. Reducing the size of a pixel-based image has the same effect as upping the resolution. However, tread carefully and maybe send the image to your print supplier for checking first.
Tip! If an image is below 300dpi and has any text included, then I would recommend not using this image.
If the low-res image is a photograph, and the final printed size is quite small, then in the majority of cases you can get away with this. Digitally-printed work seems to be a little more forgiving when using low-res graphics.
Important: if your client has specified to you that he/she wants a 2 colour job designing, then it’s best to steer away from a pixel-based program such as Photoshop. This type of program can not separate colours independently from each other (it can, but needs an experienced user to take advantage of this fact). Generally speaking, you will only be able to produce pixel-based artwork in CMYK, i.e. a 4 colour process. If you need to produce spot colour work, then please read the ‘vector-based’ section below.
Vector-based work
You have a little more choice when it comes to choosing the right vector-based software for your needs. Adobe Illustrator and Macromedia Freehand are both excellent products. The beauty of this type of program is that you don’t need to worry about resolution as both programs use mathematical descriptions to ‘draw’ lines and shapes that are not pixel-based. This means you can design a graphic at any size and it can be enlarged to absolutely any size you wish. This format is perfect for designers who wish to break into the exhibition / signage market.
Another big ‘plus’ is the fact that colour control is far greater than a pixel-based solution. Spot colours can easily be chosen, and just as importantly, edited. So, if your client has asked you to design a 2 colour job, you simply select the 2 required colours from the Pantone swatch, save the file in .eps format and send to your print supplier. He can then load the file and instantly see the 2 colours that need to go on the press to produce the job. When the file is ouput to an imagesetter (a high-resolution device that produces film, or more commonly these days will actually produce the plate that is attached to the press), then the imagesetter will ‘see’ the 2 colours, and produce film, or a plate for each.
Tip! Before sending your eps file away for printing, make sure you have selected your colours, (if the job is a spot colour one), from a Pantone swatch. If the job ends up being produced in 4 colour process, then it’s easy for your print supplier to convert the Pantone colours to CMYK. The other way round can be more difficult. Always use the same type of swatch. Don’t use one colour from Pantone Coated and another from Pantone Uncoated. It doesn’t matter which you use, as long as the colours come from the same swatch.
If you deal with a lot of text, brochures, manuals, multiple business card names etc. then you may find the vector-based programs are quite fiddly to use. This brings us neatly to:
Page layout programs
If your budget can stretch to page layout program, as well as the above type of programs, then you will have a very powerful suite of tools at your disposal. Again, choice is limited but the market is led by QuarkXpress and Adobe In-Design.
Let’s assume you’ve landed a job where the client has asked you to produce a brand new logo, company brochure & website that reflects the content of the brochure.
For simplicity, let’s also assume you have the following tools: QuarkXpress, Photoshop & Illustrator.
First thing you need to do is determine how many colours are involved. You ask the client if there will be any colour photos in the brochure. (Remember, not all brochures are 4 colour, many are 1, 2 or 3 spot colours, which can help keep the printing costs down).
OK, the client affirms there will be colour pics used. This means we can design the main background images in Photoshop without worrying about colour-separation issues. Just remember to set your workspace at actual size of the finished brochure, set the dpi to 300 and the colour mode to CMYK. If any of the artwork goes right to the edge of your workspace, then you need to overhang this (bleed-off) by 3mm, wherever it touches the edge.
Next, and this is very important to your client. Because the brochure is being produced in 4 colour process, don’t assume you can design the logo in the same format. Ask your client if he/she will be having stationery produced from your artwork. If so, and that is generally the case, check to see how many colours he/she would need. 4 colour printed stationery is quite expensive, so your client may decide to have this all produced in 2 spot colours. If so, the logo will need to be designed in a vector-based program, as the logo file will need to be supplied to your client’s preferred print supplier in a print-ready, colour-separable state.
Tip! At this stage, as it looks as though we’re going to be designing artwork in CMYK and spot colour, it is a good idea to set up separate folders for these. With the logo, do the design in your vector-based program in 2 Pantone colours. Save this file to your spot colour folder. Now convert the file to CMYK – simple to do in either Illustrator or Freehand, and then save this file into the CMYK folder, as you will need it for the brochure.
IMPORTANT: Don’t mix CMYK graphics with spot colour graphics. Use either all CMYK, or all spot colour.
OK, back to the brochure. We’ve done the background images in Photoshop and saved as CMYK. We’ve created the logo in 2 spot colours, but saved a CMYK version with the brochure files.
Next, we need to add the content.
This is where a page layout program comes into its own.
Let’s assume we are dealing with an 4 page A4 brochure. This will be one A3 sheet, printed both sides and folded to give us the A4.
We set our workspace in Quark, (or In-Design) to A3 size. At this stage it’s a good idea to pull some guides across for our working margins. This will help us place the text boxes. We then import our background image, remembering to overlap our workspace by 3mm wherever the artwork touches.
We can then add our CMYK logo wherever we feel looks best.
If the client has supplied you with a Word document, then start by cutting and pasting this into our text boxes. In Quark or In-Design we have amazing control over all text operations. Changing fonts, colours, text sizes, drawing and colouring boxes, creating multiple columns, etc. etc. is a breeze.
Again, as with your logo, if you choose a Pantone colour then don’t forget to convert this colour in your page layout program to CMYK before sending to a print supplier.
