Menguji apakah BG akan mengulangi Tile dengan benar di Photoshop?

9

Saya sering bekerja untuk membuat tekstur latar belakang di Photoshop untuk digunakan di web. Sayangnya saya biasanya harus menebak, atau hanya menggunakan gratis dari situs web lain.

Saya ingin membuat tekstur saya sendiri di Photoshop dan memeriksa apakah mereka memasang dengan benar sebelum mengekspor gambar. Apakah ada cara untuk melakukan ini dengan cepat? Saya ingat metode menggunakan offset, tapi saya tidak terbiasa dengan alat.

Berikut adalah beberapa contoh ubin latar belakang sehingga Anda dapat melihat apa yang saya bicarakan:

tile1

tile2

adobe-photoshop website-design background tiles Kepulauan Destiny
sumber

Jawaban:

17
  • buat gambar Anda. Misalnya, katakanlah 200px persegi
  • pergi ke FILTER> OTHER> OFFSET dan ketik angka x dan y yang setengah dari ukuran gambar Anda (dalam hal ini 100px)
  • ini akan menggeser gambar Anda ke banyak piksel dan menempatkan piksel yang dipindahkan dari kanvas ke sisi lain. Anda sekarang akan melihat jahitan di tengah-tengah gambar Anda di mana polanya tidak cukup berulang.
  • sentuh jahitan ini untuk membuatnya menjadi campuran yang halus menggunakan alat apa pun yang Anda suka (alat klon adalah pilihan umum).
  • simpan gambar baru Anda.

Untuk gambar yang lebih kompleks, Anda mungkin perlu melakukan offset akhir katakanlah 1/4 dimensi piksel untuk menyentuh tepi yang mungkin Anda lewatkan saat pertama kali jatuh di dekat tepi kanvas.

DA01
sumber
Terima kasih ini sempurna! Persis apa yang saya cari
Destiny Islands
5

DA01 menjawab cara membuatnya tetapi pertanyaan Anda adalah bagaimana mengujinya. Jawaban untuk pertanyaan itu adalah:

  1. Pilih lapisan pola Anda
  2. Edit> Define Pattern
  3. Buat Layer Baru
  4. Pilih Semua
  5. Edit> Isi> Pola> Pilih pola Anda
  6. Hit oke dan lihat apakah itu terlihat bagus
Ryan
sumber
2
ya Saya salah membaca pertanyaan! Tip yang bagus. Pilihan lain adalah cukup membuat file HTML uji dengan latar belakang berulang. Kemudian tetap menyimpan ulang file dan memuat ulang browser.
DA01
1
Ya saya tahu bagaimana melakukannya dalam HTML / CSS tetapi tidak sadar bahwa Photoshop dapat menguji juga. Terima kasih atas sarannya!
Destiny Islands
2

Saya secara tradisional menyimpan gambar sebagai jpg atau png dan kemudian menggunakan html dasar untuk menguji ubin.

<html>
<head></head>
<body style="background: url(image.jpg) repeat 0 0;">
</body>
</html>

Buka di browser dan Anda dapat melihat ubin dan hanya menyimpan kembali "image.jpg" dan menyegarkan halaman web untuk memeriksa revisi.

Scott
sumber
1

Ada juga cara lain untuk melakukan ini, tetapi batasannya adalah bahwa semua pola lainnya harus dengan ukuran yang sama Anda akan melihat alasannya.

Langkah:

  • Buat kotak 200px kali 200px.
  • Konversikan menjadi objek pintar.
  • Gandakan dan sejajarkan sehingga ada 3 kotak secara horizontal. Pastikan tidak ada tumpang tindih atau spasi di antaranya.
  • Gandakan tiga kotak yang dipilih menjadi 3 kolom vertikal.
  • Jika belum diaktifkan, aktifkan jendela mengambang di Preferensi.
  • Klik dua kali dan buka objek pintar.
  • Sejajarkan kedua jendela agar Anda dapat melihat kedua file.
  • Isi objek pintar dengan pola apa pun yang Anda inginkan dan melihatnya beraksi di jendela lain secara bersamaan.
Muhammad Umer
sumber
1

Ada alat (freeware untuk penggunaan pribadi) yang hebat yang disebut AMP Tile Viewer yang memungkinkan Anda memeriksa dengan cepat apakah gambar dapat di-tile dan bagaimana tampilannya. Saya menggunakannya sepanjang waktu dan bekerja dengan sangat baik. Tidak perlu membuat pola di Photoshop yang tidak akan pernah Anda gunakan atau harus hapus sesudahnya.

TaranQ
sumber
1

Saya menulis ekstensi Chrome yang disebut Tile View yang memungkinkan Anda mengklik kanan gambar dan melihat bagaimana ubin itu dibuat.

tknomad
sumber
Ada juga alat berbasis web yang saya temukan baru-baru ini: tile.toyls.com
Thomas Guyot-Sionnest
0

Cara saya melakukannya adalah hanya menyimpan ubin sebagai jpg dan mengaturnya ke ubin di desktop saya. Cukup cepat dan mudah.

jill
sumber