Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Di tutorial ini, kita akan membuat sebuah ikon dengan tampilan tiga dimensi untuk aplikasi apple. Kita akan menggunakan template PSD gratis sehingga mempermudah proses desain.

Preview

final

Detail Tutorial

  • Tingkat Kesulitan: Pemula, Menengah
  • Software yang Digunakan: Adobe Photoshop
  • Teknik yang Dipelajari: Vektor Mask, Stroke
  • Lama Pengerjaan: 25 menit

Resource yang Dibutuhkan

Untuk mengikuti tutorial ini, silakan ambil terlebih dahulu resource berikut:

Tutorial

Langkah 1

Pertama, ambil file template gratis dari All the sizes of iOS app icons. Buka file tersebut di Photoshop.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 2

Ambil tekstur kayu dari shutterstock. Anda juga bisa menggunakan alternatif gratis dari deviantart. Ikon kita ini akan terbuat dari kayu.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 3

Kita ingin membuat ikon berukuran 114 × 114 pixel. Klik kanan group layer tersebut dan pilih Duplicate ke file baru (New).

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 4

Kita tidak membutuhkan layer sample shape dan stripes. Geser keduanya ke atas ikon tempat sampah untuk menghapusnya.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 5

Sembunyikan group layer Apple’s Pre Supplied. Grup ini berisi efek glossy yang akan ditambahkan Apple pada setiap ikon.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Seperti inilah tampilan dasar ikon kita.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 6

Ubah warna dasar ikon menjadi coklat muda, sesuai dengan warna permukaan kulit kayu.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 7: Layer Mask

Seleksi path bentuk dasar ikon dengan tool Select.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 8

Tekan Ctrl + C untuk menduplikasi path. Aktifkan grup ikon lalu tekan Ctrl + V. Klik ikon Add Layer Mask untuk menambahkan vektor mask pada grup.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Dengan cara ini, apa pun yang kita buat di dalam grup –misalnya lukisan acak seperti di bawah– akan terbatasi di dalam bentuk ikon.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 9

Kita membutuhkan vektor mask, yaitu kotak yang kedua. Kotak pertama, yaitu layer mask pixel biasa, bisa kita buang. Ini akan sedikit menghemat memori dan memperkecil ukuran file.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 10

Untuk mempermudah, kita isi latar dengan warna. Tambahkan Adjustment Layer Solid Color di belakang ikon dengan warna orange muda. Klik ganda layer dan tambahkan Pattern Overlay dengan pola pixel pattern dari PSDfreemium.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 11

Ambil tekstur kayu dan simpan di atas bentuk dasar ikon. Ubah blend mode layer menjadi Multiply jika tekstur yang dihasilkan terasa kurang kuat.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 12

Ctrl-click bentuk dasar ikon untuk membuat seleksi berdasarkan pada ukurannya. Buat layer baru. Klik Edit > Stroke. Pilih warna hitam dengan ukuran 2 px.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 13

Haluskan dengan memberi Filter > Blur > Gaussian Blur.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 14

Turunkan Opacity layer.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 15

Tambahkan Adjustment Layer Levels dan geser ketiga parameter agar diperoleh tekstur yang lebih kuat.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 16: Memberi Efek Tiga Dimensi

Sekarang kita akan mengubah bentuk ikon yang datar menjadi tiga dimensi. Duplikasi path bentuk dasar ikon. Buat lagi duplikasi path yang sama dan geser ke atas. Untuk path yang terakhir, ubah mode path menjadi Subtract.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 17

Tambahkan adjustment layer Brightness/Contrast dan turunkan nilai Brightness.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 18

Buat layer baru dan ubah menjadi Clipping Mask dengan menekan Ctrl + Alt + G. Lukis hitam dengan tool Brush beropacity untuk menggelapkan bagian bawah ikon.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 19

Ulangi proses ini hingga kita peroleh bagian bawah yang gelap dan tampilan tiga dimensi yang realistik.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 20

Tambahkan lagi contrast pada ikon dengan menambahkan Adjustment Layer Levels.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Di bawah, Anda bisa melihat perbedaan sebelum dan setelah pemberian Levels.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 21: Bayangan Ikon

Untuk tampilan tiga dimensi yang realistik, tentu kita butuh bayangan. Ctrl-klik bentuk dasar ikon. Buat layer baru di paling bawah dan isi dengan hitam.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 22

Haluskan bayangan dengan memberinya Gaussian Blur.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 23

Geser layer beberapa pixel ke bawah. Turunkan Opacity layer.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 24

Duplikasi layer bayangan tadi. Beri lagi Gaussian Blur yang lebih besar. beri Opacity yang jauh lebih kecil untuk menghasilkan bayangan yang lebih lembut lagi.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 25

Mulai langkah ini, Anda sudah bisa mengganti tekstur dengan yang lain. Misalnya dengan tekstur beton seperti ini. Hasilnya akan tetap terlihat tiga dimensi.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 26

Untuk ilustrasi, saya tambahkan ikon Desaindigital yang terdiri dari beberapa shape berbeda warna. Semua layer shape tersimpan di layer terpisah dalam sebuah grup.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 27

Untuk efek emboss, saya tambahkan Layer Styles berikut.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Inilah hasil yang diperoleh.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Langkah 28: Efek Tambahan dari Apple

Untuk melihat tampilan akhirnya, aktifkan kembali grup Apple’s Pre-Supplied.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Hasil Akhir

Kita baru saja belajar cara membuat sebuah ikon dengan cara lebih mudah menggunakan template PSD yang tersedia gratis di internet. Di bawah adalah hasil akhir tutorial yang kita peroleh.

Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

Download Link

Download File PSD

Iklan

3 thoughts on “Mendesain Ikon Tiga Dimensi untuk Aplikasi Apple

  1. sebenarnya saya sudah lama sekali berkunjung di website ini, saya juga sering melihat penulis di gramedia juga psdtuts+ , dan lainnya, mungkin di lain kesempatan bisa dong berbagi tips agar bisa jadi desainer dengan penuh inspirasi 😀
    jujur saja, tutorial photoshop berkualitas tinggi sangat jarang di Indonesia, desaindigital menurut saya adalah yg terbaik, dilihat dari sisi original, teknik, desain web, setingan web, tata bahasa, gambar, semua berstandar tinggi.

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