{"id":232,"date":"2014-09-17T22:57:25","date_gmt":"2014-09-17T22:57:25","guid":{"rendered":"http:\/\/art556.com\/?page_id=232"},"modified":"2014-09-17T22:57:25","modified_gmt":"2014-09-17T22:57:25","slug":"color","status":"publish","type":"page","link":"http:\/\/m.pebblerd.com\/interactivemedia\/topics\/unit-2-multiple-page-sites\/color\/","title":{"rendered":"Color"},"content":{"rendered":"<div style=\"margin-bottom: 10px;\"><\/div>\n<p class=\"p1\"><strong>print vs.\u00a0web\u00a0<\/strong><br \/>\n<strong>web :<\/strong> RGB : Red, Green, Blue<br \/>\n<span style=\"line-height: 1.714285714; font-size: 1rem;\">additive color : combines light to produce color used on monitors, tvs, digital cameras<\/span><\/p>\n<p class=\"p4\"><strong>print :<\/strong> CMYK : cyan, magenta, yellow, black<br \/>\nsubtractive color : combines pigment to produce color; used for printing<\/p>\n<p class=\"p5\"><b>color gamut<br \/>\n<\/b>Color gamut is the range of color that can actually exist any particular device.<br \/>\nIf consistent color usage from print to web is important, stay within the range of cmyk<\/p>\n<p><a href=\"http:\/\/art556.com\/wp-content\/uploads\/2014\/09\/gamut.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-1041\" src=\"http:\/\/art556.com\/wp-content\/uploads\/2014\/09\/gamut-300x227.jpg\" alt=\"\" width=\"300\" height=\"227\" \/><\/a><\/p>\n<p class=\"p4\">Colors vary from monitor to monitor<\/p>\n<p class=\"p1\"><b>color formats:<br \/>\n<\/b><b>rgb :\u00a0 <\/b>rgb(153,153,153)<br \/>\n<b>hex :\u00a0<\/b> #cc3399<br \/>\n<b>name :\u00a0<\/b> LightGray<\/p>\n<p class=\"p1\"><b>rgba :<span class=\"Apple-converted-space\">\u00a0 <\/span><\/b>rgba(153,153,153, 0.2)\u00a0 \u00a0\u2013 where alpha (a) is opacity<\/p>\n<p>lynda.com<br \/>\n<iframe loading=\"lazy\" src=\"https:\/\/www.lynda.com\/player\/embed\/109022?fs=3&amp;w=560&amp;h=315&amp;ps=paused&amp;utm_medium=referral&amp;utm_source=embed+video&amp;utm_campaign=ldc-website&amp;utm_content=vid-109022\" width=\"560\" height=\"315\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<p class=\"p9\"><b>choosing a palete<br \/>\n<\/b><\/p>\n<ol>\n<li>What colors do you have to include or match? (logo? images?)<br \/>\n<a href=\"http:\/\/art556.com\/wp-content\/uploads\/2014\/09\/earlyFoundations_sm.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1042 size-thumbnail\" src=\"http:\/\/art556.com\/wp-content\/uploads\/2014\/09\/earlyFoundations_sm-150x150.jpg\" alt=\"\" width=\"150\" height=\"150\" \/><\/a><a href=\"http:\/\/art556.com\/wp-content\/uploads\/2014\/09\/allKayaks.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-1043\" src=\"http:\/\/art556.com\/wp-content\/uploads\/2014\/09\/allKayaks-150x150.jpg\" alt=\"\" width=\"150\" height=\"150\" \/><\/a><\/li>\n<li>Is there a theme to the topic? (nature? corporate?)<\/li>\n<li>Has the client requested colors?<\/li>\n<\/ol>\n<h2>exercise:<\/h2>\n<h3><strong>Create a color study:<\/strong><\/h3>\n<p>Continue developing your site plan for unit 2. Format your color study similar to pages 9-11 of\u00a0<a href=\"http:\/\/art556.com\/pdfs\/unit_2_siteplan.pdf\">this pdf.<\/a><\/p>\n<ol>\n<li>Show the\u00a0inspiration for your colors: a logo, an image or object with a color palette, several images used on the site, or something else?<\/li>\n<li>Create five\u00a0possible color sets. Try at least two of the examples shown on\u00a0<a href=\"http:\/\/blog.crazyegg.com\/2012\/07\/11\/website-color-palettes\/\">10 Beautiful Website Colors<\/a>.<\/li>\n<li>Take the favorite of the five color sets and\u00a0refine it, creating three main colors with one shade\u00a0of each for a total of six colors. Convert colors to hex# and list hex#&#8217;s on your page.<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h4>Add color to your unit 2, index.html :<\/h4>\n<ol>\n<li>Open your unit 2 index.html. Add a color key to styles.css.<\/li>\n<li>Place all six colors on the page using some for\u00a0backgrounds and some\u00a0for type.<\/li>\n<li>Add at least one of your images.<\/li>\n<li>View in a browser and adjust as needed. Do colors need tweaking? Are you able to place different colors of text over different backgrounds using only these six colors with various opacities<\/li>\n<li>It should look something like this:\u00a0<a href=\"http:\/\/art556.com\/unit2\/color.html\">color.html<\/a><br \/>\n*note: I have labeled my file color.html, but yours will be in your index.html. Also &#8211; my example is bad color\u2013what not to do. Notice how the gray title doesn&#8217;t show up on the dark blue and the green doesn&#8217;t show up on white. Making small adjustments now may give you more options later.<\/li>\n<\/ol>\n<h4 class=\"p1\"><b>resources:<\/b><\/h4>\n<ul>\n<li><a href=\"https:\/\/kuler.adobe.com\/create\/color-wheel\/\">kuler.adobe.com<\/a><\/li>\n<li>Illustrator swatches<\/li>\n<li><a href=\"http:\/\/blog.crazyegg.com\/2012\/07\/11\/website-color-palettes\/\">10 Beautiful Website Colors<\/a><\/li>\n<li><a href=\"http:\/\/www.w3schools.com\/cssref\/css_colors.asp\">w3schools<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>print vs.\u00a0web\u00a0 web : RGB : Red, Green, Blue additive color : combines light to produce color used on monitors, tvs, digital cameras print : CMYK : cyan, magenta, yellow, black subtractive color : combines pigment to produce color; used for printing color gamut Color gamut is the range of color that can actually exist [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":25,"menu_order":40,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-232","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages\/232","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/comments?post=232"}],"version-history":[{"count":0,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages\/232\/revisions"}],"up":[{"embeddable":true,"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/pages\/25"}],"wp:attachment":[{"href":"http:\/\/m.pebblerd.com\/interactivemedia\/wp-json\/wp\/v2\/media?parent=232"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}