การจัดเตรียมรูปภาพสำหรับอุปกรณ์เคลื่อนที่

การถ่ายภาพสำหรับโทรศัพท์มือถือไม่ใช่สิ่งที่ดูเหมือนว่าไม่ได้

เป็นที่นิยมมากขึ้นสำหรับ ผู้เชี่ยวชาญด้านกราฟฟิค ที่ไม่เพียง แต่มีผลงานของพวกเขาปรากฏในรูปแบบการพิมพ์ แต่ยังรวมถึงเว็บและอุปกรณ์ต่างๆเช่น iPhone, iPad, อุปกรณ์แอนดรอยด์และแท็บเล็ตแอนดรอยด์ บนพื้นผิวนี้อาจเห็นได้ว่าเป็น "สิ่งดี" ในขณะที่สื่อที่เราใช้ในการทำงานจะขยายไปสู่หน้าจอดิจิตอล ข้อเสียคือจำนวนหน้าจอที่ชัดเจนและจำนวนความละเอียดหน้าจอที่สับสน ไม่ใช่เรื่องแปลกที่จะได้ยินผู้เชี่ยวชาญที่เก่งมาก ๆ ๆ ๆ ๆ ๆ ๆ ๆ ๆ ๆ ๆ ๆ ๆ ๆ ๆ ๆ ๆ ๆ ๆ ๆ ๆ ๆ ๆ ๆ ๆ ๆ ๆ ๆ ๆ ๆ ๆ ที่เกิดขึ้นเมื่อความละเอียด 300 dpi ที่อยู่ในรูป CMYK เป็นบรรทัดฐาน โอ้สำหรับวันเก่า ๆ ที่ดี!

วันเหล่านั้นสิ้นสุดลงแล้ว ขณะนี้เราต้องโต้แย้งกับความจริงที่ว่าภาพ 200 ถึง 200 อาจปรากฏขึ้นบนอุปกรณ์ชิ้นเดียว แต่ยังคงปรากฏเป็นขนาดไตรมาสตามขนาดอื่นและอีกสามเท่าของอีกชิ้นหนึ่ง ทั้งหมดนี้ลงมาสู่ "Resolution Arms Race" ที่กำลังดำเนินอยู่โดยผู้ผลิตอุปกรณ์เนื่องจากพยายามทำให้พิกเซลจำนวนมากเข้าสู่หน้าจอมากกว่าคู่แข่งของพวกเขา

นี่เป็นสิ่งที่เราจะเรียกว่า "The Rise Of The Suffixes" ส่วนต่อท้ายคือสิ่งเหล่านั้น - @ 2x, @ 3x - ยึดติดกับชื่อของรูปภาพ พวกเขาเป็นหลักเช่นใส่ภาพที่ถูกต้องในตำแหน่งที่ถูกต้องบนอุปกรณ์ที่เหมาะสม จากนั้นก็จะดียิ่งขึ้น

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

จากนั้นก็จะดียิ่งขึ้น

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

บทแนะนำนี้จะย้ายไปมาระหว่าง Photoshop และ Sketch สำหรับกราฟิกและใช้ Adobe Experience Design เพื่อแสดงจุดอ่อนของแนวคิดและการใช้งานในที่สุด มาเริ่มกันเลย.

01 จาก 05

วิธีการเตรียมรูปภาพสำหรับอุปกรณ์เคลื่อนที่ใน Adobe Photoshop

ขั้นตอนแรกในกระบวนการนี้คือรู้อุปกรณ์เป้าหมายหรืออุปกรณ์ของคุณ ในกรณีนี้คุณจะกำหนดเป้าหมาย iPhone 6 ซึ่งมีพื้นที่หน้าจอ 375 พิกเซลกว้าง 667 พิกเซล การออกแบบนี้เรียกร้องให้ภาพมีความกว้างของหน้าจอ

ภาพที่จะใช้ถูกยิงภายในวิหาร Bern Minster ในเบิร์นประเทศสวิสเซอร์แลนด์ เมื่อภาพเปิดขึ้นใน Photoshop เลือก Image> Image Size เพื่อตรวจสอบขนาดของภาพและความละเอียดของภาพ เห็นได้ชัดว่าภาพที่ 3156 x 2592 มีความละเอียด 300 ppi และขนาดไฟล์ 23.4 Mb ก็จะไม่ทำงาน

ภายในกรอบโตตอบขนาดรูปภาพให ลดความละเอียดลงเปน 100 ppi ทำเช่นนี้เป็นอันดับแรกเนื่องจากมิติข้อมูลภาพจะเปลี่ยนไปด้วย ด้วยการตั้งค่าความละเอียดให้เปลี่ยนความกว้างเป็น 375 พิกเซล หากคุณตรวจสอบข้อมูลขนาดรูปภาพคุณจะสังเกตเห็นว่าภาพดังกล่าวหดลงจาก 23.4 Mb ไปเป็น 338k ที่เหมาะกับอุปกรณ์เคลื่อนที่มากขึ้น คลิกตกลง เพื่อยอมรับการเปลี่ยนแปลงและปิดกล่องโต้ตอบขนาดรูปภาพ

02 จาก 05

วิธีใช้กล่องโต้ตอบโต้ตอบ "ส่งออกเป็น ... " ใน Adobe Photoshop

เมื่อภาพพร้อมสำหรับการส่งออกแล้ว เลือก "ส่งออก> ส่งออกเป็น ... " เพื่อเปิดกล่องโต้ตอบส่งออกเป็น

กรอบโต้ตอบนี้เป็นองค์ประกอบล่าสุดของ Photoshop และแทนที่กล่องโต้ตอบ "Save for Web" ซึ่งใช้เป็นเวลาหลายปี หากคุณยังต้องการคุณสามารถค้นหาได้จากเมนูป๊อปอัปที่ส่งออก ด้วยเหตุนี้จึงเป็นที่รู้จักกันในชื่อ "Export For Web (Legacy)" หากนี่เป็นครั้งแรกที่คุณเข้าสู่กล่องโต้ตอบนี่เป็นบทสรุป:

• ขนาด: คอลัมน์นี้กำหนดขนาดเอาท์พุทของรูปภาพ ส่วนที่น่าสนใจของบริเวณนี้คือจะขยายภาพ แต่ภาพจะไม่ปรากฏเป็น "คลุมเครือ" บนอุปกรณ์เนื่องจากมีพิกเซลจำนวนมากบนหน้าจอของอุปกรณ์
• 1X: คลิกค้างไว้และคุณจะเห็นจำนวนของขนาด หมวด 1x, 2x และ 3x มีความเกี่ยวข้องกับอุปกรณ์ Hi Dpi จาก Apple และพวกเขาพร้อมกับอีกสองสามคนจะเตรียมภาพสำหรับอุปกรณ์แอนดรอยด์
• คำต่อท้าย: ทางเลือกนี้จะแสดงขนาดของคุณ แต่จะแสดงเป็น @ 2x หรือเลือกขนาด ต่อท้ายนี้จะถูกเพิ่มลงในชื่อรูปภาพ
• เครื่องหมาย +: คลิกที่นี่เพื่อเพิ่มขนาดต่างๆสำหรับเอาต์พุต ในกรณีนี้ให้คลิกสองครั้งแล้วเลือก 2x และ 3x จากเมนูป็อปอัพ ซึ่งจะครอบคลุมอุปกรณ์ iOS ทุกประเภท
• ถังขยะ: คลิกที่นี่และทางเลือกจะถูกลบออกจากผู้เล่นตัวจริง
• การตั้งค่าไฟล์: เลือกรูปแบบ - jpg, png, gif หรือ SVG - เหมาะที่สุดสำหรับภาพ หากขนาดไฟล์เป็นข้อกังวลคุณยังสามารถลดการตั้งค่าคุณภาพ
• ขนาดภาพ: คุณสามารถเปลี่ยนขนาดทางกายภาพของภาพได้
• ขนาดผ้าใบ: คุณสามารถเปลี่ยนมิติข้อมูลทางกายภาพของภาพผืนผ้าใบ
• ข้อมูลเมตา: คุณสามารถเพิ่มข้อมูลลิขสิทธิ์และข้อมูลติดต่อของคุณลงในข้อมูลเมตาของภาพได้

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

03 จาก 05

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

Sketch 3 แอพพลิเคชันที่ใช้เฉพาะ Macintosh จาก Coding ของ Bohemian ได้รับความสนใจอย่างรวดเร็วในหมู่นักออกแบบ UX และ UI เนื่องจากเน้นการออกแบบเว็บและแอ็พ ในความเป็นจริง Photoshop ในหลาย ๆ ด้านอยู่ในตำแหน่งแปลก ๆ ที่ต้องเล่น "จับภาพ" ด้วย Sketch

ในการจัดเตรียมภาพสำหรับโทรศัพท์มือถือใน Sketch ให้เลือกภาพบน artboard และ คลิกปุ่ม Make Exportable ที่ด้านล่างของแผงคุณสมบัติ ซึ่งจะเป็นการเปิดกล่องโต้ตอบการส่งออก คลิกเครื่องหมาย + เพื่อเพิ่มรุ่น 2x และ 3x และเพิ่มส่วนต่อท้ายด้วย รูปแบบที่ใช้ ได้แก่ PNG, JPG, TIF, PDF, EPS และ SVG ในกรณีนี้ให้เลือก JPG คลิกที่ปุ่มส่งออก และกำหนดเป้าหมายหรือสร้างโฟลเดอร์เพื่อเก็บรูปภาพต่างๆที่ส่งออก

04 จาก 05

ทำไมคุณต้องสร้างรุ่นสามภาพ (หรือมากกว่า) ของภาพ

ในหลาย ๆ ด้านตลาดมือถือเป็น "Wild West" ของมติและหนึ่งขนาดไม่เหมาะกับทุกอย่าง ในตัวอย่างข้างต้นจาก Adobe Experience Design ภาพจะอยู่ใน artboards iPhone 6 จำนวน 2 เครื่องและอุปกรณ์เสริมสำหรับอุปกรณ์แอนดรอยด์ แจ้งให้ทราบว่ารุ่น 1x ด้านซ้ายมีขนาดครึ่งหนึ่ง นี่เป็นวิธีการที่ภาพจะปรากฏบน iPhone 6 ด้วยหน้าจอเรติน่า รุ่น 2x เหมาะกับการใช้งานอย่างสมบูรณ์แบบและเวอร์ชั่น Android จะหมดไปจากหน้าจอ ตัวเลือกของคุณคือการปรับขนาดภาพหรือส่งออกภาพออกจาก Photoshop ในขนาดที่ต่างกัน

05 จาก 05

ทดสอบช่วงต้นทดสอบบ่อยครั้งไม่มีอะไรไว้วางใจไม่ไว้ใจใครและโดยเฉพาะอย่างยิ่งตัวคุณเอง

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

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

บรรทัดล่างคือการทำงานอย่างใกล้ชิดกับนักพัฒนาซอฟต์แวร์ของคุณและเพื่อใช้ซอฟต์แวร์ต้นแบบเพื่อแสดงเจตนาในการออกแบบของคุณ ในที่สุดแม้ว่าสินทรัพย์แบบเดียวกันเหล่านี้จะต้องพร้อมสำหรับผลิตภัณฑ์ขั้นสุดท้ายและนักพัฒนาซอฟต์แวร์ของคุณสามารถจัดการกับสิ่งที่เขาต้องการได้ดีกว่าคุณ