Dalam tutorial ini kita akan mendesain sebuah situs penjual resource desain premium. Di sini, kita akan belajar cara membuat situs yang tidak saja rapi, bersih, dan menarik tapi juga bisa menjual.
Untuk tutorial ini, kita akan mengubah PSDfreemium –situs penyedia resource desain gratis– menjadi situs berbayar. PSDfreemium akan memiliki tombol call to action yang mempermudah pengunjung untuk membeli, beberapa baris perkenalan yang mudah dibaca, menampilkan preview resource terbaiknya, dan area login bagi para anggotanya.
Preview
Silakan lihat terlebih dahulu desain yang akan kita peroleh. Klik gambar untuk melihatnya dalam ukuran 100%.
Klik gambar untuk melihatnya pada ukuran lebih besar.
Resource yang Dibutuhkan
Untuk mengikuti tutorial ini, silakan ambil terlebih dahulu resource berikut:
- Candy Colored Button dari PSDfreemium
- Ribbon Rectangle dari PSDfreemium
- Minimal patterns for backgrounds dari WeGraphics
- Book Cover Patterns dari WeGraphics
- Hard Drive PSD dari Vandelay Premier
- Action grid 960 dari 960.gs
- Logo PSDfreemium dari PSDfreemium
Tutorial
Langkah 1: Mempersiapkan Kanvas
Ambil action grid 960, klik ganda file action untuk memasukkannya ke Photoshop. Dari panel actions, klik ganda 12 Column Grid untuk membuat file baru dengan standar 12 kolom.
Langkah 2
Kanvas saat ini terlalu pendek. Untuk memperbesarnya, buat seleksi dengan tool crop hingga ke luar area kanvas. Tekan Ctrl + Enter untuk menerima proses perubahan.
Langkah 3: Logo
Ambil logo PSDfreemium dan simpan di pojok kiri atas. Perhatikan bahwa logo ini harus menempel tepat pada guide. Inilah fungsinya sistem grid, mengatur alignment objek.
Langkah 4: Bagian Utama Situs
Buat persegi di bawah logo. Atur ukurannya hingga kedua sisi kiri dan kanan keluar dari kanvas. Beri Layer Style berikut. Untuk pola, saya menggunakan tekstur cover buku.
Seperti bisa Anda lihat di bawah, Layer Style yang digunakan di sini memberi efek seolah tekstur berada dalam layer di bawah elemen lainnya.
Langkah 5: Kalimat Pembuka
Buat beberapa kalimat singkat namun mudah menarik perhatian pembaca. Di sini, saya menggunakan font yang tidak safe web. Ini tidak jadi masalah karena dalam proses coding, teks ini bisa dibuat dalam bentuk gambar. Warna kedua teks adalah hijau muda dan hijau tua, disesuaikan dengan latar yang digunakan agar kontras yang dihasilkan tidak berlebihan.
Langkah 6
Berikut adalah Layer Style untuk teks besar.
Langkah 7
Ini adalah Layer Style untuk teks kecil.
Langkah 8: Tombol Call to Action
Ambil tombol abu-abu Candy Colored dari PSDfreemium. Ubah teks menjadi “Take a Tour”. Perbesar lebar tombol menjadi 120% tanpa mengubah lebar teks.
Langkah 9
Buat satu lagi tombol untuk ajakan bergabung. Kali ini gunakan warna hijau gelap. Perhatikan bahwa di sini kita menggunakan abu-abu untuk “Take a Tour” dan hijau terang untuk “Join Today”. Perbedaan warna ini berfungsi mengarahkan perhatian pembaca ke tujuan situs ini yaitu menjual.
Langkah 10: Menambah Gambar Resource
Ambil Hard Drive PSD. Simpan di sisi kanan. Atur posisinya agar keluar dari grid dan elemen latarnya. Posisi seperti ini membuatnya terlihat menonjol, unik, berbeda dari elemen lainnya.
Langkah 11: Navigasi Utama
Buat navigasi utama situs di pojok kanan atas. Lihat posisinya, link ini harus tepat menempel pada grid.
Langkah 12: Area Login – Normal
Desain juga haruslah memudahkan anggota yang sudah bergabung. Untuk itu, kita buat tombol login di halaman depan. Buat sebuah rounded rectangle tepat di atas navigasi utama.
Langkah 13
Beri teks “LOGIN” dan tambahkan panah bawah di sebelahnya. Beri layer style Drop Shadow berikut untuk kedua objek ini. Simpan semua elemen ini dalam sebuah group.
Langkah 14: Area Login – Aktif
Untuk mempermudah anggota kita akan membuat formulir login langsung dalam bentuk dropdown menu. Anggota tidak perlu masuk ke halaman lain.
Gandakan group login normal. Perbesar area login dengan menambah rounded rectangle dengan warna abu-abu gelap, lebih gelap dari warna di kondisi normal. Ubah panah hingga mengarah ke atas.
Langkah 15
Tambahkan teks “User Name” dan beri layer style berikut.
Langkah 16
Buat rounded rectangle untuk formulir dan beri Layer Style berikut.
Langkah 17
Ulangi proses tadi untuk membuat formulir Password.
Langkah 18
Buat tombol login dengan warna hijau dan beri Layer Style berikut.
Langkah 19
Kita juga perlu memberi pengingat agar browser bisa menyimpan data anggota. Beri teks “Remember Me”.
Langkah 20
Buat kotak kecil di samping teks.
Langkah 21
Buat link seandainya ada yang lupa password. Beri teks “Forgot Password?” Gunakan warna merah dan beri Layer Style berikut.
Langkah 22: Info Situs
Buat kotak putih seperti terlihat di bawah. Beri Layer Style berikut dengan pola Minimal patterns for backgrounds.
Langkah 23
Beri layer mask dan lukis hitam sehingga pola yang muncul sangat tipis, subtle. Anda bisa melihat perbandingannya di bawah. Teksturnya sangat tipis tapi berdasarkan pengalaman saya itulah yang membuat desain menarik.
Langkah 24
Ambil ikon lalu beri judul dan sedikit keterangan. Perhtikan posisi teks dan ikon. Semua berada dalam grid.
Langkah 25
Ulangi proses ini hingga diperoleh tiga kolom informasi.
Langkah 26: Menampilkan resource Terpilih
Buat judul untuk resource-resource terpilih. Pastikan untuk memilih font yang menarik. Beri Layer Style berikut.
Langkah 27
Buat layer baru. Aktifkan brush berukuran 1 px dan naikkan Spacing.
Langkah 28
Buat garis lurus memotong judul.
Langkah 29
Hapus garis yang menutupi judul.
Langkah 30
Ambil gambar dengan lebar empat kolom dan beri judul di bawahnya. Beri Layer Style Stroke.
Langkah 31
Tambahkan gambar resource lainnya.
Langkah 32
Ambil Ribbon Rectangle dari PSDfreemium dan simpan di atas salah satu gambar.
Langkah 33
Buat kotak dan beri layer style yang sama dengan kotak di atas.
Langkah 34: Footer
Kita akan menggunakan footer sederhana. Buat teks berisi data tahun dan info copyright lalu beri Drop Shadow.
Hasil Akhir
Di bawah adalah hasil akhir tutorial yang kita peroleh. Klik gambar untuk melihatnya pada ukuran 100%.
Klik gambar untuk melihatnya pada ukuran lebih besar.
Bang sabar y, lagi ngerjain sesuatu dulu. Tapi pasti dikerjain
bang satrya ya yang mau convert ke html. pasti mantab nih, kolaborasi hebat
Mantebb bang Jeprie.. Hasilnya sangat elegan… Terlihat profesional ntuk jualan…
Terima kasih.
Wah, bener banget mas, memang ilmu ini yang saya butuhkan. Thanx berat & Sukses !!!
Eh tapi tutorial kelanjutannya, untuk memecah gambar dan memasukkannya ke dalam struktur theme wordpress kok gak ada ya ??? Apa memang saya yang nggak nemu posisi artikelnya ?
Saya tidak memotong (slice) PSD dan mengubahnya ke HTML/CSS atau theme wordpress. Kemampuan saya hanya terbatas pada proses desain di Photoshop.
Mudah-mudahan ada desainer lain yang sanggup meneruskan tutorial ini.