Cara Membuat & Menggunakan Latar Belakang Bertekstur dengan Opsi Desain Divi

Dalam tutorial Divi hari ini, kami akan menunjukkan kepada Anda bagaimana Anda dapat membuat latar belakang bertekstur sederhana dan menggunakannya sebagai latar belakang untuk bagian Anda agar situs web Anda terlihat sedikit lebih autentik. Jika Anda melihat Tata Letak Manajemen Pembelajaran gratis terbaru kami, Anda akan melihat bahwa kami juga telah menggunakan latar belakang bertekstur di semua halaman.

Sekarang, kita akan memulai dengan menunjukkan dua jenis tekstur yang akan kita buat ulang dengan Photoshop; tekstur dibuat dengan bentuk dan tekstur dibuat dengan kuas. Setelah Anda tahu cara melakukannya, Anda dapat menjadi sekreatif yang Anda inginkan dan membuat latar belakang bertekstur yang autentik. Setelah itu, kami akan menunjukkan kepada Anda bagaimana Anda dapat membuat hasil yang menakjubkan dengan menggabungkan latar belakang bertekstur dan opsi desain Divi.

Hasil Gambar Dibuat dengan Bentuk

Gambar pertama yang akan kami tunjukkan cara membuat dengan Photoshop terlihat seperti ini:

Hasil dengan Opsi Desain Divi

Dan setelah diintegrasikan ke Divi, Anda dapat memperoleh hasil yang menakjubkan seperti ini:

Hasil Gambar Dibuat dengan Kuas

Gambar kedua yang akan kita buat terlihat seperti ini:

Hasil dengan Opsi Desain Divi

Dan dapat memberikan hasil yang indah berikut saat menggunakannya di situs web Anda:

Cara Membuat & Menggunakan Latar Belakang Bertekstur dengan Opsi Desain Divi

Berlangganan Saluran Youtube Kami

Buat Latar Belakang Bertekstur dengan Photoshop

Dibuat Dengan Bentuk

Latar belakang bertekstur pertama yang akan kami tunjukkan cara membuat ulang sebagian besar memiliki bentuk di atasnya yang dibuat dengan Polygonal Lasso Tool dan Eraser Tool. Kami akan memandu Anda langkah demi langkah tentang cara membuat hasil berikut:

File baru

Buka Photoshop dan mulai dengan menambahkan file baru. File ini akan membutuhkan lebar 1920px dan tinggi 847px.

Tambahkan Warna Latar Belakang

Kemudian, tambahkan warna latar belakang ke file yang baru saja Anda buat. Pastikan Anda menggunakan warna abu-abu yang sedikit lebih gelap di seluruh proses. Sangat penting untuk menggunakan warna yang sedikit lebih gelap karena itu akan membantu Anda nanti di posting ini saat menambahkan opsi desain Divi juga. Dalam contoh ini, kita telah menggunakan '#626262' sebagai warna latar belakang dan kita telah menggunakan Paint Bucket Tool untuk menambahkan warna pada layer.

Tambahkan Lapisan 2

Lanjutkan dengan menambahkan layer baru tepat di atas layer pertama.

Tambahkan Bentuk Pertama ke Layer 2

Kemudian, pilih Polygonal Lasso Tool dan mulailah membuat bentuk sambil memilih Layer 2.

Setelah selesai, pilih Paint Bucket Tool dan gunakan '#747474' untuk mewarnai bagian yang dipilih.

Tambahkan Lapisan 3

Kemudian, tambahkan layer lain tepat di atas Layer 2.

Tambahkan Layer Bentuk Kedua 3

Lanjutkan dengan membuat bentuk lain, seperti yang ada di print screen di bawah ini, dengan menggunakan Polygonal Lasso Tool.

Pilih Paint Bucket Tool dan gunakan '#6a6a6a' kali ini.

Sejauh ini, gambar Anda akan terlihat seperti ini:

Gunakan Eraser Tool pada Layer 3

Pindah, pilih Eraser Tool sambil memilih Layer 3.

Gunakan Eraser Tool bersama dengan kuas yang memiliki kekerasan 0% dan ukuran 338px.

Kemudian, lanjutkan dan hapus area yang ingin Anda hilangkan. Kami sengaja hanya meninggalkan sebagian kecil Layer 3 di mana Anda dapat melihat transisi antara Layer 2 dan Layer 3.

Duplikat, Transformasi, Putar & Tempatkan Layers di Sisi yang Berlawanan

Sekarang kita telah membuat sisi kiri, sisi lain akan bergerak lebih cepat. Kami ingin itu sama persis, itu sebabnya kami akan memilih Layer 2 dan Layer 3. Kemudian, kami akan menduplikasi layer.

Setelah diduplikasi, Anda akan melihatnya muncul di daftar lapisan Anda.

Sambil memilih kedua layer hasil duplikasi, pergi ke Edit > Transform > Rotate 180° dan seret layer ke sisi lain gambar.

Simpan untuk Web

Satu-satunya yang tersisa untuk dilakukan adalah menyimpan gambar. Untuk melakukannya, klik File > Ekspor > Simpan untuk Web .

Terakhir, pastikan file tersebut adalah file JPG atau PNG dan simpan.

Dibuat Dengan Kuas

Selanjutnya, kami akan menunjukkan cara membuat latar belakang bertekstur menggunakan kuas. Latar belakang bertekstur yang akan kami tunjukkan cara membuat ulang tampilan dalam kasus ini seperti ini:

File baru

Mulai lagi dengan membuat dokumen baru menggunakan lebar 1920px dan tinggi 847px.

Tambahkan Warna Latar Belakang

Setelah selesai, tambahkan latar belakang ke lapisan pertama dengan kode warna '#8f8f8f'.

Cari Kuas Pencocokan Online

Langkah selanjutnya adalah menemukan kuas yang cocok dengan gaya bagian pahlawan Anda. Ada banyak brush Photoshop gratis di luar sana yang menakjubkan dan juga gratis. Anda dapat menemukan dan mengunduh yang akan kami gunakan dalam tutorial ini dengan membuka halaman berikut.

Unggah Kuas

Temukan file ABR di komputer Anda dan buka Photoshop untuk memuat kuas. Pilih Edit > Presets > Preset Manager > Brushes > Load dan pilih file ABR yang telah Anda simpan di komputer Anda.

Tambahkan Lapisan 2

Setelah selesai, tambahkan layer lain tepat di atas Layer 1.

Gunakan Kuas dengan Warna Paling Ringan

Kemudian, Anda dapat mulai menggunakan kuas Anda untuk membuat latar belakang bertekstur yang Anda inginkan dengan memilih Brush Tool.

Pilih kuas yang Anda inginkan dengan ukuran 600px dan gunakan opacity 60%.

'

Warna pertama yang akan kita gunakan adalah '#a0a0a0'. Silakan dan buat layer kuas pertama pada gambar Anda.

Gunakan Kuas yang Sama dengan Warna yang Lebih Gelap

Kemudian, ganti warna sebelumnya dengan '#ababab' dan lakukan hal yang sama.

Gunakan Kuas yang Sama dengan Warna Tergelap

Terakhir, Anda harus menggunakan warna '#686868' untuk menyelesaikan latar belakang bertekstur Anda.

Simpan untuk Web

Sekarang setelah latar belakang bertekstur Anda selesai, satu-satunya yang tersisa untuk dilakukan adalah menyimpan gambar. Untuk melakukannya, pilih File > Ekspor > Simpan untuk Web .

Sekali lagi, pilih apakah Anda ingin menyimpan gambar Anda sebagai file JPG atau PNG.

Tambahkan Latar Belakang Bertekstur ke Bagian

Latar Belakang Bertekstur Dibuat dengan Bentuk

Anda dapat bermain-main dengan pengaturan latar belakang Divi untuk mencapai hasil yang Anda inginkan setelah Anda membuat gambar. Untuk latar belakang bertekstur yang dibuat dengan bentuk, kita akan memilih jenis gradien radial untuk memiliki salah satu warna gradien di tengah dan yang lainnya selaras dengan gambar latar belakang kita.

Latar Belakang Gradien

Gunakan latar belakang gradien berikut untuk bagian Anda:

• Warna Pertama: #474ab6
• Warna Kedua: #9271f6
• Tipe Gradien: Radial
• Arah Radial: Pusat
• Posisi Awal: 41%
• Posisi Akhir: 100%

Opsi Campuran Gambar

Kemudian, unggah gambar dan gunakan pengaturan berikut:

• Ukuran Gambar Latar Belakang: Sampul
• Posisi Gambar Latar Belakang: Tengah
• Pengulangan Gambar Latar Belakang: Tidak Ada Pengulangan
• Campuran Gambar Latar Belakang: Hamparan

Latar Belakang Bertekstur Dibuat dengan Kuas

Latar belakang gradien yang akan kita gunakan untuk latar belakang bertekstur yang dibuat dengan kuas adalah linier. Kami akan membuat transisi halus yang masih akan sedikit memisahkan warna yang digunakan selaras dengan gambar latar belakang.

Latar Belakang Gradien

Buka pengaturan bagian dan gunakan pengaturan berikut untuk subkategori Latar Belakang:

• Warna Pertama: #474ab6
• Warna Kedua: #9271f6
• Tipe Gradien: Linier
• Arah Gradien: 270deg
• Posisi Awal: 70%
• Posisi Akhir: 100%

Opsi Campuran Gambar

Kemudian, unggah gambar latar belakang dan gunakan pengaturan berikut bersamanya:

• Posisi Gambar Latar Belakang: Tengah
• Pengulangan Gambar Latar Belakang: Tidak Ada Pengulangan
• Campuran Gambar Latar Belakang: Hamparan

Hasil

Sekarang setelah kita melalui semua langkah, mari, sekali lagi, lihat hasil akhirnya.

Hasil Gambar Dibuat dengan Bentuk

Hasil dengan Opsi Desain Divi

Hasil Gambar Dibuat dengan Kuas

Hasil dengan Opsi Desain Divi

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda bagaimana Anda dapat menggunakan latar belakang bertekstur untuk membuat situs web Anda terasa lebih otentik. Kami telah menunjukkan kepada Anda bagaimana Anda dapat membuat dua jenis tekstur dengan Photoshop dan menindaklanjutinya dengan menunjukkan kepada Anda bagaimana Anda dapat menggunakannya dalam bagian Anda bersama dengan opsi desain Divi. 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!

Gambar Unggulan oleh WEB-DESIGN / shutterstock.com