Scribd
Upload
454 views8 pages

Pencil Tutorial - Updated

The document provides instructions for downloading and using the Pencil Project UI/prototyping tool. It explains how to install Pencil, create a new document, select mobile Android shapes to start designing a UI mockup, save the project with your student ID as the file name, edit the page name, and export the design as a PNG image.

Uploaded by

Muhammad Abbas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
454 views8 pages

Pencil Tutorial - Updated

The document provides instructions for downloading and using the Pencil Project UI/prototyping tool. It explains how to install Pencil, create a new document, select mobile Android shapes to start designing a UI mockup, save the project with your student ID as the file name, edit the page name, and export the design as a PNG image.

Uploaded by

Muhammad Abbas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

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

You might also like