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%.
final-large.jpg

Resource yang Dibutuhkan


Untuk mengikuti tutorial ini, silakan ambil terlebih dahulu resource berikut:


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.

tutorial-photoshop-desain-situs-resource-premium-01
tutorial-photoshop-desain-situs-resource-premium-02

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.
tutorial-photoshop-desain-situs-resource-premium-03.jpg

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.
tutorial-photoshop-desain-situs-resource-premium-04.jpg

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.

tutorial-photoshop-desain-situs-resource-premium-05.jpg
tutorial-photoshop-desain-situs-resource-premium-06.jpg

tutorial-photoshop-desain-situs-resource-premium-07.jpg

tutorial-photoshop-desain-situs-resource-premium-08.jpg

Seperti bisa Anda lihat di bawah, Layer Style yang digunakan di sini memberi efek seolah tekstur berada dalam layer di bawah elemen lainnya.
tutorial-photoshop-desain-situs-resource-premium-09.jpg

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.
tutorial-photoshop-desain-situs-resource-premium-10.jpg

Langkah 6


Berikut adalah Layer Style untuk teks besar.
tutorial-photoshop-desain-situs-resource-premium-11.jpg

Langkah 7


Ini adalah Layer Style untuk teks kecil.
tutorial-photoshop-desain-situs-resource-premium-12.jpg

tutorial-photoshop-desain-situs-resource-premium-13.jpg

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.
tutorial-photoshop-desain-situs-resource-premium-14.jpg

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.
tutorial-photoshop-desain-situs-resource-premium-15.jpg

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.
tutorial-photoshop-desain-situs-resource-premium-16.jpg

Langkah 11: Navigasi Utama


Buat navigasi utama situs di pojok kanan atas. Lihat posisinya, link ini harus tepat menempel pada grid.
tutorial-photoshop-desain-situs-resource-premium-17.jpg

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.
tutorial-photoshop-desain-situs-resource-premium-18.jpg

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.
tutorial-photoshop-desain-situs-resource-premium-19.jpg

tutorial-photoshop-desain-situs-resource-premium-20.jpg

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.
tutorial-photoshop-desain-situs-resource-premium-21.jpg

Langkah 15


Tambahkan teks "User Name" dan beri layer style berikut.
tutorial-photoshop-desain-situs-resource-premium-22.jpg

tutorial-photoshop-desain-situs-resource-premium-23.jpg

Langkah 16


Buat rounded rectangle untuk formulir dan beri Layer Style berikut.
tutorial-photoshop-desain-situs-resource-premium-24.jpg

tutorial-photoshop-desain-situs-resource-premium-25.jpg

tutorial-photoshop-desain-situs-resource-premium-26.jpg

Langkah 17


Ulangi proses tadi untuk membuat formulir Password.
tutorial-photoshop-desain-situs-resource-premium-27.jpg

Langkah 18


Buat tombol login dengan warna hijau dan beri Layer Style berikut.
tutorial-photoshop-desain-situs-resource-premium-28.jpg

tutorial-photoshop-desain-situs-resource-premium-29.jpg

tutorial-photoshop-desain-situs-resource-premium-30.jpg

tutorial-photoshop-desain-situs-resource-premium-31.jpg

Langkah 19


Kita juga perlu memberi pengingat agar browser bisa menyimpan data anggota. Beri teks "Remember Me".
tutorial-photoshop-desain-situs-resource-premium-32.jpg

tutorial-photoshop-desain-situs-resource-premium-33.jpg

Langkah 20


Buat kotak kecil di samping teks.
tutorial-photoshop-desain-situs-resource-premium-34.jpg

tutorial-photoshop-desain-situs-resource-premium-35.jpg

tutorial-photoshop-desain-situs-resource-premium-36.jpg

Langkah 21


Buat link seandainya ada yang lupa password. Beri teks "Forgot Password?" Gunakan warna merah dan beri Layer Style berikut.
tutorial-photoshop-desain-situs-resource-premium-37.jpg

tutorial-photoshop-desain-situs-resource-premium-38.jpg

Langkah 22: Info Situs


Buat kotak putih seperti terlihat di bawah. Beri Layer Style berikut dengan pola Minimal patterns for backgrounds.
tutorial-photoshop-desain-situs-resource-premium-39.jpg

tutorial-photoshop-desain-situs-resource-premium-40.jpg

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.
tutorial-photoshop-desain-situs-resource-premium-41.jpg

Langkah 24


Ambil ikon lalu beri judul dan sedikit keterangan. Perhtikan posisi teks dan ikon. Semua berada dalam grid.
tutorial-photoshop-desain-situs-resource-premium-42.jpg

Langkah 25


Ulangi proses ini hingga diperoleh tiga kolom informasi.
tutorial-photoshop-desain-situs-resource-premium-43.jpg

Langkah 26: Menampilkan resource Terpilih


Buat judul untuk resource-resource terpilih. Pastikan untuk memilih font yang menarik. Beri Layer Style berikut.
tutorial-photoshop-desain-situs-resource-premium-44.jpg

tutorial-photoshop-desain-situs-resource-premium-45.jpg

Langkah 27


Buat layer baru. Aktifkan brush berukuran 1 px dan naikkan Spacing.
tutorial-photoshop-desain-situs-resource-premium-46.jpg

Langkah 28


Buat garis lurus memotong judul.
tutorial-photoshop-desain-situs-resource-premium-47.jpg

Langkah 29


Hapus garis yang menutupi judul.
tutorial-photoshop-desain-situs-resource-premium-48.jpg

Langkah 30


Ambil gambar dengan lebar empat kolom dan beri judul di bawahnya. Beri Layer Style Stroke.
tutorial-photoshop-desain-situs-resource-premium-49.jpg

tutorial-photoshop-desain-situs-resource-premium-50.jpg

Langkah 31


Tambahkan gambar resource lainnya.
tutorial-photoshop-desain-situs-resource-premium-51.jpg

Langkah 32


Ambil Ribbon Rectangle dari PSDfreemium dan simpan di atas salah satu gambar.
tutorial-photoshop-desain-situs-resource-premium-52.jpg

Langkah 33


Buat kotak dan beri layer style yang sama dengan kotak di atas.
tutorial-photoshop-desain-situs-resource-premium-53.jpg

Langkah 34: Footer


Kita akan menggunakan footer sederhana. Buat teks berisi data tahun dan info copyright lalu beri Drop Shadow.
tutorial-photoshop-desain-situs-resource-premium-54.jpg

tutorial-photoshop-desain-situs-resource-premium-55.jpg

Hasil Akhir


Di bawah adalah hasil akhir tutorial yang kita peroleh. Klik gambar untuk melihatnya pada ukuran 100%.
final-large.jpg
Klik gambar untuk melihatnya pada ukuran lebih besar.

Download Link


Download File PSD