สารสกัดคืออะไร
ใหม่ สารสกัดจากสินทรัพย์ คุณลักษณะของ 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 ให้เป็นกลุ่ม นี่เป็นสิ่งที่จำเป็นเนื่องจากงานนี้ต้องดึงสิ่งเหล่านี้ทั้งหมดออกจากระบบเพื่อให้สามารถเพิ่มรูปแบบเว็บได้อย่างรวดเร็วซึ่งปรับให้เข้ากับความละเอียดและขนาดหน้าจอที่แตกต่างกัน
สองวิธีในการดึงข้อมูลสินทรัพย์
ซึ่งแตกต่างจาก Generate ซึ่งยังแยกวัตถุออกจากการเพิ่มนามสกุลกราฟิกให้กับชื่อชั้น, สารสกัดจากสินทรัพย์ ใช้อินเทอร์เฟซที่สามารถเข้าถึงได้โดย คลิกขวา เลเยอร์หรือเลือกเลเยอร์และเลือกไฟล์> สารสกัดจากสินทรัพย์.
04 จาก 08อินเทอร์เฟซ Extract Assets
กล่องโต้ตอบ Extract Assets มีค่อนข้างใช้งานง่าย คุณจะเห็นเลเยอร์หรือการเลือกที่จะแยกออก ด้านบนคุณจะแสดงขนาดไฟล์และด้านล่างคือการควบคุมที่ช่วยให้คุณสามารถซูมเข้าและออกจากวัตถุได้ ด้านขวาของกล่องโต้ตอบคือที่ซึ่งเวทมนต์เกิดขึ้น ปุ่มทั้งสี่ปุ่มที่ด้านบนช่วยให้คุณสามารถเลือกความละเอียด / ขนาดของวัตถุได้ แถบถัดไปจะแสดงเลเยอร์ที่เลือกและคลิกที่ + sign ช่วยให้คุณสามารถส่งออกเลเยอร์ที่เลือกไว้ในรูปแบบอื่นได้เช่นกัน ถังขยะ Ca n ลบเลเยอร์ออกจากคิว ในแถบด้านล่างถัดไปคุณสามารถเลือกประเภทไฟล์และคุณสามารถปรับความกว้างและความสูงของภาพเอาต์พุตได้
05 จาก 08การดึงภาพ SVG
Photoshop ไม่สามารถจัดการกับภาพ svg ทั้งหมดได้ดีและเบราว์เซอร์และอุปกรณ์ต่างๆไม่สามารถแสดงภาพ Illustrator ได้ ซึ่งส่งผลให้มีการเพิ่มขึ้นของไฟล์ SVG ที่ใช้สำหรับงานศิลปะเวกเตอร์เช่นโลโก้ Illustrator ที่แสดงไว้ที่นี่ เป็นพาหะความละเอียดของพวกเขาคือความหมายอุปกรณ์ที่เป็นอิสระที่พวกเขาสามารถปรับขนาดได้โดยไม่สูญเสียรายละเอียดหรือภาพ ในการแปลง Illustrator Smart Object เป็น SVG ให้เลือก SVG จากป๊อปอัพและคลิก สารสกัด.
06 จาก 08กระบวนการแยกแยะสินทรัพย์
มีสองสิ่งที่จะเกิดขึ้นเมื่อคุณคลิกปุ่ม Extract คุณจะได้รับคำเตือนก่อนว่าชื่อไฟล์อาจมีการเปลี่ยนแปลง นี่ไม่ใช่ปัญหาใหญ่ จากนั้นระบบจะสร้างโฟลเดอร์ใหม่ขึ้นเพื่อเก็บเนื้อหา เมื่อดำเนินการเสร็จสิ้นโฟลเดอร์ที่วางอยู่ในตำแหน่งเดียวกับไฟล์. psd ต้นฉบับจะเปิดและแสดงเนื้อหาใหม่
07 จาก 08ปุ่มการตั้งค่าเป็นเพื่อนที่ดีที่สุดของคุณใหม่
คลิกปุ่ม การตั้งค่า ปุ่มเปิด a กล่องโต้ตอบการตั้งค่า ที่เป็นประโยชน์อย่างจริงจัง การตั้งค่าด้านซ้ายเป็นปัจจัยการปรับขนาด สิ่งที่พวกเขาทำคือสร้างสำเนาต่างๆของภาพที่นักพัฒนาซอฟต์แวร์จะใช้ในการสืบค้นสื่อเพื่อกำหนดเป้าหมายความละเอียดหน้าจอของอุปกรณ์เฉพาะ ตัวอย่างเช่นรุ่น 3x จะถูกกำหนดเป้าหมายไปที่จอแสดงผล Retina ของ iPhone หรือ iPad ในขณะที่ปัจจัย 1.25 จะถูกชี้ไปที่อุปกรณ์แอนดรอยด์ ต่อท้ายจะถูกเพิ่มลงในตอนท้ายของชื่อไฟล์เพื่อให้นักพัฒนาซอฟต์แวร์สามารถระบุภาพที่จะใช้ในการสืบค้นสื่อได้อย่างง่ายดาย เมื่อดำเนินการเสร็จให้คลิกที่ ตกลง และการเลือกของคุณจะสว่างขึ้นในพื้นที่ Extract Assets ในกล่องโต้ตอบ นอกจากนี้คุณยังสามารถเข้าถึงการตั้งค่าโดยคลิกไอคอนรูปเฟืองในพื้นที่ Extract Assets ทางด้านขวาของอินเทอร์เฟซ
08 ใน 08เสร็จสิ้น
เมื่อคุณคลิกที่ปุ่ม Extract เนื้อหาทั้งหมดจะถูกสร้างขึ้นและเพิ่มลงในโฟลเดอร์ ณ จุดนี้สิ่งที่คุณต้องทำคือการส่งสำเนาของโฟลเดอร์นักพัฒนาซอฟต์แวร์ไปยังโครงการถัดไปของคุณ
