การสร้างเว็บไซต์ของคุณเองเริ่มต้นด้วยการพัฒนาภาพร่างและการออกแบบในอนาคต และส่วนสำคัญของการพัฒนานี้คือการแสดงภาพการออกแบบเว็บไซต์ใน Photoshop และตัดการออกแบบที่เสร็จแล้วออกเป็นบล็อกสำหรับการจัดวางในภายหลัง ความสามารถในการตัดรูปภาพของการออกแบบไซต์อย่างถูกต้องส่งผลโดยตรงต่อความสำเร็จของเลย์เอาต์และตำแหน่งที่ถูกต้องของไฟล์กราฟิกบนเซิร์ฟเวอร์
คำแนะนำ
ขั้นตอนที่ 1
เปิดเลย์เอาต์การออกแบบที่สร้างขึ้นใน Photoshop ซึ่งเป็นภาพที่มีความละเอียดที่ต้องการ จากแถบเครื่องมือใน Photoshop ให้เลือกเครื่องมือ Slice ปิดการมองเห็นเลเยอร์ข้อความ ฟิลด์ป้อนข้อมูล ไอคอน และองค์ประกอบที่คล้ายกันทั้งหมดชั่วคราว
ขั้นตอนที่ 2
วาดเส้นบอกแนวตามที่คุณจะตัดไซต์ด้วยเครื่องมือที่เลือก - เส้นเหล่านี้บนภาพจะเป็นสีเขียว แบ่งเลย์เอาต์แบบชิ้นเดียวออกเป็นองค์ประกอบโครงสร้างที่มีขนาดและปริมาณที่ต้องการอย่างระมัดระวัง
ขั้นตอนที่ 3
ลองคิดดูว่าคุณจะตัดภาพอย่างไร - ไม่ควรมีองค์ประกอบแยกกันมากเกินไป ในการสร้างเส้นบอกแนว ให้วางเคอร์เซอร์บนไม้บรรทัดด้านบนเหนือรูปภาพ คลิกซ้ายแล้วลากเส้นไกด์ลงมา ปล่อยปุ่มเมาส์
ขั้นตอนที่ 4
หลังจากตั้งค่าไกด์ทั้งหมดแล้ว (ทั้งแนวตั้งและแนวนอน) ให้ดำเนินการแบ่งเค้าโครง
ขั้นตอนที่ 5
ใช้เครื่องมือตัดที่เลือกด้านบน ตัดเค้าโครงโดยคลิกซ้ายที่จุดเริ่มต้นของแต่ละเส้นบอกแนวและขยายช่องที่ปรากฏให้มีขนาดเท่ากับวัตถุที่คุณต้องการตัด ปล่อยปุ่มซ้ายของเมาส์เพื่อให้หมายเลขประจำเครื่องปรากฏขึ้นที่มุมซ้ายของชิ้นส่วนที่ตัด
ขั้นตอนที่ 6
ปรับขอบของชิ้นส่วนด้วยการยืดออกด้วยตนเอง หากต้องการบันทึกส่วนที่เป็นสไลซ์ของรูปภาพโดยรวม ให้คลิกตัวเลือก "บันทึกสำหรับหน้าเว็บ" ในเมนูไฟล์ แล้วเลือกรูปแบบ JPEG ในหน้าต่างบันทึก เลือก "ชิ้นส่วนทั้งหมด"
ขั้นตอนที่ 7
หลังจากบันทึกส่วนย่อยของรูปภาพที่ตัดออกแยกต่างหากแล้ว ให้บันทึกองค์ประกอบภาพทั้งหมดของการออกแบบหน้า - บล็อกข้อความ ปุ่ม เส้น และอื่นๆ