In this tutorial, you will learn how to create a design comp using Inkscape and two image files.

To complete this tutorial, you will need

• Inkscape
• hc-umd.png
• tile.png

Instructions

1. Launch Inkscape
2. Create a webpage-sized design space
   
   • Select File (menu) | New | desktop_800x600
3. Save your wireframe design space to your flashdrive
   
   • Select file (menu) | Save
4. Add a Snap-to-Grid overlay to help you position your design comp elements
   
   • Select shift + #
5. Import and position background image for logo area
   
   • Select file (menu) | import (ctrl +i)
   • Navigate to your drafts folder and select <hc-umd.png>.
   • Position <hc-umd.png> in the upper right-hand of your drawing canvas
     
     • mouse-over <c>
     • right-click
     • select "image properties"
     • set the x/y coordinates to 0/0
6. Insert and position a single background-image tile
   
   • Select file (menu) | import (ctrl +i)
   • Navigate to your drafts folder and select <tile.png>.
   • Position <tile.png> in the upper right-hand of your drawing canvas
     
     • mouse-over <tile.png>
     • right-click
     • select "image properties"
     • set the x/y coordinates to 472/0
7. Generate your global navigation containing block
   
   • Select <tile.png>
   • Select edit (menu) | clone | create tiled clones
   • On the "Create Tiled Clones" interface,
     
     • change width/height to 318 (width) and 594 (height)
     • select create
8. Select and group your cloned background images
   
   • Select crtl + a
   • Deselect <hc-umd.png> by
     
     • holding down the <shift> key
       selecting <hc-umd.png>
   • select ctrl + g
9. Resize and reposition your grouped background image
   
   • Change Inkscape's H (height) command control to from 616 to 600
   • Change Inkscape's Y (horizontal) command control from -16.00 to 0.00
10. Insert and resize lorum ipsum text box
    
    • Select effects (menu) | render | lorum ipsum
    • Set the number of lorum ipsum paragraphs to
      
      • 5 paragraphs
      • 4 sentences per paragraph
    • Set X/Y coordinates to 20/200
    • Set H/W coordinates to 430/180
11. Save as .svg (i.e., scalable vector graphics)
    
    • Select File (menu) | Save (Ctrl + s)
12. Output as .png (i.e., portable network graphics)
    
    • Select File (menu) | Export Bitmap
    • Navigate to a folder on your computer or removable media by
      • Selecting "Browse"
      • Selecting "Browse for other folders"
      • Navigating to the folder you want to hold your web-ready wireframe
    • Export your file to the selected folder by
      • entering a filename
      • adding the .png extension
      • selecting "save"
    • Select Export