Cara Membuat Transisi Bagian Berbentuk Tidak Beraturan dengan Divi

Salah satu cara terbaik untuk meningkatkan desain situs web Anda adalah dengan menggunakan transisi bagian yang berbeda. Dalam posting sebelumnya, kami telah menunjukkan kepada Anda bagaimana Anda dapat melakukannya menggunakan opsi bawaan Divi saja. Namun, jika Anda ingin membuat sesuatu yang sedikit lebih maju atau dipersonalisasi, Anda juga dapat membuat transisi bagian yang berbentuk tidak beraturan. Karena kerumitannya, cara terbaik untuk mendekati ini adalah dengan menggunakan gambar dengan batas transparan.

Dalam posting ini, kami akan menunjukkan kepada Anda bagaimana Anda dapat melakukannya. Kami tidak hanya akan menunjukkan kepada Anda apa yang harus dilakukan dalam Divi Builder, tetapi kami juga akan menunjukkan kepada Anda bagaimana Anda dapat membuat batas transparan ini pada gambar dengan beberapa langkah menggunakan Photoshop.

Contoh Hasil

Mari kita lihat contoh tata letak dengan transisi bagian berbentuk tidak beraturan yang menakjubkan:

Seperti yang Anda perhatikan, Anda dapat menggunakan batas transparan ini di seluruh situs Anda dan di dalam bagian yang berbeda. Penting untuk diingat bahwa, tergantung pada seberapa besar batas transparan Anda, Anda harus memiliki cukup tempat tersisa di dalam bagian agar sesuai dengan berbagai konten yang Anda coba bagikan. Ini juga akan menciptakan keseimbangan yang bagus antara berbagai bagian.

Cara Membuat Transisi Bagian Berbentuk Tidak Beraturan dengan Divi

Berlangganan Saluran Youtube Kami

Buat Perbatasan Transparan dengan Photoshop

Anda dapat mencapai bentuk asli seperti yang Anda inginkan dengan Photoshop. Anda juga dapat memilih alternatif gratis yang disebut GimpShop. Untuk tutorial ini, kita akan menggunakan Photoshop.

Buka Photoshop

Mulailah dengan membuka photoshop di komputer Anda.

Buka Gambar

Setelah Anda selesai melakukannya, buka gambar yang ingin Anda kerjakan.

Klik dua kali pada Gambar & Buat Lapisan

Setelah gambar Anda diunggah ke dalam Photoshop, klik dua kali pada layer gambar dan buat layer baru untuk itu (Layer 0).

Tambahkan Lapisan Lain

Untuk menambahkan perbatasan transparan, Anda akan membutuhkan lapisan lain juga jadi lanjutkan dan tambahkan dengan mengklik ikon yang kami tandai di layar cetak di bawah ini. Setelah Anda membuat layer (Layer 1), pastikan itu ditempatkan di atas layer yang berisi gambar Anda.

Pilih Kuas & Ukuran

Saat Layer 1 diaktifkan, lanjutkan dan klik ikon kuas.

Setelah melakukannya, Anda dapat menyesuaikan ukuran dan pola yang digunakan untuk kuas sesuai keinginan Anda. Ada banyak sekali kuas Photoshop gratis di internet, jadi tergantung pada jenis situs web yang Anda buat, pilih yang pas. Juga, pastikan bahwa opacity diatur pada 100%.

Mulai Menggunakan Kuas di Perbatasan

Setelah Anda memiliki kuas di tempatnya, mulailah menggunakannya di sisi yang Anda inginkan agar transparan. Pastikan Anda menutupi seluruh perbatasan dengan kuas Anda sehingga semuanya menjadi transparan setelahnya.

CTRL (Windows) atau Command (Mac) + Pilih Layer Baru

Setelah selesai, Anda dapat menekan CTRL (untuk Windows) atau Command (untuk Mac) pada keyboard Anda dan klik Layer 1 secara bersamaan. Anda akan melihat bahwa Photoshop akan memilih semua yang telah Anda tambahkan ke lapisan itu, yaitu, dalam hal ini, batas berbentuk.

Buat Layer Baru Tidak Terlihat

Selanjutnya, buat Layer 1 tidak terlihat dengan menghilangkan mata seperti yang ditandai pada layar cetak di bawah ini.

Pilih Gambar & Hapus Layer Baru

Kemudian, klik pada layer yang berisi gambar Anda dan tekan tombol hapus pada keyboard Anda. Setelah Anda melakukannya, Anda akan melihat bahwa perbatasan akan menjadi transparan.

Pilih Rectangular Marquee Tool & Klik Gambar

Klik pada Rectangular Marquee Tool dan tekan di suatu tempat secara acak pada gambar.

Simpan Gambar sebagai PNG

Terakhir, Anda harus menyimpan gambar sebagai PNG sehingga Anda dapat menggunakannya di situs web Anda.

Tambahkan Latar Belakang ke Divi

Setelah Anda membuat gambar berbeda yang ingin Anda gunakan di situs web Divi Anda (dengan menggunakan teknik Photoshop di atas), sisanya mudah. Gambar yang Anda buat berfungsi sebagai latar belakang bagian tertentu. Kami hanya akan menunjukkan cara membangun bagian pahlawan dari contoh kami karena metode yang sama juga berlaku untuk bagian yang berbeda.

Tambahkan Bagian Standar Baru

Tambahkan halaman baru, alihkan ke Visual Builder dan tambahkan bagian standar baru ke halaman itu.

Unggah Gambar Latar Belakang

Setelah Anda menempatkan semua modul yang ingin Anda tampilkan di bagian pahlawan, Anda dapat melanjutkan dan menambahkan gambar yang telah Anda buat di bagian sebelumnya dari posting ini.

Tambahkan Warna Latar Belakang

Setelah Anda selesai melakukannya, Anda dapat memutuskan warna apa yang akan muncul di bagian transparan gambar Anda. Dalam contoh ini, kami menggunakan '#dddddd' sebagai warna latar belakang. Anda dapat langsung melihat bahwa warna akan muncul tepat di dalam bagian transparan gambar.

Pastikan Ada Cukup Padding

Bergantung pada jumlah modul dan ukuran batas transparan yang Anda gunakan di bagian pahlawan, Anda mungkin harus menambahkan beberapa bantalan khusus. Bermain-main dengan nilai padding bagian yang berbeda dan lihat mana yang memberi Anda hasil terbaik.

Tambahkan Warna Latar Belakang yang Sama ke Bagian Berikutnya

Untuk memastikan bagian yang berbeda menyatu dengan baik satu sama lain, gunakan warna latar belakang yang sama yang Anda gunakan di bagian pahlawan Anda di bagian berikutnya juga. Itu tidak berarti bahwa Anda harus menggunakan satu warna latar belakang warna untuk bagian berikutnya, Anda dapat menggunakan latar belakang gradien serta selama warna kedua bagian menyatu dengan indah.

Contoh

Seperti yang disebutkan sebelumnya, Anda dapat membuat batas gambar sebanyak yang Anda inginkan dan menggunakannya dengan cara yang kreatif di seluruh situs web Anda. Untuk memberi Anda rasa, kami telah membuat pratinjau contoh berikut:

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda bagaimana Anda dapat dengan mudah menggunakan transisi bagian yang berbentuk tidak beraturan. Dengan menggunakan metode ini, pada dasarnya Anda dapat membuat transisi bagian apa pun yang Anda inginkan. Selain menunjukkan kepada Anda cara membuat bentuk tidak beraturan ini dengan beberapa langkah di Photoshop, kami juga menunjukkan kepada Anda bagaimana Anda dapat membuatnya bekerja di dalam Divi Builder. Jika Anda memiliki pertanyaan atau saran; pastikan Anda meninggalkan komentar di bagian komentar di bawah!

Pastikan untuk berlangganan buletin email dan saluran YouTube kami sehingga Anda tidak akan pernah melewatkan pengumuman besar, tip bermanfaat, atau Divi freebie!