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