Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Adobe Photoshop
Webdesign

Desain Landing Page "Gratitude Log" Elegan dengan Photoshop

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Lufti Adi Putra (you can also view the original English article)

Final product image
What You'll Be Creating

Dalam tutorial ini saya akan memandu Anda melalui proses merancang landing page yang elegan untuk layanan "gratitude log" fiksi. Kita akan memulai secara total dari awal, menyusun tata letak dengan Adobe Photoshop dalam waktu singkat. Kita akan menggunakan beberapa teknik dasar dan menengah untuk membuat desain ini dengan pengubahan pemikiran. Mari kita memulainya!

Aset Tutorial

Untuk dapat mengikuti Anda akan membutuhkan beberapa (tersedia secara bebas) aset:

Persiapkan Dokumen

Langkah 1

Mulailah dengan membuat dokumen Photoshop baru (File > New ...) dengan menggunakan pengaturan yang ditunjukkan di bawah ini. Anda bebas menggunakan kanvas dari dimensi apa pun yang Anda inginkan-web tidak memiliki lebaryang tetap.

Canvas settings

Langkah 2

Mari kita pasang beberapa pemandu jadi layout kita punya cukup ruang dan terlihat seimbang. Saya tidak selalu menggunakan grid yang telah ditentukan, namun pengaturan beberapa panduan akan memastikan kerapian dan akan membantu menentukan lebar situs web kita. Buka View > New Guide ... dan tetapkan beberapa panduan. saya biasanya memilih 1000px sebagai lebar situs dan menambahkan beberapa panduan dari sudut sehingga memiliki ruang untuk bernafas.

Catatan: Panduan yang digunakan untuk tutorial ini: vertikal pada 200px, 500px, 700px, 900px dan 1200px.

Petunjuk: Anda juga bisa menggunakan plugin Photoshop GuideGuide untuk membuat proses ini semakin cepat.

Guidelines

Langkah 3

etap pergunakan Photoshop etiquette , kita akan menjaga agar segala sesuatunya terorganisir dan karena itu mudah dinavigasi dan diedit. Mari buat tiga kelompok layer bernama Header, Content dan Footer. Untuk membuat grup masuk ke Layer > New > Group ... dan berikan masing-masing judul seperti yang disebutkan. Untuk pembuatan grup dengan cepat cukup klik ikon folder.

Merancang Area Header

Header atau area "diatas lipatan" (dimanapun itu berada hari ini) memainkan peran yang sangat penting dalam menarik pengguna dan memastikan pengunjung tetap berada di situs web. Untuk tata letak landing page ini saya akan menggunakan foto dua orang yang duduk di bangku; salah satu dari mereka berpegangan tangan di udara yang menggambarkan emosi dan kebahagiaan positif.

Langkah 1

Mari kita buat dahulu latar belakang blog. Di dalam kelompok "Header" menggambar bentuk persegi panjang berwarna hitam #000000 dengan menggunakan Rectangle Tool (U). Dalam kasus saya, saya menggambar kotak berukuran 1400x728px dan meletakkannya di bagian atas dokumen.

Sekarang unduh Chillin’ in the sun photo, seret ke dokumen Photoshop dan letakkan di atas layer persegi panjang.  Ubah nama layer gambar menjadi sesuatu yang akan Anda kenali nanti, dalam kasus saya, saya telah menggunakan IMG. Setelah itu tahan tombol Alt dan arahkan tatikus ke layer foto sampai Anda melihat panah kecil menunjuk ke bawah, lalu lepaskan. Anda baru saja membuat Clipping Mask. Akhirnya kurangi layer IMG Opacity menjadi 70% sehingga teks yang akan kita pasang di atas akan lebih mudah dibaca.

Sekarang tekan CMD+T dan ubah ukuran foto agar sesuai dengan kebutuhan Anda.

Petunjuk: tahan tombol Shift untuk berubah secara proporsional.

70 opacity

Langkah 2

Sekarang mari kita membuat navigasi global untuk landing page kita sehingga orang bisa menavigasi melalui situs web.

Buat grup baru yang disebut "Navigation", letakkan di dalam grup "Header". etelah itu pilih Rectangle Tool (U) dan gambarlah bentuk persegi panjang putih antara pedoman vertikal pertama dan terakhir. Buatlah sekitar 60px tingginya sehingga item navigasi akan memiliki beberapa ruang untuk bernapas dan terlihat bersih. Akhirnya pindahkan 30px ke bawah dari atas sehingga kita bisa memiliki efek mengambang ini yang tetap ada pada citra kita.

Langkah 3

Sekarang mari kita letakkan logo dan beberapa hipertaut agar bar navigasi kita terlihat seperti sesuatu yang bisa digunakan orang. Untuk logo yang saya tulis hanya "Grttd" dengan menggunakan Playfair Display (Bold Italic) ukuran font 26px dan warna abu-abu gelap #0e0e0e.

ntuk hipertaut navigasi saya menggunakan Source Sans Pro 14px dengan spasi diperpanjang antara huruf Untuk ajakan bertindak utama "Sign Up" Saya telah menggunakan Black dan warna hijau #96c218. Kami selesai dengan "Navigation", jadi kurangi dengan mengklik ikon segitiga kecil di sebelah nama grup.

Text settings
Sign up link

Langkah 4

Mari menulis pesan inspiratif yang menyertai gambar dan keseluruhan gagasan situs web. Saya akan menggunakan huruf besar tebal dengan sub judul yang menjelaskan konsep secara lebih rinci.

Karena kita memiliki latar belakang yang cukup gelap untuk area bagian atas kita, sebaiknya menggunakan pale text untuk menciptakan kontras yang tinggi dan memastikan keterbacaan. Saya telah menggunakan putih #FFFFFF Source Sans Pro (Black) 80px dengan garis-tinggi 86px. Tempatkan sekitar 120px di bawah panel navigasi sehingga pesan memiliki cukup ruang untuk dianggap penting.

Zoomed out 70% tampilan.

Sekarang mari kita menempatkan sub-judul yang akan mengklarifikasi keseluruhan konsep dan menjawab beberapa pertanyaan yang mungkin dimiliki pengunjung. Untuk membuat kombinasi tipografi yang bagus mari kita bahas judul utama sans serif dengan font serif yang elegan yang biasa kita gunakan sebelumnya untuk logo.

Untuk kombinasi font yang lebih mengilhami, kunjungi:  Google Web Fonts Typographic Project dan A Beginner’s Guide to Pairing Fonts.

ntuk tutorial ini saya telah menggunakan font #FFFFFF 26px Playfair Display (Italic) putih dan meletakkannya 40px di bawah judul utama.

Langkah 5

Mari tambahkan sesuatu yang lebih menarik sehingga pengunjung bisa melihat manfaat berada di situs web. Gratitude log didasarkan pada pencatatan hal-hal yang Anda syukuri, jadi beberapa bukti sosial akan menjadi ide bagus, menunjukkan kepada orang-orang bahwa seseorang benar-benar menggunakannya dan menunjukkan sesuatu yang lebih diinginkan seperti sebuah coretan.

Buat grup baru yang disebut "Example", lalu pilih Ellipse Tool (U) dan, tahan Shift, menggambar lingkaran.  Dalam kasus saya itu 60x60px. Setelah itu pasang wajah seseorang di atas lapisan lingkaran dan, tahan tombol Alt, guliskan tetikus pada layer sampai Anda melihat panah kecil menunjuk ke bawah, lalu lepaskan untuk membuat Clipping Mask. Sekarang Anda dapat mengubah ukuran gambar jika diperlukan dengan mengklik CMD+T

Untuk tutorial ini saya menggunakan wajah acak dari User Inter Faces.

Petunjuk Pro: tahan tombol Shift untuk menggambar / mengubah ukuran bentuk proporsional.

UI Face

Sekarang kita perlu menempatkan indikator log berturut-turut. Mari buat bentuk lingkaran lain, kali ini lebih kecil, dan letakkan nomor di dalamnya. Sederhana, tapi bisa dimengerti, dan melakukan pekerjaan. Untuk warna lingkaran saya telah menggunakan kembali hijau #96c218 yang sebelumnya digunakan. Dalam kasus saya ukurannya 30x30px dan teks di dalamnya berwarna putih #FFFFFF Source Sans Pro (Bold) 14px.

Akhirnya, mari kita beri nama pada seseorang dan jelaskan berapa nomor telepon ini. Pilih Horizontal Type Tool (T) dan masukkan nama dan panjang coretan. Dalam kasus saya, saya telah menggunakan nama PT Serif (Bold Italic) 16px untuk nama dan Source Sans Pro (Regular) 13px untuk coretan. Pastikan menggunakan tinggi garis cukup besar sehingga elemen memiliki ruang untuk bernafas.

Bagus, satu hal terakhir sebelum pindah ke area konten. Kita membutuhkan Call To Action (CTA) yang kuat sehingga pengguna dapat melakukan sesuatu setelah melihat visual dan membaca berita utama. Buat grup baru dengan nama "CTA", atur warna foreground menjadi putih #FFFFFF dan ambil Rectangle Tool (T). Setelah itu menggambar bentuk persegi panjang, dalam kasus saya ukurannya 280x60px. Perhatikan konsistensi ketinggian yang sebelumnya digunakan untuk panel navigasi.

Setelah itu, masukkan beberapa salinan persuasif untuk tombol itu. Saya telah menggunakan "START LIVING →", warna seperti yang sebelumnya digunakan pada panel navigasi abu-abu gelap #0e0e0e, font Source Sans Pro (Semibold) 16px dengan pelacakan diatur ke 140.

Langkah 6

Sekarang kita sudah selesai dengan "Header". Mari buka grup "Content" dan buat yang lain bernama "Description". Kita akan memberi judul yang kuat diikuti dengan deskripsi yang lebih rinci tentang keseluruhan situs web. Penting untuk mengulang Call To Action (CTA) agar pengguna tidak perlu berpikir terlalu keras, namun tetap bisa mengambil tindakan kapan pun siap.

Pilih Horizontal Type Tool (T) dan pilih font yang kuat untuk tajuk utama Anda. Dalam kasus saya, saya menggunakan tampilan Playfair Display (Black) 60px yang indah dan elegan, namun berwibawa. Pastikan untuk memberi beast ini banyak ruang untuk bernafas, saya sudah memindahkannya 100px dari gambar header.

Sekarang menggunakan Horizontal Type Tool (T) yang sama membuat persegi panjang dengan mengklik dan menyeretnya. Dalam kasus saya ini adalah kotak berukuran 600x140px tempat saya memasang beberapa salinan persuasif bagi pengguna untuk memutuskan untuk mengeklik CTA. Untuk membangun hirarki visual yang jelas, teks deskripsi harus lebih kecil dan tidak terlalu berat. Dalam contoh saya, saya menggunakan abu-abu #666666 PT Serif (Reguler) 18px, tinggi garis 28px. Seluruh elemen dipindahkan turun sebesar 50px dari tajuk utama untuk memberikan tampilan yang bersih dan profesional ini.

Setelah membaca salinan, pengunjung kita dapat diyakinkan untuk mencobanya, jadi sebaiknya ulangi tombol Call To Action (CTA) sekali lagi. Buka grup "Header", cari grup "CTA" dan duplikatnya dengan menekan CMD+J. Setelah itu pindahkan ke dalam kelompok "Description" dan ubah warna tombol ke hijau en #96c218 yang sebelumnya digunakan dan untuk teks menggunakan #FFFFFF putih. Pindahkan ke bawah 50px dari salinan untuk memiliki jarak yang konsisten.

Sejauh ini terlihat bagus. Mari kita letakkan baris sederhana untuk memisahkan blok deskripsi secara visual dari yang berikutnya. Pilih Line Tool (U), atur Weight ke 1px dan gambar garis horizontal di garis pertama dan terakhir panduan vertikal. Dalam kasus saya, saya telah menggunakan warna abu-abu terang #e6e6e6 yang tidak terlalu kuat, tapi melakukan pekerjaan dengan sempurna.

Petunjuk pro: tahan tombol Shift untuk menggambar garis lurus sempurna.

Langkah 7

Sekarang kita selesai dengan blok "Description" saatnya untuk beralih ke yang berikutnya. Buat grup baru yang disebut "Get Inspired". Setelah itu duplikat layer tajuk judul dan deskripsi dari grup "Description" dan pindahkan ke grup "Get Inspired". Edit layer dan ubah salinannya. Berikut adalah contoh saya:

Sekarang arahkan ke grup "Header" dan temukan grup "Example". Gandakan seluruh kelompok dengan hitting CMD+J dan pindahkan ke grup "Get Inspired". Kita akan menggunakan kembali contoh kita dari atas dan menunjukkan beberapa cerita pengguna untuk menginspirasi pengunjung kami untuk mengambil tindakan.

Ganti nama nama grup menjadi "Story" dan hilangkan indikator hijau. Selain itu, Anda perlu mengubah warna teks menjadi abu-abu gelap #0e0e0e sehingga mudah dibaca pada latar belakang putih. Gunakan gambar lain untuk avatar dan tulis posisi dan lokasi seseorang di abu-abu yang lebih terang #666666 sehingga orang bisa lebih mengenal orang itu.

Setelah itu, buat kotak teks berukuran sekitar 300x160px menggunakan Horizontal Type Tool (T) dan tuliskan contoh update gratitude log. Saya telah menggunakan warna abu-abu gelap PT Serif (Italic) ukuran 16px seperti yang digunakan sebelumnya #666666.

Sekarang duplikat grup "Story" dua kali dan ganti avatar, nama dan deskripsi. Tempatkan kedua kelompok ini dalam urutan horizontal sehingga meninggalkan jarak spasial antara keduanya dan pasang garis setelah semua kelompok ini seperti yang kita gunakan sebelumnya.

Langkah 8

Sekarang, seperti yang kita lakukan dengan grup "Get Inspired", mari beralih ke bagian terakhir dari landing page kita. Call To Action terakhir (dengan beberapa rincian lebih lanjut) akan mendorong pengunjung untuk mendaftar dengan memasukkan alamat email.

Buat grup baru yang disebut "Email" dan arahkan ke grup sebelumnya untuk menemukan layer utama lalu lakukan duplikat dengan menekan CMD+J dan pindahkan ke grup yang baru dibuat. Ubah tajuk utama menjadi sesuatu yang memberikan dorongan dan bergerak sekitar 100px di bawah garis untuk menjaga konsistensi.

Bagus! Sekarang atur warna foreground menjadi abu-abu muda #f5f5f5 dan pilih Rectangle Tool (U) untuk menggambar kotak bidang email. Ini harus sama tingginya dengan tombol Call To Action (CTA) utama kami, meski lebar tidak penting. Dalam kasus saya itu adalah 430x60px. Kemudian ambil Horizontal Type Tool (T) dan tulis "Enter your email" atau yang serupa, pastikan Anda menggunakan warna gelap sehingga mudah dibaca.

Sekarang pergilah ke grup "Description" di panel layer kita dan temukan grup "CTA". Gandakan dengan menekan CMD+J dan pindahkan ke grup "Email". Tempatkan tombol tepat di sebelah bidang email dan pusatkan keseluruhan elemen.

Perbesar tampilan 80%.

Langkah 9

Akhir sudah dekat! Mari kita meminimalkan semua kelompok dan membuka kelompok "Footer". Atur warna foreground menjadi abu-abu gelap #2d2d2d dan, dengan menggunakan Rectangle Tool (U), gambarlah persegi panjang yang lebar sekitar 230px. Ini akan menjadi latar belakang footer kita dan akan membedakan area konten dengan kontrasnya.

Silakan cari grup "Navigation" dan layer logo, duplikat dengan hitting CMD+J dan memindahkannya ke grup "Footer". Ubah warna menjadi #FFFFFF putih dan pindahkan sekitar 50px di bawah tepi persegi panjang footer.

Akhirnya, ambil Horizontal Type Tool (T) dan taruh beberapa hipertaut yang mungkin berguna bagi pengguna. Pastikan untuk mengelompokkan hipertaut Anda sehingga mudah dikenali. Dalam kasus saya, saya telah menggunakan Source Sans Pro (Semibold) 16px untuk hipertaut grup headline dan PT Serif (Reguler) 14px untuk hipertaut judul.

Selamat!

Itu dia! Kita selesai dengan desain tata letak, jadi sekarang tinjau layer-layer, hapus yang tidak perlu dan serahkan ke pengembang Anda, atau pergunakan kode yang yang Anda buat sendiri. Saya telah membahas beberapa teknik dasar dan menunjukkan alur kerja saya untuk merancang tata letak web, semoga Anda telah belajar sesuatu.

Saya ingin mendengar masukan Anda dan melihat hasil dari tutorial ini!

Sumber Daya Ekstra

Jika Anda baru mengenal Design Landing Page, kami akan merekomendasikan sejumlah tutorial pengantar untuk mempercepat Anda mencapai hal-hal mendasar:

Jika Anda tertarik untuk mendapatkan bantuan dengan desain Landing Page Anda, Envato Studio memiliki koleksi besar layanan Landing Page Design & Development yang mungkin ingin Anda jelajahi. Anda juga bisa melihat Landing Page Themes di Pasar Envato.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.