สร้างแบบอักษรของคุณเองโดยใช้ Inkscape และ Fontastic.me

ในบทแนะนำนี้ฉันจะแสดงวิธีที่คุณสามารถสร้างแบบอักษรลายมือของคุณเองโดยใช้ Inkscape และ fontastic.me

หากคุณไม่คุ้นเคยกับสิ่งเหล่านี้ Inkscape เป็นแอปพลิเคชันการวาดเส้นเวกเตอร์ฟรีและโอเพ่นซอร์สที่มีให้สำหรับ Windows, OS X และ Linux Fontastic.me เป็นเว็บไซต์ที่มีหลากหลายแบบอักษรของไอคอน แต่ยังช่วยให้คุณสามารถอัพโหลดกราฟิก SVG ของคุณเองและแปลงเป็นแบบอักษรได้ฟรี

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

สำหรับจุดประสงค์ของบทแนะนำนี้ฉันจะติดตามภาพของตัวอักษรที่เขียนบางส่วน แต่คุณสามารถปรับใช้เทคนิคนี้และวาดตัวอักษรของคุณได้โดยตรงใน Inkscape วิธีนี้อาจทำงานได้ดีสำหรับผู้ใช้ แท็บเล็ตรูปวาด

ในหน้าถัดไปเราจะเริ่มต้นด้วยการสร้างแบบอักษรของเราเอง

01 จาก 05

นำเข้ารูปถ่ายของแบบอักษรที่เขียนของคุณ

ข้อความและรูปภาพ© Ian Pullen

คุณต้องมีภาพวาดของตัวอักษรบางตัวหากต้องการทำตามและถ้าคุณไม่ต้องการทำด้วยตัวเองคุณสามารถดาวน์โหลดและใช้ a-doodle-z.jpg ซึ่งมีตัวพิมพ์ใหญ่ AZ

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

หากต้องการนำเข้าภาพให้ไปที่ไฟล์> นำเข้าแล้วไปที่รูปภาพและคลิกปุ่มเปิด ในช่องโต้ตอบถัดไปฉันแนะนำให้คุณใช้ตัวเลือกฝัง

หากไฟล์ภาพมีขนาดใหญ่มากคุณสามารถซูมออกได้โดยใช้ตัวเลือกในเมนูย่อยมุมมอง> ซูมแล้วปรับขนาดใหม่โดยการคลิกหนึ่งครั้งเพื่อแสดงลูกศรชี้ที่มุมแต่ละมุม คลิกและลากที่จับขณะที่กดแป้น Ctrl หรือ Command ค้างไว้และจะเก็บสัดส่วนเดิมไว้

ต่อไปเราจะติดตามภาพเพื่อสร้างตัวอักษรบรรทัดเวกเตอร์

02 จาก 05

ติดตามภาพเพื่อสร้างตัวอักษรเส้นเวกเตอร์

ข้อความและรูปภาพ© Ian Pullen

ก่อนหน้านี้ฉันได้อธิบายถึง การตรวจสอบกราฟิกบิตแมปใน Inkscape แล้ว แต่จะอธิบายกระบวนการนี้อีกครั้งที่นี่อีกครั้ง

คลิกที่รูปเพื่อให้แน่ใจว่าได้เลือกแล้วไปที่ Path> Trace Bitmap เพื่อเปิดหน้าต่าง Trace Bitmap ในกรณีของฉันฉันออกจากการตั้งค่าทั้งหมดไปเป็นค่าเริ่มต้นและทำให้ได้ผลลัพธ์ที่ดีและสะอาด คุณอาจต้องปรับการตั้งค่าการติดตาม แต่คุณอาจพบว่าการถ่ายภาพของคุณอีกครั้งด้วยแสงที่ดีกว่าทำให้ภาพที่มีความคมชัดดีขึ้น

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

03 จาก 05

แยก Tracing เป็นจดหมายส่วนบุคคล

ข้อความและรูปภาพ© Ian Pullen

เมื่อมาถึงจุดนี้จดหมายทั้งหมดจะถูกรวมเข้าด้วยกันเพื่อไปที่ Path> Break Apart เพื่อแบ่งเป็นตัวอักษรแต่ละตัว โปรดทราบว่าถ้าคุณมีตัวอักษรที่ประกอบขึ้นจากมากกว่าหนึ่งองค์ประกอบองค์ประกอบเหล่านี้จะถูกแยกออกเป็นองค์ประกอบต่างๆด้วย ในกรณีของฉันนี่ใช้กับจดหมายทุกฉบับดังนั้นจึงควรจัดกลุ่มจดหมายแต่ละฉบับไว้ด้วยกันในขั้นตอนนี้

เมื่อต้องการทำเช่นนี้ให้คลิกและลากเครื่องหมายเลือกรอบตัวอักษรจากนั้นไปที่วัตถุ> กลุ่มหรือกด Ctrl + G หรือ Command + G ขึ้นอยู่กับแป้นพิมพ์ของคุณ

แน่นอนคุณจะต้องทำเช่นนี้กับตัวอักษรที่มีมากกว่าหนึ่งองค์ประกอบ

ก่อนที่จะสร้างไฟล์จดหมายเราจะปรับขนาดเอกสารเป็นขนาดที่เหมาะสม

04 จาก 05

ตั้งค่าขนาดเอกสาร

ข้อความและรูปภาพ© Ian Pullen

เราจำเป็นต้องตั้งค่าเอกสารให้มีขนาดที่เหมาะสมดังนั้นไปที่ File> Document Properties และในกล่องโต้ตอบให้ตั้งค่า Width และ Height ตามความจำเป็น ฉันตั้งค่าให้เป็น 500px โดย 500px แต่นึกคิดคุณจะกำหนดความกว้างที่แตกต่างกันสำหรับแต่ละตัวอักษรเพื่อให้ตัวอักษรสุดท้ายพอดีกันอย่างประณีตมากขึ้น

จากนั้นเราจะสร้างตัวอักษร SVG ที่จะถูกอัปโหลดไปยัง fontastic.me

05 จาก 05

สร้างไฟล์ SVG แต่ละไฟล์สำหรับแต่ละตัวอักษร

ข้อความและรูปภาพ© Ian Pullen

Fontastic.me กำหนดให้แต่ละตัวอักษรเป็นไฟล์ SVG ที่แยกจากกันดังนั้นเราจึงจำเป็นต้องสร้างไฟล์เหล่านี้ก่อนที่จะกด

ลากจดหมายทั้งหมดของคุณเพื่อให้อยู่นอกขอบของเพจ Fontastic.me ละเว้นองค์ประกอบใด ๆ ที่อยู่นอกพื้นที่เพจเพื่อให้เราสามารถปล่อยตัวอักษรเหล่านี้จอดไว้ที่นี่ได้โดยไม่มีปัญหา

ตอนนี้ลากตัวอักษรตัวแรกลงในเพจแล้วใช้ที่จับลากที่มุมเพื่อปรับขนาดใหม่ตามที่จำเป็น

จากนั้นไปที่ File> Save As และให้ชื่อไฟล์ที่มีความหมาย ฉันเรียกว่า mine a.svg - ตรวจสอบว่าไฟล์มีส่วนต่อท้าย .vg

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

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

ตอนนี้คุณสามารถเยี่ยมชม fontastic.me และสร้างแบบอักษรของคุณได้ เราได้อธิบายเกี่ยวกับกระบวนการนี้ในบทความประกอบที่อธิบายถึงวิธีการใช้งานเว็บไซต์เพื่อสร้างแบบอักษรของคุณ: สร้างแบบอักษร Fontastic.me