ในการสร้างเว็บไซต์ ขั้นตอนของการแสดงผลการออกแบบหน้าเพจมีความสำคัญมาก ซึ่งจะมีการเรียงพิมพ์และเผยแพร่บนเครือข่ายในภายหลัง ในบทความนี้ คุณจะได้เรียนรู้วิธีใช้ Adobe Photoshop เพื่อวาดเลย์เอาต์ที่มีความสามารถสำหรับเว็บไซต์ ซึ่งคุณสามารถสร้างเลย์เอาต์ที่ซับซ้อนมากขึ้นได้ในภายหลัง
มันจำเป็น
โปรแกรม Adobe Photoshop
คำแนะนำ
ขั้นตอนที่ 1
สร้างไฟล์ใหม่ใน Photoshop (Ctrl + N) ด้วยขนาด 1040x1400 โดยที่ 1400 คือความสูง เปิดการแสดงไม้บรรทัด (Ctrl + R) และตั้งค่าพิกเซลเป็นหน่วยวัดในการตั้งค่าไม้บรรทัด
ขั้นตอนที่ 2
เริ่มยืดเส้นบอกแนวเพื่อให้พอดีกับขอบของกล่องเค้าโครง ยืดขอบด้านข้างให้เหลือ 40 พิกเซลที่ขอบ ขอบด้านบนและด้านล่างควรเหลือ 40 พิกเซลในแต่ละด้านจนถึงเส้นขอบของพื้นหลัง
ขั้นตอนที่ 3
จากนั้นเลือกคำแนะนำที่ 200px ลงจากด้านบนของพื้นหลังสำหรับส่วนหัวด้านบน
ขั้นตอนที่ 4
ในการสร้างแถบด้านข้างทางซ้ายและขวาของเค้าโครง ให้ตั้งค่าเส้นบอกแนว 240 พิกเซลจากเส้นขอบพื้นหลังไปทางซ้าย และ 800 ไปทางขวา
ขั้นตอนที่ 5
5px เข้าด้านในจากแถบด้านข้างซ้ายและขวา และวาดเส้นบอกแนวแนวตั้งอีกสองเส้น จากนั้นลากเส้นบอกแนวอีกสองตัวไปทางซ้าย 245 พิกเซล และไปทางขวา 795 พิกเซล
ขั้นตอนที่ 6
ตอนนี้วัดจากเส้นขอบของส่วนหัว 30px แล้ววาดเส้นบอกแนวแนวนอนสำหรับเมนูแนวนอน
ขั้นตอนที่ 7
เลือกพื้นที่แคบของเมนูแนวนอนที่คุณเพิ่งทำเครื่องหมายด้วยการเลือกสี่เหลี่ยมโดยใช้ปุ่ม M เลือกเครื่องมือเติมและเติมพื้นที่ด้วยสีเทาอ่อนที่เป็นกลาง
ขั้นตอนที่ 8
เลือกเครื่องมือเติมและเติมพื้นที่ด้วยสีเทาอ่อนที่เป็นกลาง คลิกที่เมนู "Select-Modify-Compress" ระบุตัวเลือก 1 พิกเซลแล้วคลิก "ตกลง" เติมพื้นที่ด้วยเฉดสีเทาอ่อน - คุณจะมีกรอบเมนู
ขั้นตอนที่ 9
สร้างเลเยอร์ใหม่และเลือกรูปภาพที่เหมาะสมสำหรับไอคอนหรือโลโก้ของไซต์ จากนั้นเปิด
ขั้นตอนที่ 10
แทรกรูปภาพในเลเยอร์ใหม่ในส่วนหัว โดยวางไว้ที่ขอบด้านซ้าย ทางด้านขวาของรูปภาพ ให้เขียนชื่อข้อความของไซต์โดยใช้แบบอักษรใดก็ได้
ขั้นตอนที่ 11
ออกแบบบล็อกเว็บไซต์ของคุณในโทนสีเดียวกับส่วนหัวที่สร้างขึ้นใหม่ เลือกพื้นที่ของแถบด้านข้างซ้ายและดำเนินการเติมสองสีเดียวกันกับแถบเมนู
ขั้นตอนที่ 12
ทำเช่นเดียวกันกับบล็อกเนื้อหาตรงกลาง คัดลอกเลเยอร์แถบด้านข้างซ้ายแล้ววางเป็นแถบด้านข้างทางขวา
ขั้นตอนที่ 13
เพิ่มข้อความลงในเลย์เอาต์ของคุณ - เลือกฟอนต์กลางๆ แล้วกรอกชื่อเมนู ตัวอย่างข่าว รูปภาพ แท็ก และลิงก์
ขั้นตอนที่ 14
เสร็จสิ้นการจัดวางโดยสร้าง "ส่วนท้าย" หรือส่วนท้าย - จดลิขสิทธิ์และผู้ติดต่อของคุณที่นั่น