เวิร์กโฟลว์ที่ดีที่สุดสำหรับการออกแบบไอคอน: เริ่มใหญ่หรือเล็กเริ่ม?

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

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

สำหรับ OS X ขนาดไอคอนของแอปมาตรฐานคือ:

• 16 × 16, 32 × 32, 128 × 128, 256 × 256, 512 × 512 และ 1024 × 1024

สำหรับ Windows 7 ขนาดไอคอนของแอปมาตรฐานคือ:

• 16x16, 32x32, 48x48, 64x64 และ 256x256

สำหรับ iOS ขนาดไอคอนของแอปมาตรฐานคือ:

• 29x29, 48x48, 57x57, 58x58, 72x72, 96x96, 114x114, 144x144, 512x512 และ 1024x1024

สำหรับ Android ขนาดไอคอนของแอปมาตรฐานคือ:

• 36x36, 48x48, 72x72, 96x96 และ 512x512

สำหรับ iOS และ Android ขนาดของไอคอนนั้นเล็กกว่าปกติและเครื่องชั่งก็ไม่เกี่ยวข้องเช่นกันดังนั้นความฉลาดของตารางการออกแบบจึงมีความสำคัญน้อยลงเพราะคุณมีแนวโน้มที่จะหาพิกัดที่มีขอบเขตของพิกเซลหลายขนาด

วิธีที่ 1: ลดขนาดลง

1. ออกแบบไอคอนที่มีขนาดใหญ่ที่สุด (มักเป็น 1024 × 1024) โดยใช้เวกเตอร์และเอฟเฟกต์ที่สร้างขึ้นเช่นสไตล์เลเยอร์

2. ทำซ้ำและลดขนาดเอกสารลงเพื่อสร้างขนาดที่เล็กลง

3. ทำการปรับแต่งใด ๆ ที่จำเป็นและบันทึกภาพสุดท้าย

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

วิธีที่ 2: ขยายขนาด

1. ออกแบบไอคอนที่เล็กที่สุดหรือหนึ่งในขนาดที่เล็กที่สุด (มักเป็น 32 × 32 หรือ 64 × 64) โดยใช้เวกเตอร์และเอฟเฟกต์ที่สร้างขึ้นเช่นสไตล์เลเยอร์ โดยทั่วไปจะมีรายละเอียดไม่เพียงพอใน 16 × 16 เพื่อใช้เป็นจุดเริ่มต้น

2. ทำสำเนาและปรับขนาดเอกสารขึ้นเพื่อสร้างขนาดที่ใหญ่ขึ้นและลดลงสำหรับขนาดที่เล็ก

3. ทำการปรับแต่งใด ๆ ที่จำเป็นและบันทึกภาพสุดท้าย

สิ่งนี้มีแนวโน้มที่จะนำไปสู่ไอคอนที่เรียบง่ายโดยมีรายละเอียดไม่มากดังนั้นฉันจึงไม่ชอบทำงานเช่นนี้

วิธีที่ 3: ปรับมาตราส่วนขึ้นและลง

1. สร้างการออกแบบที่หยาบในขนาดที่เล็กกว่า (มักเป็น 32 × 32 หรือ 64 × 64) โดยใช้เวกเตอร์และเอฟเฟกต์ที่สร้างขึ้นเช่นสไตล์เลเยอร์

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

3. ทำซ้ำและปรับขนาดเอกสารให้เล็กลงทุกขนาด

4. ทำการปรับแต่งใด ๆ ที่จำเป็นและบันทึกภาพสุดท้าย

นี่น่าจะเป็นวิธีที่ดีที่สุดด้วยข้อดีข้อเสียของวิธีอื่น ๆ เป็นจุดที่เกี่ยวข้องเล็กน้อยมันก็หมายความว่าฉันมักจะออกแบบไอคอน iOS ที่ 912 × 912 เพราะนั่นเป็น 16 เท่าของขนาดไอคอนที่ไม่ใช่ Retina ของ iPhone ที่ 57 × 57

มีวิธีที่ดีกว่าสำหรับการออกแบบไอคอนที่ต้องส่งหลายขนาดหรือไม่?

เป้าหมายคือเพื่อให้ได้ผลลัพธ์ที่ดีที่สุดเท่าที่จะทำได้โดยใช้ความพยายามน้อยที่สุด

การแก้ไขสมมติฐานของคุณเล็กน้อย: ในขณะที่ Windows และ Mac ใช้หลายรายการที่ 16 แต่พวกเขาไม่ได้ขยายในอัตราเดียวกัน Vista / 7 ขนาดมาตรฐาน 16 ² 32 ² 48 ² 256 2 OS X คือ 16 ² , 32 ² , 128 ² , 512 ² (+ เวอร์ชัน HiDPI) หากต้องการเพิ่มความซับซ้อนให้มากขึ้นระดับการซูมเริ่มต้นของ Windows Vista / 7 จะเท่ากับ 16 ² , 48 ² , 96 ² , 256 ²และจะขยายเพิ่มขึ้นอย่างมีความสุขเพียง 2px สิ่งนี้ไม่ได้สร้างความแตกต่างอย่างมากให้กับเวิร์กโฟลว์ของคุณยกเว้นว่าจะขัดขวางความต้องการที่เกี่ยวข้องกับกริดพิกเซลที่เฉพาะเจาะจงในทุกระดับการซูม

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

ขนาดที่ฉันเริ่มต้นขึ้นอยู่กับแพลตฟอร์ม ถ้าออกแบบสำหรับ Windows ฉันจะเริ่มต้นที่ 48x48 (ฉันไม่มีพื้นฐานทางวิทยาศาสตร์ใด ๆ สำหรับเรื่องนี้ แต่ระดับการซูมเริ่มต้นของ Windows 7 คือ "ปานกลาง" ซึ่งเป็น 48x48 ไอคอน Vista, OS X, iPhone, iPad และ Android ก็ใกล้เคียงกับขนาดนี้มากจึงสะดวกและ สะดวกสบาย.)

ไอคอนที่เสร็จสมบูรณ์แล้วจะทำที่ขนาดนี้และเป็นการอ้างอิงสำหรับไอคอนอื่น ๆ ในตระกูล หากทำแอปบนเดสก์ท็อปฉันจะสร้างเวอร์ชันอื่นที่ 16x, 96x และ 256x เพื่อให้ตรงกับระดับเริ่มต้นของ Windows (ยกเว้นสำหรับ Mac โดยธรรมชาติ) โดยปกติแล้ว 96x จะคล้ายกับ 48x มาก

เวอร์ชั่น 256x จะเป็นการสร้างใหม่ทั้งหมด รายละเอียดเพิ่มเติมมากขึ้น (แม้ว่าจะเป็นสิ่งเล็ก ๆ เช่นองค์ประกอบพื้นหลังพื้นผิว) รายละเอียดทั้งหมดที่ฉันไม่พอดีในรุ่นที่เล็กกว่านั้นจะถูกเพิ่มเข้ามา หากมีใครโทรไปที่ไอคอนขนาดยักษ์พวกเขาน่าจะพอใจกับสิ่งที่พวกเขาเห็น

เวอร์ชัน 16x เป็นสิ่งที่สร้างใหม่ รายละเอียดน้อยมาก ระบุโลโก้หรือยึดถือง่ายมากด้วยจานสีเดียวกับรุ่นที่ใหญ่กว่า ขนาดนี้ฉันไม่พยายามทำให้อะไรสวยงาม - เป็นที่จดจำได้ทันที

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

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

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

เวิร์กโฟลว์ของฉันจึงมีลักษณะดังนี้: 1. ฉันสร้างเลย์เอาต์ในสเกลที่เล็กที่สุดใน Photoshop และสร้างไอคอนใน Illustrator ต่อเนื่องเพราะภาพเวกเตอร์ไม่มีปัญหากับการเพิ่มขนาด 2. เมื่อฉันสร้างไอคอน / วัตถุแต่ละรายการ ฯลฯ ฉันสร้างรุ่นที่ปรับขนาดได้ทั้งหมดในเวลาเดียวกัน (เมื่อฉันตัดสินใจว่ามันดูดีในการจัดวางของหลักสูตร) ​​และมอบ pngs สุดท้ายให้กับโปรแกรมเมอร์

ฉันต้องทราบว่าฉันเริ่มต้นด้วย iOS ก่อน