Best tools for multimedia reporting Fri, 31 Oct 2014 20:33:45 +0000 en-US hourly 1 https://s0.wp.com/i/webclip.png 32 32 239681374 https://geojournalism.org/2013/07/grafico-sobre-desmatamento-com-adobe-illustrator/ Gabriel Gianordoli Wed, 31 Jul 2013 19:39:07 +0000 Design Visualization deforestation data https://dev.cardume.art.br/toolkit/?p=131 <p>In this tutorial we will learn how to make a column chart using data in a table and how to customize it with some icons. Introdu&#231;&#227;o Adobe Illustrator&#160;is a drawing tool that can also be used to construct simple static graphics. Although your options are limited (bar, line, area, scatterplot, pie and radar), the possibilities [&#8230;]</p> <p>The post <a href="https://geojournalism.org/2013/07/grafico-sobre-desmatamento-com-adobe-illustrator/">Deforestation diagram with Adobe Illustrator</a> appeared first on <a href="https://geojournalism.org">geojournalism.org</a>.</p> <p>In this tutorial we will learn how to make a column chart using data in a table and how to customize it with some icons.<span id="more-131"></span></p> <h2 class="summary-item" id="introducao"><a href="#introducao">Introdução</a></h2> <p><a href="https://geojournalism.org/tools/adobe-illustrator/" title="Adobe Illustrator">Adobe Illustrator</a> is a drawing tool that can also be used to construct simple static graphics. Although your options are limited (bar, line, area, scatterplot, pie and radar), the possibilities for customization of color, type and other visual elements make it a very popular software.</p> <p>In this tutorial we will learn how to make a column chart using data in a table and how to customize it with some icons.</p> <h2 class="summary-item" id="starting-a-new-document"><a href="#starting-a-new-document">Starting a new document</a></h2> <p>In the top menu, select File&gt; New. Name the file and keep the default size (A4), only changing the page format to “landscape”.</p> <p style="text-align: center;"><img alt="Gráfico sobre desmatamento com Adobe Illustrator" class="aligncenter" decoding="async" fetchpriority="high" height="578" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator01-1024x826.png" width="717"/></p> <h2 class="summary-item" id="tools"><a href="#tools">Tools</a></h2> <p>If you have never used Illustrator before, do not be alarmed: there are few tools that we need.<br/> The first tool is a column chart. Select it and then click to drag and define an area on the document, this will be the size of your graphic.</p> <p style="text-align: center;"><a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator02.png"><img alt="" class="aligncenter" decoding="async" height="614" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator02-144x1024.png" width="86"/></a></p> <h2 class="summary-item" id="adding-data"><a href="#adding-data">Adding data</a></h2> <p>Once you define the area of your chart, a window with a blank table will be displayed. We will use the data of total deforestation in the Legal Amazon from 2004 to 2012, measured by <a href="https://www.obt.inpe.br/prodes/index.php" target="_blank">PRODES</a>. You can select the row with the corresponding numbers (totals only, without variation rates or numbers per state) and paste it into the Illustrator window.</p> <p style="text-align: center;"><a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator03.png"><img alt="Gráfico sobre desmatamento com Adobe Illustrator" class="aligncenter wp-image-242" decoding="async" height="231" sizes="(max-width: 614px) 100vw, 614px" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator03-1024x385.png" srcset="https://geojournalism.org/wp-content/uploads/2013/07/illustrator03-1024x385.png 1024w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator03-300x112.png 300w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator03.png 1758w" width="614"/></a></p> <p>Paste the data in the second row. Let’s use the first line to enter the years.</p> <p style="text-align: center;"><a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator04.png"><img alt="Gráfico sobre desmatamento com Adobe Illustrator" class="aligncenter wp-image-243" decoding="async" height="160" loading="lazy" sizes="auto, (max-width: 614px) 100vw, 614px" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator04-1024x267.png" srcset="https://geojournalism.org/wp-content/uploads/2013/07/illustrator04-1024x267.png 1024w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator04-300x78.png 300w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator04.png 1380w" width="614"/></a></p> <p>To make it possible for the software to interpret the numbers of years as titles, and not values​​, they must have quotation marks.</p> <p style="text-align: center;"><a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator05.png"><img alt="Gráfico sobre desmatamento com Adobe Illustrator" class="aligncenter wp-image-244" decoding="async" height="160" loading="lazy" sizes="auto, (max-width: 614px) 100vw, 614px" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator05-1024x267.png" srcset="https://geojournalism.org/wp-content/uploads/2013/07/illustrator05-1024x267.png 1024w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator05-300x78.png 300w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator05.png 1380w" width="614"/></a></p> <p>Finally, invert the values ​​of row and column selecting <i>‘transpose row/column’</i>.</p> <p style="text-align: center;"><a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator06.png"><img alt="Gráfico sobre desmatamento com Adobe Illustrator" class="aligncenter wp-image-245" decoding="async" height="301" loading="lazy" sizes="auto, (max-width: 540px) 100vw, 540px" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator06.png" srcset="https://geojournalism.org/wp-content/uploads/2013/07/illustrator06.png 900w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator06-300x167.png 300w" width="540"/></a></p> <p>The column chart will be drawn when you click the <i>‘apply</i>button or by saving the changes and closing the window.</p> <p style="text-align: center;"><a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator07.png"><img alt="Gráfico sobre desmatamento com Adobe Illustrator" class="aligncenter wp-image-246" decoding="async" height="329" loading="lazy" sizes="auto, (max-width: 614px) 100vw, 614px" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator07-1024x549.png" srcset="https://geojournalism.org/wp-content/uploads/2013/07/illustrator07-1024x549.png 1024w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator07-300x160.png 300w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator07.png 1596w" width="614"/></a></p> <h2 class="summary-item" id="formatting-the-diagram"><a href="#formatting-the-diagram">Formatting the diagram</a></h2> <p>You can change captions and colors of your chart using the <i>direct selection</i> tool. Use the <em>selection</em> tool only if you want to move the entire diagram.</p> <p style="text-align: center;"><a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator08.png"><img alt="illustrator08" class="aligncenter wp-image-247" decoding="async" height="111" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator08.png" width="101"/></a></p> <p>When you select an element, the top bar will show which features can be changed (color, font, font size, contour etc).</p> <p style="text-align: center;"> <a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator09.png"><img alt="illustrator09" class="aligncenter wp-image-248" decoding="async" height="34" loading="lazy" sizes="auto, (max-width: 717px) 100vw, 717px" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator09-1024x49.png" srcset="https://geojournalism.org/wp-content/uploads/2013/07/illustrator09-1024x49.png 1024w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator09-300x14.png 300w" width="717"/></a><a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator09.png"><br/> </a></p> <p style="text-align: center;"><a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator10.png"><img alt="Gráfico sobre desmatamento com Adobe Illustrator" class="aligncenter wp-image-249" decoding="async" height="364" loading="lazy" sizes="auto, (max-width: 645px) 100vw, 645px" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator10-1024x577.png" srcset="https://geojournalism.org/wp-content/uploads/2013/07/illustrator10-1024x577.png 1024w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator10-300x169.png 300w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator10.png 1312w" width="645"/></a></p> <p>A warning at this point: do not ungroup the graph (<i>Object</i> &gt; <i>Ungroup</i>).While this allows you to change elements more easily, you will lose the ability to edit the data and other formatting options.</p> <h2 class="summary-item" id="inserting-images"><a href="#inserting-images">Inserting Images</a></h2> <p>You can customize your diagram so that it displays images instead of columns. Any image drawn in Illustrator will work for this. In our case, we use an icon available for download at <a href="https://thenounproject.com/noun/tree/#icon-No2429" target="_blank">NounProject</a>. This one is free to use, modify and reproduce. Some other drawings from the site may impose restrictions on use, from mandatory author citation to prohibition of commercial use, be aware when doing new research.</p> <p>When you unzip the <i>.zip</i> of the site, you will find a file <i>.svg</i>. This is a vector file, therefore it is scalable, which is fairly common. Open it in Illustrator, click the tree with the <i>selection</i> tool and paste it in the file that contains the graph.</p> <p>VYou can change the colors of the design in the same way we did previously with the columns. I will leave the tree green with no outline:</p> <p style="text-align: center;"><a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator11.png"><img alt="Gráfico sobre desmatamento com Adobe Illustrator" class="aligncenter wp-image-250" decoding="async" height="94" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator11.png" width="104"/></a></p> <p><a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator12.png"><img alt="illustrator12" class="aligncenter size-full wp-image-251" decoding="async" height="188" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator12.png" width="168"/></a></p> <p>Now, select the tree and use the command <i>Object</i> &gt; <i>Graph</i> &gt; <i>Design</i> from the top menu.On the <i>Design</i> dialog box, select <i>New design</i>.</p> <p style="text-align: center;"><a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator13.png"><img alt="Gráfico sobre desmatamento com Adobe Illustrator" class="aligncenter wp-image-252" decoding="async" height="611" loading="lazy" sizes="auto, (max-width: 546px) 100vw, 546px" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator13.png" srcset="https://geojournalism.org/wp-content/uploads/2013/07/illustrator13.png 910w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator13-268x300.png 268w" width="546"/></a></p> <h2 class="summary-item" id="applying-images-to-the-diagram"><a href="#applying-images-to-the-diagram">Applying images to the diagram</a></h2> <p>Click on the chart with the <i>selection</i>, tool, click again with the right mouse button and select <i>Column</i>. Select your diagram from the left list. There are four options to apply the icon to the columns: the first two will resize the drawing (distorted or not). In the last one, just a piece of the icon is resized, making it “stretch” to the height of the bar. Let’s use the 3rd option where the symbols are repeated according to the column value. In the second box, select the value that each icon will represent. Watching the numbers on our list, ranging from approximately 4,500 – 27,000, let’s use 5,000 as a unit. The last fractional value ​​of the unit (5,000) will be represented by a cut or a scaled drawing. Let’s choose the first option.</p> <p style="text-align: center;"><a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator14.png"><img alt="Gráfico sobre desmatamento com Adobe Illustrator" class="aligncenter wp-image-253" decoding="async" height="346" loading="lazy" sizes="auto, (max-width: 614px) 100vw, 614px" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator14-1024x577.png" srcset="https://geojournalism.org/wp-content/uploads/2013/07/illustrator14-1024x577.png 1024w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator14-300x169.png 300w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator14.png 1322w" width="614"/></a></p> <h2 class="summary-item" id="finish-formatting"><a href="#finish-formatting">Finish formatting</a></h2> <p>You can access other diagrams options – you can even change the entire graph to another shape, such as pie chart – clicking on it with the right button and selecting <i>‘Type’.</i> In this case, let’s change a few details of the x and y axis to improve readability.</p> <p>In the menu of <i>values</i>, change the <i>scale marks</i>so that they will be on the whole width of the graphic. Since we are not writing the values ​​on the columns, these mark will help improve the readability.</p> <p>In the <i>category axis</i> menu, remove the tick marks, since the columns are good enough to split the years.</p> <p>At last, use a little lighter color for the horizontal marks, so they will interfere less with the drawing. And add the title with the <i>text </i> tool (it is a separate element of the chart):</p> <p><a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator15.png"><img alt="illustrator15" class="aligncenter size-full wp-image-254" decoding="async" height="50" loading="lazy" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator15.png" width="60"/></a></p> <p style="text-align: center;"><a href="https://geojournalism.org/wp-content/uploads/2013/07/illustrator16.png"><img alt="illustrator16" class="aligncenter wp-image-255" decoding="async" height="406" loading="lazy" sizes="auto, (max-width: 614px) 100vw, 614px" src="https://geojournalism.org/wp-content/uploads/2013/07/illustrator16-1024x677.png" srcset="https://geojournalism.org/wp-content/uploads/2013/07/illustrator16-1024x677.png 1024w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator16-300x198.png 300w, https://geojournalism.org/wp-content/uploads/2013/07/illustrator16.png 1294w" width="614"/></a></p> <h2 class="summary-item" id="conclusion"><a href="#conclusion">Conclusion</a></h2> <p>Although the effort to do a graph in Illustrator may look great at first, the design and customization options make it worth it. This tutorial presents only an introduction to the graphics tool. If you are not confident enough to start everything from scratch, download the .ai file of this example and change what you think is needed. Try to explore other options by clicking with the right button on the chart. You can even go back to the original table to change the numbers to select the <i>data</i> — which is quite useful when you are not sure whether you will be working with the final information.</p> <div class="author-shortcodes"> <div class="author-inner"> <div class="author-image"> <img alt="" src="https://lh4.googleusercontent.com/-DK3qONGlzXk/AAAAAAAAAAI/AAAAAAAAAFQ/dgEWkgWJHaQ/s120-c/photo.jpg"/> <div class="author-overlay"></div> </div> <!-- .author-image --> <div class="author-info"> I’m a graphic designer in love with numbers. <p>I am currently enrolled in the Master of Fine Arts – Design &amp; Technology program, at Parsons The New School for Design. My last job was as a senior designer for the Innovation in Technology and User Experience team at Itaú, the largest private bank in Brazil. For the past 6 years, I have been working with information and graphic design, mainly in magazines, and have won some awards.</p> <p>I have been invited as a speaker for some major events, including Campus Party, World Information Architecture Day and Pixel Show, the Brazilian largest conference on art and creativity. I also ran workshops on data visualization using the Processing programming language. </p></div> <!-- .author-info --> </div> <!-- .author-inner --> </div> .author-shortcodes <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/><p></p> <p>The post <a href="https://geojournalism.org/2013/07/grafico-sobre-desmatamento-com-adobe-illustrator/">Deforestation diagram with Adobe Illustrator</a> appeared first on <a href="https://geojournalism.org">geojournalism.org</a>.</p> 131