Mendesain Halaman Depan Situs Perusahaan Secara Efektif

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.

Preview

Di bawah adalah tampilan desain yang akan kita buat.

final-large.jpg

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:

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.

mendesain-halaman-depan-situs-perusahaan-01.jpg

Langkah 2: Header

Aktifkan tool Rectangle dan buat latar header dengan warna #2c2a2f.

mendesain-halaman-depan-situs-perusahaan-02.jpg

Klik ganda layer dan aktifkan Pattern Overlay. Gunakan Pola Pixel dari PSDfreemium.

mendesain-halaman-depan-situs-perusahaan-03.jpg

Di bawah adalah tampilan latar header di perbesaran 100%.

mendesain-halaman-depan-situs-perusahaan-04.jpg

Langkah 3: Area Info Produk

Aktifkan tool Rectangle dan buat latar untuk informasi produk. Area ini harus berada di atas header.

mendesain-halaman-depan-situs-perusahaan-05.jpg

Tambahkan Layer Style Stroke dan turunkan Opacity agar hasilnya transparan.

mendesain-halaman-depan-situs-perusahaan-06.jpg

Di bawah adalah hasil Stroke.

mendesain-halaman-depan-situs-perusahaan-07.jpg

Langkah 4

Buat layer baru. Seleksi latar area produk. Isi dengan putih. Klik Filter > Noise > Add Noise.

mendesain-halaman-depan-situs-perusahaan-08.jpg

Langkah 5

Ubah Blend mode ke Multiply dan turunkan Opacity ke 20%. Ini akan memberi tekstur noise pada latar.

mendesain-halaman-depan-situs-perusahaan-09.jpg

Langkah 6: Logo

Aktifkan tool Ellipse. Ubah warna depan ke orange. Shift-drag untuk membuat lingkaran.

mendesain-halaman-depan-situs-perusahaan-10.jpg

Langkah 7

Ctrl – click lingkaran lalu klik Select > Modify > Contract.

mendesain-halaman-depan-situs-perusahaan-11.jpg

Langkah 8

Buat layer baru lalu klik Edit > Stroke. Gunakan Width: 1 px dengan warna hitam. Turunkan Opacity layer ke 20%.

mendesain-halaman-depan-situs-perusahaan-12.jpg

mendesain-halaman-depan-situs-perusahaan-13.jpg

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.

mendesain-halaman-depan-situs-perusahaan-14.jpg

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

mendesain-halaman-depan-situs-perusahaan-15.jpg

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

mendesain-halaman-depan-situs-perusahaan-16.jpg

mendesain-halaman-depan-situs-perusahaan-17.jpg

Langkah 12

Buat layer baru. Ctrl + klik lingkaran dan klik Edit > Stroke dengan warna putih. Haluskan garis dengan Gaussian Blur.

mendesain-halaman-depan-situs-perusahaan-18.jpg

mendesain-halaman-depan-situs-perusahaan-19.jpg

Langkah 13

Hapus bagian atas dan bawah garis stroke dengan tool eraser. Turunkan oapcity layer hingga 30%.

mendesain-halaman-depan-situs-perusahaan-20.jpg

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.

mendesain-halaman-depan-situs-perusahaan-21.jpg

Langkah 15

Tambahkan nama situs dan tagline dengan font Helvetica Bold dan Regular.

mendesain-halaman-depan-situs-perusahaan-22.jpg

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.

mendesain-halaman-depan-situs-perusahaan-23.jpg

Langkah 17

Simpan gambar produk.

mendesain-halaman-depan-situs-perusahaan-24.jpg

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.

mendesain-halaman-depan-situs-perusahaan-25.jpg

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.

mendesain-halaman-depan-situs-perusahaan-26.jpg

Beri Gradient Overlay

mendesain-halaman-depan-situs-perusahaan-27.jpg

mendesain-halaman-depan-situs-perusahaan-28.jpg

Langkah 20

Tambahkan keterangan trial produk.

mendesain-halaman-depan-situs-perusahaan-29.jpg

Beri Inner Shadow pada teks.

mendesain-halaman-depan-situs-perusahaan-30.jpg

Di bawah adalah hasil yang kita peroleh.

mendesain-halaman-depan-situs-perusahaan-31.jpg

Langkah 21

Ambil tombol dari PSDfreemium. Modifikasi sedikit warnanya agar sesuai dengan tema warna kita.

mendesain-halaman-depan-situs-perusahaan-32.jpg

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.

mendesain-halaman-depan-situs-perusahaan-33.jpg

Beri Stroke dengan setting yang sama dengan area info produk.

mendesain-halaman-depan-situs-perusahaan-34.jpg

Efek Stroke transparan akan muncul di atas area trial produk.

mendesain-halaman-depan-situs-perusahaan-35.jpg

Langkah 23

Buat sub judul poin pertama dengan font Helvetica Bold. Gunakan warna orange. Beri Drop Shadow agar teks sedikit terangkat.

mendesain-halaman-depan-situs-perusahaan-36.jpg

mendesain-halaman-depan-situs-perusahaan-37.jpg

Langkah 24

Ambil set ikon Oxygen. Simpan di bawah sub judul.

mendesain-halaman-depan-situs-perusahaan-38.jpg

Langkah 25

Buat path kotak untuk teks lalu buat lagi path kotak untuk menutupi ikon dengan mode Subtract.

mendesain-halaman-depan-situs-perusahaan-39.jpg

Langkah 26

Klik di dalam shape dengan tool Type untuk menambahkan teks.

mendesain-halaman-depan-situs-perusahaan-40.jpg

mendesain-halaman-depan-situs-perusahaan-41.jpg

Langkah 27

Simpan teks dan ikon ke dalam group lalu geser sambil menahan Alt untuk menduplikasinya. Ubah teks dan ikon untuk setiap bagian.

mendesain-halaman-depan-situs-perusahaan-42.jpg

mendesain-halaman-depan-situs-perusahaan-43.jpg

Langkah 28: Footer

Buat latar footer dengan bentuk yang sama seperti header. Gunakan Layer Style dan warna yang sama.

mendesain-halaman-depan-situs-perusahaan-44.jpg

Langkah 29

Tambahkan keterangan tentang desainer dan berbagai info lainnya.

mendesain-halaman-depan-situs-perusahaan-45.jpg

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.

final-large

Download Link

Download File PSD

Iklan

5 thoughts on “Mendesain Halaman Depan Situs Perusahaan Secara Efektif

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