Membuat iphone style icon dengan Inkscape

Tutorial level : Beginner

time allocation : 15 minutes

Tutorial ini adalah merupakan sebuah intro dari software free and open source berbasis vektor, Inkscape. dengan tutorial yang sederhana ini, kita dapat membuat hasil karya yang tidak kalah dengan graphic artist yang profesional. berikut akan dijelaskan bagaimana membuat icon atau button dengan iphone style yang dapat digunakan pada aplikasi atau website, namun sebelumnya kita lihat dulu tampilan dari Inkscape :

inkscape1Inkscape memiliki interface yang sederhana dan mudah digunakan, pada bagian atas terdapat Menu Bar, Command Bar dan Control Bar, pada bagian kiri terdapat Toolbox, diposisi bawah terdapat Palette Box dan pada bagian tengah terdapat Canvas dimana kita akan menempatkan objek pada posisi tersebut.

Tujuan dari tutorial ini adalah untuk :

  • mulai mengenal fungsi-fungsi interface pada Inkscape
  • menggunakan Tools dasar dari Inkscape yaitu Select Tool, Rectangle Tool, Gradient Tool, Path Tool dan Text Tool
  • mengaplikasikan efek standar yaitu blur dan gradient pada objek
  • menyimpan objek dengan format standar Inkscape yaitu SVG dan format lain seperti PNG.

Pertama, pilih Rectangle Tool (F4), klik dan drag untuk membuat persegi empat, klik pada Palette Bar pada warna biru. Pada Control Bar dibagian atas interface, masukkan nilai 200 piksel untuk tinggi dan lebar persegi empat (W dan H), dan 20 piksel untuk radius horizontal dan vertikal pojok persegi empat (Rx dan Ry)

2rectangle

Dengan persegi empat terseleksi, pilih Gradient Tool (Ctrl + F1) , pada Tool Bar dibagian atas interface, klik boks Radial Gradient,  klik dan drag mulai dari posisi tengah bawah persegi empat untuk memberikan efek gradient berbentuk radial. Untuk mengubah warna ujung gradient menjadi hitam, klik pada ujung handle gradient yang berbentuk bulat, dan klik pada warna hitam yang terdapat pada Palette Bar.

3gradient

Buat duplikat persegi empat dengan menklik Ctrl + D , klik pada warna putih di Palette Bar, dan ubah ukuran persegi empat menjadi seperti berikut ini :

4whiterectangle

Dengan persegi empat warna putih yang terseleksi, klik pada Gradient Tool dan pilih Linear Gradient pada ToolBar, klik dan drag mulai dari bagian bawah persegi empat hingga ke posisi atasnya seperti berikut ini :

5lineargradient

Berikut kita akan membuat efek glossy pada garis atau stroke yang terdapat di persegi empat yang kecil itu, pertama  dari Menu Bar pilih Object – Fill and Stroke untuk membuat dialog window Fill and Stroke, atau tekan Shift + Ctrl + F , Pada Stroke Style Bar masukkan nilai 1 piksel untuk ukuran stroke atau garis pada persegi empat tersebut, dan pada Stroke Paint Bar, pilih Linear Gradient Bar, dan gunakan Gradient Tool untuk membuat efek gradient pada garis tersebut :

6strokegradient

Selanjutnya kita akan mengubah bentuk persegi empat kecil tersebut menjadi agak sedikit oval pada bagian bawahnya. Dengan persegi empat kecil yang terseleksi, pada Menu Bar pilih Path – Object to Path , kemudian pada Tool Bar pilih Edit Path (F2) dan tarik pada bagian ujung bawah persi empat tersebut seperti berikut ini :

7objectpath

Terakhir, buat logo yang akan ditempatkan pada icon tersebut, misalnya huruf “G” , gunakan Text Tool (F8) yang terdapat pada Tool Bar, gunakan warna putih, duplikat teks tersebut dengan Ctrl + D , beri warna hitam dan beri efek Blur pada Fill and Stroke Bar dengan nilai 2, posisikan teks warna hitam pada bagian bawah teks berwarna putih (Page Down).

icon

Untuk men-save file dengan format standar Inkscape yaitu SVG gunakan perintah File – Save , dan untuk menyimpan Objek dengan format PNG gunakan perintah File – Export. pastikan dulu objek yang akan di-export sudah terseleksi.

Demikian tutorial sederhana ini, mudah-mudahan bisa bermanfaat ! selamat mencoba 🙂

Inkscape adalah software vector graphic editor yang multiplatform 

unduh Inkscape dari http://www.inkscape.org 

Advertisements

3 comments

  1. this is a test message · February 17, 2013

    I like the significant data you provide you with as part of your content articles.I’ll bookmark your web page and test once again right here commonly.I am extremely absolutely sure I’ll learn lots of latest things best right here! Decent luck to the upcoming!

    • susandevy · February 18, 2013

      thank you, please visit my website again for another updates 🙂

  2. sakti · February 18, 2013

    corelnya linux 🙂 ada award nie mba, http://sakti2.wordpress.com/2013/02/18/in-spiring/ btw, bikin svg di gimp memang g bisa khan? bisanya cuma di inkscape…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s