Adobe 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.
Use the browser of your choice and go to www.interfacesketch.com.
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
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.
Drawing Tool Bar.
The Adobe Drawing Tool Bar is pretty simple – with five options.
- Brush Selection.
- Brush Size.
- Opacity of Color.
- Color Selection.
Top left Menu Bar
The top left menu has a few tools that are very different from one another.
- Export Button – access to a wide range of sharing apps.
- Shapes – Add free clip art.
- Lines Tool – Draw precise lines.
- Full Screen button to hide menus.
Top right Close command.
Press the close button to return back to the Adobe Draw projects.
- Close Button.
7. Add Device Template
To add the Device Template that were captured during step 3.
- Click the Layers Icon.
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
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.
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
13. Choice Your Brush Color
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
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
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.