Membuat Situs Resource Desain Premium di Photoshop

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%.

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.

Download Link

Download File PSD