FENDRI

Model desain ikon RSS Feed kini semakin variatif dan beragam. Tutorial ini akan mencoba mengupas proses pembuatan salah satu model ikon ini dengan Photoshop, yaitu ikon RSS Feed model 3D.

Dalam tutorial ini, saya menggunakan Photoshop versi CS3. Namun jangan khawatir, prosesnya masih bisa diikuti dengan versi-versi sebelumnya, setidaknya untuk seri CS.

Grayscale adalah skema warna yang akan kita pakai pada tahap awal. Proses pewarnaan bisa dilakukan pada tahap akhir dengan menggunakan Color Overlay atau layer adjustment Hue/Stauration. Mengingat desain 3D selalu terkait dengan pencahayaan, maka yang paling penting adalah pengaturan intensitas nada terang-gelap pada obyek sesuai arah sumber cahaya.

Langkah 1

Awali dengan membuat dokumen baru berukuran 512 x 512 pixel, resolusi 72 pixel per inch, dan background transparent. Anda boleh menggunakan ukuran dan setingan lain yang berbeda.

Gambarlah obyek bujur sangkar bersudut lengkung menggunakan Rounded Rectangle Tool, mode Shape dan nilai Radius 15 pixel. Untuk fill warna, pakailah warna #696969 atau #777777.

Saat menggambar obyek, tombol SHIFT harus ditekan agar bentuk obyek memiliki ukuran yang proporsional. Besar ukuran obyek ini adalah secukupnya. Jangan khawatir, nanti masih bisa kita sesuaikan ulang. Yang terpenting adalah ukuran obyek harus proporsional atau sama sisi karena kita membuat obyek bujur sangkar.

Setelah itu, masih dalam mode transformasi, rotasikan obyek ini sebesar 45 derajat.

Kini pipihkan obyek secukupnya hingga terlihat seperti sebuah gambar perspektif. Lakukan proses ini dengan cara menarik reference point sisi tengah-bawah ke arah atas dan sebaliknya, sisi reference point tengah-atas ditarik ke ke arah bawah.

Sekarang tekan ENTER untuk menerapkan hasil transformasi. Nama layer pertama ini akan kita sebut dengan Shape 1.

Langkah 2

Proses selanjutnya adalah men-3D-kan obyek.

Pastikan layer layer Shape 1 aktif dan tool yang terpilih adalah Move Tool. Sekarang tekan tombol Ctrl + Alt dan tahan. Lanjutkan dengan menekan tombol Up Arrow sebanyak kurang lebih 24 kali. Cara ini akan menduplikasi layer ke arah atas sejauh 1 pixel per layer duplikatnya.

Bila diuraikan, prosesnya kira-kira bisa dibaca seperti ini; layer Shape 1 diduplikat sehingga menghasilkan layer Shape 1 Copy 1. Saat proses menduplikat layer terjadi, layer Shape 1 Copy 1 akan digeser ke atas sejauh 1 pixel karena kita menekan tombol Up Arrow pada keyboard. Proses ini akan berulang untuk layer Shape 1 Copy 1, layer Shape 1 Copy 2 dan seterusnya secara simultan hingga layer Shape 1 Copy 23 yang menghasilkan duplikat layer terakhir yaitu Shape 1 Copy 24.

Karena kita menduplikat layer sebanyak 24 kali, maka layer yang seharusnya berada paling atas adalah layer Shape 1 copy 24 — atau apapun nama layernya asalkan itu adalah layer duplikat terakhir.

Ganti fill warna layer Shape 1 copy 24 atau layer duplikat paling akhir dengan warna #818181, atau warna yang lebih cerah dibanding fill warna sebelumnya. Maksudnya agar bentuk obyek 3D lebih terlihat jelas karena perbedaan intensitas warna lapisan permukaan dengan tepi box.

Beralih ke palette Layer, Seleksi layer Shape 1 copy s/d Shape 1 copy 30, lalu tekan tombol Ctrl + E untuk me-merge (menggambungkan) layer terseleksi itu menjadi satu layer, lalu ganti namanya menjadi RSS 3D Box.

AWAS! layer Shape 1 TIDAK IKUT di-merge karena kita masih memerlukan obyek aslinya.

Ubah fill warna layer Shape 1 menjadi #A1A1A1, lalu geser urutan layer-nya (dalam palette Layer) ke atas layer RSS 3D Box.

Pastikan terlebih dahulu bahwa Move Tool adalah tool yang terpilih dan layer yang aktif adalah layer Shape 1. Sekarang geser obyek layer Shape 1 ke atas (dalam kanvas) dengan cara menekan Shift + Up Arrow secukupnya hingga obyeknya menempati lapisan permukaan obyek layer RSS 3D Box.

Secara visual, obyek dalam layer Shape 1 kini menjadi semacam lapisan penutup/teratas bagi obyek layer RSS 3D Box.

Langkah 3

Ok, master box 3D-nya sudah kita buat, kini saatnya beralih ke logo RSS Feed.

Import file logo-feed.ai ke dalam kanvas (File > Place). File logo-feed.ai adalah obyek vektor yang sudah saya buat sebelumnya dengan Illustrator. File ini sudah tersedia dalam tutorial kit yang bisa Anda download.

Pada saat dialog Place muncul sesaat setelah Anda memilih file yang akan diimport (logo-feed.ai), pastikan pilihan dalam opsi Crop To adalah Bounding Box agar hanya obyek logo saja yang terpilih dan terimport ke dalam kanvas.

Setelah berhasil di-Place, transformasikan obyek logo feed ini hingga bentuknya kurang-lebih terlihat seperti berikut ini:

Tip: Transformasi termudah yang bisa dilakukan adalah dengan menarik reference point sudut kanan-atas, lalu transformasikan agar terlihat sesuai dengan sudut perspektif obyek RSS 3D Box-nya. Lakukan juga penyesuaian pada reference point lainnya bila memang diperlukan.

Kini saatnya membuat logo RSS itu agar terlihat seperti obyek 3D.

Lakukan proses men-3D-kan logo feed dengan langkah yang sama persis saat membuat obyek pertama (RSS 3D Box), kecuali jumlah duplikatnya yang cukup sekitar 20 saja. Setelah selesai, lanjutkan dengan menggambungkan (merge) layer-layer duplikatnya. Ganti nama layer ini menjadi Logo Feed 3D.

Sekali lagi AWAS, layer asli (layer logo-feed) TIDAK IKUT di-merge. Perlakukan layer ini sama seperti layer Shape 1 karena layer logo-feed juga akan digunakan sebagai obyek permukaan logo 3D-nya.

Kini rasterize layer logo-feed (Layer > Rasterize layer), lalu klik menu Image > Adjustment > Levels (Ctrl + L). Dalam dialog Level, ubah nilai Highlights menjadi 120. Kita bermaksud membuat area permukaan yang lebih terang, sama seperti obyek RSS 3D Box. Dengan menggunakan Move Tool, layer logo-feed harus digeser ke atas obyek Logo Feed 3D dan agar lebih mudah dikenali, ganti namanya menjadi Logo Feed Top.

Hasil proses-proses tadi kurang lebih terlihat seperti berikut:

Anda boleh menambahkan layar baru sebagai layer background dengan fill warna, misal #222222 agar hasilnya bisa dilihat lebih jelas seperti yang terlihat dalam gambar berikut:

Nah, obyek-obyek 3D utama sudah kita buat. Proses selanjutnya adalah menyempurnakan tampilan visual agar lebih sempurna, terutama pada aspek pencahayaan agar kesan glossy dan efek 3D-nya bisa terlihat lebih matang.

Langkah 4

Kita akan membuat area tergelap pada obyek RSS 3D Box. Gunakan Pen Tool dengan mode Paths, lalu gambarlah path kurang lebih seperti gambar berikut:

Tidak perlu terlalu detail atau rapi, yang penting tingginya harus lebih dari tebal obyek RSS 3D Box dan sedikit melekuk pada sisi kanan dan kirinya. Setelah itu klik kanan > Make Selections (nilai Feathering Radius = 0 pixel). Buat layer baru diatas layer RSS 3D Box, lalu fill dengan warna #323232. Layer baru ini kita beri nama Sisi Gelap. Kini lanjutkan dengan mengklik menu Layer > Create Clipping Mask (Ctrl + Alt + G).

Masih pada layer Sisi Gelap, klik tombol Add Vector Mask pada pelette Layer. Pastikan warna Foreground/Background = White/Black, pilih Gradient Tool, lalu tarik gradient pada layer ini dari kiri ke kanan dengan besar sudut sesuai sudut obyek RSS 3D Box-nya. Setelah itu, ganti blend mode layer ini menjadi Multiply. Perhatikan gambar berikut dan keterangan arah panahnya:

Langkah selanjutnya adala membuat area yang lebih terang. Duplikat layer RSS 3D Box, ganti namanya menjadi Sisi Terang, lalu ubah layer blending mode-nya menjadi Screen. Geser urutan layer-nya agar berada di atas layer Sisi Gelap, lalu tekan Ctrl + Alt + G (Clipping Mask)

Klik Add Vector Mask pada layer Sisi Terang, pastikan Foreground/Background = White/Black. Sekarang tarik Gradient sehingga sudut sisi kanan nampak lebih terang. Lihat gambar berikut ini:

Langkah 5

Sekarang beralih ke layer Shape 1. Kita akan segera bermain-main dengan layer style.

Klik Add Layer Style > Inner Shadow. Tentukan nilai Opacity = 50%, Angle = -155” (hilangkan cek Use Global Light), lalu set Distance = 50 px dan Size = 73 px.

Masih pada jendela Layer Style, pindah ke Gradient Overlay. Tentukan nilai Angle = -25”, lalu edit gradient-nya melalui Gradient Editor, ubah fill warna Color Stop 0 menjadi #626262.

Klik Ok dan mari lihat hasilnya.

Anda boleh menyesuaikan ulang sesuai kebutuhan Anda sendiri, misalnya penyesuaian untuk distribusi gradient, besar sudut, dsb.

Langkah 6

Sekarang kita tambah sedikit sentuhan pada sudut box yang paling terang. Bagian ini mungkin tidak begitu penting, tapi dapat mendukung kesan refleksi cahaya pada sudut obyek RSS 3D Box.

Duplikat layer Shape 1, lalu klik kanan pada layer lalu pilih Clear Layer Style. Ganti fill warna layer ini menjadi #C8C8C8 dan ganti pula nama layer ini menjadi Sudut. Gunakan variasi Pen Tool, Convert Point Tool dan Direct Selection Tool untuk membuat bentuk obyek layer shape ini hingga menjadi kurang lebih seperti gambar berikut ini:

Langkah 7

Sekarang kembali lagi ke layer RSS 3D Box. Tambahkan beberapa aturan layer style sebagai berikut:

Drop Shadow: Angle = 45”, Distance = 5 px dan Size = 7 px
Inner Shadow: Angle = 45”, Distance = 5 px dan Size = 20 px

Sekarang coba tampilkan kembali layer background (bila sebelumnya Anda sembunyikan) dan lihat hasilnya sekarang.

Langkah 8

Coba sembunyikan dulu layer Logo Feed Top agar kita lebih berkonsentrasi ke layer Logo Feed 3D.

Terapkan layer style Gradient Overlay pada layer ini (Logo Feed 3D) dengan pengaturan Blend Mode= Screen, Angle = 45”, Scale = 70% dan gunakan gradient Black-White (tidak perlu diedit).

Tampilkan kembali layer Logo Feed Top, lalu tambahkan layer style Gradient Overlay sebagai berikut; Blend Mode = Overlay, Angle = 45” dan Scale = 150%. Untuk gradient, pilih Black-White lalu ubah fill Black-nya menjadi #3D3D3D. Lihat perubahan yang terjadi.

Langkah 9

Ok, sekarang kita akan menambahkan “pemanis” pada obyek Logo Feed Top agar nampak lebih “berkilau”.

Duplikat layer Logo Feed Top sehingga sekarang bertambah layer baru bernama Logo Feed Top copy. Hilangkah layer style-nya (Clear Layer Style) pada layer ini dan ubah blending mode-nya menjadi Multiply.

Sekarang pilih Elliptical Marquee Tool. Buatlah seleksi berbentuk elips kurang lebih mencakup separuh obyek sisi bawah dan selanjutnya klik tombol Add Layer Mask pada palette Layer. Pastikan warna Foreground/Background = Black/White. Perhatikan gambar berikut:

Terapkan layer style Gradient Overlay pada layer ini (Logo Feed Top copy) dengan pengaturan Blend Mode = Overlay dan Angle = -45”. Gunakan gradient Black-White, lalu edit fill Black menjadi #B5B5B5 dan fill White menjadi #E3E3E3.

Langkah selanjutnya, klik tombol Create New Fill or Adjustment Layer pada palette Layer, lalu pilih Curves. Dalam dialog Curves, atur nilai Output/Input kurang lebih sebesar 84/105.

Kini atur layer Curves 1 ini sebagai Clipping Mask (Layer > Create Clipping Mask). Hasil akhir yang kita peroleh sejauh ini akan terlihat kurang lebih seperti gambar berikut:

Langkah 10

Nah, bentuk obyek sudah semakin terlihat jelas. Kini saatnya memberi sentuhan-sentuhan final yang bisa menguatkan kesan refleksi cahaya pada obyek Logo Feed-nya.

Duplikat layer Logo Feed 3D. Ganti nama layer ini menjadi Refleksi Cermin, lalu ganti urutan layernya agar berada di bawah layer Logo Feed 3D dan hilangkan informasi layer style-nya. Terapkan filter Blur > Motion Blur dengan nilai Angle = -90” dan Distance = 88 pixel. Sekarang klik OK dan lihat hasilnya

Refleksi selalu berada di bawah obyek bukan? Jadi selanjutnya kita perlu menghapus hasil Motion Blur bagian atas dan area-area yang tidak perlu. Gunakan teknik masking untuk merapikan refleksi ini. Saya sarankan, gunakan brush berukuran sedang bertipe Soft Round dan sesuaikan nilai Opacity tergantung area yang akan dibersihkan. Setelah dirasa cukup, turunkan nilai Fill layer pada kisaran 50% - 70% agar intensitas refleksinya terlihat lebih lembut.

Jangan lupa tambahkan sedikit bayangan (Layer Style Shadow) pada layer Logo Feed 3D agar obyeknya tidak terlihat mengambang. Nilai pengaturannya kurang lebih sebagai berikut: Angle = 45” (hilangkan tanda cek pada Use Global Light), Opacity = 10%, Distance = 1 px, Size = 3 px dan Contour = Half Round.

Sekarang mari kita lihat hasil semua pengaturan tadi.

Langkah 11

PR terakhir tersisa tinggal urusan warna-mewarnai. Ini pilihan yang sangat bebas, silahkan mau pakai warna apa saja terserah.

Warna bisa ditambahkan dengan menggunakan bantuan layer ajustment Hue/Saturation, Color Overlay atau teknik-teknik lain yang mungkin bisa dilakukan. Pilihlah teknik yang dirasa paling tepat.

Hue/Saturation adalah cara yang termudah dan paling instan. Sementara Color Overlay akan relatif lebih detail karena Anda harus menerapkannya pada masing-masing layer yang perlu diberi warna. Walau lebih lama, tapi cara ini sangat cocok bila Anda menginginkan warna yang berbeda-beda untuk area tertentu, misalnya bila Anda ingin 3D box dan Logo Feed-nya memiliki warna yang berbeda, maka Color Overlay yang perlu digunakan.

Berikut adalah contoh pewarnaan akhir menggunakan Hue/Saturation (layer background sengaja saya sembunyikan dulu)

Nilai-nilai Hue/Saturation yang digunakan pada contoh gambar di atas adalah Hue = 205, Stauration = 100, Lightness = +5, dan opsi Colorize di beri tanda cek.

Catatan Tambahan: Anda mungkin perlu melakukan sedikit penyesuaian distribusi dan opacity gradient pada layer Shape 1, tergantung pada warna apa yang digunakan, terlebih bila hasil yang diperoleh setelah proses pewarnaan itu dirasa terlalu gelap. Hal ini berlaku juga secara umum bila Anda ingin mendapatkan hasil yang lebih soft lagi. Silahkan lakukan penyesuaian-penyesuaian ulang sesuai dengan kebutuhan Anda sendiri.

Ok, proses pembuatan ikon RSS Feed model 3D ini telah selelasi. Sebagai acuan yang mungkin Anda perlukan, berikut ini adalah screenshot susunan akhir dari layer-layernya:

Tutorial Kit

Tutorial kit yang sudah disiapkan berisi file logo-feed.ai dan beberapa set ikon format PNG 24 berukuran kanvas 512 x 512 pixel - transparent.

Silahkan download tutorial kit-nya di sini.

File master PSD (Layered Format) tidak tersedia dalam tutorial kit ini. Silahkan hubungi saya bila menginginkannya, bisa melalui form kontak atau komentar. File akan dikirim via email.

Selamat mencoba