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

Iklan

13 thoughts on “Membuat Situs Resource Desain Premium di Photoshop

  1. 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 ?

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

  3. Terimakasih banget… tutorial nya mantaff… next ke tutorial selanjutnya.

    dulu saya tidak bisa menggunkana photoshop…
    semenjak belajar di desaindigital.com , saya sekarang cas cis cus mendesain web dengan bantuan photoshop…
    TERIMAKASIH DESAINDIGITAL….

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s