เทคนิคและเครื่องมือในการเปลี่ยนรูปภาพแบบไดนามิก

เมื่อพูดถึงการออกแบบเว็บความคิดสร้างสรรค์ในการออกแบบไม่ควรถูก จำกัด ด้วยตัวเลือกที่ จำกัด ของเว็บฟอนต์ที่เราสนับสนุน แบบอักษรบนเว็บที่ปลอดภัย. นักออกแบบควรมีอิสระในการใช้แบบอักษรใด ๆ ที่พวกเขาต้องการในชื่อและเนื้อหา.

ในปี 2005 การเปลี่ยนภาพแบบไดนามิกได้รับความนิยมด้วยเทคนิคที่เรียกว่า การเปลี่ยน Inman Flash แบบปรับขนาดได้ (sIFR). พัฒนาโดย Shaun Inman, sIFR ใช้ประโยชน์จาก Javascript และ Adobe Flash เพื่อให้นักออกแบบเว็บไซต์สามารถใช้แบบอักษรที่กำหนดเองที่พวกเขาชอบบนเว็บไซต์และยังคงรักษาทัศนวิสัยสำหรับผู้ที่ไม่มีแบบอักษรนั้น และเมื่อเว็บยังคงพัฒนาอย่างต่อเนื่องในวันนี้เรามีทางเลือกเพิ่มเติมในการใช้เทคโนโลยีที่หลากหลายในกรณีที่คุณไม่ได้เป็นแฟนของ Flash.

โดยไม่ต้องกังวลใจต่อไปลองมาดูบางส่วนของ เทคนิคเพื่อให้บรรลุการเปลี่ยนภาพแบบไดนามิก.

เทคนิคที่ใช้กันทั่วไป

นี่คือเทคนิคที่ใช้กันมากที่สุดสำหรับการเปลี่ยนรูปภาพแบบไดนามิก.

การเปลี่ยน Inman Flash แบบปรับขนาดได้ (sIFR)

sIFR เป็นหนึ่งในวิธีที่นิยมที่สุดในการฝังแบบอักษรที่กำหนดเองบนเว็บไซต์ มันใช้ Javascript และ Flash เพื่อสร้างแบบอักษรที่กำหนดเองสำหรับเว็บไซต์ของคุณและอนุญาตให้เลือกแบบอักษรที่ถูกแปลง นอกจากนั้นแบบอักษรที่ถูกแปลงจะยังคงเป็นข้อความในซอร์สโค้ดดังนั้นเครื่องมือค้นหายังสามารถรวบรวมข้อมูลได้.

sIFR 2 (แนะนำ) เป็นรุ่นที่เสถียรในปัจจุบันอย่างไรก็ตามหากคุณกำลังพิจารณาที่จะใช้ sIFR คุณควรทราบด้วยเช่นกัน siFR 3 เบต้ายังสามารถดาวน์โหลดได้ อาจเป็นรถบั๊กเล็ก ๆ น้อย ๆ แต่อย่างน้อยก็แก้ปัญหาการขยายตัวของ sIFR 2.

เครื่องมือสำหรับ sIFR ที่อาจมีประโยชน์:

• sIFRvaultsIFRvault เป็นที่เก็บของแบบอักษร sIFR ที่คุณสามารถดาวน์โหลดได้.
• เครื่องกำเนิด sIFRเครื่องมือออนไลน์ที่ให้คุณสร้างไฟล์ sIFR .swf ได้ด้วยการคลิกเมาส์เพียงไม่กี่ครั้ง เพียงอัปโหลดแบบอักษร TTF ของแบบอักษรที่คุณต้องการแปลงแสดงตัวอย่างและดาวน์โหลด.
• แปลงฟอนต์เป็น sIFRอัปโหลดแบบอักษร. TTF และเว็บไซต์นี้จะแปลงเป็นไฟล์ sIFR Flash.

sIFR Lite

sIFR ดั้งเดิมคือ 22k ดังนั้น เดฟ ตัดสินใจที่จะทำใหม่โดยใช้วิธีการเชิงวัตถุมากขึ้นและผลลัพธ์หรือไม่ 3x เล็กกว่า 3.7k.

PHP + CSS การแทนที่ข้อความไดนามิก (P + C DTR)

ตามชื่อที่แนะนำนี่เป็นวิธีการแทนที่ข้อความที่ใช้ PHP และ CSS ที่ใช้ประโยชน์จากวิธีดั้งเดิมที่อธิบายไว้โดย Steward Rosenberger. นอกจากนี้ยังเป็นการปรับปรุงจากรุ่นก่อนหน้าที่พัฒนาโดย R. Marie Cox ที่ไม่รองรับการตัดข้อความและแท็กด้านใน อีกสิ่งที่ยอดเยี่ยมเกี่ยวกับ P + C DTR คือข้อความรูปภาพสามารถปรับแต่งได้ด้วยแท็ก CSS.

typeface.js

อะไรที่ทำให้ typeface.js พิเศษคือพวกเขาเพียงใช้จาวาสคริปต์เพื่อฝังแบบอักษรที่กำหนดเองและสไตล์สามารถปรับแต่งเพิ่มเติมด้วย HTML และ CSS ไม่จำเป็นต้องใช้แฟลช เป็นโอเพ่นซอร์สและรองรับเบราว์เซอร์ส่วนใหญ่ที่เราใช้อยู่ในปัจจุบันไม่ว่าจะเป็น Safari, Firefox, IE (6 ขึ้นไป).

โดยส่วนตัวหลังจากการทดสอบด้วย typeface.js เราคิดว่าอาจมีช่องว่างสำหรับการปรับปรุง ประการแรกแบบอักษรมีแนวโน้มที่จะแสดงแตกต่างกันเล็กน้อยในเบราว์เซอร์ที่แตกต่างกัน หากคุณใช้ typeface.js เราขอแนะนำให้คุณทำการตรวจสอบข้ามเบราว์เซอร์ก่อนสมมติว่าสิ่งที่คุณเห็นใน Firefox จะเป็นสิ่งที่คุณเห็นใน Safari ข้อความไม่สามารถเลือกได้ด้วย typeface.js.

แบบอักษรที่กำหนดเองใน typeface.js ไม่ได้รับการรวบรวม หมายถึงผู้ใช้สามารถดาวน์โหลดแบบอักษร ซึ่งอาจนำไปสู่ปัญหาลิขสิทธิ์ ขอแนะนำให้คุณตรวจสอบอย่างละเอียดเพื่อให้แน่ใจว่าแบบอักษรที่คุณใช้นั้นใช้ได้สำหรับการแจกจ่ายซ้ำ.

Cufon

ไม่จำเป็นต้องใช้แฟลช, Cufon เป็นทางเลือกที่ยอดเยี่ยมสำหรับ sIFR และใช้งานง่าย ขั้นแรกให้คุณใช้ตัวสร้าง Cufon เพื่อสร้างและปรับแต่งแบบอักษรที่คุณต้องการจากนั้นคุณแทรก Cufon Javascript ในซอร์สโค้ดของคุณและคุณบอกสคริปต์ว่าตัวเลือกใดที่คุณต้องการกำหนดแบบอักษร.

ปัญหาที่ใหญ่ที่สุดกับ Cufon จะเป็นปัญหาทางกฎหมายของการใช้แบบอักษรที่กำหนดเองเหล่านี้ออนไลน์ เนื่องจากมันถูกฝังอยู่ภายใน Javascript ทุกคนที่ดูซอร์สโค้ดสามารถริพได้อย่างง่ายดาย แบบอักษรที่กำหนดเองของ Cufon นั้นไม่สามารถเลือกได้นั่นคืออีกแบบหนึ่งที่ปิดอยู่.

ดึง

หรือที่เรียกว่า การเปลี่ยนภาพฟแวร์ (FLIR), เป็นอีกวิธีที่ยอดเยี่ยมในการ sIFR ซึ่งไม่จำเป็นต้องใช้ Flash ดูเหมือนว่าทางเลือกอื่น ๆ กำลังชนกับปัญหา Flash ของ sIFR.

Facelift ใช้ PHP และ PHP Library ของ PHP พวกเขาสืบทอดปัญหาดั้งเดิมของการเปลี่ยนแบบอักษรที่กำหนดเอง - ไม่สามารถเลือกข้อความได้ นอกเหนือจากนั้นเราคิดว่ามันยอดเยี่ยมเช่นกัน.

วิธีการเพิ่มเติม

เทคนิคข้างต้นอาจมีการใช้กันอย่างแพร่หลาย แต่เราได้สังเกตเห็นวิธีอื่น ๆ เช่นกันในการแปลงข้อความของคุณให้เป็นแบบอักษรที่กำหนดเองที่สวยงาม.

เลือกประเภท

TypeSelect ใช้ประโยชน์จาก typeface.js, jQuery, canvas, toDataURL, คุณสมบัติพื้นหลัง CSS และข้อความซ้อนทับจริงเพื่อให้แบบอักษรที่กำหนดเองบนเว็บไซต์ของคุณ การเลือกข้อความใช้งานได้กับ Firefox, Safari และแม้กระทั่ง Chrome แต่ไม่ใช่ IE.

เปลี่ยนรูปภาพ Swf (swfIR)

swfIR ช่วยให้คุณสามารถใช้เอฟเฟ็กต์วิชวลกับรูปภาพใด ๆ หรือทั้งหมดบนเว็บไซต์ของคุณ ตัวอย่างเช่นคุณสามารถเพิ่มภาพใด ๆ ในเว็บไซต์ของคุณและ swfIR จะเพิ่มเส้นขอบกลมหมุนตำแหน่งหรือแม้กระทั่งเพิ่มเงาให้กับมัน.

เก้าเทคนิคสำหรับการเปลี่ยนรูป CSS

สิ่งเหล่านี้ไม่ใช่การแทนที่ข้อความไดนามิก แต่ Chris Coyier แสดงให้เห็นถึงเทคนิค CSS ที่แตกต่างกันถึงเก้ารายการเพื่อแทนที่ข้อความด้วยภาพ แต่ละรายการที่มีบัตรรายงานแสดงเงื่อนไข - จะเป็นอย่างไรหากรูปภาพเปิด / ปิด CSS จะเปิด / ปิด.

เครื่องเขียนตัวอักษร

เครื่องเขียนตัวอักษร ใช้ประโยชน์จาก Scalable Inman Flash Replacement (sIFR) เพื่อเปลี่ยนชื่อหนังสือของคุณเป็นแบบอักษรที่กำหนดเอง สิ่งที่คุณต้องทำคือค้นหาแบบอักษรเลือกและใส่รหัสลงในส่วนหัวและชื่อของคุณจะเปลี่ยนไปในเวลาไม่นาน.

WordPress + การเปลี่ยนภาพแบบไดนามิก

หากคุณเป็นผู้ใช้ WordPress ที่กำลังมองหาโซลูชันการเปลี่ยนรูปภาพแบบไดนามิกสำหรับชื่อเรื่องหรือเนื้อหาของบล็อกของคุณโอกาสที่จะมีปลั๊กอินสำหรับพวกเขา นี่คือปลั๊กอินสำหรับเปลี่ยนข้อความที่เรารู้จัก.

ปลั๊กอิน WordPress sIFR - WP sIFRWP sIFR ถูกสร้างขึ้นเพื่อลบภาวะแทรกซ้อนจากการรับแบบอักษรที่กำหนดเองบนเว็บไซต์ WordPress ด้วย WP sIFR คุณจะต้องอัปโหลดไฟล์ฟอนต์ SWF ของคุณไปยังไดเรกทอรีปลั๊กอินจากนั้นเข้าสู่ระบบเปิดใช้งานและกำหนดค่าสไตล์ทั้งหมดในแผงการตั้งค่า.

ปลั๊กอิน WordPress Cufon - WP-Cufonสิ่งเดียวที่คุณต้องทำคือการแปลงไฟล์ฟอนต์และอัปโหลดไปยังไดเรกทอรีปลั๊กอิน คุณสามารถเปิดใช้งานวัตถุที่คุณต้องการแทนที่ในเมนูผู้ดูแลระบบของ WordPress.

ซอฟท์แวปลั๊กอินเปลี่ยนรูปภาพ (FLIR) Wordpressเกาะแกะ สำหรับ WordPress นั้นเป็นมิตรกับ SEO และทำให้รูปภาพในเบราว์เซอร์ใช้ได้เฉพาะเมื่อเปิดใช้งาน JavaScript เท่านั้น รหัส HTML / XHTML ของคุณยังคงไม่เปลี่ยนแปลงทำให้แท็กหัวของคุณสามารถอ่านได้โดยเครื่องมือค้นหาและหน้าเว็บที่ผู้อ่านสามารถอ่านได้โดยไม่มี JavaScript.

แผงควบคุมการเขียนตัวอักษร เครื่องเขียนตัวอักษร ปลั๊กอิน 'แผงควบคุม' ช่วยให้คุณเพิ่มแบบอักษรฟรีใด ๆ กว่า 1,000 รายการที่มีอยู่ในเว็บไซต์ Font Burner ลงในธีม WordPress ของคุณ.