There is a common misconception that design is all encompassing. That designing for the web is the same process as designing for print. This couldn't be further from the truth, for several reasons. You might as well be comparing apples to oranges. Both are fruits and that's about it.
This article will explain a few of the very basic differences between the two. The usage for your design will determine how you need to set up your document and which software is best suited for the project.
1. Ruler Measurements: This is probably the utmost basic of differences between document setup of print vs. web design projects.
Web: Generally when designing for web, width and height measurements are in pixels since this is the measurement that browsers understand and how the monitor area space is measured. A good analogy would be pixels on a monitor being golf balls in a bucket.
Print: When designing for print, the final outcome will be tangible. Obviously we measure the width and height of tangible objects in inches (or mm if you live anywhere outside of the US ;) So when designing for print we set up the document in inches so that the final outcome is reproduced accurately.
2. Color Mode: Choosing your color mode is very important. Especially if you're designing for print. This one simple setting can help you avoid making a costly mistake when sending your project to print. You should always check with your printer for file specifications before beginning your design.
Web: The native color mode for televisions monitors is RGB which is a color model based on 3 primary "additive" colors, Red, Green, and Blue, being mixed at different levels to create a wide array of colors.
As bright and vibrant as a design piece may look on your computer in RGB color mode, odds are when printed the colors will shift because the printer cannot always replicate every color in the RGB color space.
Print: Most printers today rely on the CMYK color mode. CMYK is made up of "subtractive" primary colors; Cyan, Yellow, Magenta, and Black. When designing for a printed piece, the design at one point or another will have to be converted to this CMYK color mode.
This conversion can result in unwanted shifts in color. The majority of color shifts occur in your brighter more vibrant colors as they tend to dull or flatten because the printer is unable to replicate the RGB color used.
That's not to say that you can't print bright or vibrant colors, it just takes a different mixture of color to do it. It's worth noting that a good portion of full color photographs will convert to CMYK without much color shift.
It is not uncommon to perform color correction after conversion to help retrieve the vibrancy the RGB color model produced. Even though the brightness and vibrancy can be adjusted, the specific color shade or tint may not always be replicated after conversion.
3. Resolution: This one is a biggie. Resolution is an important factor in both print and web design as each has its own standards and optimal setting for the best results for the intended use of the final design piece.
This is where those with no design background can get a little confused. I know as a web and print designer I've been asked a number of times to use images from the web for print. Why doesn't this work? Well it's like this:
Web: A monitor is only capable of producing 72 dpi (dots per inch) so this has become the web standard for images you find online. The fact that the monitor can only produce 72 dpi is actually a good thing because using this resolution helps to keep the file size low. The higher the resolution of an image, the larger the file size, the longer it takes to load.
The downfall of designing in 72 dpi is that the image will not produce a high quality print, especially if it has to be enlarged for the print project. The image can be greatly degraded, blurred, and pixilated making for a very amateurish unprofessional design when printed.
Print: When it comes to choosing a resolution for printing, this can vary. The general standard is 300 dpi to produce a high quality print. 300 dpi is a happy medium between a high quality print as well as moderate file size.
It is possible to crash a print server if your final print job has an extremely large file size so designing in resolutions higher than 300 dpi are not very common for the majority of printing needs.
The advantage of using high resolution 300 dpi images is that they can always be scaled down to the 72 dpi used in web design without loss of image quality. This makes print quality images usable for web design, but usually not the other way around, web to print.
Conclusion: As you can see there are some very basic fundamental differences between web and print design. These seemingly small differences can have a huge impact on the quality, effectiveness, and functionality of your finished design project.
Generally a web designers' primary software of choice is Photoshop. Print designers use Photoshop as well, but Illustrator is usually the software of choice for its scalability without loss of image quality (that's a whole other post we'll get into at a later date)
Are you a print or web designer? Do you have examples of how your field differs from the other and is often misunderstood by clients or employers? Leave us a comment and tell us about it!
This article will explain a few of the very basic differences between the two. The usage for your design will determine how you need to set up your document and which software is best suited for the project.
1. Ruler Measurements: This is probably the utmost basic of differences between document setup of print vs. web design projects.
Web: Generally when designing for web, width and height measurements are in pixels since this is the measurement that browsers understand and how the monitor area space is measured. A good analogy would be pixels on a monitor being golf balls in a bucket.
Print: When designing for print, the final outcome will be tangible. Obviously we measure the width and height of tangible objects in inches (or mm if you live anywhere outside of the US ;) So when designing for print we set up the document in inches so that the final outcome is reproduced accurately.
2. Color Mode: Choosing your color mode is very important. Especially if you're designing for print. This one simple setting can help you avoid making a costly mistake when sending your project to print. You should always check with your printer for file specifications before beginning your design.
Web: The native color mode for televisions monitors is RGB which is a color model based on 3 primary "additive" colors, Red, Green, and Blue, being mixed at different levels to create a wide array of colors.
As bright and vibrant as a design piece may look on your computer in RGB color mode, odds are when printed the colors will shift because the printer cannot always replicate every color in the RGB color space.
Print: Most printers today rely on the CMYK color mode. CMYK is made up of "subtractive" primary colors; Cyan, Yellow, Magenta, and Black. When designing for a printed piece, the design at one point or another will have to be converted to this CMYK color mode.
This conversion can result in unwanted shifts in color. The majority of color shifts occur in your brighter more vibrant colors as they tend to dull or flatten because the printer is unable to replicate the RGB color used.
That's not to say that you can't print bright or vibrant colors, it just takes a different mixture of color to do it. It's worth noting that a good portion of full color photographs will convert to CMYK without much color shift.
It is not uncommon to perform color correction after conversion to help retrieve the vibrancy the RGB color model produced. Even though the brightness and vibrancy can be adjusted, the specific color shade or tint may not always be replicated after conversion.
3. Resolution: This one is a biggie. Resolution is an important factor in both print and web design as each has its own standards and optimal setting for the best results for the intended use of the final design piece.
This is where those with no design background can get a little confused. I know as a web and print designer I've been asked a number of times to use images from the web for print. Why doesn't this work? Well it's like this:
Web: A monitor is only capable of producing 72 dpi (dots per inch) so this has become the web standard for images you find online. The fact that the monitor can only produce 72 dpi is actually a good thing because using this resolution helps to keep the file size low. The higher the resolution of an image, the larger the file size, the longer it takes to load.
The downfall of designing in 72 dpi is that the image will not produce a high quality print, especially if it has to be enlarged for the print project. The image can be greatly degraded, blurred, and pixilated making for a very amateurish unprofessional design when printed.
Print: When it comes to choosing a resolution for printing, this can vary. The general standard is 300 dpi to produce a high quality print. 300 dpi is a happy medium between a high quality print as well as moderate file size.
It is possible to crash a print server if your final print job has an extremely large file size so designing in resolutions higher than 300 dpi are not very common for the majority of printing needs.
The advantage of using high resolution 300 dpi images is that they can always be scaled down to the 72 dpi used in web design without loss of image quality. This makes print quality images usable for web design, but usually not the other way around, web to print.
Conclusion: As you can see there are some very basic fundamental differences between web and print design. These seemingly small differences can have a huge impact on the quality, effectiveness, and functionality of your finished design project.
Generally a web designers' primary software of choice is Photoshop. Print designers use Photoshop as well, but Illustrator is usually the software of choice for its scalability without loss of image quality (that's a whole other post we'll get into at a later date)
Are you a print or web designer? Do you have examples of how your field differs from the other and is often misunderstood by clients or employers? Leave us a comment and tell us about it!
No comments:
Post a Comment