เอกสารนี้กล่าวถึงเคล็ดลับและแนวทางปฏิบัติในการปรับแต่งแบรนด์ UI ของ Canvas สำหรับสถาบันการศึกษาผ่านทาง Theme Editor
เอกสารนี้จัดทำขึ้นสำหรับผู้ดูแลระบบที่ต้องการปรับแต่ง UI ของ Canvas โดยใช้ Theme Editor และจะอธิบายขั้นตอนการอัปโหลดไฟล์ต่างๆ ที่มีอยู่ใน Theme Editor โดยใช้โลโก้ของสถาบัน แนวทางเหล่านี้จะแสดงขนาดที่เหมาะสมที่สุดสำหรับแต่ละภาพใน Theme Editor พร้อมด้วยรายละเอียดที่เป็นประโยชน์เกี่ยวกับการสร้างภาพ เพื่อให้คุณสามารถทำให้การติดตั้ง Canvas ของคุณดูสวยงามได้ในเวลาอันรวดเร็ว
หากสถาบันของคุณโชคดีที่มีทีมการตลาดหรือทีมสร้างแบรนด์ที่มีนักออกแบบกราฟิกหรือเว็บดีไซเนอร์ประจำอยู่ เราขอแนะนำอย่างยิ่งให้คุณร่วมมือกับบุคคลนั้นในการสร้างแบรนด์ Canvas คุณจะได้รับผลลัพธ์ที่ยอดเยี่ยมและต้องทำงานน้อยลง—เยี่ยมไปเลย! นักออกแบบมืออาชีพจะช่วยให้มั่นใจได้ว่าคุณไม่ได้ละเมิดหลักเกณฑ์ของแบรนด์ใดๆ
ไฟล์แม่แบบที่ให้ไว้ในเอกสารนี้สร้างขึ้นโดยใช้โปรแกรม Photoshopหากคุณไม่มีโปรแกรม Photoshop คุณสามารถใช้โปรแกรมประมวลผลภาพอื่นๆ เพื่อสร้างไฟล์ภาพของคุณเอง โดยใช้ขนาดภาพที่เหมาะสมตามที่ระบุไว้ในแต่ละขั้นตอน
กราฟิกแบบเวกเตอร์เทียบกับกราฟิกแบบบิตแมป
ก่อนที่คุณจะสามารถอัปโหลดโลโก้ของสถาบันได้ คุณจะต้องมีสำเนาที่มีความละเอียดสูงเพื่อใช้ในโปรแกรมแก้ไขธีม โดยควรใช้ไฟล์ที่มีความละเอียดสูงจะดีที่สุดเวกเตอร์ภาพโลโก้แทนที่จะเป็นรูปภาพบิตแมปภาพโลโก้
- เวกเตอร์รูปภาพมักจะลงท้ายด้วย.AI,.eps, หรือ .svgเนื่องจากภาพเวกเตอร์สร้างขึ้นจากเส้นทาง ไม่ใช่พิกเซล ภาพจึงปรับขนาดได้อย่างคมชัดในทุกขนาด สามารถลากหรือวางภาพเวกเตอร์ลงในโปรแกรมแก้ไขภาพ เช่น Illustrator, Photoshop และ Sketch จากนั้นสามารถปรับขนาดได้โดยไม่สูญเสียความคมชัด เพื่อรักษาสัดส่วนของภาพ ให้เปิดภาพในโปรแกรมที่เกี่ยวข้องแล้วกดปุ่ม Shift ค้างไว้ สำหรับการใช้งานใน Theme Editor ไฟล์เวกเตอร์จะต้องบันทึกไว้ใน ..svgรูปแบบ
- บิตแมปรูปภาพมักจะลงท้ายด้วย.jpg,.png, หรือ .gifภาพเหล่านี้ประกอบด้วยจำนวนพิกเซลที่กำหนดไว้ หากคุณปรับขนาดภาพ (โดยเฉพาะอย่างยิ่งเมื่อขยายภาพ) ภาพมักจะดูเบลอ
หากไม่สามารถหาไฟล์เวกเตอร์ของโลโก้สถาบันได้ ให้ลองหาไฟล์บิตแมปที่มีขนาดใหญ่ที่สุดเท่าที่จะเป็นไปได้ ไฟล์ที่มีความกว้างมากกว่า 1,000 พิกเซลขึ้นไปน่าจะใช้ได้ดี และไฟล์บิตแมปที่เหมาะสมที่สุดคือไฟล์ PNG (.pngเนื่องจากได้รับการออกแบบมาเพื่อใช้งานบนเว็บและรักษาคุณภาพที่ดีที่สุด นอกจากนี้ยังปรับขนาดได้ดีและรองรับพื้นหลังโปร่งใส
การอัปโหลดรูปภาพ
เมื่อคุณได้ภาพที่ต้องการแล้ว คุณสามารถอัปโหลดไฟล์ไปยังส่วนต่างๆ ในโปรแกรมแก้ไขธีมได้
โลโก้ Nav
ลายน้ำ
| ภาพพื้นหลังสีอ่อนจะปรากฏอยู่ด้านหลังเนื้อหาของหน้าเว็บ ขนาดการแสดงผลจะแตกต่างกันไปตามขนาดไฟล์ที่อัปโหลด ขนาดที่แนะนำ:400 x 400 พิกเซล ประเภทไฟล์ส่งออกที่แนะนำ:PNG เคล็ดลับเด็ด:
- เช่นเดียวกับลายน้ำบนกระดาษเขียน ลายน้ำของเรามีจุดประสงค์เพื่อเป็น...ละเอียดอ่อนองค์ประกอบของแบรนด์ (เราแนะนำว่าภาพของคุณควรมีความแตกต่างจากพื้นหลังสีขาวของ Canvas มากเกินไป) ซึ่งมักถูกบดบังด้วยองค์ประกอบอื่นๆ ของ Canvas
- ลายน้ำเป็นตัวเลือกเสริม คุณสามารถใช้หรือไม่ใช้ก็ได้หากไม่มีภาพที่ตรงตามความต้องการ
ดาวน์โหลดไฟล์ตัวอย่างลายน้ำ ดาวน์โหลดเทมเพลตลายน้ำสำหรับ Photoshop |
|---|
ไอคอน Favicon
ไอคอนหน้าจอหลักมือถือ
หน้าต่างกระเบื้องสี่เหลี่ยม
| รูปภาพสำหรับไทล์ Windows เวอร์ชันสี่เหลี่ยมจัตุรัส ขนาดที่ต้องการ:558 x 558 พิกเซล ประเภทไฟล์ส่งออกที่แนะนำ:PNG เคล็ดลับเด็ดๆ: - เพื่อให้เข้ากับรูปลักษณ์และความรู้สึกของ Windows 8 อย่างแท้จริง ให้สร้างภาพของคุณเป็นสีขาวทั้งหมด และเลือกสีพื้นหลังที่สดใสจากแนวทางการสร้างแบรนด์ของคุณ
- ระบบปฏิบัติการ Windows ต้องการขนาดที่แน่นอนสำหรับภาพที่ใช้เป็นไทล์ของ Windows ภาพที่คุณอัปโหลดเพื่อใช้เป็นไทล์ของ Windows ต้องมีขนาดตรงตามที่ระบุไว้
ดาวน์โหลดไฟล์ตัวอย่าง Windows Tile Square ดาวน์โหลดเทมเพลต Photoshop สำหรับ Windows Tile Square |
|---|
กระเบื้องหน้าต่างแบบกว้าง
| รูปภาพสำหรับไทล์ Windows เวอร์ชันกว้าง ขนาดที่ต้องการ:558 x 270 พิกเซล ประเภทไฟล์ส่งออกที่แนะนำ:PNG เคล็ดลับเด็ดๆ: - เพื่อให้เข้ากับรูปลักษณ์และความรู้สึกของ Windows 8 อย่างแท้จริง ให้สร้างภาพของคุณเป็นสีขาวทั้งหมด และเลือกสีพื้นหลังที่สดใสจากแนวทางการสร้างแบรนด์ของคุณ
- ระบบปฏิบัติการ Windows ต้องการขนาดที่แน่นอนสำหรับภาพที่ใช้เป็นไทล์ของ Windows ภาพที่คุณอัปโหลดเพื่อใช้เป็นไทล์ของ Windows ต้องมีขนาดตรงตามที่ระบุไว้
ดาวน์โหลดไฟล์ตัวอย่าง Windows Tile Wide ดาวน์โหลดเทมเพลต Photoshop Windows Tile Wide |
|---|
โลโก้แถบด้านข้างขวา
ภาพพื้นหลัง
| รูปภาพสำหรับพื้นหลังการเข้าสู่ระบบ ขนาดที่แนะนำ:2800 x 2000 พิกเซล ประเภทไฟล์ส่งออกที่แนะนำ:ไฟล์ JPG (คุณภาพ 30–40%) เคล็ดลับเด็ด:
- ภาพพื้นหลังแบบเต็มหน้าจอเป็นตัวเลือกเสริม คุณอาจเลือกใช้สีพื้นหลังเรียบๆ โดยไม่มีรูปภาพก็ได้ (และแน่นอนว่าจะใช้เวลาในการโหลดน้อยกว่า)
- หากภาพของคุณมีขนาดเล็กกว่าขนาดที่แนะนำ Canvas จะขยายภาพให้ใหญ่ขึ้น แต่ภาพอาจดูแตกเป็นพิกเซลเล็กน้อย
ดาวน์โหลดไฟล์ตัวอย่างภาพพื้นหลัง ดาวน์โหลดเทมเพลตภาพพื้นหลังสำหรับ Photoshop |
|---|
โลโก้เข้าสู่ระบบ
| โลโก้ที่แสดงอยู่ด้านบนของหน้าเข้าสู่ระบบ ขนาดที่แนะนำ:380 x 150 พิกเซล ประเภทไฟล์ส่งออกที่แนะนำ:ไฟล์ PNG (สำหรับผู้ใช้ขั้นสูง สามารถใช้ไฟล์ SVG ได้เช่นกัน) เคล็ดลับเด็ดๆ: - โลโก้ในหน้าเข้าสู่ระบบของคุณจะถูกปรับขนาดให้มีความกว้าง 190 พิกเซล ไม่ว่าขนาดหน้าจอจะเป็นเท่าใดก็ตาม
- ขนาดที่เหมาะสมยังคงเป็นขนาดที่แนะนำเพื่อให้ได้ภาพที่มีความละเอียดสูงสำหรับจอเรตินาและ/หรือจอภาพขนาดใหญ่ ขนาดที่เล็กเกินไปอาจทำให้ภาพดูเบลอได้
ดาวน์โหลดไฟล์ตัวอย่างโลโก้การเข้าสู่ระบบ ดาวน์โหลดเทมเพลตโลโก้เข้าสู่ระบบสำหรับ Photoshop |
|---|
สามารถเข้าถึงแหล่งข้อมูลนี้ได้จากคู่มือ Canvas ต่อไปนี้:
