Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Intro to inkscape

1.162 visualizaciones

Publicado el

A freeware vector artwork creator that is a substitute for Adobe

Publicado en: Diseño
  • Inicia sesión para ver los comentarios

Intro to inkscape

  1. 1. Intro to Inkscape Created for DUSPViz by Luke Mich | Spring 2017
  2. 2. Intro to Inkscape | DUSPViz | Spring 2017 | Page 2 What is Inkscape? Inkscape is a vector-based graphic program that is very similar to Adobe Illustrator. Where it differs from Illustrator, however, is the price tag. Inkscape is freeware, meaning that you can avoid Adobe’s pricey subscription fees for a program that can do (almost) the exact same thing. Because it is freeware, Inkscape does not use a proprietary filetype (like Illustrator’s “.ai” files). Instead, Inkscape works directly in SVG (Scalable Vector Graphic) format. This is the standard vector filetype for the web.
  3. 3. Intro to Inkscape | DUSPViz | Spring 2017 | Page 3 Download and Install If you’re using your own laptop, open a web browser and navigate to to download the appropriate Inkscape installer for your OS. Then click through the install wizard to install. If you’re on a CRON computers, Inkscape is already installed.
  4. 4. Intro to Inkscape | DUSPViz | Spring 2017 | Page 4 Getting Started Let’s open Inkscape and take a look at the interface. It’s relatively simlar to Illustrator. There are Tools (selection, drawing, modification, etc) along the left panel, Tool Controls that modify the selected tool along the top of the screen, Snap Controls that affect object interactions and project-wide Commands along the right, a general application Menu along the top, a Canvas area and a Page. The one major difference is the Color Palette along the bottom that is always on, making it easy to select color fills/strokes while working. Tools Menu Tool Controls Commands Snap Controls Page ~ Canvas ~Keyboard Shortcuts Zoom In = + Zoom Out = - Pan = Ctrl + Arrow Keys Color Palette
  5. 5. Intro to Inkscape | DUSPViz | Spring 2017 | Page 5 Setting up the Page Go to File > Document Properties... to change the page size. Select US Letter, change the Orientation to Landscape and Change the Units to inches (if they don’t change automatically). Also, change the Display Units to inches. in
  6. 6. Intro to Inkscape | DUSPViz | Spring 2017 | Page 6 Creating a Web-Safe Data Visualization Inkscape has many great basic tutorials built-in (go to Help > Tutorials to open fully editable SVG files with various instructions). Therefore, we won’t be using this tutorial for the basics. Instead, we’ll show you how to edit some simple map/chart output from QGIS and Excel respectively to create a web-safe vector graphic without the use of expensive Adobe software. Greater Boston Housing Units MAPC Community Types Inner Core Regional Urban Centers Maturing Suburbs Developing Suburbs 16 11 Units by Structure Size Number of Ci�es/Towns Popula�on (2010) Total Units Permi�ed (2000-2015) 44 30 325,123900,359545,0201,391,210 43,814 15,670 38,997 15,811 Inne=r Core Regional Urban Centers Maturing Suburbs Developing Suburbs 1 Unit 2-4 Unit 5 Unit 1 Unit 2-4 Unit 5 Unit 5 Unit 5 Unit 2-4 Unit 2-4 Unit 1 Unit 1 Unit
  7. 7. Intro to Inkscape | DUSPViz | Spring 2017 | Page 7 Importing a File Navigate to File > Import... and select the towns.svg file from the tutorial materials folder. This is an SVG map exported from QGIS (Composer > Export as SVG... from the Print Composer in QGIS). The map illustrates the community types of the cities and towns in the Greater Boston region as definied by MAPC (purple = Inner Core; blue = Regional Urban Centers; green = Maturing Suburbs; red = Developing Suburbs). Click and drag to move the file into place.
  8. 8. Intro to Inkscape | DUSPViz | Spring 2017 | Page 8 Resizing an Object When an object is selected, it automatically has scaling grips on each corner and each side. Click and drag a corner to scale along both axes - hold Ctrl to constrain current proportions.
  9. 9. Intro to Inkscape | DUSPViz | Spring 2017 | Page 9 Ungrouping Right now, our map has several objects (the town polygons and some invisible frames) that are grouped together. To ungroup, make sure the map is selected and type Ctrl+U (or right-click and select Ungroup). You’ll need to do this twice, as there are some nested groups.
  10. 10. Intro to Inkscape | DUSPViz | Spring 2017 | Page 10 Selecting Objects To select objects, simply click on them with the selection tool (black arrow) activated. To add objects to the selection, hold Shift while clicking. To select many objects, click and drag with the mouse to encapsulate the desired objects. If you want to select several objects but can’t encapsulate them entirely without including undesired objects, hold Alt while clicking and dragging a line. All objects that intersect the line will be selected. Click a blank area of the page/canvas to deselect all objects, then Alt-click-drag to select just the frames, and Delete.
  11. 11. Intro to Inkscape | DUSPViz | Spring 2017 | Page 11 Layers Open the Layers panel (Layer > Layers...). Right now, all our objects are on Layer 1. Click the “+” button to add a “Map” layer. Repeat to create a layer for each community type. Then drag-and-drop each community type layer on top of the “Map” layer to turn them into sublayers. Since Inkscape uses SVG files, where true layers are not supported, these layers are more like modified groups, so they may not behave exactly the same as Illustrator layers.
  12. 12. Intro to Inkscape | DUSPViz | Spring 2017 | Page 12 Layers (cont.) Let’s move our objects to the appropriate layers so it will be easier to select and modify them later. Right click on a purple town and click Select Same > Fill Color. Then, right-click again and choose Move to Layer... and select the Inner Core layer. Repeat this for all layers. Note: this may take a while with complex objects. Delete the Layer 1 layer by selecting it in the Layers panel and clicking the “-” button.
  13. 13. Intro to Inkscape | DUSPViz | Spring 2017 | Page 13 Stroke Color Select all the towns by clicking and dragging to encapsulate them. Then right-click and select Fill and Stroke... to open the Fill and Stroke panel. Select the “Stroke paint” tab and change the CMYK colors to 0, 0, 0, 0 (the “A” attribute is the alpha or transparency - leave that at 100).
  14. 14. Intro to Inkscape | DUSPViz | Spring 2017 | Page 14 Stroke Weight With all the towns still selected, switch to the “Stroke style” tab of the Fill and Stroke panel and change the Width to 1 px (you’ll have to change the units from the drop-down menu).
  15. 15. Intro to Inkscape | DUSPViz | Spring 2017 | Page 15 Fill Color We want each community type to be a different color, but we want to change the ones that were generated by QGIS. Highlight the Inner Core layer in the Layers panel to activate it. Then type Ctrl + A to select all elements on that layer. Select a color from the Color Palette along the bottom of the interface. Repeat for each community type layer. Note: if you hold shift when selecting a color from Palette, you’ll change the stroke color instead of the fill color.
  16. 16. Intro to Inkscape | DUSPViz | Spring 2017 | Page 16 Grouping Objects Select all of our towns (click and drag to encapsulate). Click Ctrl + G to group them together. This makes it easier to drag them around the page. Note: it may take a while to group complicated objects.
  17. 17. Intro to Inkscape | DUSPViz | Spring 2017 | Page 17 Creating a Legend Let’s make a legend for our map. Add a new layer and call it “Legend.” Then open the Rectangle tool from the Tool bar. Click and drag to draw a rectangle - hold CTRL while dragging to snap to a variety of integer-ratio rectangles (including a 1x1 square). To change the size of our square more accurately, enter a width (W) and height (H) in the Tool Commands bar at the top (I’ve gone with 0.2in for each).
  18. 18. Intro to Inkscape | DUSPViz | Spring 2017 | Page 18 Creating a Legend (cont.) To duplicate this square, type Ctrl + D with the shape selected. This will place a copy directly over the original. Click and drag to move it down (hold Ctrl while dragging to constrain the move to right angles). To change the colors of our legend items to match our map, select one rectangle, and click the eyedropper icon in the Fill and Stroke panel. This allows us to match the color of any item we click on with the eyedropper. Repeat this step for each community type.
  19. 19. Intro to Inkscape | DUSPViz | Spring 2017 | Page 19 Creating a Legend (cont.) Let’s add text. Select the Create Text tool from the Toolbar. In the Tool Commands, change the font and size. Click and drag to create a text box and start typing - create one text box for each community type. Note: if you don’t shrink the size of your text (or make your text box big enough) you won’t be able to type anything as the text box won’t be big enough to fit the cursor.
  20. 20. Intro to Inkscape | DUSPViz | Spring 2017 | Page 20 Creating a Legend (cont.) Let’s line everything up. Select a legend square and its adjacent text. Open the Align panel and select the Center on Horizontal Axis button to align the two. Then group these two elements. Repeat for each pairing. You may also need to align the left edges of your text. You can select objects within groups by holding Ctrl while selecting them (hold Shift as well to select multiple in-group objects). Once all pairs are aligned, distribute them using the Distribute tools in the Align panel. Then group all legend objects together.
  21. 21. Intro to Inkscape | DUSPViz | Spring 2017 | Page 21 Importing a Chart Now let’s add a few charts. Go to File > Import... to add the “community types.pdf” to the drawing. Again, you’ll need to ungroup everything, and it may take a couple of ungrouping steps to remove all nested groups. While the text brought in is indeed editable, Inkscape often combines text objects in strange ways. There are some advanced ways to deal with this, but for our purposes, we’ll simply delete this text and replace it with our own, so you’ll likely want to duplicate the imported PDF (or open the PDF in Acrobat for reference).
  22. 22. Intro to Inkscape | DUSPViz | Spring 2017 | Page 22 Editing Charts I’ve added new layers, moved the charts to them, and grouped appropriate elements (i.e. grouping the stacked components of each bar chart or the elements of each donut chart). Let’s resize our bar charts. Select each grouped bar and adjust the height and width in the Tool Commands bar to 10in and .25in respectively. Also, Ctrl + Shift click each element from the chart and set the vertical (V) component of the “Remove Overlaps” section of the Align panel to 20 and click the adjacent button to separate the bar elements.
  23. 23. Intro to Inkscape | DUSPViz | Spring 2017 | Page 23 Editing Charts (cont.) When you click on an object once, the scaling grips pop up at the corners and sides of the objects. Click again, and the rotation and shear grips emerge. Let’s rotate our bar chart horizontally. Hold Ctrl while dragging to constrain to 15-degree intervals. Repeat for all bar charts.
  24. 24. Intro to Inkscape | DUSPViz | Spring 2017 | Page 24 Editing Charts (cont.) Once everything is slid into place, use the various align tools to line everything up. Then we can start adjusting the colors. Again, simply select all desire elements (Ctrl + click to select objects within groups; Shift to add multiple objects), and use the eyedropper from the Fill and Stroke panel. Since our bar chart elements correspond to the community types, we’ll use those colors. For our donut charts, use the community type colors for the 5-unit segments, and use progressively lighter shades for the 2-4-unit and 1-unit segments.
  25. 25. Intro to Inkscape | DUSPViz | Spring 2017 | Page 25 Formatting Text Let’s add and format some text. Add a layer for Titles and create new text boxes for our headers. You can adjust the font and style in the Tool Commands bar. To change the color of text, simply adjust the color in the Fill and Stroke panel. I’ve added some headers, data labels, and a title. Be sure to group elements you want to move together.
  26. 26. Intro to Inkscape | DUSPViz | Spring 2017 | Page 26 Aligning to the Page The final layout step is to group all obejcts, open the Align panel, and change the “Relative to:” dropdown menu to “Page.” Then click the Align Vertical Center and Align Horizontal Center buttons to center our work. The layout is complete!
  27. 27. Intro to Inkscape | DUSPViz | Spring 2017 | Page 27 Saving and Exporting Go to File > Save and name your file. Be sure to select Inkscape SVG as your file format. This file can now be shared or uploaded to a webpage or opened again in Inkscape to continue editing. You may also want to save this as a different file type. Select File > Save a Copy... and choose the desired filetype (such as PDF or PNG) from the dropdown.
  28. 28. Intro to Inkscape | DUSPViz | Spring 2017 | Page 28 Other Resources Your first stop for more tutorials should be within Inkscape itself. Simply open the Help > Tutorials flyout and select one. These are fully editable SVGs that will open directly in Inkscape with step-by-step instructions and commands. What’s more, since Inkscape is opensource and free, there are a ton of great, free help guides online.