01 จาก 08
สารสกัดคืออะไร
คุณสมบัติใหม่ของ Extract Assassines ของ Photoshop CC 2014 ทำให้เกิดการเผาผลาญพลังงานในขั้นตอนการสร้างภาพที่น่าเบื่อสำหรับการออกแบบเว็บแบบโต้ตอบ (Responsive Web Design: RWD) ลองมาดูวิธีการใช้คำสั่ง Extract Assets เพื่อลดหน้าเว็บลงในเนื้อหาพร้อมสำหรับการประกอบพร้อมกันภายในสองสามนาที
เริ่มต้นด้วยคำถามที่ชัดเจน: What is Extract Assets?
ในแง่ง่ายๆ Extract Assets เป็นคุณสมบัติใหม่ใน Photoshop ที่มีคุณสมบัติ Generator ของ Photoshop ด้วยอินเทอร์เฟซเพื่อช่วยในการสร้างไฟล์ภาพสำหรับการออกแบบเว็บและหน้าจอจากไฟล์ Photoshop ของคุณโดยอัตโนมัติ คำสั่ง Extract Assets ช่วยให้คุณสามารถกำหนดเลเยอร์หรือเลเยอร์ที่คุณต้องการสร้างเนื้อหาขนาดของไฟล์รูปแบบไฟล์และตำแหน่งที่บันทึกไว้ในดิสก์ คุณลักษณะนี้ไม่ได้มีไว้สำหรับข้อความเว้นแต่ความตั้งใจคือการทำให้ข้อความเป็นภาพบิตแมปซึ่งจริงๆแล้วไม่ใช่ความคิดที่ดี
มาเริ่มกันเลย.
02 จาก 08
เปิดไฟล์ Photoshop .psd
ตัวอย่างที่ฉันใช้มีสมาร์ทออบเจ็กต์จาก Illustrator ข้อความบางส่วนหน่วยฮีโร่ที่มีข้อความภาพและปุ่มและชุดภาพกลางแจ้งที่เสริมสร้างชุดรูปแบบของไซต์ กุญแจนี่คือการจัด Layers ให้เป็นกลุ่ม นี่เป็นสิ่งที่จำเป็นเนื่องจากงานนี้ต้องดึงสิ่งเหล่านี้ทั้งหมดออกจากระบบเพื่อให้สามารถเพิ่มรูปแบบเว็บได้อย่างรวดเร็วซึ่งปรับให้เข้ากับความละเอียดและขนาดหน้าจอที่แตกต่างกัน
03 จาก 08
สองวิธีในการดึงข้อมูลสินทรัพย์
Generate ซึ่งแตกต่างจากวัตถุอื่น ๆ นอกจากนี้ยังมีการสกัดวัตถุโดยการเพิ่มส่วนขยายกราฟิกให้กับชื่อชั้น Extract Assets ใช้อินเทอร์เฟซที่สามารถเข้าถึงได้ด้วย การคลิกขวา ที่เลเยอร์หรือเลือกเลเยอร์และเลือก ไฟล์> Extract Assets
04 จาก 08
อินเทอร์เฟซ Extract Assets
กล่องโต้ตอบ Extract Assets มีค่อนข้างใช้งานง่าย คุณจะเห็นเลเยอร์หรือการเลือกที่จะแยกออก ด้านบนคุณจะแสดงขนาดไฟล์และด้านล่างคือการควบคุมที่ช่วยให้คุณสามารถซูมเข้าและออกจากวัตถุได้ ด้านขวาของกล่องโต้ตอบคือที่ซึ่งเวทมนต์เกิดขึ้น ปุ่มทั้งสี่ปุ่มที่ด้านบนช่วยให้คุณสามารถเลือกความละเอียด / ขนาดของวัตถุได้ แถบถัดไปจะแสดงเลเยอร์ที่เลือกและคลิกเครื่องหมาย + เพื่อ ให้คุณสามารถส่งออกเลเยอร์ที่เลือกในรูปแบบอื่นได้เช่นกัน ถังขยะ Ca n ลบเลเยอร์ออกจากคิว ในแถบด้านล่างถัดไปคุณสามารถเลือกประเภทไฟล์และคุณสามารถปรับความกว้างและความสูงของภาพเอาต์พุตได้
05 จาก 08
การดึงภาพ SVG
Photoshop ไม่สามารถจัดการภาพ SVG ได้ทั้งหมดและเบราว์เซอร์และอุปกรณ์ไม่สามารถแสดงภาพ Illustrator ได้ ซึ่งส่งผลให้มีการเพิ่มขึ้นของไฟล์ SVG ที่ใช้สำหรับงานศิลปะเวกเตอร์เช่นโลโก้ Illustrator ที่แสดงไว้ที่นี่ เป็นพาหะความละเอียดของพวกเขาคือความหมายอุปกรณ์ที่เป็นอิสระที่พวกเขาสามารถปรับขนาดได้โดยไม่สูญเสียรายละเอียดหรือภาพ หากต้องการแปลง Illustrator Smart Object เป็น SVG ให้เลือก SVG จากป๊อปอัปและคลิก Extract
06 จาก 08
กระบวนการแยกแยะสินทรัพย์
มีสองสิ่งที่จะเกิดขึ้นเมื่อคุณคลิกปุ่ม Extract คุณจะได้รับคำเตือนก่อนว่าชื่อไฟล์อาจมีการเปลี่ยนแปลง นี่ไม่ใช่ปัญหาใหญ่ จากนั้นระบบจะสร้างโฟลเดอร์ใหม่ขึ้นเพื่อเก็บเนื้อหา เมื่อดำเนินการเสร็จสิ้นโฟลเดอร์ที่วางอยู่ในตำแหน่งเดียวกับไฟล์. psd ต้นฉบับจะเปิดและแสดงเนื้อหาใหม่
07 จาก 08
ปุ่มการตั้งค่าเป็นเพื่อนที่ดีที่สุดของคุณใหม่
คลิกที่ปุ่ม การตั้งค่าจะ เปิด กล่องโต้ตอบการตั้งค่า ซึ่งเป็นประโยชน์อย่างจริงจัง การตั้งค่าด้านซ้ายเป็นปัจจัยการปรับขนาด สิ่งที่พวกเขาทำคือสร้างสำเนาต่างๆของภาพที่นักพัฒนาซอฟต์แวร์จะใช้ในการ สืบค้นสื่อ เพื่อกำหนดเป้าหมายความละเอียดหน้าจอของอุปกรณ์เฉพาะ ตัวอย่างเช่นรุ่น 3x จะถูกกำหนดเป้าหมายไปที่จอแสดงผล Retina ของ iPhone หรือ iPad ในขณะที่ปัจจัย 1.25 จะถูกชี้ไปที่อุปกรณ์แอนดรอยด์ ต่อท้ายจะถูกเพิ่มลงในตอนท้ายของชื่อไฟล์เพื่อให้นักพัฒนาซอฟต์แวร์สามารถระบุภาพที่จะใช้ในการสืบค้นสื่อได้อย่างง่ายดาย เมื่อดำเนินการเสร็จแล้วคลิกปุ่ม OK และการเลือกของคุณจะสว่างขึ้นในพื้นที่ Extract Assets ในกล่องโต้ตอบ นอกจากนี้คุณยังสามารถเข้าถึงการตั้งค่าโดยคลิกไอคอนรูปเฟืองในพื้นที่ Extract Assets ทางด้านขวาของอินเทอร์เฟซ
08 ใน 08
เสร็จสิ้น
เมื่อคุณคลิกที่ปุ่ม Extract เนื้อหาทั้งหมดจะถูกสร้างขึ้นและเพิ่มลงในโฟลเดอร์ ณ จุดนี้สิ่งที่คุณต้องทำคือการส่งสำเนาของโฟลเดอร์นักพัฒนาซอฟต์แวร์ไปยังโครงการถัดไปของคุณ