การเปลี่ยนแปลงที่น่าทึ่งที่สุดหลายอย่างในการใช้Illustrator นั้นกำลังเกิดขึ้นในขอบเขตของการแปลภาพเวกเตอร์ไปยังเว็บ และรูปแบบ SVG ที่ประเมินค่าต่ำเกินไปคือลิงก์สำคัญในกระบวนการนั้น ไฟล์ SVG รักษาคุณสมบัติการปรับขนาดได้อันล้ำค่าของอาร์ตเวิร์กเวกเตอร์ และได้รับการสนับสนุนเกือบในระดับสากลในเว็บไซต์และสภาพแวดล้อมการพัฒนาเว็บ เมื่อคุณเตรียมงานศิลปะเวกเตอร์สำหรับเว็บ สิ่งสำคัญคือต้องหลีกเลี่ยงเอฟเฟกต์มาตรฐานของ Illustrator และใช้ฟิลเตอร์ SVG แทน
นักวาดภาพประกอบมาพร้อมกับชุดตัวกรอง SVG ที่ดีแต่เรียบง่าย แต่ต่อไปนี้คือเคล็ดลับบางประการในการค้นหาและเพิ่มตัวกรอง SVG รวมถึงทรัพยากรสำหรับการสร้างตัวกรอง SVG ของคุณเอง สำหรับผู้ที่ทำงานกับนักพัฒนาเว็บและแอป ทำให้ชีวิตของพวกเขาง่ายขึ้นและมีประสิทธิผลมากขึ้นโดยดูจากเอกสารสรุปการแจกรหัส SVG
เมื่อคุณสร้างไฟล์ SVG สำหรับหน้าจอใน Illustrator และต้องการใช้เอฟเฟกต์ (เช่น เงาตกกระทบ) คุณควรใช้สิ่งเหล่านั้นเป็นตัวกรอง SVG ด้วยวิธีนี้ ไฟล์ SVG ของคุณจะคงความสามารถในการปรับขนาดได้ไม่จำกัดโดยไม่ผิดเพี้ยน
ขั้นตอนต่อไปนี้จะแนะนำคุณเกี่ยวกับการใช้ตัวกรอง SVG กับกราฟิกใน Illustrator:
เลือกวัตถุที่คุณกำลังใช้ตัวกรอง
เลือกเอฟเฟกต์→ตัวกรอง SVG
เลือกตัวกรองจากรายการที่ปรากฏ
ตัวกรองส่วนใหญ่มีชื่อที่สื่อความหมาย ตัวอย่างเช่นเงาในชื่อคือเงาตกกระทบ เงาที่มีเกาส์เซียนในชื่อจะเป็นภาพเบลอแบบเกาส์เซียน เวิร์กโฟลว์ค่อนข้างแปลกและเป็นวงเวียน แต่คุณต้องเลือกตัวกรองก่อนเพื่อเข้าถึงตัวเลือกทั้งหมดที่มีให้ใช้งาน
ในการเปลี่ยนตัวกรองที่เลือก:
หลังจากที่คุณตั้งค่าตัวกรองแล้ว ให้คลิก ตกลง ในแผง ใช้ตัวกรอง SVG
ชุดฟิลเตอร์ SVG ของ Illustrator นั้นเรียบง่าย แต่คุณสามารถปรับปรุงได้ด้วยการออกแบบฟิลเตอร์ของคุณเองหรือดาวน์โหลดชุดฟิลเตอร์ SVG ที่บรรจุไว้ล่วงหน้าจากแหล่งข้อมูลออนไลน์ การออกแบบตัวกรองเกี่ยวข้องกับการเข้ารหัส แต่สามารถทำได้หากคุณคุ้นเคยกับ HTML ฉันแนะนำบทช่วยสอนที่w3Schoolsสำหรับการสร้างตัวกรอง SVG หรือคุณสามารถซื้อชุดฟิลเตอร์ออนไลน์และยังพบบางชุดที่ดีของตัวกรอง SVG ฟรีที่Creatingo
หลังจากที่คุณซื้อหรือสร้างตัวกรอง SVG ของคุณเอง ต่อไปนี้คือวิธีการติดตั้งใน Illustrator:
เลือกเอฟเฟกต์→ตัวกรอง SVG →นำเข้าตัวกรอง SVG
ในกล่องโต้ตอบที่เปิดขึ้น ให้ไปที่และคลิกสองครั้งที่ไฟล์ตัวกรอง SVG ที่คุณสร้างหรือดาวน์โหลดฟรี
ไฟล์ที่คุณกำลังค้นหาควรเป็นไฟล์ SVG (ตัวกรองหลายตัวรวมอยู่ในไฟล์ SVG ไฟล์เดียว)
ตัวกรองใหม่ของคุณมีอยู่ในเมนูย่อยตัวกรอง SVG แล้ว
เลือกเอฟเฟกต์→ฟิลเตอร์ SVG เพื่อใช้ฟิลเตอร์ใหม่ของคุณกับออบเจกต์ที่เลือก
บ่อยครั้งที่กราฟิก SVG ที่คุณสร้างใน Illustrator จะถูกส่งไปยังนักออกแบบเกม นักสร้างแอนิเมชั่น อินโฟกราฟิก หรือเอาต์พุตอื่นๆ ซึ่งนักพัฒนาซอฟต์แวร์จะทำงานกับโค้ดที่อยู่เบื้องหลังกราฟิก SVG ในฐานะนักวาดภาพประกอบ คุณไม่จำเป็นต้องรู้วิธีสร้างโค้ดนั้น แต่คุณอาจต้องรู้วิธีรับและส่งต่อให้นักพัฒนา นี่คือวิธีการ
เส้นทางสู่การส่งออกกราฟิก SVG ของคุณเมื่อโค้ดทำงานผ่านฟังก์ชันบันทึกของ Illustrator เมนูบันทึกมีตัวเลือก (หาไม่ง่าย) ที่ส่งออกไฟล์ของคุณเป็นรหัส SVG คุณอาจต้องการใช้การสื่อสารแบบเรียลไทม์กับนักพัฒนาหน้าจอของคุณในขณะที่คุณสร้างโค้ดนั้น เนื่องจากตัวเลือกต่างๆ ถูกกำหนดโดยวิธีที่จะใช้โค้ดนั้น:
เลือกไฟล์→บันทึก (หรือบันทึกเป็นถ้าคุณกำลังบันทึกไฟล์ใหม่)
ในกล่องโต้ตอบที่เปิดขึ้น ให้เลือก SVG จากเมนูรูปแบบ
ละเว้นตัวเลือกไฟล์ SVGZ ซึ่งใช้สำหรับไฟล์บีบอัดที่ไม่แสดงในเบราว์เซอร์
คลิกบันทึกเพื่อเปิดกล่องโต้ตอบตัวเลือก SVG
เลือก SVG 1.1 ในรายการดรอปดาวน์โปรไฟล์ SVG เสมอ รุ่นอื่นล้าสมัยแล้ว
หากคุณได้ฝังหรือเชื่อมโยงรูปภาพในไฟล์ SVG ของคุณ ให้เลือกฝังจากดรอปดาวน์ตำแหน่งรูปภาพ อย่างไรก็ตาม ปรึกษากับนักพัฒนาเว็บของคุณเกี่ยวกับตัวเลือกนี้ก่อน
เลือก คงความสามารถในการแก้ไขของ Illustrator เพื่อให้ไฟล์สามารถแก้ไขได้ใน Illustrator
ตัวเลือกนี้จะเพิ่มขนาดไฟล์ แต่อนุญาตให้คุณทำงานกับไฟล์ SVG ไฟล์เดียว ซึ่งคุณสามารถแก้ไข อัปเดต และแชร์กับนักพัฒนาเว็บได้
หากปุ่มตัวเลือกเพิ่มเติมปรากฏขึ้น ให้คลิกเพื่อเข้าถึงตัวเลือกขั้นสูง และทำการเลือกของคุณ
โดยพื้นฐานแล้ว ตัวเลือกต่างๆ จะสร้าง CSS ด้วยไฟล์ของคุณซึ่งกำหนดคุณสมบัติด้วยวิธีต่อไปนี้ ปรึกษากับเพื่อนร่วมทีมนักพัฒนาเว็บของคุณเกี่ยวกับวิธีกำหนดคุณสมบัติ CSS เหล่านี้:
ยกเลิกการเลือกช่องทำเครื่องหมายห้าช่องที่ด้านล่างของกล่องโต้ตอบตัวเลือก SVG เว้นแต่ว่าพาร์ทเนอร์นักพัฒนาซอฟต์แวร์ของคุณจะขอให้คุณเลือก
ตัวเลือกเหล่านี้มีไว้สำหรับแอปพลิเคชันที่มีความเชี่ยวชาญสูง
ในการสร้างรหัส SVG ตามการเลือกที่คุณทำในกล่องโต้ตอบตัวเลือก SVG ให้คลิกปุ่มรหัส SVG
รหัส SVG ที่สร้างขึ้นจะแสดงในโปรแกรมแก้ไขข้อความของระบบปฏิบัติการ คุณสามารถบันทึกโค้ดนั้นเป็นไฟล์ข้อความโดยใช้โปรแกรมแก้ไขข้อความของระบบปฏิบัติการ แล้วส่งไฟล์นั้นไปให้นักพัฒนา
หลังจากที่คุณสร้างโค้ดแล้ว ให้คลิก ตกลง เพื่อบันทึกไฟล์ของคุณ
คุณสามารถเปิดใหม่และแก้ไขไฟล์นี้ใน Illustrator
คุณสามารถใช้เครื่องมือสแนปชอตใน Adobe Acrobat CS5 เพื่อเลือกทั้งข้อความและรูปภาพ และสร้างรูปภาพของบางพื้นที่ภายในไฟล์ PDF ผลลัพธ์โดยทั่วไปจะเรียกว่าการจับภาพหน้าจอของส่วนต่างๆ ภายในไฟล์ PDF ผลลัพธ์คือรูปภาพ และข้อความของคุณไม่ใช่ […]
ออกแบบมาสำหรับนักวิจัยและนักวิทยาศาสตร์ ความสามารถในการวัดใน Photoshop CC นั้นค่อนข้างทรงพลัง คุณสามารถวัดอะไรก็ได้และนับจำนวนอะไรก็ได้ในภาพทางเทคนิค อาจเป็นจากกล้องจุลทรรศน์หรือกล้องโทรทรรศน์ หากคุณทราบขนาดที่แน่นอนขององค์ประกอบใดๆ ในภาพ คุณจะค้นพบอะไรก็ได้ […]
เมื่อคุณใช้เครื่องมือ Liquify ใน Adobe Creative Suite 5 (Adobe CS5) Illustrator คุณสามารถโค้งงอวัตถุ — ทำให้วัตถุเป็นคลื่น เหนอะหนะ หรือแหลมคม — โดยสร้างการบิดเบือนที่ง่ายไปจนถึงซับซ้อน เครื่องมือ Liquify สามารถบิดเบือนวัตถุของคุณได้อย่างสร้างสรรค์หรือแปลกประหลาด (ขึ้นอยู่กับว่าคุณมองอย่างไร) คุณ […]
เมื่อคุณมีข้อความในโปรเจ็กต์ Adobe XD คุณสามารถเริ่มเปลี่ยนคุณสมบัติข้อความได้ คุณสมบัติเหล่านี้ได้แก่ Font Family, Font Size, Font Weight, Alignment, Character Spacing (kerning and tracking), Line Spacing (leading), Fill, Border (stroke), Shadow (drop shadow) และ Background Blur มาทบทวนวิธีการใช้คุณสมบัติเหล่านั้นกัน เกี่ยวกับความสามารถในการอ่านและแบบอักษร […]
คุณสามารถใช้ InDesign เพื่อสร้างและแก้ไขกราฟิกโค้ด QR รหัส QR คือบาร์โค้ดรูปแบบหนึ่งที่สามารถเก็บข้อมูลได้ เช่น คำ ตัวเลข URL หรือข้อมูลรูปแบบอื่นๆ ผู้ใช้สแกนรหัส QR โดยใช้กล้องและซอฟต์แวร์ของเธอบนอุปกรณ์ เช่น สมาร์ทโฟน และซอฟต์แวร์ทำให้การใช้งาน […]
เช่นเดียวกับใน Adobe Illustrator อาร์ตบอร์ด Photoshop ให้ความสามารถในการสร้างหน้าหรือหน้าจอแยกกันภายในเอกสารเดียว ซึ่งจะเป็นประโยชน์อย่างยิ่งหากคุณกำลังสร้างหน้าจอสำหรับแอปพลิเคชันมือถือหรือโบรชัวร์ขนาดเล็ก คุณสามารถคิดว่าอาร์ตบอร์ดเป็นกลุ่มเลเยอร์ชนิดพิเศษที่สร้างขึ้นโดยใช้แผงเลเยอร์ มันคือ […]
การตัดข้อความใน Adobe Illustrator CC นั้นไม่เหมือนกับการห่อของขวัญ ง่ายกว่า! การตัดข้อความบังคับให้ข้อความล้อมรอบกราฟิก ดังแสดงในรูปนี้ คุณลักษณะนี้สามารถเพิ่มความคิดสร้างสรรค์ให้กับชิ้นใดก็ได้ กราฟิกบังคับให้ข้อความล้อมรอบ ขั้นแรก สร้าง […]
เมื่อออกแบบใน Adobe Illustrator CC คุณมักจะต้องการรูปร่างเพื่อให้มีขนาดที่แน่นอน (เช่น 2 x 3 นิ้ว) หลังจากที่คุณสร้างรูปร่าง วิธีที่ดีที่สุดในการปรับขนาดให้เป็นการวัดที่แน่นอนคือการใช้แผงการแปลงที่แสดงในรูปนี้ เลือกวัตถุแล้วเลือก Window→Transform to […]
เรียนรู้วิธีใช้ความโปร่งใสกับกราฟิก SVG ใน Illustrator สำรวจวิธีการส่งออก SVG ด้วยพื้นหลังโปร่งใสและใช้เอฟเฟกต์ความโปร่งใส
หลังจากที่คุณนำเข้ารูปภาพของคุณไปยัง Adobe XD แล้ว คุณจะไม่มีส่วนควบคุมการแก้ไขมากนัก แต่คุณสามารถปรับขนาดและหมุนรูปภาพได้เหมือนกับที่คุณทำกับรูปร่างอื่นๆ คุณยังสามารถปัดเศษมุมของรูปภาพที่นำเข้าได้อย่างง่ายดายโดยใช้วิดเจ็ตมุม การมาส์กภาพของคุณ โดยกำหนดรูปทรงปิด […]
