Cara Membuat Efek Gulir Latar Belakang Berlapis Ganda dengan Divi

Jika Anda mencari cara untuk membuat situs web Anda menonjol, Anda mungkin ingin mempelajari cara membuat latar belakang berlapis ganda. Membuat latar belakang berlapis ganda akan membantu menghidupkan gambar latar belakang Anda melalui gerakan. Dalam tutorial hari ini, kami akan menunjukkan cara membuat desain latar belakang berlapis ganda dengan Divi. Tutorial ini berisi tiga bagian:

1. Menyiapkan dua file gambar di Adobe Photoshop
2. Membuat desain di dalam Divi
3. Menerapkan efek gulir untuk menghidupkan latar belakang

Anda juga dapat mengunduh file JSON dan gambar secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Tata Letaknya GRATIS

Untuk mendapatkan tata letak gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

1. Buat File Gambar di Photoshop

Pilih Gambar Produk dengan Latar Belakang Bersih & Buka di Photoshop

Di bagian pertama tutorial ini, kita akan membuat file gambar yang akan kita gunakan di seluruh tutorial Divi. Untuk membuatnya, kami akan menggunakan Adobe Photoshop, tetapi jangan ragu untuk menggunakan perangkat lunak pengedit gambar lain pilihan Anda. Efek gambar latar dua lapis akan bekerja paling baik jika gambar yang Anda kerjakan memiliki:

1. Fokus yang jelas pada objek di dalam gambar
2. Latar belakang yang bersih

Gambar di bawah ini adalah contoh sempurna. Anda dapat menemukan file gambar ini di folder zip yang dibagikan di area unduhan posting ini.

Duplikat Lapisan

Setelah Anda membuka gambar di dalam Photoshop, klon layer aslinya sekali. Kami akan mengerjakan layer duplikat.

Sembunyikan Lapisan Asli

Untuk memastikan kita melihat hasilnya saat kita bergerak ke bawah tutorial, sembunyikan layer aslinya.

Buat PNG Dari Pemilihan Objek di Gambar

Gunakan Alat Seleksi Cepat di Piring

Secara total, kita membutuhkan dua file gambar untuk tutorial:

1. PNG objek, dalam hal ini, pelat
2. JPEG latar belakang tanpa objek

Kami memisahkan objek dari latar belakangnya, sehingga kami dapat memanipulasinya satu per satu saat berada di dalam lingkungan Divi.

Untuk mulai memilih objek, pilih "Alat Seleksi Cepat" di bilah alat dan coba tutupi objek sebanyak mungkin.

Pilih + Pilihan Masker

Anda akan melihat bahwa pemilihan objek masih belum cukup baik. Anda dapat menyempurnakan tampilan pilihan Anda dengan menggunakan opsi "Select and Mask" saat Anda mengklik kanan pilihan. Sesampai di sana, Anda dapat bermain-main dengan opacity, smoothness, dll.

Buat Layer Mask dari Seleksi

Meskipun kita telah membuat seleksi yang mulus, masih ada bagian di dalam objek yang belum dipilih. Kami akan menambahkan bagian-bagian ini secara manual ke pilihan kami dengan mengklik tombol layer mask yang dapat Anda lihat di layar cetak di bawah ini:

Sempurnakan Seleksi Di Dalam Masker dengan Kuas

Setelah layer mask Anda dibuat, Anda dapat mulai menggunakan kuas untuk memodifikasi layer mask. Pastikan layer mask Anda dipilih.

• Menggunakan kuas hitam (#000) akan menghapus bagian dari layer mask Anda
• Menggunakan kuas putih (#fff) akan menambahkan kembali bagian dari layer mask Anda

Gunakan kuas yang tidak terlalu keras, jadi Anda tidak perlu terlalu presisi.

Periksa Masker Dua Kali dengan Lapisan Berwarna

Anda selalu dapat memeriksa ulang layer mask Anda dengan menempatkan layer berwarna di bawahnya. Lapisan berwarna akan lebih mudah memberikannya jika Anda melewatkan satu tempat.

Simpan Pilihan PNG sebagai File Gambar Terpisah

Buat File Baru

Sekarang setelah Anda memiliki pilihan PNG dari objek Anda, Anda dapat mengkloning seluruh lapisan, sehingga Anda selalu dapat kembali ke sana. Di bagian selanjutnya, kita akan menggunakan layer duplikat untuk membuat gambar latar belakang tanpa objek.

Ukuran objek kita jauh lebih kecil dari ukuran file awal, jadi kita akan membuat file baru untuk objek kita dan membawanya.

Sesuaikan Pilihan di File Baru

Copy-paste layer dengan layer mask-nya di dalam file baru yang Anda buat.

Ekspor untuk Web

Dan ekspor untuk web sebagai PNG.

Kompres File Gambar

PNG dengan latar belakang transparan cenderung memiliki ukuran file yang lebih besar, jadi sebaiknya Anda mengompres file menggunakan alat pilihan Anda.

Hapus Objek di Gambar Asli

Pilih Layer Mask

Kembali ke file Photoshop awal! Di sana, kita akan membuat gambar latar belakang tanpa objek. Kami menggunakan lapisan atas di dalam file kami untuk melakukan itu. Pertama, pastikan layer mask Anda dipilih.

Balikkan Masker

Kemudian, buka properti lapisan ini dan klik "Balikkan".

Terapkan Layer Mask

Anda sekarang akan melihat bahwa objek transparan di dalam lapisan awal. Kita akan menerapkan layer mask ke layer kita dengan mengklik kanan dan memilih "Apply Layer Mask".

Isi Ruang Kosong Menggunakan Alat Klon

Kami masih memiliki lubang di tengah, yang harus kami isi. Di situlah alat kloning berguna. Pilih ukuran kuas pilihan Anda dan isi gambar. Anda tidak perlu terlalu tepat dengan ini, di dalam tutorial Divi, kita akan menempatkan objek di atasnya.

Simpan Gambar tanpa Objek

Ekspor untuk Web

Setelah Anda menyelesaikan gambar latar belakang tanpa objek, Anda dapat menyimpannya sebagai file JPEG dengan kualitas 70%.

Kompres File Gambar

Pastikan untuk mengompres gambar ini juga.

2. Membangun Efek Latar Belakang Berlapis Ganda di Divi

Tambahkan Bagian Baru

Unggah Gambar Latar Belakang

Setelah Anda memiliki kedua file gambar dalam jangkauan, saatnya untuk beralih ke Divi! Buka halaman baru dan tambahkan bagian baru. Unggah gambar latar belakang yang Anda buat di bagian pertama tutorial.

Jarak

Pindah ke tab desain bagian dan terapkan beberapa nilai spasi kustom. Margin bawah yang kita tambahkan akan membantu kita melihat efeknya pada tempatnya. Biasanya, margin ini akan digantikan oleh bagian berikutnya dalam desain Anda.

• Margin Bawah: 100vh
• Bantalan Atas:
  • Desktop: 100px
  • Tablet & Ponsel: 50px
• Bantalan Bawah:
  • Desktop: 100px
  • Tablet: 600 piksel
  • Telepon: 500px

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul, buka pengaturan baris dan ubah lebar dan lebar maksimal. Pengaturan ini akan memungkinkan baris menyentuh sisi kiri dan kanan wadah bagian setiap saat. Dengan cara ini, kami dapat memastikan gambar PNG dan latar belakang memiliki keseimbangan yang sama di semua ukuran layar.

• Lebar: 100%
• Lebar Maks: 100%

Jarak

Buka pengaturan spasi baris berikutnya dan hapus semua padding atas dan bawah default.

• Padding Atas: 0px
• Padding Bawah: 0px

Posisi

Kemudian, reposisi seluruh baris.

• Posisi: Absolut
• Lokasi:
  • Desktop: Pusat
  • Tablet & Ponsel: Bawah Tengah
• Offset Vertikal:
  • Desktop: /
  • Tablet & Telepon: 30vh

Tambahkan Modul Gambar ke Baris

Unggah Gambar PNG

Setelah Anda menyelesaikan pengaturan baris, tambahkan Modul Gambar ke baris dan unggah file PNG yang telah Anda buat di bagian pertama tutorial.

Penyelarasan

Pindah ke tab desain dan ubah perataan gambar.

• Penjajaran Gambar: Tengah

Perekat

Ubah pengaturan ukuran berikutnya.

• Lebar:
  • Desktop: 36%
  • Tablet & Telepon: 60%

Tambahkan Baris #2

Struktur Kolom

Kemudian, tambahkan baris lain ke bagian menggunakan struktur kolom berikut:

Warna latar belakang

Buka pengaturan baris dan ubah warna latar belakang.

• Warna Latar Belakang: #ffffff

Perekat

Ubah pengaturan ukuran berikutnya.

• Lebar: 90%
• Lebar Maks: 550px
• Penjajaran Baris:
  • Desktop: Kiri
  • Tablet & Telepon: Pusat

Jarak

Kemudian, terapkan beberapa nilai padding khusus.

• Padding Atas: 11%
• Padding Bawah: 11%
• Padding Kiri: 5%
• Padding Kanan: 5%

Offset Horisontal

Kami juga menambahkan beberapa offset horizontal ke pengaturan posisi.

• Offset Horisontal:
  • Desktop: 5%
  • Tablet & Telepon: 0%

Tambahkan Modul Teks #1 ke Kolom 1

Tambahkan Konten H2

Saatnya menambahkan modul, dimulai dengan Modul Teks pertama yang berisi beberapa konten H2.

Pengaturan Teks H2

Gaya teks H2 sebagai berikut:

• Judul 2 Font: Kumbh Sans
• Judul 2 Ukuran Teks:
  • Desktop: 90px
  • Tablet: 60px
  • Telepon: 45px

Tambahkan Modul Teks #2 ke Kolom 1

Tambahkan Konten Deskripsi

Tambahkan Modul Teks lain tepat di bawah yang sebelumnya dan masukkan beberapa konten deskripsi pilihan Anda.

Pengaturan Teks

Ubah pengaturan teks modul yang sesuai:

• Font Teks: Kumbh Sans
• Tinggi Baris Teks: 2em

Tambahkan Modul Tombol ke Kolom 1

Tambahkan Salinan

Modul terakhir yang kita butuhkan di kolom ini adalah Modul Tombol. Tambahkan beberapa salinan pilihan Anda.

Pengaturan Tombol

Gaya tombol sesuai:

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 20px
• Warna Teks Tombol: #6b6443
• Lebar Batas Tombol: 0px
• Radius Perbatasan Tombol: 0px

• Font Tombol: Kumbh Sans
• Berat Huruf Tombol: Tebal
• Tampilkan Ikon Tombol: Ya
• Penempatan Ikon Tombol: Kiri
• Hanya Tampilkan Ikon Saat Arahkan ke Tombol: Tidak

Bayangan Kotak

Sertakan bayangan kotak juga.

• Posisi Horizontal Bayangan Kotak: 0px
• Posisi Vertikal Bayangan Kotak: 2px
• Warna Bayangan: #6b6443

3. Tambahkan Efek Gulir

Gerak Vertikal Gambar

Di bagian terakhir dari tutorial ini, kita akan fokus untuk menambahkan efek gulir ke Modul Gambar yang berisi file gambar PNG. Buka pengaturan modul, navigasikan ke tab lanjutan dan terapkan pengaturan gerakan vertikal berikut:

• Aktifkan Gerakan Vertikal: Ya
• Mulai Offset:
  • Desktop: 0
  • Tablet & Telepon: 4 (pada 0%)
• Offset Tengah:
  • Desktop: 0
  • Tablet & Telepon: 0 (pada 97%)
• Mengakhiri Offset:
  • Desktop: 0
  • Tablet & Telepon: -2 (pada 100%)

Gambar Gerak Horizontal

Kami menyelesaikan desain kami menggunakan pengaturan gerakan horizontal berikut:

• Aktifkan Gerakan Horizontal: Ya
• Mulai Offset:
  • Desktop: 0 (pada 0%)
  • Tablet & Telepon: 0
• Offset Tengah:
  • Desktop: 0 (pada 65%)
  • Tablet & Telepon: 0 (pada 97%)
• Mengakhiri Offset:
  • Desktop: -10 (pada 100%)
  • Tablet & Telepon: 0

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat latar belakang berlapis ganda, dan menganimasikannya dengan efek gulir bawaan Divi. Di bagian pertama tutorial, kami telah menyiapkan file gambar di dalam Adobe Photoshop. Di bagian kedua tutorial, kami fokus menggunakan file gambar di dalam Divi untuk membuat desain responsif. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah.

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.