{"id":46106,"date":"2019-08-22T03:01:52","date_gmt":"2019-08-21T17:01:52","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=46106"},"modified":"2020-09-19T10:40:29","modified_gmt":"2020-09-19T00:40:29","slug":"inkscape-vector-image-editor-banner-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/inkscape-vector-image-editor-banner-tutorial\/","title":{"rendered":"Inkscape Vector Image Editor Banner Tutorial"},"content":{"rendered":"
\"Inkscape<\/a>

Inkscape Vector Image Editor Banner Tutorial<\/p><\/div>\n

We got a job recently to create a banner for RJM Programming. No worries, for our MacBook Pro runnning macOS Mojave 10.14.5. Think Pages<\/a> or Gimp<\/a> just for starters (or read this useful link<\/a>). But our specification involved a requirement for 300×350 pixels, which is not a popular banner size. Of course, you can “work” desktop graphical editors to output data in a variety of formats and sizes, but we think it might be best to decide on a method that comes from a “300×350 banner”<\/a> online search. And examining the resultant links got us to revisit the “vector graphics champion” freeware (and open source) Inkscape<\/a> desktop application (added to our The Best Things In Life Are Free …<\/a> list) we last talked about at Inkscape Vector Image Editor Primer Tutorial<\/a>.<\/p>\n

And so, with the great Inkscape, how did we create our 300×350 pixel banner below?<\/p>\n

<\/img><\/p>\n

In broad brush terms …<\/p>\n

    \n
  1. Click the Inkscape icon (which, after install, we arranged to reside in the Dock down the bottom of the screen)<\/li>\n
  2. File -> New … for blank vector graphics document … but we direct your attention to the “New from Template…” which could be really useful for you to avoid having to do the step below …<\/li>\n
  3. File -> Document Properties … Custom Size: Units – pixels, Width – 300, Height – 350 … Viewbox: Width – 300, Height – 350 … Close the Document Properties window via red close icon at top left<\/li>\n
  4. Did the vector graphics artwork, involving, for us, Create 3d boxes, Create and edit text objects, Draw calligraphic or brush strokes<\/li>\n
  5. File -> Save As… this is where we learn that Inkscape may be a vector graphics editor, but that doesn’t mean you can’t Save As another image type, and so with the Type dropdown, we choose Cairo PNG (*.png) (from the default Inkscape SVG (*.svg) format)<\/font> and after arranging a good path to save to, we entered Name: drawing.png … and clicked Save button<\/li>\n
  6. Separately, to check the 300×350 pixel requirement, we open our MAMP<\/a> directory \/Applications\/MAMP\/htdocs\/drawing.png as http:\/\/localhost:8888\/drawing.png (in a Safari web browser window), open Develop -> Show Web Inspector and click the Inspect button to highlight our Inkscape created PNG image to confirm its size as 300×350 pixels<\/li>\n<\/ol>\n

    … and rest assured it is possible via Inkscape’s File -> Open… to open this (non-vector) PNG image that gets Imported back into the vector graphics that is Inkscape’s thang<\/strike>thing.<\/p>\n

    <\/img><\/p>\n

    Did you know?<\/i><\/b><\/p>\n

    We’re runnning macOS Mojave 10.14.5 here on this MacBook Pro in August, 2019. Inkscape needs an X11<\/a> terminal application to interface to, that being (called) XQuartz in this day and age. But installing the 2.7.11 most recent XQuartz version, at the time of writing, caused issues with the Inkscape<\/a> 0.92.2 installation. You’d click the Inkscape icon and in the dock it would jump up and down then effectively die. Even in Finder, Ctrl clicking to reveal Package Contents and get to the Unix executable in the Contents and then macOS folders, to click, same problem. But, thanks to the advice at this great link<\/a>, we found that going back through the XQuartz version releases<\/a> to its 2.7.9<\/a> version cleared up all these issues.<\/p>\n

    \n

    Previous relevant Inkscape Vector Image Editor Primer Tutorial<\/a> is shown below.<\/p>\n

    \"Inkscape<\/a>

    Inkscape Vector Image Editor Primer Tutorial<\/p><\/div>\n

    As far as image editing goes at RJM Programming, we turn to …<\/p>\n