หลักการของ "การทักทายด้วยเสื้อผ้า" นั้นเป็นความจริงไม่เพียงแต่กับคนเท่านั้น แต่ยังรวมถึงไซต์ด้วย การแต่งกายของไซต์คือการออกแบบ และเป็นการออกแบบที่กำหนดความประทับใจที่ผู้เยี่ยมชมมีในช่วงสองสามวินาทีแรกของการดูทรัพยากร ความประทับใจนี้มีความสำคัญอย่างยิ่งเนื่องจากเป็นตัวกำหนดพฤติกรรมในอนาคตของเขา องค์ประกอบการออกแบบแรกที่ผู้ใช้ทุกคนที่เข้าชมไซต์เห็นคือ "ส่วนหัว" ฝาเป็นหน้าตาของทรัพยากรบนเว็บ ดังนั้น นักออกแบบเว็บไซต์มือใหม่ทุกคนจึงต้องการเรียนรู้วิธีสร้างส่วนหัวสำหรับเว็บไซต์ก่อน
จำเป็น
- - การเข้าถึงอินเทอร์เน็ต
- - เบราว์เซอร์ที่ทันสมัย;
- - โปรแกรมแก้ไขกราฟิกแรสเตอร์ (GIMP, Photoshop);
- - ตัวเลือก: โปรแกรมแก้ไขกราฟิกแบบเวกเตอร์ (CorelDraw);
- - ตัวเลือก: สภาพแวดล้อมการสร้างแบบจำลอง 3 มิติ (Blender, 3DStudio);
- - ตัวเลือก: แผ่นกระดาษ ดินสอ หรือปากกา
คำแนะนำ
ขั้นตอนที่ 1
พัฒนาแนวคิดสำหรับส่วนหัวของไซต์ในอนาคต ตามหลักการแล้ว แนวคิดควรอยู่บนพื้นฐานของแนวคิดดั้งเดิม เมื่อขาดความคิด แรงบันดาลใจสามารถได้รับจากการวิเคราะห์แนวทางแก้ไขที่ดีที่มีอยู่ สะท้อนผลการวิจัยเชิงสร้างสรรค์ในรูปแบบของภาพร่างบนแผ่นกระดาษ ภาพร่างควรสะท้อนถึงโครงสร้างของส่วนหัวในอนาคตของไซต์โดยระบุสถานที่และพื้นที่ "ยาง" ที่เต็มไปด้วยรูปภาพ ในขั้นตอนนี้ เป็นความคิดที่ดีที่จะคิดถึงโครงร่างสีโดยประมาณสำหรับการออกแบบส่วนหัว
ขั้นตอนที่ 2
เลือกขนาดของส่วนหัว ที่จริงแล้วมันคุ้มค่าที่จะกำหนดพารามิเตอร์เพียงอย่างเดียวอย่างชัดเจน - ความสูง ตามกฎแล้ว ความสูงของส่วนหัวของไซต์จะคงที่ และไม่ได้ขึ้นอยู่กับความละเอียดเชิงตรรกะที่ส่งผลต่อพารามิเตอร์การแสดงผลของแบบอักษร กล่าวคือ คุณควรเลือกค่าความสูงของส่วนหัวเป็นพิกเซล ในกรณีนี้ ควรคำนึงถึงความเป็นไปได้ในการวางแบนเนอร์หรือบล็อกการโฆษณาตามบริบทในส่วนหัว สำหรับความกว้าง คุณควรกำหนดค่าต่ำสุด โดยเน้นพื้นที่ "ยาง" อย่างน้อยหนึ่งส่วนที่ช่วยให้ส่วนหัวสามารถปรับให้เข้ากับขนาดต่างๆ ของหน้าเว็บได้
ขั้นตอนที่ 3
สร้างเทมเพลตส่วนหัวในตัวแก้ไขกราฟิก ในเอกสารใหม่ เพิ่มเลเยอร์โปร่งใสที่คุณจะลากภาพร่างตามพารามิเตอร์ทางเรขาคณิตที่เลือก ความสูงของเลเยอร์ควรตรงกับความสูงของส่วนหัว ความกว้างสามารถกำหนดได้ตามต้องการ แต่ใหญ่กว่าขนาดขั้นต่ำ ทำให้มีพื้นที่สำหรับพื้นที่ "ยาง" ในแนวนอน”ในเทมเพลต กำหนดโซนที่มีขนาดคงที่และขนาดตัวแปร โซนที่ตั้งใจให้เต็มไปด้วยภาพนิ่ง ภาพพื้นหลัง
ขั้นตอนที่ 4
ค้นหาหรือสร้างภาพนิ่งเพื่อวางในเทมเพลตส่วนหัวของคุณ โลโก้และองค์ประกอบที่เป็นเอกลักษณ์บางอย่างสามารถสร้างได้ในโปรแกรมแก้ไขเวกเตอร์หรือสภาพแวดล้อมการสร้างแบบจำลอง 3 มิติ การค้นหารูปภาพเฉพาะเรื่องบนโฟโต้แบงค์ฟรีบนอินเทอร์เน็ตนั้นค่อนข้างง่าย
ขั้นตอนที่ 5
แทรกพื้นหลัง โลโก้ และภาพนิ่งลงในเทมเพลตส่วนหัวของไซต์ในตัวแก้ไขกราฟิก เพิ่มพื้นหลังและภาพแต่ละภาพในเลเยอร์โปร่งใสที่แยกจากกัน จัดเรียงชั้นให้ดีที่สุด การย้ายรูปภาพเป็นเลเยอร์ จะทำให้ได้เลย์เอาต์ที่สมบูรณ์แบบ ซึ่งสอดคล้องกับเทมเพลตที่สร้างไว้ก่อนหน้านี้
ขั้นตอนที่ 6
บันทึกรูปภาพส่วนหัวที่ได้ บันทึกโปรเจ็กต์การทำงานในรูปแบบดั้งเดิมของตัวแก้ไขกราฟิก จากนั้นให้บันทึกรูปภาพส่วนหัวที่แบนราบในรูปแบบที่ไม่มีการสูญเสีย (เช่น PNG)
ขั้นตอนที่ 7
สร้างเทมเพลตส่วนหัว HTML หากจำเป็น เปิดภาพที่แบนในโปรแกรมแก้ไข ตัดภาพที่สอดคล้องกับพื้นที่ที่มีขนาดคงที่ จากตำแหน่งที่สอดคล้องกับพื้นที่ "ยาง" ตัดภาพออกกว้าง 1 พิกเซล บันทึกภาพทั้งหมดลงในดิสก์ จัดวางส่วนหัว HTML โดยใช้ภาพที่บันทึกไว้