วิธีทำ Header สำหรับเว็บไซต์

วิธีทำ Header สำหรับเว็บไซต์
วิธีทำ Header สำหรับเว็บไซต์

วีดีโอ: วิธีทำ Header สำหรับเว็บไซต์

วีดีโอ: วิธีทำ Header สำหรับเว็บไซต์
วีดีโอ: วิธีการออกแบบ Header และ Footer ให้กับเว็บไซต์ 2024, พฤศจิกายน
Anonim

ส่วนหัวของเว็บไซต์คือ "ใบหน้า" ซึ่งเป็นองค์ประกอบที่ใหญ่ที่สุดและสังเกตเห็นได้ชัดเจนที่สุดของการออกแบบเว็บไซต์ หากส่วนหัวของเว็บไซต์น่าจดจำและไม่เหมือนใคร องค์ประกอบการออกแบบที่เหลือ - แบบอักษร ปุ่ม ฯลฯ - อาจถูกนำมาจากโครงร่างมาตรฐานใดๆ

วิธีทำ header สำหรับเว็บไซต์
วิธีทำ header สำหรับเว็บไซต์

และการสร้างส่วนหัวสำหรับเว็บไซต์ก็ไม่ยากเลยด้วยความช่วยเหลือของโปรแกรมแก้ไขกราฟิก เช่น Adobe Photoshop (ทางเลือกฟรีคือ Gimp ซึ่งเป็นที่นิยมในหมู่ผู้สนับสนุน Linux)

  1. ขั้นแรก สร้างผืนผ้าใบที่มีขนาดเหมาะสม ความกว้างของผืนผ้าใบควรสอดคล้องกับความกว้างของหน้าเว็บไซต์ แต่ความสูงสามารถเลือกได้ตามดุลยพินิจของคุณ โปรดจำไว้ว่าส่วนหัวที่แคบเกินไปจะไม่มีความหมายเพียงพอ และกว้างเกินไปจะไม่เหลือที่ว่างสำหรับข้อมูลที่มีความหมายบนหน้าเว็บ
  2. ตัดสินใจเลือกชุดสีสำหรับการออกแบบเว็บไซต์ของคุณ หมวกจะต้องตรงกับมัน
  3. เติมพื้นหลัง คุณสามารถใช้โทนสีทึบหรือการไล่ระดับสี จำไว้ว่าพื้นหลังไม่ควรสว่างเกินไป มิฉะนั้น วัตถุที่เหลือจะหายไป
  4. วางรูปร่างกราฟิกที่จะเน้นวัตถุที่อยู่ตรงกลาง อาจเป็นชิ้นส่วนของเฟรมที่ครอบคลุมด้านเดียวหรือสองด้านของสี่เหลี่ยมผืนผ้าส่วนหัว คุณสามารถเขียนจากสิ่งของเล็กๆ น้อยๆ ที่เกี่ยวข้องกับธีมของไซต์ เช่น ดอกไม้ ของเล่นเด็ก หรือเครื่องเขียน
  5. วางวัตถุตรงกลางของส่วนหัว นี่อาจเป็นชื่อเฉพาะสำหรับไซต์ ซึ่งสามารถเสริมด้วยสโลแกนของคำหลายคำหรือวัตถุกราฟิกที่ชัดเจนและแสดงออกเพิ่มเติมได้
  6. นอกจากนี้ ให้เน้นวัตถุที่อยู่ตรงกลางโดยใช้เอฟเฟกต์เงาหรือกระจกเงา เช่น สิ่งนี้จะช่วยให้คุณได้ผลลัพธ์ภาพที่น่าดึงดูดเพียงพอโดยไม่ต้องดัดแปลงให้ซับซ้อนสำหรับผู้ที่ไม่ใช่มืออาชีพ
  7. เสร็จสิ้นโดยการเพิ่มชื่อของรายการเมนูหลัก
  8. ด้วยความช่วยเหลือของ ImageReady ที่มาพร้อมกับ Photoshop คุณสามารถแบ่งรูปภาพออกเป็นส่วนๆ เพื่อสร้างลิงก์ไปยังส่วนต่างๆ ของไซต์ได้

อย่างที่คุณเห็น การสร้างส่วนหัวสำหรับไซต์นั้นค่อนข้างง่าย และแม้แต่ผู้ที่ไม่ใช่มืออาชีพก็สามารถทำได้ หากคุณต้องการการออกแบบอย่างมืออาชีพ ให้สั่งซื้อจากนักออกแบบในไซต์ที่คุณสามารถเจรจากับ freelancer เช่น free-lance.ru ราคาของบริการดังกล่าวค่อนข้างเจียมเนื้อเจียมตัว

แนะนำ: