วิธีส่งออก Svg แบบไร้พรมแดน

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

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

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

ฉันจะบันทึก Svg โดยไม่มี Artboard ได้อย่างไร

ไม่มี "artboard" ในไฟล์ SVG ดังนั้นคุณจึงไม่สามารถบันทึกไฟล์ SVG โดยไม่มี artboard

การส่งออกเอกสารใน Photoshop

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

ฉันจะแปลงขนาด Svg Artboard ได้อย่างไร

ไม่มีวิธีที่แน่นอนในการแปลง ขนาดอาร์ตบอร์ด SVG วิธีการทั่วไปบางอย่าง ได้แก่ การใช้ไม้บรรทัดหรือเครื่องมือวัดอื่นๆ เพื่อกำหนดขนาดของอาร์ตบอร์ด หรือใช้โปรแกรมซอฟต์แวร์ที่สามารถแปลงไฟล์ SVG เป็นรูปแบบไฟล์อื่นได้อย่างแม่นยำ

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

เหตุใดไฟล์ Svg จึงเป็นอนาคตของการออกแบบเว็บไซต์

นักออกแบบเคยสร้างไฟล์ความละเอียดไฟล์เดียวสำหรับเว็บไซต์ของตน จากนั้นใช้บนอุปกรณ์ใดๆ ที่พวกเขาเลือกก่อนที่จะดำเนินการต่อไปยังอุปกรณ์ถัดไป เว็บไซต์ทำงานได้ดีสำหรับคนส่วนใหญ่จนกระทั่งเมื่อไม่นานมานี้ เมื่ออุปกรณ์มีขนาดใหญ่ขึ้นและหน้าจอใหญ่ขึ้นกลายเป็นเรื่องธรรมดา ทำให้มันปรากฏเป็นพิกเซลบนหน้าจอขนาดใหญ่ จากนั้นจึงแนะนำมาตรฐานความละเอียดใหม่ 'การออกแบบที่ตอบสนอง' มันเกี่ยวข้องกับการพัฒนาไฟล์หลายความละเอียดสำหรับอุปกรณ์แต่ละขนาด จากนั้นอัปโหลดไฟล์เหล่านี้ไปยังเว็บไซต์ของคุณโดยใช้ Responsive Design อย่างไรก็ตาม ในท้ายที่สุด วิธีนี้ช่วยแก้ปัญหาเว็บไซต์ที่มีพิกเซลบนหน้าจอที่ใหญ่ขึ้นได้ แต่ก็ทำให้ปัญหาแย่ลงด้วย การสร้างเว็บไซต์ใหม่ด้วยไฟล์การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์อาจเป็นเรื่องยากหากคุณจำเป็นต้องเปลี่ยนเว็บไซต์บนอุปกรณ์อื่น หากคุณต้องการทำให้เว็บไซต์ดูแตกต่างออกไป ในการสร้างเว็บไซต์ที่ปรากฏบนโทรศัพท์แตกต่างจากที่ปรากฏบนคอมพิวเตอร์ คุณจะต้องสร้างไฟล์การออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ที่แตกต่างกันสองไฟล์ก่อนที่จะใช้บนเว็บไซต์ของคุณ มีไฟล์กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ (SVG) หรือไม่ ขนาดของไฟล์ SVG สามารถเปลี่ยนแปลงได้โดยไม่สูญเสียคุณภาพของภาพ ไม่ว่าไฟล์จะมีขนาดเท่าใด รูปภาพจะยังคงเหมือนเดิมไม่ว่าจะปรากฏบนเว็บไซต์ของคุณใหญ่หรือเล็กเพียงใด นี่เป็นสิ่งสำคัญเพราะช่วยให้คุณสร้างไฟล์ที่มีความละเอียดเพียงไฟล์เดียวแล้วใช้บนอุปกรณ์ต่างๆ ได้ เมื่อสร้าง SVG หน้าต่างตัวเลือกเพิ่มเติมจะถูกตั้งค่าให้ยกเลิกการเลือก 'ตอบสนอง' สิ่งสำคัญคือต้องทำให้ SVG สอดคล้องกันโดยไม่คำนึงถึงขนาดของอุปกรณ์

ฉันสามารถส่งออก Svg ด้วย Gradient ได้หรือไม่

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

หลายสีในการไล่ระดับสี

ฉันยินดีกับสิ่งที่เกิดขึ้น แล้วกราฟิกแบบไล่ระดับสี (หลายสี) ล่ะ?
ใน SVG เราสามารถอ้างอิงหลายสีได้โดยใช้รายการที่คั่นด้วยเครื่องหมายจุลภาค เช่น URL (#Gradient,#Gradient2) คุณสมบัติการเติมและการลากเส้นขององค์ประกอบ Gradient2 จะถูกตั้งค่าเป็นสีเดียวกับองค์ประกอบ Gradient ในลักษณะนี้

Illustrator ส่งออก Svg โดยไม่มี Artboard

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

วิธีส่งออกงานศิลปะของคุณเป็นไฟล์ Png หรือ Svg ใน Adobe Illustrato

เมื่อส่งออกงานศิลปะเป็นไฟล์ PNG ให้เลือกวัตถุหรือวัตถุที่คุณต้องการส่งออกแล้วคลิกปุ่มส่งออก หากคุณต้องการส่งออกมากกว่าหนึ่งรายการ ให้เลือกรายการนั้นก่อน จากนั้นคลิกปุ่มส่งออก เลือก ส่งออก เลือก ในหน้าต่างการเลือก ส่งออก ในกล่องโต้ตอบการเลือกส่งออก คุณสามารถเลือกวัตถุหรือวัตถุที่จะส่งออกเป็นไฟล์ PNG หรือ SVG หากต้องการส่งออกวัตถุหรือวัตถุเป็น PNG คุณต้องทำเครื่องหมายในช่อง Use Artboards ก่อน ดังนั้น Illustrator จะส่งออกอาร์ตเวิร์กเป็นไฟล์ PNG แต่ละไฟล์ หากคุณต้องการส่งออกวัตถุหรือวัตถุเป็นไฟล์ SVG คุณต้องทำเครื่องหมายที่ช่อง Use Artboards และ Use Transparency ก่อน เป็นผลให้ Illustrator จะส่งออกวัตถุหรือวัตถุเป็นไฟล์ SVG ไฟล์เดียวที่มีเนื้อหาของอาร์ตบอร์ดและความโปร่งใสของวัตถุหรือวัตถุ