สอนเทคนิคน่ารู้

ซีรีย์ Photoshop ชุด GoPro ทิปที่ 2 – รู้จักใช้ Solid Color layer

0

featured-tip-v2

ผมคนหนึ่งที่ไม่ค่อยเห็นประโยชน์ของ Solid Color Layer เท่าไรนัก จนมาทำงานออกแบบ UI สำหรับมือถือ (หรืออีกหลายๆ งาน) ที่เราไม่รู้ว่าข้อมูลจะมีความยาวสุดขนาดไหน ทำให้ต้องคอยเพิ่ม/ลด ความสูงของหน้าอยู่บ่อยครั้ง ปัญหาที่เจอก็คือ สีพื้นหลังที่ต้องคอยมาเทให้เต็มหน้าทุกครั้งที่เพิ่มขนาดความสูงของหน้า อาจยังไม่เห็นภาพปัญหา งั้นเรามาดูกรณีตัวอย่างกันครับ

tip-v2-01

พื้นงานที่มีการเติมสีพื้นหลังด้วยเลเยอร์ธรรมดา

สมมุติผมต้องการสร้างงานขนาด 500×500 px และต้องการพื้นหลังเป็นสีอ่อนๆ ผมจึงสร้างเลเยอร์เพิ่มและเทสีให้เต็มพื้นที่

tip-v2-02

เพิ่มขนาดพื้นงานด้วยฟังก์ชัน Canvas Size 

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

tip-v2-03

สี Foreground ถูกเติมเข้าไปในพื้นที่ส่วนขยาย

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

แน่นอนครับ ทางแก้ไขก็คือ เราจะใช้ประโยชน์จากเลเยอร์ Solid Color กัน

ใช้ Solid Color Layer เติมสีพื้นหลัง

tip-v2-04

วิธีเปลี่ยนล็อคเลเยอร์ให้กลายเป็นเลเยอร์ธรรมดา

เราจะเริ่มจากเปิดไฟล์ขึ้นมาใหม่เลยนะครับ เราจะเห็นว่ามีเลเยอร์ background ถูกสร้างไว้ก่อนแล้ว เราจะต้องแปลงสภาพเลเยอร์นี้ (ถูกล็อคไม่ให้เคลื่อนย้ายและลบ) ให้กลายเป็นเลเยอร์ธรรมดาเสียก่อน ด้วยการเอาเมาส์ไปวางบนไอคอนแม่กุญแจ > กด Alt + Double คลิกซ้าย เลเยอร์นี้ก็จะกลายเป็นเลเยอร์สามัญชนแล้ว

tip-v2-05

ตำแหน่งเพิ่ม Adjustment Layer

 จากนั้นก็เลือกที่ไอคอน Adjustment Layer ตรงที่ลูกศรสีแดงชี้

tip-v2-06

ตัวเลือก Adjustment Layer 

เลือกเมนู solid color ซึ่งอยู่ด้านบนสุด

tip-v2-07

หน้าต่าง Color Picker หลังเลือก Solid Color… 

เลือกจิ้มสีพื้นหลังเพื่อกำหนดให้เป็น solid color ของเลเยอร์นี้

tip-v2-08

ลบเลเยอร์ที่ไม่ต้องการทิ้ง 

เราก็จะได้เลเยอร์ solid color มาใช้งานแล้ว  จากนั้นก็ลบเลเยอร์ที่พึ่งแปลงสภาพทิ้งไปซะ (อันที่จริงไม่ต้องแปลงสภาพเลเยอร์ก็ได้ แต่เพราะมันไม่ได้ใช้งานอีกแล้ว ผมจึงแนะนำให้ลบทิ้งไปดีกว่า)

tip-v2-09

 

ทดลองเพิ่มขนาดความสูงของพื้นงานดู และ Solid Color Layer จะเติมสีให้เต็มขนาดอยู่เสมอ

คราวนี้ผมลองใช้ฟังก์ชัน Canvas size อีกครั้ง ลองสังเกตว่าคราวนี้ช่องเลือกสีจะไม่สามารถกำหนดได้แล้ว (Canvas extension color) เพราะสีมันจะอิงตามเลเยอร์ solid color แทนแล้ว

ดังนั้นไม่ว่าเราจะเพิ่ม/ลด ขนาดพื้นงาน ก็ไม่ต้องกังวลเรื่องสีพื้นหลังอีกต่อไป เพราะเลเยอร์ solid color จะเติมสีให้เต็มพื้นงานอยู่ตลอดเวลา ของดีที่ไม่ค่อยมีใครใช้จริงๆ ว่าไหมครับ ^^

 

uiblogaziner
สวัสดีครับ ผมชื่อฟริ้นครับ รักและชอบงาน Graphic Design เอามากๆ เลย พอได้เริ่มทำงานเป็น UI Designer แล้ว ยิ่งสนุกขึ้นอีกแยะ งานออกแบบที่ใช้ความรู้สึกและเหตุผลเป็นอะไรที่สุดยอดจริงๆ ครับ

ซีรีย์ Photoshop ชุด GoPro ทิปที่ 1 – เลือกเลเยอร์แบบจิ้มปุ๊ปใช่ปั๊ป

Previous article

รีวิว app Rush Bike ตอนจบ

Next article

You may also like

Comments

Leave a reply

Your email address will not be published. Required fields are marked *