Aplikasi Pencil

Pencil

Pencil adalah sebuah aplikasi perangkat lunak open source yang di gunakan untuk membuat desain UI (User Interface). Pencil juga tersedia untuk berbagai sistem operasi seperti Linux, Windows, dan MacOS.

Tampilan awal Pencil

Gambar 0.1

Menubar yang terdapat pada pencil :

1. Document

Pada menubar Document terdapat New Window , New Document, Save , Save As, Recent Documents, Export Selection as PNG, Export Page as PNG, Export Document, Print dan exit.

Gambar 1.0

2. Edit

Pada menu Edit terdapat undo, redo, cut, copy, paste, delete dan select all.

Gambar 1.1

3. View

Pada menu View terdapat Collection Pane, Hide Heavy Elements dan Fullscreen.

Gambar 1.2

4. Shape

Pada menu Shape terdapat Group,Ungroup,Make same width,height, min width,min height, align left,right,top,bottom,middle, same horiz space dan same vert space.

Gambar 1.3

5. Tools

Pada menu Tools terdapat Clipart Browser, Install new Collection, Manage Export Template, Developer Tools, dan Options. 

Gambar 1.4

6. Help

Pada menu Help terdapat About.

Gambar 1.5

Ribbon Yang Terdapat Pada Pencil :

Gambar 2.0

1. File

            Di file terdapat icon shortcut New document, Open existing document,  Save current document, dan Print current document.

Gambar 2.1

2. Edit

            Di Edit terdapat icon shortcut Copy, Cut, dan Paste.

Gambar 2.2

3. Zoom

            Di Zoom terdapat icon shortcut Zoom in, Actual size, dan Zoom out.

Gambar 2.3

4. Text format

            Di Text format terdapat icon shortcut Bold, Italic, Copy shape format. Terdapat Combo Box Font face, dan terdapat Spin input Font size.

Gambar 2.4

5. Location & size

            Di Location & size terdapat Spin input Left, Top, Width, Height, dan Rotation.

Gambar 2.5

6. Alignment

            Di Alignment terdapat icon shortcut Align Left, Align center, Align right, Align top, Align middle, dan Align bottom.

Gambar 2.6

7. Same sizes & spaces

            Di Same sizes & spaces terdapat icon shortcut Make same width, Make same height, Make same horizontal space, dan Make same vertical space.

Gambar 2.7

8. Color

            Di color terdapat icon shortcut Change text color.

Gambar 2.8

9. Line

            Di line terdapat spin input ketebalan garis dan Combo Box.
 

Gambar 2.9

Shape interface yang disediakan Pencil :

·          * Common Shapes

·          * Basic Web Elements

·         * Dekstop - GTK Widgets

·         * Dekstop - Native UI Widgets

·         * Desktop - Sketchy GUI

·         * Desktop - Windows XP Widgets

·         * Flowchart

·         * Mobile - Android ICS

·         * Mobile - iOS UI Stencils

·         * Mobile - iOS Wireframe

Cara menggunakan Pencil sangat mudah hanya drag objek yang tersedia di dalam shapes filter interface(sebelah kiri window) dan drop ke lembar kerja berwarna putih(sebelah kanan window).

Contoh pembuatan desain gadget sederhana

Pertama pilih iPhone di Mobile – iOS UI Stencils drag iPhone tersebut ke lembar kerja hasil setelah di drag dan drop bisa dilihat di Gambar 3.0.

Gambar 3.0

Kemudian tambahkan model apa saja ke dalam lembar kerja sesuai dengan keinginan dengan cara yang sama yaitu dengan drag dan drop. Disini saya menambahkan status bar, picker background dan loading seperti pada Gambar 3.1.

Gambar 3.1

Jika objeknya telah selesai disusun, Group objek-obek tersebut dengan cara menekan tombol Ctrl+G. Agar objek tersebut lebih mudah kita atur rotasi, penempatan, lebar, panjang, dll.

Kemudian setelah selesai mengatur objek tersebut maka klik desainya lalu pilih menu Document pilih "Export Selection as PNG" untuk membuat desain yang kita buat menjadi gambar dengan extensi .png seperti pada output Gambar 3.2

Output

Gambar 3.2

*Jika ada kritik, saran, pertanyaan, dan tanggapan dari pembaca silahkan berkomentar, bertanya, dan berdiskusi dengan sopan pada bagian komentar yang telah disediakan. Terimakasih