ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Decrypting the World of Design

Updated on July 22, 2016

4 Elements

Whether you're new to the world of graphic design or you've strayed into further creative madness that you can be pulled back from, there are certain elements that are important for every graphic designer to know that often go misunderstood, misinterpreted, or simply ignored for the sake of time. There are four in particular that this Hub addresses.

  1. IMAGES: Raster Images vs. Vector Images - Understanding the differences and the best uses of each can save you massive amounts of time and energy in the long run.
  2. COLOR - There are so many aspects to color and light and color modes in design software that can escape even the more advanced graphic designers and web designers. A little more understanding of the differences behind RGB and CMYK can add a whole new quality to your craft and might make you sound like a creative genius.
  3. RESOLUTION: DPI & PPI - The best, most creative designs are useless if you can't get their quality to shine through on print or load on the web.
  4. UNITS - There is a certain amount of ambiguity surrounding dimensions and measurements that is easily unraveled, so we'll take a look at the measurement units you'll run into when using Adobe.

Raster Images

In the simplest sense, raster images are like photographs. They are bitmaps--grids of individual pixel squares that each have their own specific color or hue. Together they form a much larger picture. Not unlike a large puzzle, the further out you look, the higher the quality of the image appears to the human eye.

This, of course, makes the opposite true: the closer you zoom in, the more degraded the quality of the image appears. So, it's important, when using raster images, to account for how large an image will be printed or posted and to ensure that the amount of pixels can accommodate high quality.

One downside to raster images is that high quality comes in rather large files. These are some common file types of raster images: TIFF, JPEG, GIF, PNG and BMP.



Vector Images

In simple terms, vector images are like shapes. They are based on mathematical formulas that dictate geometry, from the most basic shapes, such as squares and circles, to more complex ones that you might find in a logo. The point is, they can be made larger or smaller, while still maintaining their quality, because their properties are defined mathematically.

This is extremely helpful when it comes to digital illustrations, particularly logos or branding, that need to be resized or recolored for different materials.

Designing with Color - Basic

Possibly the most common mistake that graphic design beginners make is the misuse of RGB and CMYK.


If you're designing for the WEB, design and export in RGB.

If you're designing for PRINT, design and export in CMYK.

If you want to know WHY, keep reading.

What do You Think are the 3 Primary Colors?

See results

Designing with Color - Advanced

The science behind color modes is actually quite fascinating, and there is a lot of information out there for the interested party.

TVs and computer screens operate in RGB (red, green, and blue) and printers operate in CMYK (cyan, magenta, yellow, and black). Why? The answer is in additive vs. subtractive color.

RGB colors are coded using the decimal system and are assigned a hexadecimal number. These, for example, create a similar lavender to the one we just looked at in CMYK.

(150, 151, 203) | #9697CB

RGB stands for Red, Blue, and Green, and is generally used for the web.

The RGB color mode is based on an additive color theory, which is about adding light to make the primary colors of red, green, and blue or RGB.

By starting with complete darkness, we can add red, green, and blue light. Adding red and green makes yellow, green and blue make cyan, and red and blue mix into magenta. When all three overlap, we see pure, white light.

Each color in CMYK mode is coded in percentages. This combination, for example, creates a soft lavender tone, at a mixture of cyan and magenta, with 0% yellow and black: C: 42% M: 38% Y: 0% K: 0%.

CMYK stands for Cyan, Magenta, Yellow, and Key (or Black) and is used mainly for print designs. These are the four colors that are used by all printers.

The CMYK color mode is based on subtractive color theory, which is about using the secondary colors (cyan, magenta, and yellow or CMY) to absorb certain colored lightwaves, leaving the others perceptible to our eyes as the remaining color.

Confused yet? Let's look at this in further detail:

Start with white, which reflects all colors of light.

  • Yellow absorbs blue light, allowing red and green to pass through or reflect on a surface, thereby allowing us to perceive yellow.
  • Magenta absorbs green light, allowing red and blue to pass through or reflect on a surface, thereby allowing us to perceive magenta.
  • Cyan absorbs red light, allowing green and blue to pass through or reflect on a surface, thereby allowing us to perceive cyan.
  • Yellow and Cyan absorb red and blue, allowing green light to pass through or be reflected.
  • Yellow and Magenta absorb green and blue, allowing red light to pass through or be reflected.
  • Magenta and Blue absorb red and green, allowing blue light to pass through or be reflected.

Cyan, Magenta, and Yellow together absorb all the primary colors, allowing no light to pass through or be reflected, thereby creating darkness, or what our eyes perceive as the color black.

When we put colored ink on a page, we see the color that is NOT absorbed by the substance it's printed on. So, color on a page, is about using various amounts pf cyan, magenta, and yellow to subtract various amounts of red, green, and blue light until our eyes perceive the right amount of those colors to see particular hues.

Something to Watch Out For

Because RGB uses a wider digital color spectrum, many times, designers will design using RGB in their software of choice, then just before sending to print, convert to CMYK.

The problem here, as mentioned before, is that not all RGB colors are available in the CMYK range, and some of them will be converted to the closest color in that mode. If you take this approach, be sure to do multiple print tests to make sure this won't take away important elements of your design.

Choosing Color Options in Adobe

DPI

In the world of print, DPI stands for Dots Per Inch. It is a measurement of "dot density," that is, the number of dots that can be printed along a 1 inch line segment. The general rule is 300dpi for high quality print.

As a designer, you need to realize that this refers to a "printer setting," not to the quality of the graphic being printed. If you print a low-quality graphic at 100dpi, 200dpi, or 300dpi, it's still going to reflect the poor quality.

PPI stands for Pixels Per Inch. It is a measurement of "pixel density," meaning the number of pixels that are displayed on an inch of computer screen. Sounds a lot like DPI, right? The major difference between DPI and PPI is that DPI refers to print quality, while PPI refers to graphic quality.

When designing for print, the rule is 300ppi, just like 300dpi is the standard printer setting.

There are different standards, however, when designing for web. The rule used to be 72ppi when designing for screen. However, Apple's release of the new retina display computers has change the game a bit. Now, a Retina Display iMac has the capability to show quality at up to 218ppi.

The standard still remains 72ppi for screen, however, to ensure the highest quality possible on every screen, you'll have to export at a higher ppi.

Summary

PPI measures the pixel density of a digital image.

DPI measures the dot density that your printer prints in.

If you're designing for WEB, export at 72ppi for standard computer screens and 218ppi for retina display.

If you're designing for PRINT, export at 300ppi and make sure the printer is set to print at 300dpi.

Graphic design softwares, such as Adobe Illustrator, Photoshop, or InDesign, can measure in many different types of units. For example, these are all the different units of measurement that Adobe Illustrator offers:

  • pixels
  • points
  • picas
  • inches
  • centimeters
  • millimeters
  • ha

What do all of those mean?

How I choose which one's right for my graphic?


Pixels

When exploring the difference between raster and vector images, we mentioned pixels already - that they are tiny squares of color that form a much larger raster image. They are the smallest, controllable element in a digital picture. Photographs are made up of thousands of them.

Units of Length

Points, on the other hand, are measurements of length and are the smallest elements of a vector graphic. A point is more commonly known as a typographic unit, developed originally for use in creating digital fonts.

Picas are also typographic units that are used to measure length in a graphic.They are larger however - measuring about 12 picas to a point.

Most of the software programs have options to use imperial measurements, such as inches or feet, and metric units, such as centimeters and millimeters.



Obscure Units

Some, like Adobe Illustrator, even have the Japanese typographic units ha and q, which are the equivalent of a quarter of a millimeter. This is a unit of measurement that American and European designers often don't understand and allow to lay in ambiguity for most of their design careers.

The reason that units like ha and q, are helpful, is that while, points and picas convert well to imperial measurements, ha and q, convert well to the metric system, which is still used by the majority of the world, including the "design world".

1 Point
1/12 pica
1/72 inch
1 Pica
12 points
1/6 inch
1 Ha
0.708661 points
.25 mm
working

This website uses cookies

As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://corp.maven.io/privacy-policy

Show Details
Necessary
HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
LoginThis is necessary to sign in to the HubPages Service.
Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
AkismetThis is used to detect comment spam. (Privacy Policy)
HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
Features
Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
MavenThis supports the Maven widget and search functionality. (Privacy Policy)
Marketing
Google AdSenseThis is an ad network. (Privacy Policy)
Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
Index ExchangeThis is an ad network. (Privacy Policy)
SovrnThis is an ad network. (Privacy Policy)
Facebook AdsThis is an ad network. (Privacy Policy)
Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
AppNexusThis is an ad network. (Privacy Policy)
OpenxThis is an ad network. (Privacy Policy)
Rubicon ProjectThis is an ad network. (Privacy Policy)
TripleLiftThis is an ad network. (Privacy Policy)
Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
Statistics
Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)
ClickscoThis is a data management platform studying reader behavior (Privacy Policy)