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

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:

• iPhone 4 icon PSD file dari Sebastiaan de With
• Tekstur Kayu dari shutterstock.com
• Pola Pixel dari PSDfreemium
• Tekstur Beton dari shutterstock.com
• Tekstur Kayu dari hatch1921 (Alternatif Gratis)
• Tekstur Beton dari shadowh3 (Alternatif Gratis

Tutorial

Langkah 1

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

Langkah 2

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

Langkah 3

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

Langkah 4

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

Langkah 5

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

Seperti inilah tampilan dasar ikon kita.

Langkah 6

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

Langkah 7: Layer Mask

Seleksi path bentuk dasar ikon dengan tool Select.

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.

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

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.

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.

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.

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.

Langkah 13

Haluskan dengan memberi Filter > Blur > Gaussian Blur.

Langkah 14

Turunkan Opacity layer.

Langkah 15

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

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.

Langkah 17

Tambahkan adjustment layer Brightness/Contrast dan turunkan nilai Brightness.

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.

Langkah 19

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

Langkah 20

Tambahkan lagi contrast pada ikon dengan menambahkan Adjustment Layer Levels.

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

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.

Langkah 22

Haluskan bayangan dengan memberinya Gaussian Blur.

Langkah 23

Geser layer beberapa pixel ke bawah. Turunkan Opacity layer.

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.

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.

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.

Langkah 27

Untuk efek emboss, saya tambahkan Layer Styles berikut.

Inilah hasil yang diperoleh.

Langkah 28: Efek Tambahan dari Apple

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

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.

Download Link