มีเทมเพลตเว็บไซต์จำนวนมากบนเว็บ แต่มีข้อเสียเพียงข้อเดียว ซึ่งไม่ซ้ำกัน หากเจ้าของเว็บไซต์ไม่ต้องการให้การออกแบบเว็บไซต์ซ้ำที่อื่น เขาสามารถสั่งซื้อแม่แบบจากนักออกแบบมืออาชีพหรือพยายามสร้างมันขึ้นมาเอง
มันจำเป็น
โปรแกรม Adobe Photoshop
คำแนะนำ
ขั้นตอนที่ 1
การสร้างเทมเพลตของคุณเองไม่ใช่เรื่องยากอย่างที่คิดในแวบแรก ในการทำงาน คุณต้องมี Adobe Photoshop - แน่นอน อย่างน้อยคุณต้องมีความเข้าใจพื้นฐานในการทำงานด้วย แต่ก่อนที่คุณจะเริ่มโปรแกรมและเริ่มสร้าง คุณต้องคิดถึงการออกแบบในอนาคตล่วงหน้า วิธีที่สะดวกที่สุดในการทำเช่นนี้คือทำความคุ้นเคยกับเทมเพลตสำเร็จรูปอย่างน้อยร้อยแบบก่อน ประเมินข้อดีและข้อเสีย ให้ความสนใจกับโซลูชันที่ประสบความสำเร็จขององค์ประกอบการออกแบบบางอย่าง นี่ไม่ได้หมายความว่าคุณจะคัดลอกมัน แต่มันค่อนข้างสมเหตุสมผลที่จะใช้วิธีแก้ปัญหาที่สวยงามและสะดวกสบายเป็นพื้นฐาน
ขั้นตอนที่ 2
จากการวิเคราะห์เทมเพลตของผู้อื่นและความคิดสร้างสรรค์ของคุณเอง คุณควรเข้าใจว่าเว็บไซต์ของคุณจะมีลักษณะอย่างไร เป็นการดีที่สุดที่จะร่างคร่าวๆ ของการออกแบบในอนาคตด้วยดินสอสีบนแผ่น A4 ธรรมดา คุณควรเริ่มทำงานกับ Photoshop เฉพาะเมื่อคุณมีความคิดที่ชัดเจนว่าคุณกำลังจะวาดอะไร
ขั้นตอนที่ 3
เริ่ม Photoshop สร้างโปรเจ็กต์ 1200x1600 ใหม่ ตั้งค่าพื้นหลังโปร่งใส เปิดเครื่องมือ Ruler หากยังไม่ได้เปิด ให้กดคีย์ผสม Ctrl + R เปิดใช้งานการสแนป: ดู - การสแนป
ขั้นตอนที่ 4
ตอนนี้ เราต้องแบ่งเทมเพลตด้วยเส้นบอกแนวที่จะแสดงเส้นขอบขององค์ประกอบ - ด้านข้าง คอลัมน์ ฯลฯ ตัวอย่างเช่น คุณต้องการแยกเทมเพลตเพื่อให้มีคอลัมน์แคบทางด้านซ้าย คอลัมน์กว้างทางด้านขวาทางด้านขวาของเทมเพลต และมีที่ว่างที่ด้านบนสำหรับส่วนหัว ซึ่งหมายความว่าคุณต้องมีเส้นแนวตั้งสามเส้น (เส้นขอบด้านซ้ายของแม่แบบ ด้านขวาและเส้นระหว่างเส้นทั้งสอง) และเส้นแนวนอนที่แสดงเส้นขอบด้านล่างของส่วนหัว หากต้องการกำหนดเส้นแนวตั้ง ให้เลื่อนเคอร์เซอร์ไปที่ไม้บรรทัดด้านซ้ายทางด้านซ้าย กด V และในขณะที่กดปุ่มค้างไว้ ให้ลากเส้นไปยังตำแหน่งที่ต้องการ ทำเช่นเดียวกันกับเส้นแนวตั้งอีกสองเส้น แนวนอนถูกสร้างขึ้นในลักษณะเดียวกันใช้เฉพาะไม้บรรทัดบนเท่านั้น
ขั้นตอนที่ 5
ค้นหาพื้นหลังสำหรับเทมเพลตของคุณ ซึ่งควรเป็นลวดลายเล็กๆ ซ้ำๆ เปิดใน Photoshop เลือกคัดลอก จากนั้นวางลงในเทมเพลตหลาย ๆ ครั้งตามที่คุณต้องการเพื่อเติมพื้นหลัง วางมีลักษณะดังนี้: "แก้ไข" - "วาง" จากนั้นลากพื้นที่พื้นหลังไปยังตำแหน่งที่ต้องการ การแทรกรูปภาพโดยใช้คำสั่ง Ctrl + V จะเร็วยิ่งขึ้น เพิ่มพื้นหลังสำหรับส่วนหัวของไซต์ในลักษณะเดียวกัน คุณสามารถใช้การเติมไล่ระดับต่างๆ เพื่อสร้างพื้นหลังได้
ขั้นตอนที่ 6
ใช้เครื่องมือดินสอ วาดเส้นขอบของแม่แบบโดยเน้นที่เส้นที่วาดไว้แล้ว (นั่นคือที่ด้านบนสุดของเส้น) คุณได้รับพื้นฐานของเทมเพลตที่ง่ายที่สุดแล้ว ตอนนี้คุณต้องเสริมด้วยรายละเอียดที่จำเป็น - ปุ่มนำทาง เส้นเมนู องค์ประกอบการตกแต่งต่างๆ ฯลฯ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีสร้างปุ่มและองค์ประกอบอื่นๆ โปรดอ่านบทความที่เกี่ยวข้องเกี่ยวกับการทำงานกับ Adobe Photoshop
ขั้นตอนที่ 7
สร้างเทมเพลตแล้ว ตอนนี้คุณต้องตัดเป็นชิ้นๆ เพื่อแทรกลงในหน้า html ใช้เครื่องมือ Slice เพื่อตัด หากต้องการค้นหา ให้คลิกขวาที่เครื่องมือ Frame แล้วเลือก Cutout จากเมนูที่เปิดขึ้น ตอนนี้คุณสามารถซ้อนเทมเพลตได้ตามต้องการ จากนั้นบันทึก: "ไฟล์" - "บันทึกสำหรับเว็บ" ในหน้าต่างที่เปิดขึ้น ให้เลือกประเภทไฟล์: HTML & รูปภาพ ระบุชื่อไฟล์: index.htm และบันทึก คุณจะมีไฟล์ index.htm และโฟลเดอร์รูปภาพที่มีรูปภาพแบบสไลซ์