Mendesain Slider Web di Photoshop

Tutorial ini akan memperlihatkan proses pembuatan slider web menggunakan Photoshop. Kita akan memanfaatkan fitur Layer Style dan mengkombinasikannya dengan menggambar manual untuk menghasilkan sebuah slider yang apik.

Preview

Berikut adalah hasil akhir slider yang akan kita peroleh.

Detail Tutorial

• Tingkat Kesulitan: Pemula, Menengah
• Software yang Digunakan: Adobe Photoshop
• Teknik yang Dipelajari: Layer Mask, Layer Style
• Lama Pengerjaan: 30 menit

Tutorial

Langkah 1: Mempersiapkan Latar

 

 Mulai dengan membuat file baru berukuran 1.000 x 500 px. Isi latar dengan warna #dcf1f7.

 

 

Langkah 2

Klik Filter > Noise > Add Noise. Aktifkan Monochromatic untuk memberi noise dengan warna grayscale. Penambahan noise akan memberi tekstur pada latar sehingga tidak terlihat terlalu datar.

Langkah 3: Bentuk Dasar Slide

Buat shape persegi untuk area gambar. Anda bisa menggunakan warna apa pun, tidak masalah.

Klik ganda layer untuk membuka kotak dialog Layer Style. Aktifkan Stroke.

Langkah 4

Ambil gambar dan simpan di atas shape persegi. Atur ukurannya hingga sesuai. Tekan Ctrl + Alt + G untuk mengubah layer menjadi Clipping Mask dan membuat gambar masuk ke dalam area slide.

 Langkah 5:
Tombol Navigasi – Panah
Buat dua lingkaran di kedua sisi slide dengan warna sama seperti stroke, #dddddd.

Langkah 6

Aktifkan tool Polygon. Pilih Sides: 3 untuk menghasilkan sebuah segitiga. Buat segitiga di dalam lingkaran. Turunkan Fill layer ke 0%.











Beri Inner Shadow dan Gradient Overlay.

 

Langkah 7

Ctrl-klik segitiga untuk membuat seleksi baru berdasarkan pada bentuknya. Buat layer baru. Klik kanan dan pilih Stroke. Isikan Width: 1 px dengan warna putih dan Location: Inside.

  Hapus garis di sisi atas dan kanan lalu turunkan Opacity layer. Ini akan memberi efek bevel pada segitiga.

Langkah 8

Duplikasi panah. Lakukan proses transformasi (Ctrl + T), klik kanan dan plih Flip Horizontal. Simpan panah di sisi sebelahnya.

Langkah 9: Memberi Efek 3 Dimensi

Duplikasi shape dasar slide dengan menekan Ctrl + J. Simpan ke atas. Di atasnya, buat sebuah layer kosong. Seleksi keduanya lalu pilih Layer Layer > Merge Layers. Langkah ini akan mengubah Layer Style menjadi pixel biasa. Mulai saat ini, Anda bisa bebas mengedit isi pixel tanpa bergantung pada setting Layer Style.

 Langkah 10
Tahan Ctrl lalu klik thumbnail layer di panel Layers. Isi seleksi dengan warna putih. Kita akan menggunakan layer ini nanti. Untuk sekarang, sembunyikan layer dengan cara klik ikon mata di depan nama layer. Jangan dulu menghilangkan seleksi.

“Panduan Lengkap Desain Web dari Photoshop hingga HTML”

Sekilas Tentang Buku Ini

Buku ini berupa tutorial desain web HTML secara lengkap. Proses yang dibahas mulai dari mockup di Photoshop hingga cara mengubahnya menjadi HTML fungsional. Materi yang dibahas beragam, mulai dari konsep desain trend minimalis, pembuatan badge retro di Illustrator, penggunaan CSS Reset, hingga jQuery sederhana. Buku ini hasil kolaborasi dengan copass. Buku dicetak dalam format berwarna dengan kertas tebal glossy.

Sinopsis Buku

Desain web adalah salah satu bidang desain yang saat ini sedang menjamur. Dibandingkan sepuluh tahun lalu, desain web telah berkembang dengan sangat pesat.

Tahukah Anda bahwa saat ini program-program desain web praktis seperti Adobe Dreamweaver atau Microsoft FrontPage sudah tidak lagi populer? Desain web saat ini sudah memiliki trend yang berbeda, minimalis namun fungsional. Keberadaan gadget-gadget super semacam iPad dan iPhone juga telah siap merevolusi desain web. Di sini Anda akan belajar berbagai teknik terbaru desain web. Anda akan mempelajari proses desain sesuai dengan standar yang dilakukan para praktisi.

Mulai dengan proses mockup desain di Photoshop lalu mengkodenya ke dalam HTML/CSS menggunakan teks editor. Semua projek desain akan menggunakan sistem grid 960 yang saat ini menjadi standar desainer web di seluruh dunia. Untuk memudahkan proses belajar Anda, tersedia Bonus DVD yang memuat semua file latihan.

Terdapat juga video tutorial berdurasi 60 menit yang memperlihatkan proses desain web bertema thumblr. Video tutorial ini pasti akan membantu Anda yang baru memulai belajar desain web. Materi yang dibahas:

• Proses Desain Berbasis Grid
• Penggunaan Sistem Grid 960
• Pembuatan Situs Bertema Minimalis
• Proses Pengkodean CSS Desain Berbasis Grid
• Penggunaan Pola dan Tekstur
• Pengaturan File PSD dalam Desain Web
• Efek Letterpress
• Proses Slicing PSD
• Pembuatan Badge Situs Retro
• Membuat Slider Gambar dengan jQuery
• Efek 3D dalam Desain Web
• Penggunaan Reset CSS
• Mendesain Web Satu Halaman

Dengan ini Anda akan belajar berbagai teknik terbaru desain web. Anda akan mempelajari proses desain sesuai dengan standar yang dilakukan para praktisi. Mulai dengan proses mockup desain di Photoshop lalu mengkodenya ke dalam HTML/CSS menggunakan teks editor. Semua projek desain akan menggunakan sistem grid 960 yang saat ini menjadi standar desainer web di seluruh dunia.