วิธีการสร้างและตั้งค่าไอคอนที่คั่นหน้า iOS สำหรับ Retina Ready
นักพัฒนาเว็บและเจ้าของเว็บไซต์ให้ความสนใจ: คุณต้องตั้งค่าไอคอนบุ๊คมาร์ค iOS ที่พร้อมใช้งานบนเรตินา ไอคอนบุ๊กมาร์กจะเรียกว่าไอคอน Apple Touch Icon และภาพที่กำหนดเองเหล่านี้กลายเป็นไอคอนที่แสดงบนหน้าจอหลักของผู้ใช้เมื่อบุ๊กมาร์กเว็บไซต์บน iPad iPhone หรือ iPod touch ใน iOS หรือแผงบุ๊กมาร์กของ Safari สำหรับระบบปฏิบัติการ X. หากไม่มีชุดไฟล์ apple-touch-icon ที่กำหนดเองผู้ใช้จะได้ภาพขนาดย่อที่ดูน่าเบื่อและน่าเกลียดของหน้าเว็บโดยที่ไอคอนบุ๊กมาร์กจะดูไม่เป็นภาพและน่ากลัวโดยทั่วไปบน iPad ใหม่ จอภาพ
นี่คือสิ่งที่คุณต้องทำเพื่อสร้างไอคอน Apple Touch Icon ที่สมบูรณ์แบบสำหรับเว็บไซต์ใด ๆ ในขั้นตอนง่ายๆ
1) สร้าง Retina Ready ไอคอนเว็บไซต์ iOS
ใช้เทมเพลตหรือออกแบบของคุณเอง ฉันใช้ชุดไอคอน DIY DIY ที่กล่าวถึงในโพสต์ก่อนหน้านี้เป็นไฟล์ PSD ที่ทำให้การออกแบบไอคอน iOS ที่ดูดีเป็นเรื่องง่ายเหมือนกับการคลิกหรือสองครั้ง วางในเว็บไซต์หรือโลโก้ของ บริษัท และคุณสวยดีมากที่จะไป หากคุณไม่มีไฟล์อะไรในการแก้ไขไฟล์ PSD Photoshop CS6 beta ก็เยี่ยมมากและสามารถดาวน์โหลดและใช้งานได้จนกว่าจะมีเวอร์ชันสุดท้ายออกมาในปลายปี
2) บันทึกเป็น PNG และชื่อเว็บไซต์ Retina Bookmark Icon
ไอคอนต้องเป็น PNG และต้องระบุชื่อหนึ่งในสองอย่าง แต่ละชื่อไฟล์มีลักษณะที่แตกต่างกันเล็กน้อยของไอคอนตามที่ปรากฏบนหน้าจอหลักของผู้ใช้:
- " apple-touch-icon.png " จะเพิ่มการซ้อนทับของฟองสบู่ลงในไอคอน
- " apple-touch-icon-precomposed.png " จะแสดงไอคอนตามที่สร้างขึ้นโดยไม่ได้เน้นวางซ้อน
ใช้ตัวเลือกที่นำเสนอมาก่อนหากคุณสร้างไฮไลต์ของคุณเองหรือหากต้องการให้ไอคอนปรากฏแบนมากขึ้นโดยไม่มีฟองอากาศแพร่หลายซึ่งปรากฏอยู่บนไอคอนเริ่มต้นของ Apple ส่วนใหญ่
3) อัปโหลดเว็บไซต์ Bookmark Touch Icon ไปยัง Web Base Web
ใช้ไคลเอ็นต์ SFTP (OS X ประกอบด้วย FTP ใน Finder และ CyberDuck หรือ Filezilla ฟรี) เพื่อคัดลอกไฟล์ apple-touch-icon.png ไปยังไดเรกทอรีเว็บราก โดยปกติจะเป็นตำแหน่งเดียวกันกับไฟล์ดัชนีหลักของเว็บไซต์ เมื่ออัปโหลดแล้วให้ยืนยันว่าอยู่ในตำแหน่งที่เหมาะสมโดยเปิดเว็บเบราว์เซอร์และไปที่ "http://SITEURL.com/apple-touch-icon.png" และตรวจสอบว่าได้โหลดแล้ว
ต่อไปนี้เป็นตัวอย่างของไอคอนบุ๊คมาร์คพร้อมใช้งาน Retina Ready 512x 512 จาก OSXDaily.com:
สังเกตว่าหากไม่มีค่าสถานะการนำเข้าไอคอนด้านบนจะแสดงฟองสบู่ คุณสามารถเห็นความแตกต่างระหว่างทั้งสองโดยการเปรียบเทียบไอคอนจริงกับภาพที่แสดงในหน้าจอเป็นบุ๊คมาร์ค
4) ใช้อุปกรณ์ iOS และบุ๊คมาร์คไซต์
นี่เป็นส่วนที่ง่ายที่สุดคว้าอุปกรณ์ iOS (โดยเฉพาะ iPad 3 เพื่อยืนยันด้านจอประสาทตา) และเปิด Safari รีเฟรชเว็บไซต์ที่คุณอัปโหลดไอคอนไปแล้วแตะไอคอนลูกศรและเลือก "บุ๊กมาร์ก" เพิ่มไปที่หน้าจอหลักจากนั้นกลับไปที่หน้าจอหลักเพื่อยืนยันว่ามีอยู่
แม้จะเป็น 512 x 512 พิกเซลไอคอนจอประสาทตาจะลดขนาดลงบน iPhone และอุปกรณ์ที่ไม่ใช่เรตินาที่เก่ากว่า หากคุณต้องการจริงๆคุณสามารถใช้ CSS และ HTML เพื่อแสดงไอคอนขนาดต่างๆไปยังอุปกรณ์ต่างๆ แต่ไม่จำเป็นจริงๆ
ตอนนี้ถ้ามีบุ๊กมาร์กบุ๊กมาร์กเว็บไซต์ของคุณบน iPad ที่มีจอแสดงผลเรตินาก็จะดูดีขึ้นมากในหน้าจอหลักของพวกเขา นั่นคือทั้งหมดที่มีอยู่ และใช่เราเคยเขียนเกี่ยวกับไอคอนรูปลักษณ์ของ Apple มาก่อน แต่สมควรได้รับการกล่าวถึงอีกว่าขณะนี้ iPad 3 ต้องการไอคอนและกราฟิกความละเอียดสูงกว่าอย่างมาก
