VU CS504

PENCIL PROJECT MANUAL

DOWNLOAD PENCIL
Download the UI/prototyping tool “Pencil Project” using the link
https://pencil.evolus.vn/Downloads.html. Select the setup for download according to your system
specifications.

Other Link
You can also use the following link to download the pencil project tool (for Windows OS):
https://www.fileeagle.com/software/2454/Pencil‐Project/

Once downloaded, run the setup and install it according to the on‐screen instructions.

Virtual University of Pakistan

VU CS504

After the installation is complete. Open Pencil , press “Create a New Document”.

Click “My Shapes”.

Select “Shapes”.

Virtual University of Pakistan

VU CS504

DESIGN MOBILE UI
Click “Mobile ‐ Android ICS”, a complete list of widgets will open.

Start designing your first UI mockup by dragging and dropping android widgets (shapes).

Virtual University of Pakistan

VU CS504

SAVE PENCIL PROJECT

To save the Pencil Project, click three bars on the top left corner of the project window and press save.

The following window will open, browse the location, enter your VUID as a file name (e.g
BC110201442 ) and save the project.

BC110201442

Virtual University of Pakistan

VU CS504

EDIT THE PAGE NAME

To edit the page name, right click on “Untitled page”. Click “Properties”, edit the page title and
update.

Virtual University of Pakistan

VU CS504

EXPORT AS PNG
To add the screenshot of your UI design to your assignment file you can simply use the snipping tool
or follow the instructions given below.

Click three bars on the top left corner of the project window and press “Export”.

The following window will open. Choose “Rasterized graphics (png)” from the drop‐down menu and
click export.

Virtual University of Pakistan

VU CS504

Select output folder.

Your image will be exported to the selected folder as a png image.

Virtual University of Pakistan

VU CS504

Virtual University of Pakistan