IMG_0885Adobe Draw is one of Adobe’s latest mobile app. Adobe Draw is designed for the creative community to get away from having to draw with a mouse. I for one love sketching my visual ideas on my iPad.
Here are the steps I used to create quick app prototypes using Adobe Draw.

STEP 1. Capture template files

The first step for creating our app prototypes will begin online.
IMG_0878Use the browser of your choice and go to

2. Locate the template your need

Scroll to the template that you wish to use. Here four examples – there are many choices.

    3. Capture the Template

    Many of the templates have links to PDF documents. Position your template to fill as much of the screen as possible. When viewing PDF documents on a iPad – all of the PDF controls will be present on the screen while you navigate the PDF document. However, if you remove your hands and pause – all the PDF controls will disappear – making for an cleaner template.
    TO CAPTURE: One the iPad. Press the HOME Key and the Side Button at the same time. The screen will do a quick flip. The screen shot is saved directly to the iPad camera roll.

    4. Launch Adobe Draw

    Launch Adobe Illustrator Draw. For the best results use a stylist of your choice to draw directly on your iPad to create quick app prototypes.

    IMG_08875. Create a New Project

    To create a new project simply click the + sign on the sidebar.


    6. Work in Full Screen mode

    Tap one time on the project window. The project will go to full screen. Three items that are worth noting.

    • Drawing Tool Bar.
    • Top left Menu Bar
    • Top right Close command.

    IMG_0889Drawing Tool Bar.

    The Adobe Drawing Tool Bar is pretty simple – with five options.

    1. Brush Selection.
    2. Brush Size.
    3. Opacity of Color.
    4. Color Selection.
    5. Layers.

    Top left Menu Bar

    The top left menu has a few tools that are very different from one another.

    1. Export Button – access to a wide range of sharing apps.
    2. Shapes – Add free clip art.
    3. Lines Tool – Draw precise lines.
    4. Full Screen button to hide menus.

    Top right Close command.

    Press the close button to return back to the Adobe Draw projects.

    1. Close Button.

    7. Add Device Template

    To add the Device Template that were captured during step 3.

    • Click the Layers Icon.

    IMG_08918. Choice the source for your photo

    Images can be imported into Adobe Draw from many different sources. For our project – the screen shots that were captured automatically save to Images On my iPad. 

    • Click On my iPad 

    9. Select

    Navigate to the Camera Roll to locate the captured screen shoots.

    10. Locate Device Template Image

    Locate the Device Template image of your choice.
    The template image will load into place. You will notice that the template screen capture includes the iPad frame. This can be trimmed off prior to importing into Adobe Draw. I don’t mind the frame being there and am happy to save myself the step of editing the screen captures. IMG_0894

    11. Select a Drawing Layer

    To begin drawing be sure that you have the drawing layer selected.

    • Clip the layer icon.
    • Click on the upper layer to select.


    12. Select your Brush Style

    On the right sidebar – click the brush icon to open the brush palette.
    Experiment with the different brush styles to find a look that you like.
    IMG_0896 (1)

    13. Choice Your Brush Color

    Yes Adobe Draw has a vast color palette. Simple click on the color button.

    14. Zoom around your work space

    Adobe Edge supports all the basic iPad gestures.

    • ZOOM – Yes two finger pinch will zoom into your work.
    • UNDO – Two fingers ran quickly from the right to the left


    15. Draw your Design

    Using a stylish of your choice begin to draw your app prototypes.

    16. Use Color to Highlight Features

    The purpose of creating the prototype is to create quick design ideas – often working in black in white will be enough for most basic designs. However, color may be used to help highlight app layout and functions.
    In the example below the green bar highlights where the app ad banner will run.

    17. Add Detail to App Prototype

    Add as much detail to your App Prototypes as you need.

    18. Export your work.

    Using the share button – located on the top right menu.

    • Click Share Button
    • Choice which service you which to use to share.
    • Follow on screen instructions to complete your share.