#127: How to Make Stitched Like Letter Style and Icon

Dibaca 1,236 kali

 

Saya lupa pernah nyimpen gambar step by step membuat vector seperti gambar di atas. Waktu saya buka-buka folder simpenan vector saya, baru keliatan deh. :T.T:

Satu set web icon yang udah jadi dengan menggunakan teknik ini pernah saya jadiin freebie. Silahkan kalau mau download.

Stitched Like Web Icon Download

Gambar ini saya simpen waktu membuat web icon itu dulu. Mudah-mudahan saya gak lupa caranya gimana (maklum pikunan). :lol:

Yuk kita mulai aja.

Software: Adobe Illustrator CS 5

Kesulitan: Pemula (macem saya)

Lama Pengerjaan: 15-20 menit (bentaran doang) 

LANGKAH 1

Buat file baru dengan ukuran berapa saja, terserah. Pastikan grid-nya kelihatan agar lebih mudah mengerjakannya. Klik show grid dari menu view.

Click to enlarge.

LANGKAH 2

Buat sebuah kata dengan huruf apa saja. Saya menyarankan huruf yang agak gendut agar efek stitched-nya lebih kelihatan. Saya menggunakan font Hobo Std Medium.

Click to enlarge.

LANGKAH 3

Buka tab appearance dari menu window –> appearance. Klik add new fill.

Click to enlarge.

Warna default untuk fill ini adalah hitam. Biarkan saja warnanya hitam dulu. Kita akan mengganti warnanya belakangan.

Click to enlarge.

LANGKAH 4

Klik sekali lagi tombol add new fill. Kali ini ganti warnanya dengan ungu (seperti di gambar).

Click to enlarge.

LANGKAH 5

Dengan fill yang berwarna ungu masih di-select, klik add new effect –> convert to shape –> rounded rectangle.

Click to enlarge.

Buat panjang dan lebarnya menjadi relatif dengan besar 18 pixel dan corner radius menjadi 9 pixel.

Click to enlarge.

LANGKAH 6

Dalam keadaan fill yang berwarna ungu tadi masih di-select, klik duplicate selected item, ubah warnanya menjadi abu-abu.

Click to enlarge.

Lalu klik add new effect –> path –> offset path.

Click to enlarge.

Isi angkanya sesuai dengan gambar di bawah ini:

Click to enlarge.

Akan muncul bingkai berwarna abu-abu dibagian luar bidang berwarna ungu.

LANGKAH 7

Select fill yang paling atas (berwarna hitam yang menjadi warna font) dan ganti warnanya menjadi gradient abu-abu. Gradient akan terlihat lebih bagus dibandingkan apabila warnanya flat saja.

Click to enlarge.

LANGKAH 8

Klik add new stroke.

Click to enlarge.

Sekarang kita akan membuat efek jahitan di dalam font-nya. Klik stroke di appearance panel, klik dashed line. Masukkan angkanya sesuai dengan gambar berikut:

Click to enlarge.

Garis putus-putus akan muncul di sisi paling luar font-nya. Kita akan membuat garis putus-putus itu berada di dalam font-nya sehingga efek jahitannya kelihatan lebih bagus. Klik add new effect –> path –> offset path.

Click to enlarge.

Masukkan angkanya sesuai dengan gambar berikut:

Click to enlarge.

LANGKAH 9

Kita akan membuat bayangan di bawah font untuk memberikan kesan depth. Select fill font yang berwarna gradient abu-abu lalu klik duplicate selected item. Ganti warnanya menjadi abu-abu biasa tanpa gradient.

Click to enlarge.

Klik tanda segitiga disamping tulisan fill lalu klik tulisan opacity. Ganti tipe opacity dengan multiply. Masih dengan keadaan fill abu-abu di-select, klik add new effect –> distort & transform –> transform. Isi dengan anga seperti di gambar berikut ini:

Click to enlarge.

Efek bayangan akan muncul dan memberikan kesan depth.

LANGKAH 10

Select fill yang berwarna ungu, kita akan memberikan gradient untuk membuat tampilannya menjadi lebih hidup. Masukkan dua stop di gradient bar. Satu berwarna ungu dan satu lagi berwarna ungu yang lebih gelap. Lihat gambar untuk lebih jelasnya.

Click to enlarge.

LANGKAH 11

Kita akan membuat efek jahitan di sekeliling dalam bidang segiempat berwarna gradient ungu. Klik add new stroke.

Click to enlarge.

Klik add new effect –> convert to shape –> rounded rectangle.

Click to enlarge.

Masukkan angkanya sesuai gambar:

Click to enlarge.

Lalu set stroke-nya sesuai dengan gambar:

Click to enlarge.

Ubah warna stroke-nya sesuai dengan keinginan kamu. Saya memilih menggunakan warna hijau muda.

Click to enlarge.

Lalu, kita akan membuat bayangan untuk kesan depth. Klik duplicate selected item.

Click to enlarge.

Ubah opacity style-nya menjadi multiply.

Click to enlarge.

Klik add new effect –> distord & transform –> transform. Masukkan angkanya sesuai gambar:

Click to enlarge.

Ubah warnanya menjadi abu-abu:

Click to enlarge.

Dan putar orientasinya ke bawah dengan memasukkan angka -90:

Click to enlarge.

Dan, kita selesai!

Hasil akhirnya:

Click to enlarge.

Simpan style ini ke graphic style dengan cara hold dan drag. Dengan cara ini, kita bisa mengubah huruf, kata, atau gambar menjadi style seperti ini tanpa harus membuatnya lagi dari awal.

Click to enlarge.

 

Yuk, kita tes graphic style-nya. Buat kata apa saja, lalu select kata itu dan klik icon style ini di menu graphic style.

 Click to enlarge.

Kalau semua langkahnya benar, kata itu akan berubah. Tes dengan icon:

 Click to enlarge.

 

Untuk mengubah penampilan warna style ini, bisa langsung di-setting di appearance panel:

Click to enlarge.

 

Begitu juga dengan warna stroke-nya:

Click to enlarge.

 

Hasil iseng ngubah-ngubah warna:

 

Selamat mencoba ya manteman. Good luck! :cutesmile:

4 Comments

  1. assa
    Aug 7, 2013

    aku cari2 tutor untuk illustrator dari web indo jarang jew… alhamdulillah ketemu web nya ibu..
    thanks bangets ya…
    tapi tetep saya tunggu update-tan-nya… bu..
    save page dulu

    • octanh
      Aug 15, 2013

      Makasih. Tapi saya udah jarang bikin tutorial AI sekarang…. Hiks. :cry:

  2. Anton
    Feb 1, 2013

    wahh…bookmarks dl mbak, keren, rinci bgt step by step. ntar mau dicoba. tengkyu ya mbak…

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

:| :twisted: :teror: :sniff: :siul: :roll: :oops: :nyucuk: :ngiler: :ngikik: :music: :mewek: :lol: :hohoho: :evil: :die: :cutesmile: :cry: :bored: :T.T: :D :?: :> :-x :-o :-P :-? :( 8-O 8)