Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop (Bagian 1)

Dalam tutorial ini, saya akan memperlihatkan proses pembuatan sebuah logo bergaya retro namun memiliki kesan modern melalui penambahan pencahayaan dan pola-pola lembut. Kita menggunakan Photoshop dan Illustrator dalam proses ini. Di bagian pertama ini, saya akan menunjukkan teknik dasar manipulasi objek sederhana di Illustrator.

Preview

Di bawah adalah hasil akhir yang akan kita peroleh.

final.jpg

Di bagian pertama tutorial ini, kita akan mendesain rangka (wireframe) logo terlebih dahulu.

tutorial-logo-retro-ps-ai-25.jpg

Detail Tutorial

  • Tingkat Kesulitan: Pemula, Menengah
  • Software yang Digunakan: Adobe Illustrator
  • Teknik yang Dipelajari: Penggunaan Guide, Type on A Path, Manipulasi Shape Sederhana.
  • Lama Pengerjaan: 30 menit

Tutorial

Langkah 1: Menyiapkan Kanvas

Mulai dengan membuat file baru. Tampilkan penggaris dengan menekan Ctrl + R. Geser dari penggaris ke tengah kanvas untuk membuat guide.

tutorial-logo-retro-ps-ai-01.jpg

Langkah 2: Bentuk Dasar Logo

Aktifkan tool ellipse (L). Tahan Shift + Alt lalu geser dari tengah kanvas untuk membuat sebuah lingkaran sempurna.

tutorial-logo-retro-ps-ai-02.jpg

Langkah 3

Aktifkan tool Star. Klik satu kali di atas kanvas untuk memunculkan kontak dialog tool Star. Isikan Points: 50 lalu klik OK. Hapus bintang yang dihasilkan karena kita tidak akan menggunakannya.

tutorial-logo-retro-ps-ai-03.jpg

Langkah 4

Dengan langkah yang sama seperti pembuatan lingkaran tadi dan kombinasi tombol Ctrl, buat bintang di dalam lingkaran.

tutorial-logo-retro-ps-ai-04.jpg

Langkah 5

Klik Effects > Stylize > Round Corners. Efek ini akan mengubah ujung tajam di bintang menjadi bentuk lingkaran.

tutorial-logo-retro-ps-ai-05.jpg

Langkah 6

Buat lagi lingkaran lebih kecil di dalam. Di panel Stroke, aktifkan Dashed Line untuk menghasilkan garis putus-putus.

tutorial-logo-retro-ps-ai-06.jpg

Langkah 7

Lagi, buat lingkaran lebih kecil.

tutorial-logo-retro-ps-ai-07.jpg

Langkah 8

Buat lagi dua lingkaran lebih kecil. Atur Fill ke None dan isi Stroke dengan hitam. Atur Stroke lingkaran paling dalam menjadi 3 pt.

tutorial-logo-retro-ps-ai-08.jpg

Langkah 9

Ubah kedua lingkaran menjadi shape dengan cara klik Object > Expand. Mulai saat ini, mereka bukan lagi lingkaran dengan Stroke hitam tapi berbentuk cincin hitam.

tutorial-logo-retro-ps-ai-09.jpg

Langkah 10

Buat sebuah kotak memotong bagian bawah lingkaran.

tutorial-logo-retro-ps-ai-10.jpg

Langkah 11

Seleksi salah satu lingkaran dan persegi yang tadi kita buat. Buka panel Pathfinder dengan klik Window > Pathfinder. Klik ikon Minus Front.

tutorial-logo-retro-ps-ai-11.jpg

Bentuk cincin akan terpotong.

tutorial-logo-retro-ps-ai-12.jpg

Langkah 12

Lakukan hal yang sama dengan lingkaran satu lagi.

tutorial-logo-retro-ps-ai-13.jpg

tutorial-logo-retro-ps-ai-14.jpg

Langkah 13

Buat bintang di kedua sisi.

tutorial-logo-retro-ps-ai-15.jpg

Langkah 14

Tambahkan teks 100 percent.

tutorial-logo-retro-ps-ai-16.jpg

Langkah 15: Pita

Buat shape persegi lalu seleksi dua titik di sisi bawah. Aktifkan tool Scale lalu geser ke tengah.

tutorial-logo-retro-ps-ai-17.jpg

Langkah 16

Aktifkan tool pen. Klik bagian tengah sisi atas untuk menambah titik baru. Tahna Alt lalu geser kedua titik untuk mengubahnya menjadi titik lengkung. Seleksi kedua titik tadi dengan tool Direct Selection dan geser ke atas.

tutorial-logo-retro-ps-ai-18.jpg

Langkah 17

Buat persegi, tambahkan titik baru di tengah sisi kiri lalu geser ke tengah. Simpan shape di belakang.

tutorial-logo-retro-ps-ai-19.jpg

Langkah 18

Gambar sebuah segitiga dan simpan di antara kedua bagian pita.

tutorial-logo-retro-ps-ai-20.jpg

Langkah 19

Seleksi bagian belakang pita. Klik kanan dan pilih Transform > Reflect. Pilih Vertical lalu klik Copy.

tutorial-logo-retro-ps-ai-21.jpg

Langkah 20

Simpan shape hasil duplikasi ke sisi pita yang lain.

tutorial-logo-retro-ps-ai-22.jpg

Langkah 21

Duplikasi bagian depan pita. Hapus sisi kiri, kanan, dan atas. Aktifkan tool Type on A Path lalu klik path untuk menambahkan teks.

tutorial-logo-retro-ps-ai-23.jpg

Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop

Langkah 22

Simpan teks di atas pita.

tutorial-logo-retro-ps-ai-24.jpg

Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop

Langkah 23

Terakhir, saya tambahkan satu lagi lingkaran di bagian luar logo.

tutorial-logo-retro-ps-ai-25.jpg

Hasil Akhir

Dalam tutorial bagian kedua, kita akan mengimport path vektor logo yang diperoleh ke Photoshop lalu menghiasnya dengan layer style, pencahayaan, dan pola-pola agar terlihat modern.

final.jpg

Iklan

18 thoughts on “Mendesain Logo Bergaya Retro dengan Illustrator dan Photoshop (Bagian 1)

  1. mas jeprie yang baik, semoga menjadi amal yang baik. itu yang selalu saya ungkapkan supaya ilmu-ilmu berharga seperti ini bermanfaat bagi orang lain termasuk saya. posting selanjutnya saya tunggu ๐Ÿ™‚

  2. sal kenal gan
    mantab gan tutorialnya
    tolong dong tutorial cara buat semut naik motor
    ato buat semut gituaja gan
    plisssssssssss
    .,..,.,.,.,..,..,

  3. Kemarin beli buku “panduan lengkap buat web dari photoshop hingga html” semalam saya baca, sangat apik penyejiannya to the point. Banyak ilmu praktis yang diterapkan, mungkin setelah ini ke implementasi tingkat lanjut agar bisa di jadikan satu dengan koleksi saya yang lain. saran mas, untuk video tutorialnya di laptop saya suaranya kecil banget kadang nggak jelas. ini bisa jadi bekal buat menambah keahlian.

    hmm, commentku pada kemana ya ๐Ÿ˜ฆ apa masuk ke spam sih

  4. Implementasi tingkat lanjut sudah diperkirakan. Tapi, mengingat halaman yang terbatas (tidak boleh lebih dari 100) kami perlu mencukupkan hingga HTML.

    Saya tidak menggunakan alat professional dalam pembuatan video tutorial. Memang kendalanya suara video sangat kecil. Saya sarankan coba menggunakan handphone, mungkin suaranya bisa dibuat lebih keras.

    Komentar sudah dikeluarkan dari tong sampah. ๐Ÿ™‚

  5. Nanya dong, bagaimana caranya agar saat meng-create bintang nya agar tidak terlalu lancip (agar sama seperti tutor diatas)? Terimakasih sebelumnya

  6. Selamat malam mas….saya mau nanya cara buat logo yang kelihatan 3 dimensi.. kalo mas berkenan apa boleh saya minta email mas agar saya mau coba belajar buat model 3 dimensi… trims

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s