Dalam tutorial ini, kita akan mendesain halaman depan (landing page) sebuah situs perusahaan. Layout ini sederhana tapi efektif untuk menarik perhatian pengunjung. Di halaman depan ini, telah tertera dengan jelas produk yang dijual, kelebihannya, dan cara untuk mencobanya.
Di bawah adalah tampilan desain yang akan kita buat.
Untuk mengikuti tutorial ini, silakan ambil terlebih dahulu resource berikut:
Buka template grid 960 px yang terdiri dari 12 kolom di Photoshop. Lebar saat ini terlalu sempit untuk kebutuhan kita. Jadi, perbesar ukurannya hingga 1.100 x 1.200 px dengan perintah Image > Canvas Size.
Aktifkan tool Rectangle dan buat latar header dengan warna #2c2a2f.
Klik ganda layer dan aktifkan Pattern Overlay. Gunakan Pola Pixel dari PSDfreemium.
Di bawah adalah tampilan latar header di perbesaran 100%.
Aktifkan tool Rectangle dan buat latar untuk informasi produk. Area ini harus berada di atas header.
Tambahkan Layer Style Stroke dan turunkan Opacity agar hasilnya transparan.
Di bawah adalah hasil Stroke.
Buat layer baru. Seleksi latar area produk. Isi dengan putih. Klik Filter > Noise > Add Noise.
Ubah Blend mode ke Multiply dan turunkan Opacity ke 20%. Ini akan memberi tekstur noise pada latar.
Aktifkan tool Ellipse. Ubah warna depan ke orange. Shift-drag untuk membuat lingkaran.
Ctrl - click lingkaran lalu klik Select > Modify > Contract.
Buat layer baru lalu klik Edit > Stroke. Gunakan Width: 1 px dengan warna hitam. Turunkan Opacity layer ke 20%.
Tekan Ctrl + J untuk menggandakan garis stroke. Tekan Ctrl + I untuk membalik warna garis menjadi putih. Aktifkan tool Move lalu klik panah atas sekali untuk menggaris garis 1 px ke atas.
Buat layer baru lalu ubah menjadi Clipping Mask dengan menekan Ctrl + Alt + G. Lukis bagian atas dan bawah lingkaran dengan putih. Turunkan Opacity layer ke 10%.
Aktifkan tool Custom Shape dan pilih bentuk Snowflake dari baris pilihan. Buat nowflake hitam di tengah-tengah lingkaran. Klik ganda layer dan beri bevel and Emboss. Turunkan Fill hingga 5%.
Buat layer baru. Ctrl + klik lingkaran dan klik Edit > Stroke dengan warna putih. Haluskan garis dengan Gaussian Blur.
Hapus bagian atas dan bawah garis stroke dengan tool eraser. Turunkan oapcity layer hingga 30%.
Ctrl - klik lingkaran. Buat layer baru dan isi seleksi dengan hitam. Haluskan dengan Gaussian Blur. Simpan bayangan ke belakang lingkaran. Transformasi (Ctrl + T) bayangan agar bagian atas dan bawahnya mencuat.
Tambahkan nama situs dan tagline dengan font Helvetica Bold dan Regular.
Tambahkan menu halaman di sisi kanan header. Gunakan warna orange, sama dengan warna logo, untuk link aktif. Samakan warna link lainnya dengan latar area info produk.
Simpan gambar produk.
Tambahkan keterangan produk. Gunakan ukuran font yang cukup besar agar menarik perhatian. Saya memilih kombinasi font Sans Serif untuk teks utama dan Serif untuk keterangannya.
Buat lagi latar persegi untuk info trial produk. Gunakan orange sesuai tema warna kita. Pastikan agar area ini berada di belakang area keterangan produk, agar efek Stroke transparan berada di atasnya.
Beri Gradient Overlay
Tambahkan keterangan trial produk.
Beri Inner Shadow pada teks.
Di bawah adalah hasil yang kita peroleh.
Ambil tombol dari PSDfreemium. Modifikasi sedikit warnanya agar sesuai dengan tema warna kita.
Aktifkan tool Rectangle dan buat latar lagi. Kali ini dengan warna abu-abu untuk poin-poin keterangan produk. Simpan area ini di atas bagian info trial produk.
Beri Stroke dengan setting yang sama dengan area info produk.
Efek Stroke transparan akan muncul di atas area trial produk.
Buat sub judul poin pertama dengan font Helvetica Bold. Gunakan warna orange. Beri Drop Shadow agar teks sedikit terangkat.
Ambil set ikon Oxygen. Simpan di bawah sub judul.
Buat path kotak untuk teks lalu buat lagi path kotak untuk menutupi ikon dengan mode Subtract.
Klik di dalam shape dengan tool Type untuk menambahkan teks.
Simpan teks dan ikon ke dalam group lalu geser sambil menahan Alt untuk menduplikasinya. Ubah teks dan ikon untuk setiap bagian.
Buat latar footer dengan bentuk yang sama seperti header. Gunakan Layer Style dan warna yang sama.
Tambahkan keterangan tentang desainer dan berbagai info lainnya.
Di bawah adalah desain akhir yang kita peroleh. Bisa Anda lihat bahwa desain ini sederhana namun cukup kuat dalam menonjolkan produk yang ingin dijual situs.
Download File PSD
Preview
Di bawah adalah tampilan desain yang akan kita buat.
Detail Tutorial
- Tingkat Kesulitan: Pemula, Menengah
- Software yang Digunakan: Adobe Photoshop
- Teknik yang Dipelajari: Mendesain dengan Grid 960, Layer Style
- Lama Pengerjaan: 30 menit
Resource yang Dibutuhkan
Untuk mengikuti tutorial ini, silakan ambil terlebih dahulu resource berikut:
- Template Grid 960 dari 960.gs
- Pola Pixel dari PSDfreemium
- Set ikon Oxygen dari Oxygen
Tutorial
Langkah 1: Mempersiapkan File
Buka template grid 960 px yang terdiri dari 12 kolom di Photoshop. Lebar saat ini terlalu sempit untuk kebutuhan kita. Jadi, perbesar ukurannya hingga 1.100 x 1.200 px dengan perintah Image > Canvas Size.
Langkah 2: Header
Aktifkan tool Rectangle dan buat latar header dengan warna #2c2a2f.
Klik ganda layer dan aktifkan Pattern Overlay. Gunakan Pola Pixel dari PSDfreemium.
Di bawah adalah tampilan latar header di perbesaran 100%.
Langkah 3: Area Info Produk
Aktifkan tool Rectangle dan buat latar untuk informasi produk. Area ini harus berada di atas header.
Tambahkan Layer Style Stroke dan turunkan Opacity agar hasilnya transparan.
Di bawah adalah hasil Stroke.
Langkah 4
Buat layer baru. Seleksi latar area produk. Isi dengan putih. Klik Filter > Noise > Add Noise.
Langkah 5
Ubah Blend mode ke Multiply dan turunkan Opacity ke 20%. Ini akan memberi tekstur noise pada latar.
Langkah 6: Logo
Aktifkan tool Ellipse. Ubah warna depan ke orange. Shift-drag untuk membuat lingkaran.
Langkah 7
Ctrl - click lingkaran lalu klik Select > Modify > Contract.
Langkah 8
Buat layer baru lalu klik Edit > Stroke. Gunakan Width: 1 px dengan warna hitam. Turunkan Opacity layer ke 20%.
Langkah 9
Tekan Ctrl + J untuk menggandakan garis stroke. Tekan Ctrl + I untuk membalik warna garis menjadi putih. Aktifkan tool Move lalu klik panah atas sekali untuk menggaris garis 1 px ke atas.
Langkah 10
Buat layer baru lalu ubah menjadi Clipping Mask dengan menekan Ctrl + Alt + G. Lukis bagian atas dan bawah lingkaran dengan putih. Turunkan Opacity layer ke 10%.
Langkah 11
Aktifkan tool Custom Shape dan pilih bentuk Snowflake dari baris pilihan. Buat nowflake hitam di tengah-tengah lingkaran. Klik ganda layer dan beri bevel and Emboss. Turunkan Fill hingga 5%.
Langkah 12
Buat layer baru. Ctrl + klik lingkaran dan klik Edit > Stroke dengan warna putih. Haluskan garis dengan Gaussian Blur.
Langkah 13
Hapus bagian atas dan bawah garis stroke dengan tool eraser. Turunkan oapcity layer hingga 30%.
Langkah 14
Ctrl - klik lingkaran. Buat layer baru dan isi seleksi dengan hitam. Haluskan dengan Gaussian Blur. Simpan bayangan ke belakang lingkaran. Transformasi (Ctrl + T) bayangan agar bagian atas dan bawahnya mencuat.
Langkah 15
Tambahkan nama situs dan tagline dengan font Helvetica Bold dan Regular.
Langkah 16
Tambahkan menu halaman di sisi kanan header. Gunakan warna orange, sama dengan warna logo, untuk link aktif. Samakan warna link lainnya dengan latar area info produk.
Langkah 17
Simpan gambar produk.
Langkah 18
Tambahkan keterangan produk. Gunakan ukuran font yang cukup besar agar menarik perhatian. Saya memilih kombinasi font Sans Serif untuk teks utama dan Serif untuk keterangannya.
Langkah 19: Area Trial
Buat lagi latar persegi untuk info trial produk. Gunakan orange sesuai tema warna kita. Pastikan agar area ini berada di belakang area keterangan produk, agar efek Stroke transparan berada di atasnya.
Beri Gradient Overlay
Langkah 20
Tambahkan keterangan trial produk.
Beri Inner Shadow pada teks.
Di bawah adalah hasil yang kita peroleh.
Langkah 21
Ambil tombol dari PSDfreemium. Modifikasi sedikit warnanya agar sesuai dengan tema warna kita.
Langkah 22: Area Keterangan Tambahan
Aktifkan tool Rectangle dan buat latar lagi. Kali ini dengan warna abu-abu untuk poin-poin keterangan produk. Simpan area ini di atas bagian info trial produk.
Beri Stroke dengan setting yang sama dengan area info produk.
Efek Stroke transparan akan muncul di atas area trial produk.
Langkah 23
Buat sub judul poin pertama dengan font Helvetica Bold. Gunakan warna orange. Beri Drop Shadow agar teks sedikit terangkat.
Langkah 24
Ambil set ikon Oxygen. Simpan di bawah sub judul.
Langkah 25
Buat path kotak untuk teks lalu buat lagi path kotak untuk menutupi ikon dengan mode Subtract.
Langkah 26
Klik di dalam shape dengan tool Type untuk menambahkan teks.
Langkah 27
Simpan teks dan ikon ke dalam group lalu geser sambil menahan Alt untuk menduplikasinya. Ubah teks dan ikon untuk setiap bagian.
Langkah 28: Footer
Buat latar footer dengan bentuk yang sama seperti header. Gunakan Layer Style dan warna yang sama.
Langkah 29
Tambahkan keterangan tentang desainer dan berbagai info lainnya.
Hasil Akhir
Di bawah adalah desain akhir yang kita peroleh. Bisa Anda lihat bahwa desain ini sederhana namun cukup kuat dalam menonjolkan produk yang ingin dijual situs.
Download Link
Download File PSD