ใช้ดอกไม้ไฟเพื่อสร้างรายละเอียดที่สวยงามบนไอคอน

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

มีสองประเด็นหลักที่ควรทราบเมื่อใช้ดอกไม้ไฟ (ต่อไปนี้จะเรียกว่า FW) สำหรับการออกแบบไอคอน:

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

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

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

ขั้นตอนที่ 01

ตัดไอคอนที่คุณต้องการคัดลอกเพื่อใช้อ้างอิงและล็อคเลเยอร์ แผงเส้นทางของ FW ของฉันที่นี่แยกมาจาก Fireworks CS4 แต่ไม่มีผลกระทบต่อการดำเนินการในภายหลัง เนื่องจากฉันใช้ฟังก์ชันทั้งหมดที่รวมอยู่ใน CS3

ขั้นตอนที่ 02

ใช้เครื่องมือสี่เหลี่ยมผืนผ้าโค้งมนเพื่อวาดรูปสี่เหลี่ยมผืนผ้าโค้งมนคล้ายกับภาพตัวอย่าง ใช้จุดควบคุมมุมโค้งมนสี่จุดเพื่อปรับรัศมีของมุมโค้งมน จากนั้นกด Ctrl+Shift+G เพื่อแยกรูปร่าง

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

เราไม่สามารถใช้ Stroke เพื่อเพิ่มเส้นขอบด้านนอกให้กับสี่เหลี่ยมผืนผ้าได้ เนื่องจากเส้นขอบเสมือนจะฆ่าคุณ หากสี่เหลี่ยมผืนผ้าโค้งมนที่คุณวาดด้วยเครื่องมือสี่เหลี่ยมผืนผ้าโค้งมนมีขอบเสมือนที่ไม่ใช่เส้นขีด ให้กระจายโหนด เลือกเส้นทางด้วยเครื่องมือลูกศรสีดำ แล้วคลิกจุดกลมเป็นพิกเซลในแผงเส้นทางเพื่อส่งคืนโหนดทั้งหมดของเส้นทาง . วางตำแหน่งไว้ที่จุดตัดพิกเซล (คุณสามารถใช้เครื่องมือลูกศรสีขาวเพื่อเลือกโหนดสำหรับการกลับบ้านแต่ละครั้ง)

ขั้นตอนที่ 03

คัดลอกสี่เหลี่ยมโค้งมนขนาดใหญ่แล้ววางไว้บนเลเยอร์ด้านบน ใช้ลูกศรสีขาวและปุ่ม Shift+ลูกศรเพื่อให้ได้สามเหลี่ยมกลับหัว จากนั้นจึงคัดลอกมัน ตั้งค่าขนนก 1px

ขั้นตอนที่ 04

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

ขั้นตอนที่ 05

พลิกสามเหลี่ยมกลับด้านที่เติมไล่ระดับสีที่วาดไว้ก่อนหน้านี้ในแนวตั้ง ทำสำเนาและวางไว้ ความสัมพันธ์ของตำแหน่งดังแสดงในภาพด้านล่าง สามเหลี่ยมกลับหัวทั้งสองรูปจะถูกคั่นด้วยขนาดมากกว่า 1px จากบนลงล่างเล็กน้อย คุณสามารถใช้เครื่องมือลูกศรสีขาวเพื่อเลือกสี่โหนดเหนือสามเหลี่ยมกลับหัวสีน้ำตาลเข้ม แล้วลากเมาส์ด้วยเส้นเสริมเพื่อเลื่อนโหนดขึ้นไปด้านบน 0.3~0.5 พิกเซล ซึ่งจะทำให้สีน้ำตาลเข้มดูพร่ามัวน้อยลงก่อน (จากนั้น ยกเลิกแนวคิดในการใช้ Stroke สำหรับเส้นขอบโดยเร็วที่สุด นี่ไม่ใช่ Photoshop)

ขั้นตอนที่ 06

โปรดทราบว่ามีไฮไลต์อยู่เหนือไอคอนในภาพตัวอย่าง และไม่ใช่ไฮไลต์แบบกระจายพิกเซลเดียวทั่วไป (ไฮไลต์ 1px เหนือไฮไลต์ประมาณสองพิกเซลจะสว่างกว่า 1px ด้านล่าง) ดังนั้นคุณจึงสามารถพิจารณาใช้ หม้อน้ำทรงรีเช่น Ellipse การเติมทำให้เกิดผลเช่นนี้

เราเลือกและคัดลอกสี่เหลี่ยมมุมมนด้านล่างสองครั้ง หลังจากย้ายตำแหน่ง เราจะได้สี่เหลี่ยมมุมมนสองอันแยกจากกัน 2px เราใช้วิธีลบเส้นทางสี่เหลี่ยมทั้งสองเส้นเพื่อให้ได้เส้นทางใหม่และเติมด้วยวงรี (สีขาว 0 -100 ความโปร่งใส) และสุดท้ายก็ตั้งค่าโหมดโอเวอร์เลย์ของเส้นทางไฮไลต์นี้เป็นโอเวอร์เลย์

ขั้นตอนที่ 07

เพิ่มไฮไลต์ 1px ที่ด้านล่าง

ขั้นตอนที่ 08

ผลลัพธ์ที่ได้ตอนนี้เรามาพักดื่มชากันดีกว่า

ขั้นตอนที่ 09

การเปลี่ยนพื้นหลังเป็นสีขาวชั่วคราว เราจะเห็นได้ว่าเนื่องจากขนนกที่ใช้ในสามเหลี่ยมกลับหัวก่อนหน้านี้ พิกเซลบางพิกเซลจึงล้นเล็กน้อยจากทั้งสองด้านของซองจดหมาย

มีสองวิธีในการประมวลผลพิกเซลเหล่านี้ วิธีแรกคือ Flatten as Bitmap และอีกวิธีหนึ่งคือการปิดบังในขณะที่ยังคงรักษาเส้นทางไว้ เนื่องจากวิธีนี้จะคงเส้นทางไว้และสามารถแก้ไขได้ในภายหลังหากจำเป็น ด้านล่าง:

ขั้นตอนที่ 10

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

ขั้นตอนที่ 11

จากนั้นให้เพิ่มไฮไลต์แบบพิกเซลเดียวที่สามเหลี่ยมด้านบนและด้านล่างของซองจดหมาย เนื่องจากการดำเนินการลบเส้นทาง (Punch Path สามารถพบได้ในเมนู Modify – Combine Paths) ได้มีการพูดคุยกันซ้ำแล้วซ้ำเล่า ฉันจะไม่อธิบาย ที่นี่ ดังที่แสดงด้านล่าง:

ขั้นตอนที่ 12

ในทำนองเดียวกัน ให้เพิ่มไฮไลท์ให้กับสามเหลี่ยมด้านล่าง

ขั้นตอนที่ 13

เนื่องจากพื้นหลังมีสีเข้มกว่า เราจึงสามารถพิจารณาเพิ่มความเรืองแสงได้ ที่นี่เราไม่ได้ใช้การฉายภาพหรือฟิลเตอร์เรืองแสงของ FW แต่ใช้ Path เพราะเหตุใดจึงควบคุมได้ง่ายกว่า เราสามารถสร้างสี่เหลี่ยมผืนผ้าโค้งมนใหม่ที่มีขนาดใหญ่ขึ้น 1px ที่ด้านบน ล่าง ซ้ายและขวากว่าสี่เหลี่ยมผืนผ้าโค้งมนด้านล่างของซองจดหมาย โดยไม่ต้องขน และด้วยความโปร่งใส 30

ขั้นตอนที่ 14

จากนั้นเพิ่มไฮไลต์ 1px ด้านล่าง

ขั้นตอนที่ 15

ณ จุดนี้ ไอคอนจะเสร็จสมบูรณ์โดยพื้นฐานแล้ว และตอนนี้เราเข้าสู่ขั้นตอนการขัดเกลา เราเลือกเลเยอร์ทั้งหมดและ "คัดลอก" จากนั้นกด Ctrl+Alt +Shift+Z อย่างรวดเร็วเพื่อทำให้เลเยอร์เรียบเป็นบิตแมป จากนั้นตั้งค่าโหมดโอเวอร์เลย์เป็นโอเวอร์เลย์และความโปร่งใสเป็น 60 เพื่อให้เรามองเห็นความอิ่มตัวของสี ไอคอน ได้รับการปรับปรุงระดับและคอนทราสต์แล้ว นี่เป็นวิธีที่ฉันชอบที่สุดสำหรับการขัดเงาอย่างรวดเร็ว แต่บางครั้งคุณต้องใช้ฟิลเตอร์ในตัวของ FW ด้วยตนเองเพื่อปรับพารามิเตอร์ เช่น เส้นโค้ง คอนทราสต์ และความอิ่มตัว

เสร็จ

เอฟเฟกต์สุดท้าย (สามเหลี่ยมใต้ซองจดหมายใช้ Path เป็นตัวฉายภาพ)