ทดสอบว่า BG จะทำซ้ำ Tile อย่างเหมาะสมใน Photoshop หรือไม่?


9

ฉันทำงานเป็นประจำเพื่อสร้างพื้นหลังใน Photoshop เพื่อใช้บนเว็บ น่าเสียดายที่ฉันมักจะต้องเดาหรือใช้งานฟรีจากเว็บไซต์อื่น ๆ

ฉันต้องการสร้างพื้นผิวของตัวเองใน Photoshop และตรวจสอบว่าเรียงต่อกันอย่างเหมาะสมก่อนส่งออกภาพหรือไม่ มีวิธีการทำอย่างรวดเร็วหรือไม่? ฉันจำวิธีการที่ใช้การชดเชย แต่ฉันไม่คุ้นเคยกับเครื่องมือ

ด้านล่างนี้เป็นตัวอย่างพื้นหลังของกระเบื้องสองคู่เพื่อให้คุณเห็นสิ่งที่ฉันกำลังพูดถึง:

tile1

tile2

คำตอบ:


17
  • สร้างภาพของคุณ ตัวอย่างเช่นสมมุติว่ามันคือ 200px กำลังสอง
  • ไปที่ตัวกรอง> OTHER> OFFSET และพิมพ์ตัวเลข x และ y ที่มีขนาดภาพของคุณครึ่งหนึ่ง (ในกรณีนี้คือ 100px)
  • สิ่งนี้จะเลื่อนรูปภาพของคุณไปที่พิกเซลจำนวนมากและวางพิกเซลที่ย้ายออกจากผืนผ้าใบไปยังอีกด้านหนึ่ง ตอนนี้คุณจะเห็นรอยต่อที่กึ่งกลางภาพของคุณซึ่งรูปแบบนั้นไม่ได้ซ้ำอย่างสมบูรณ์
  • สัมผัสตะเข็บนี้เพื่อให้การผสมผสานที่ราบรื่นโดยใช้เครื่องมือใดก็ตามที่คุณต้องการ (เครื่องมือโคลนเป็นตัวเลือกทั่วไป)
  • บันทึกภาพใหม่ของคุณ

สำหรับภาพที่มีความซับซ้อนมากขึ้นคุณอาจจำเป็นต้องทำการชดเชยขั้นสุดท้ายที่ 1/4 ของขนาดพิกเซลเพื่อสัมผัสกับขอบที่คุณอาจพลาดในครั้งแรกที่อยู่ใกล้กับขอบของผืนผ้าใบ


ขอบคุณที่สมบูรณ์แบบ! สิ่งที่ฉันกำลังมองหา
Destiny Islands

5

DA01 ตอบวิธีสร้างมัน แต่คำถามของคุณคือวิธีทดสอบ คำตอบสำหรับคำถามนั้นคือ:

  1. เลือกเลเยอร์รูปแบบของคุณ
  2. แก้ไข> กำหนดรูปแบบ
  3. สร้างเลเยอร์ใหม่
  4. เลือกทั้งหมด
  5. แก้ไข> เติม> รูปแบบ> เลือกรูปแบบของคุณ
  6. กดตกลงและดูว่ามันดูดีหรือไม่

2
ฮึ. ฉันอ่านคำถามผิดทั้งหมด! เคล็ดลับดี อีกตัวเลือกหนึ่งคือการสร้างไฟล์ HTML ทดสอบที่มีพื้นหลังซ้ำกัน จากนั้นให้บันทึกไฟล์อีกครั้งและโหลดเบราว์เซอร์ใหม่
DA01

1
ใช่ฉันรู้วิธีการใช้ HTML / CSS แต่ไม่ทราบว่า Photoshop สามารถทดสอบได้เช่นกัน ขอบคุณสำหรับคำแนะนำ!
Destiny Islands

2

ฉันบันทึกภาพเป็น jpg หรือ png แล้วใช้ html พื้นฐานเพื่อทดสอบการเรียงต่อกัน

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

เปิดที่ในเบราว์เซอร์และคุณสามารถดูการเรียงและเพียงบันทึก "image.jpg" และรีเฟรชหน้าเว็บเพื่อตรวจสอบการแก้ไข


1

นอกจากนี้ยังมีวิธีอื่นในการทำเช่นนี้ แต่ข้อ จำกัด คือรูปแบบอื่นทั้งหมดจะต้องมีขนาดเท่ากันคุณจะเห็นว่าทำไม

ขั้นตอน:

  • ทำกล่อง 200px x 200px
  • แปลงเป็นวัตถุอัจฉริยะ
  • ทำซ้ำและจัดแนวเพื่อให้มี 3 กล่องในแนวนอน ตรวจสอบให้แน่ใจว่าไม่มีการทับซ้อนหรือเว้นวรรค
  • ทำซ้ำกล่องทั้งสามที่เลือกไว้ในคอลัมน์แนวตั้ง 3 คอลัมน์
  • หากไม่ได้เปิดใช้งานให้เปิดใช้งานหน้าต่างลอยในการตั้งค่า
  • ดับเบิลคลิกและเปิดวัตถุอัจฉริยะ
  • จัดแนวทั้งสองหน้าต่างเพื่อให้คุณสามารถดูไฟล์ทั้งสองได้
  • เติมวัตถุอัจฉริยะด้วยลวดลายใด ๆ ที่คุณต้องการและมองเห็นมันในหน้าต่างอื่นพร้อมกัน

1

มีเครื่องมือที่ยอดเยี่ยม (ฟรีแวร์สำหรับการใช้งานส่วนตัว) ที่เรียกว่าAMP Tile Viewerที่ให้คุณตรวจสอบได้อย่างรวดเร็วว่าภาพนั้นสามารถเรียงต่อกันได้หรือไม่ ฉันใช้มันตลอดเวลาและใช้งานได้ดีมาก ไม่จำเป็นต้องสร้างลวดลายใน Photoshop คุณจะไม่ใช้หรือต้องลบทิ้งในภายหลัง


1

ฉันเขียนส่วนขยาย Chrome ที่ชื่อว่าTile Viewซึ่งให้คุณคลิกขวาที่ภาพและดูว่ามันเรียงต่อกันอย่างไร


นอกจากนี้ยังมีเครื่องมือบนเว็บที่ฉันค้นพบเมื่อเร็ว ๆ นี้: tile.toyls.com
Thomas Guyot-Sionnest

0

วิธีที่ฉันทำคือเพียงบันทึกไทล์เป็น jpg และตั้งเป็นไทล์บนเดสก์ท็อปของฉัน ค่อนข้างง่ายและรวดเร็ว

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.