Isi kandungan:

Buat Corak Tilable untuk Gambar Latar Belakang Laman Web: 8 Langkah
Buat Corak Tilable untuk Gambar Latar Belakang Laman Web: 8 Langkah

Video: Buat Corak Tilable untuk Gambar Latar Belakang Laman Web: 8 Langkah

Video: Buat Corak Tilable untuk Gambar Latar Belakang Laman Web: 8 Langkah
Video: CSS Dasar - 6 - Background 2024, Julai
Anonim
Buat Corak Tilable untuk Imej Latar Belakang Laman Web
Buat Corak Tilable untuk Imej Latar Belakang Laman Web

Berikut adalah kaedah lurus dan sederhana (saya rasa) untuk membuat gambar yang boleh dijubin tanpa kelihatan terlalu "seperti grid". Tutorial ini menggunakan Inkscape (www.inkscape.org), penyunting grafik vektor sumber terbuka. Saya membayangkan bahawa kaedah ini dapat digunakan untuk program grafik vektor mahal seperti Adobe Illustrator juga. Hei, ini wang anda.

Langkah 1: Sediakan Dokumen

Sediakan Dokumen
Sediakan Dokumen
Sediakan Dokumen
Sediakan Dokumen
Sediakan Dokumen
Sediakan Dokumen

Setelah membuka Inkscape, anda akan mahu mengatur sifat dokumen. ([Fail -> Sifat dokumen]) Pertama, ubah lebar dan tinggi dokumen menjadi nombor yang lebih senang digunakan. Untuk tutorial ini, saya membuat gambar persegi, tetapi perkadaran apa pun akan berlaku. Seterusnya, anda ingin menyiapkan grid. Dalam versi Inkscape yang lebih lama, hanya ada satu grid mungkin. Dalam versi yang lebih baru, anda perlu membuat grid baru. Ubah jarak grid sehingga nilai-nilai ini dibahagi sama rata ke dalam nilai lebar dokumen & hegiht. Umumnya, adalah idea yang baik untuk bekerja dari gambar besar dan kemudian turunkan jika perlu. Oleh kerana ini adalah seni vektor, ukuran secara teknikal tidak penting, tetapi secara praktikal, akan lebih mudah secara konseptual dengan jumlah yang lebih besar. Dalam tutorial ini, saya menggunakan gambar 500x500px, dan grid saya berada pada selang 10px. Akhirnya, pastikan bahawa pilihan "Enable snapping" dicentang.

Langkah 2: Rectangle Tool

Alat Segi Empat
Alat Segi Empat

Gunakan alat segi empat untuk menggambar segi empat tepat / persegi panjang yang mengambil ukuran dokumen penuh. Nilai jarak grid yang besar (lihat langkah sebelumnya) akan menjadikan alat segi empat tepat terpasang dengan mudah ke sempadan dokumen.

Langkah 3: Mengklonkan Corak

Mengklonkan Corak
Mengklonkan Corak
Mengklonkan Corak
Mengklonkan Corak

Kumpulan]) "," atas ": 0.38721804511278196," kiri ": 0.354," tinggi ": 0.35902255639097747," lebar ": 0.372}]">

Mengklonkan Corak
Mengklonkan Corak

Tambahkan gambar yang anda mahu ada dalam corak anda. Sekiranya gambar anda adalah fail SVG, biasanya anda hanya boleh menyeret dan melepaskannya ke dokumen terbuka anda. Buat klon gambar ini. ([Edit -> Klon -> Buat klon] atau anda dapat menekan Alt + D) Pindahkan gambar asli agar tidak mengganggu ruang kerja anda. Pindahkan gambar yang diklon ke kotak, dan buat beberapa salinan klon. Sebab untuk menggunakan klon dan bukannya salinan origina akan menjadi jelas kemudian. Inilah cara mudah untuk membuat salinan di ruang dalam: seret objek yang akan disalin, dan tekan bar ruang untuk menjatuhkan salinan di tempat itu (pastikan butang tetikus tertekan Umumnya, anda mungkin tidak memerlukan lebih dari 2 atau 3 salinan untuk membuat corak. Seperti yang anda lihat, saya mempunyai 3 salinan gambar tetapi akhirnya saya menghapusnya. Setelah anda rasa cukup, kumpulkan barang-barang ini bersama-sama.

Langkah 4: Pengklonan Lebih Banyak

Lebih Banyak Pengklonan
Lebih Banyak Pengklonan
Lebih Banyak Pengklonan
Lebih Banyak Pengklonan

Aktifkan semula gambar jika anda melumpuhkannya pada langkah sebelumnya, seperti yang saya lakukan. Dalam tangkapan skrin anda tidak melihat grid, tetapi diaktifkan. Pilih kumpulan objek yang baru anda buat, dan buat klon kumpulan itu. Gariskan tepi klon dengan sempadan halaman, dan teruskan menjatuhkan salinan klon sehingga anda mempunyai sekurang-kurangnya grid klon 3x3 di sekitar yang asal di tengah.

Langkah 5: Penggerak Pakar

Penggerak Pakar
Penggerak Pakar
Penggerak Pakar
Penggerak Pakar

Sekarang anda mempunyai penyebaran klon, inilah masanya untuk melicinkan corak anda. Sekarang coraknya kelihatan agak tersekat dan terlalu biasa, jadi kami ingin menyebarkan perkara sedikit. Untuk menggerakkan objek yang berada di dalam kumpulan, kaedah yang paling lurus ke hadapan adalah dengan terlebih dahulu melepaskan kumpulan objek, memindahkan objek yang dimaksudkan, dan kemudian kumpulkan semula objek. Walau bagaimanapun, ini akan memutuskan pautan ke klon. Sebaliknya, kami mahu kumpulan tetap utuh sambil memanipulasi objek tunggal dalam kumpulan. Untuk melakukan ini, tahan butang Control dan klik pada objek yang ingin anda ubah. Control-click memilih objek tunggal dalam kumpulan. Sekiranya anda sekarang memindahkan objek, klon di sekitarnya juga akan menunjukkan perubahannya. Dengan menggunakan kaedah ini, anda kini dapat menggerakkan gambar sehingga anda berpuas hati dengan corak keseluruhan anda. Anda juga boleh mengubah saiz, memutar, atau menghapus gambar. Saya akhirnya menghapus salah satu gambar kerana saya hanya memerlukan 2 untuk memenuhi corak.

Langkah 6: Mengenai Menggunakan Imej Klon

Saya menyebutkan pada langkah 3 bahawa anda harus menggunakan klon dan bukannya salinan gambar semasa membuat petak tengah ("yang asli"). Sebabnya ialah jika gambar anda adalah sekumpulan objek, kaedah klik-pilih untuk memilih item yang dikelompokkan akan memilih objek individu gambar. Klon itu sendiri tidak dapat diedit (kecuali untuk ukuran dan warna) dan kaedah kawalan-klik akan menyebabkan keseluruhan objek klon dipilih tanpa mengira berapa objek yang terdiri daripada gambar asal.

Langkah 7: Menyentuh Sentuhan

Sentuhan terakhir
Sentuhan terakhir
Sentuhan terakhir
Sentuhan terakhir

Sebagai langkah pilihan, pilih kotak latar belakang (Ctrl-klik) dan tetapkan warna isian menjadi tidak ada (iaitu - telus) atau warna apa pun yang anda inginkan untuk mempunyai latar belakang. ([Objek -> Isi dan pukulan]) Saya juga mengurangkan kelegapan kumpulan secara keseluruhan (pilih dengan klik biasa) supaya coraknya berada di latar belakang dan tidak mengganggu. Akhirnya, langkah penting untuk mengeksport. Buka tetingkap eksport ([Fail -> Eksport bitmap]). Klik butang "Halaman". Ini akan mengeksport hanya bahagian-bahagian dokumen yang berada di dalam batas halaman - iaitu, di dalam kotak "asli". Tukar ukuran bitmap yang dieksport jika anda mahu, dan kemudian klik "Eksport".

Langkah 8: Produk Akhir

Produk akhir!
Produk akhir!
Produk akhir!
Produk akhir!

Selesai! Letakkan di desktop anda, gunakan untuk laman web anda, atau cetak dan jual sebagai kertas dinding! Nikmati.

Disyorkan: