Mendesain Area Pencari dan Interface Tampilan Gambar dengan Adobe Photoshop

Adobe Photoshop dikenal bukan hanya atas kemampuannya dalam mengedit gambar, tapi juga atas kemampuan dalam mendesain tampilan antar muka bagi user. Dalam tutorial ini, kita akan mendesain area pencarian tiga dimensi dan antarmuka tampilan gambar. Kita akan menggunakan banyak fitur bentuk vektor lalu kemudian mengaplikasikan Layer Styles untuk menambahkan efek tiga dimensi.

Aset Tutorial

Anda akan membutuhkan aset gratis berikut untuk mengikuti tutorial ini.

• 26 Pola Pixel Berulang dari PSDfreemium

1. Mempersiapkan Kanvas

Langkah 1

Mulai dengan membuat file baru (Control-N) berukuran 400 pixels ×300 pixels. Untuk latar, isi dengan warna putih.

Langkah 2

Klik ikon Add Adjustment Layer kemudian pilih Solid Color. Di kotak dialog selanjutnya, pilih warna terang untuk digunakan di latar.

Langkah 3

Klik ganda adjustment layer Solid Color kemudian aktifkan Pattern Overlay. Untuk pola yang digunakan, pilih pola pixel gratis. Kurangi Opacity layer hingga 10% agar tampilannya tetap samar.

2. Mendesain Area Pencari

Langkah 1

Kita ingin agar setiap layer tersusun dengan rapi. Mulai dengan membuat grup layer baru.

Langkah 2

Gambar sebuah persegi bersudut melengkung dengan radius pojok 6 px. Untuk warnanya, gunakan abu-abu.

Langkah 3

Klik ganda bentuk persegi berpojok melengkung kemudian berikur Layer Style Stroke, Inner Shadow, and Gradient Overlay. Style-style ini akan menghasilkan efek 3D pada bentuk.

Langkah 4

Duplikasi bentuk dengan menekan Control-J. Ubah warnanya menjadi biru. Kita akan mengubahnya menjadi sebuah tombol.

Langkah 5

Ubah setting Layer Style. Silakan bermain-main dengan setting yang tersedia. Akan lebih menarik bagi Anda untuk mencoba memberi warna yang berbeda pada bentuk vektor.

Langkah 6

Potong tombol dengan menambahkan bentuk persegi di sisi kirinya dan kemudian mengubah modenya menjadi Subtract Front Shape.

Langkah 7

Di dalam area pencarian, gambar sebuah persegi berpojok melengkung dengan radius pojok 2 pixels. Pastikan persegi putih tadi disimpan di bagian tengah area kosong.

Langkah 8

Klik ganda bentuk untuk menambahkan Layer Styles Bevel & Emboss, Stroke, Inner Shadow, Gradient Overlay, dan Outer Glow. Efek-efek itu akan memberi area pencarian tampilan seolah-olah menjorok ke dalam.

Langkah 9

Duplikasi bentuk vektor area pencarian. Ubah warnanya menjadi hijau. Potong bentuk tadi dengan cara menambahkan path persegi di sisi kirinya dengan mode Subtract Front Shape.

Langkah 10

Tambahkan Layer Style ke dalam bentuk.

Langkah 11

Tambahkan label di bagian atas bentuk hijau. Dalam tutorial ini, saya menggunakan font NuOrder. Silakan menggunakan font apa pun jika Anda mau. Klik ganda teks layer kemudian tambahkan Layer Style Drop Shadow dan Gradient Overlay untuk menambahkan efek kedalaman pada teks. Efek ini akan membuat teks lebih udah dibaca.

Langkah 12

Tambahkan sebuah panah di sebelah label. Anda bisa menggambarnya menggunakan dua bentuk segitiga yang ditumpuk. Atur mode path bentuk segitiga terakhir ke Subtract Front Shape.

Tambahkan Layer Style yang sama ke dalam bentuk panah sebagaimana yang ada dalam label.

Langkah 13

Kita akan menambahkan ikon kaca pembesar di bagian atas tombol pencarian. Untuk menggambarnya, mulai dengan membuat gambar bentuk donat terbuat dari dua bentuk lingkaran yang bertumpukkan.

Selanjutnya, tambahkan bentuk persegi berpojok lingkaran untuk pegangan kaca pembesar.

Langkah 14

Klik ganda ikon kaca pembesar untuk menambahkan Layer Styles. Di dalam kotak dialog Layer Style, aktifkan Bevel & Emboss, Stroke, Inner Shadow, Gradient Overlay, dan Outer Glow. Kombinasi semua Layer Styles ini akan mengubah ikon menjadi lubang apik yang menembus ke dalam tombol.

Langkah 15

Tambahkan label di area pencarian. Agar terbaca, tambahkan Layer Style Drop Shadow ringan.

Step 16

Duplikasi bentuk utama dan tempatkan di atas area pencarian. Tambahkan Layer Style Inner Glow dan Gradient Overlay dari hitam ke putih dengan Opacity rendah.

Kurangi Fill layer hingga 0% sampai kita hanya tersisa gradasi pada area pencarian.

Langkah 17

Sekarang, kita ingin mengubah area pencarian menjadi bentuk 3D. Mulai dengan menduplikasi tombol pencarian dan menggesernya ke bawah beberapa pixel. Ubah warnanya menjadi biru tua. Pastikan bentuk hasil duplikasi ditempatkan di belakang area pencarian.

Langkah 18

Ulangi langkah ini pada bentuk utama area pencarian. Geser ke bawah beberapa pixel dan ubah warnanya agar lebih gelap.

Langkah 19

Klik ganda bentuk kemudian tambahkan Layer Style Drop Shadow. Ingat bahwa Anda harus selalu menambahkan bayangan di belakang setiap objek 3D.

Langkah 20

Kita juga ingin menambahkan area terang di bagian atas tombol. Control-klik bagian atas bentuk vektor area pencarian untuk membuat seleksi baru berdasarkan pada bentuknya. Buat layer baru dan simpan di posisi teratas. Klik Edit > Stroke. Ubah warna stroke ke putih.

Langkah 21

Hilangkan seleksi yang baru saja kita buat dengan cara menekan Control-D. Lembutkan garis stroke dengan menambahkan filter Gaussian Blur.

Langkah 22

Tambahkan layer mask dan hilangkan sebagian highlight dengan cara melukisnya dengan hitam.

3. Tampilan Gambar

Langkah 1

Agar semua layer tersusun dengan rapi, seperti biasa kita akan selalu memulai dengan membuat grup layer baru. Kita akan menempatkan semua layer baru dalam langkah selanjutnya di dalam grup layer ini.

Langkah 2

Antarmuka tampilan gambar akan menggunakan tampilan style yang sama seperti area pencarian sebelumnya. Itu sebabnya kita akan memulai dengan menduplikasi bentuk dasar dari area pencarian. Kita akan mengambil bentuk dasar area pencarian, tombol, area pencarian, highlight, dan sisi belakangnya.

Langkah 4

Tentu saja kita ingin agar ukurannya lebih besar. Gunakan Tool Direct Selection untuk memilih titik-titik di bagian tampilan antarmuka lalu geser sedikit ke atas.

Langkah 4

Tambahkan gambar yang akan ditampilkan di atas layer area area tampilan. Ubah layer gambar tadi menjadi Clipping Mask dengan menekan Control-Alt-G. Gambar akan masuk ke dalam area tampilan.

Langkah 5

Aktifkan Tool Polygon. Di Baris Pilihan, atur Sides ke 5 lalu aktifkan Star dan Smooth Corners dengan Indent Sides By: 50%. Klik dan geser untuk menggambar bentuk bintang. Klik ganda layer bentuk vektor kemudian aktifkan Layer Styles Bevel & Emboss, Stroke, Gradient Overlay, Outer Glow, dan Drop Shadow.

Untuk gradasi, gunakan gradasi emas yang tersedia di daftar gradasi standar Photoshop.

Langkah 6

Aktifkan Tool Move kemudian Alt-geser bentuk bintang untuk menduplikasinya. Kita menginginkan empat bintang di sisi kanan tampilan. Bintang-bintang ini akan mewakili rating gambar.

Langkah 7

Seleksi semua layer bintang di panel Layers. Pastikan Tool Move aktif. Klik ikondistribusi di Baris Pilihan untuk memperbaiki perataan dan jarak antar bintang.

Langkah 8

Aktifkan layer bintang teratas kemudian ubah setting di Layer Style Bevel & Emboss ke Down. Ubah warna Inner Shadow dan juga gradasi di Gradient Overlay.

Bintang ini akan dipahami pengguna sebagai bintang yang tidak terpilih. Dalam kasus ini, kita memiliki tampilan rating 3 dari 4 bintang.

Langkah 9

Pekerjaan kita selanjutnya adalah menambahkan banner 3D yang melayang di atas area tampilan gambar. Mulai dengan menggambar sebuah bentuk persegi berpojok melengkung dengan radius pojok 6 px. Perhatikan bahwa kita secara konsisten menggunakan radius pojok 6 px untuk menyesuaikannya dengan bentuk dasar area pencarian.

Langkah 10

Perluas sudut banner dengan menambahkan bentuk persegi berukuran 6 px × 12 px . Agar sesuai dengan radius pojok banner, ukuran yang kita butuhkan adalah 6 px dan 12 px. Anda akan memahami alasannya di langkah berikutnya.

Langkah 11

Selanjutnya, tambahkan sebuah lingkaran dengan radius 6 px dan ubah modenya menjadi Subtract Front Shapes.

Langkah 12

Klik ganda bentuk kemudian berikan Layer Style berikut.

Hasil ini belum sempurna, masih butuh perbaikan. Kita perlu menambahkan bayangan agar bentuk ini terlihat melengkung, menyambung dengan sisi belakangnya.

Langkah 13

Buat layer baru di atas banner lalu ubah menjadi Clipping Mask (Control-Alt-G). Lukis beberapa bayangan secara manual di sisi kiri banner.

Langkah 14

Untuk sisi belakang banner, gambar sebuah persegi berpojok melengkung dengan warna yang lebih gelap. Seperti telah dilakukan pada sisi depan, gunakan radius pojok 6 px. Tambahkan Layer Style yang sama seperti di sisi depan.

Bersama-sama, akan tampil banner yang melayang di atas antarmuka gambar.

Langkah 15

Buat layer baru di antara sisi depan dan belakang banner. Lukis bayangan secara manual menggunakan Tool Brush.

Lanjutkan menambahkan bayangan di belakang banner sebagaimana terlihat dala gambar berikut. Gambar bayangan banner pada kanvas dan bayangannya pada tampilan gambar.

Langkah 16

Tambahkan teks di atas banner. Klik ganda layer kemudian aktifkan Layer Styles Drop Shadow dan Gradient Overlay.

Kesimpulan

Inilah hasil akhir dari area pencarian dan tampilan antar muka gambar kita. Di tutorial ini, Anda telah mempelajari cara menambahkan efek tiga dimensi ke dalam bentuk vektor datar, menggambar ikon sederhana dengan tool vektor dan Layer Styles, dan membuat persegi berpojok lengkung secara manual. Saya harap Anda menikmati tutorial ini dan beberapa teknik baru darinya.