ฉันจะส่งออกภาพจากภาพ Illustrator ได้หลายขนาดได้อย่างไร


29

ฉันยังใหม่กับ Adobe Illustrator และฉันมีรูปโลโก้ซึ่งฉันต้องใช้ในขนาด 5 หรือ 6 ขนาดแตกต่างกัน ภาพโลโก้ถูกสร้างขึ้นใน Adobe Illustrator แต่เมื่อฉันพยายามบันทึกภาพไปที่ PNG หรือ JPEG สิ่งที่ควรได้รับการเรียบง่ายกลายเป็นเรื่องที่ซับซ้อนมาก

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

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

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



มีหลายวิธีที่จะทำเช่นนั้นฉันเลือกทั้งหมดแล้วคุณต้องการส่งออกภาพแล้วมีตัวเลือกความกว้างและความสูงในส่วนหัวเพียงแค่เปลี่ยนมันแล้วส่งออกมัน

คำตอบ:


26

ไฟล์> บันทึกสำหรับเว็บจากนั้นป้อนขนาดพิกเซลโดยคลิกที่Image Sizeแท็บทางด้านขวาของหน้าต่างบันทึกสำหรับเว็บ

หรือฉันไม่เข้าใจคุณอย่างถูกต้อง?


สมบูรณ์แบบขอบคุณ ฉันเพิ่งใช้เวลาประมาณ 15 นาทีกับฟังก์ชั่น "ส่งออก" แต่เนื่องจากปฏิเสธที่จะใช้น้อยกว่า 72ppi ฉันจึงต้องขายงานศิลปะและบอร์ดศิลปะเพื่อการส่งออกขนาดเล็กมากนั่นเป็นสิ่งที่ผู้ถามทำเช่นกัน
Kjeld Schmidt

12

การใช้File → Save for Webและการป้อนขนาดจะทำสิ่งที่คุณต้องการ นอกจากนี้ Illustrator ใช้การปรับขนาดแบบเวกเตอร์ดังนั้นผลลัพธ์จะดีกว่าถ้าคุณลองแบบเดียวกันใน Photoshop - การป้อนขนาดที่ไม่ตรงกับเอกสารใน Photoshop หมายความว่าภาพจะถูกปรับขนาดบิตแมป

โปรดทราบว่าคุณต้องคลิกนำไปใช้หลังจากเปลี่ยนขนาดหากคุณใช้ Illustrator รุ่นก่อน CS6

บันทึกสำหรับเว็บใน Illustrator

โอ้และมีโอกาสที่ดีมากที่คุณจะต้องConvert to sRGBปิด - มันแปลงภาพของคุณจากพื้นที่สีปัจจุบันไปเป็น sRGB อย่างทำลายล้างทำให้เปลี่ยนสี

ป้อนคำอธิบายรูปภาพที่นี่


ไม่มีปุ่มใช้งานใน CS6 .... และฉันไม่เห็นด้วยกับการแปลงเป็น RGB คุณต้องการเปิดสำหรับภาพที่กำหนดไว้สำหรับเว็บ
สกอตต์

2
ขอบคุณเกี่ยวกับเคล็ดลับ CS6 ออกจากแปลง sRGB บนเป็นอย่างวิธีการที่ไม่ถูกต้องสำหรับเว็บและการทำงาน UI ต่อไปนี้เป็นบทความทั้งหมดเกี่ยวกับสาเหตุที่: bjango.com/articles/photoshop (ประกวดฉันในสิ่งที่เป็นอันตราย!)
Marc Edwards

2
คุณอ่านบทความจริงหรือ เมื่อคุณทำงานกับเว็บและ UI ค่าสีที่แน่นอนจะต้องคงไว้ตลอดกระบวนการทั้งหมด หากคุณป้อน # FF0010 เป็นสีจะต้องส่งออกในไฟล์เป็น # FF0010 หากคุณต้องการจับคู่สีในรหัส ซึ่งหมายความว่าแปลงเป็น sRGB ต้องปิด ฉันรู้สึกว่าคุณไม่ได้ทำงานแบบนี้และไม่เข้าใจสิ่งที่เกี่ยวข้อง
Marc Edwards

1
สกอตต์โปรดอย่าใช้สิ่งนี้เป็นการโจมตีโฆษณาด้วยโฮเม็ม แต่จากการอภิปรายที่คล้ายกันฉันคิดว่าคุณอาจได้รับแนวคิดที่ผิดพลาดเกี่ยวกับการแสดงสี RGB ดูยังgraphicdesign.stackexchange.com/questions/7815/...
e100

3
แปลงเป็น sRGB เป็นตัวเลือกที่ผิดในเกือบทุกสถานการณ์เมื่อทำงานกับเว็บ "มีเหตุผลที่ทีม Save for Web ใช้ตัวเลือกแปลงเป็น sRGB" - เวลาเพื่อให้ได้รับการแก้ไข feedback.photoshop.com/photoshop_family/topics/…
Marc Edwards

1

เมื่อฉันต้องการรองรับพิกเซลหลายขนาดฉันจะดักจับและปรับขนาดศิลปะภายในไฟล์ AI เดียวกัน แต่ละขนาดจะไปสู่กระดานขนาดที่แยกกันอย่างถูกต้อง ฉันต่อท้ายชื่อบอร์ดด้วยรูปแบบไฟล์ที่จะส่งออก จากนั้นฉันเรียกใช้ jsx ที่ส่งออกแต่ละกระดานและเลือกรูปแบบไฟล์จากชื่อโดยใช้การตั้งค่าสุดท้ายที่ฉันป้อนสำหรับรูปแบบนั้นในไฟล์นั้น นี่คือทั้งหมดใน CS5

ฉันใช้เวิร์กโฟลว์นี้สำหรับโลโก้ไอคอนและโฆษณาแบบดิสเพลย์


ได้โปรดคุณแบ่งปัน. jsx ได้ไหม
kelin

@kelin ฉันเกรงว่าจะทำไม่ได้ เป็นเวลานานแล้วที่ฉันไม่ได้ใส่ใจกับผลิตภัณฑ์ของ Adobe
เสื้อผ้าธรรมดา

1
ไม่เป็นปัญหาฉันพบสคริปต์ที่ยอดเยี่ยมที่นี่: stackoverflow.com/a/28067227/3050403
kelin

0

คุณยังสามารถสร้างเอกสารที่มีขนาดที่เหมาะสมใน Photoshop (หรือทำกล่องที่มีคำแนะนำ) จากนั้นไฟล์> วางภาพเวกเตอร์

คุณสามารถปรับขนาดของรูปร่างก่อนที่จะแสดงผลได้ การปรับขนาดอย่างชัดเจนหลังจากนั้นจะลดคุณภาพลง

ฉันใช้เทคนิคนี้กับโลโก้เสมอเพื่อให้สามารถควบคุมขนาดได้อย่างแม่นยำเช่นได้รับพื้นฐานขององค์ประกอบข้อความของโลโก้ในขอบเขตพิกเซล (รูปแบบของคำใบ้)


0

นอกเหนือจากเรื่องนี้ที่ฉันพบว่าน่าสนใจสำหรับนักออกแบบแอพมือถือคือสคริปต์ที่สร้างสินทรัพย์เรตินาสำหรับ iOS และ Android ใน 1 คลิก

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.