โพสใน portfolios*net ครั้งแรกจ้า ผิดพลาดประการใด๋ขออภัยด้วย ก๊าบบ

เนื่องด้วยช่วงนี้กลังเห่องานเว็บดีไซน์ครับ ไม่ค่อยได้จับงานภาพประกอบ หรือคาแรคเตอร์เลย วันนี้มาลองเขียน element ด้วย photoshop แบบง่ายๆ + คมๆ กันนะหนุกดีๆ

สิ่งที่เราจะมาลองเขียนเล่นๆกันก็มี ตัวหนังสือแบบนูน moon shine, แบบยุบ แล้วก็ปุ่ม button แบบเรียบๆน่ารักๆนะครับ ลุยเลย

อันดับแรกสร้างตัวหนังสือด้วย text tool อย่าลืมเช๊ค anti-aliasing method นะครับ เพราะแต่ละ font จะคมจะนิ่มนวลแตกต่างกันไป ในตัวอย่างใช้ method Sharp คับ ส่วนเรื่องสีของอักษรยังไม่ต้องสนใจครับสีอะไรก็ได้ เราจะใช้ effect จัดการทีหลัง

กดเรียก Blending Options ใน layers panel นะกั๊บ

เริ่มด้วยใส่ gradient overlay เพื่อสร้างสีใหม่ให้ตัวอักษรครับ ในที่นี้เราอยากให้มีการไล่สีด้วยเพื่อความเนียนนวล แถมยังกลับมาแก้ได้ง่ายดายเรื่อยๆ จึงต้องใช้ gradient overlay นะจ๊ะ



ปรับไล่สีจาก slide bar สะดวกเสียนี่กระไร

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

รวมทั้งส่วนที่เป็นสีเข้มของตัวหนังสือด้วยอม ฟ้านิดๆ เขียวหน่อยๆ ตั้ง blend mode เป็น normal เช่นนี้เล้ย แสงเงาเราจะใช้แบบตั้งฉากตรงๆทั้งหมดเพื่อความเรียบร้อยและสวยงาม

ใส่ inner shadow เพื่อสร้างแสงตกกระทบ เปลี่ยน blend mode เป็น screen ปรับค่า opacity ตามเหมาะสมเนื่องจากสีที่แต่ละคนเลือกมานั้น ไม่เท่ากัน จุดนี้ระวังสีไฮท์ไลท์ จะโดดเด้งจากวัตถุเกินไปด้วยต้องคุมให้ดี ปรับระยะแค่ 1px เพื่อความคม ใช้มุมตกกระทบ 90 องศา เหมียนเดิม

ใส่เงาด้วย drop shadow เปลี่ยน blending mode เป็น multiply ระยะ 1px เช่นเดิม

ปรับแต่งแก้ gradient overlay อีกที ในกรณีที่ สีสรรเกิดการโดด

เพิ่ม inner glow ด้วยสีสดๆเป็นแสงสะท้อนจากด้านล่าง สัก 1px แสงเงาจะดูสมบูรณ์ขึ้นพร้อมช่วยชู โทนสีที่เราตั้งใจจะคุมด้วย

ต่อไปเป็นส่วน ตัวหนังสือแบบเจาะยุบ เทคนิคนั้นค่อนข้างคล้ายกัน เหมือนกลับด้านจากแสงเป็นเงา เงาเป็นแสงเท่านั้น

สร้างตัวหนังสือด้วย text tool โดยไม่ต้องสนใจสี อีก เช่น เคย

คราวนี้จะใช้ color overlay เพราะเราต้องการเพียงสีทึบสีเดียว เหมือนการคว้านเจาะพื้นแบคกราวน์ลงไป โดยเลือกสีที่มีความเข้มกว่าสีของแบคกราวน์เล็กน้อย

ใส่ drop shadow แต่คราวนี้อยู่ด้านบนแทนโดยเลือกมุมตกกระทบ -90 องศา อย่าลืมเอา global light ออกด้วยนะครับ ไม่งั้นมันจะไปกวนทั้งงานเงาเราจะอยู่ด้านบนหมด

มาใส่ inner shadow แต่เช่นกันที่แสงจะกลับด้านมาอยู่ด้านล่างแทน ใช้มุม -90 องศาอีกครั้ง ปรับ opacity ตามความเหมาะสมไม่ให้เด่นเด้ง ระยะที่ 1px เช่นเดิม เพื่อความ เชี๊ย! ไม่ใช่ เชี่ย นะ อิอิ

เสร็จในส่วนของตัวหนังสือเจาะยุบ มาต่อกันที่ปุ่ม ค๊าบป๊ม

ข้อดีของการใช้ layer effect คือสามารถ copy ไปให้ object อื่นๆได้ ทำให้ไม่เสียเวลาต้องมานั่งเขียนใหม่ยิบๆ หรือแม้แต่ เซฟเป็น style ใว้เพื่อนำกลับมาใช้ใมห่ในงานต่อๆไป ซึ่งอาจต้องการแค่เปลี่ยนสีนิดหน่อย โดยวิธี copy effect ก็แค่ กด alt [ option ] แล้วลาก fx ข้างหลังเลเยอร์ไปยังเลเยอร์เป้าหมายได้เลย ในตัวอย่างได้ copy effect ของ perfect pixel ไปแปะที่ how to อย่างสะดวกง่ายดาย

เขียนโครงของปุ่มด้วย rounded rectangle tool ( U ) เลือก radius ประมาณ 10px เพื่อความโค้งมนสวยงาม

คล้ายขั้นตอนที่ผ่านๆมา ใส่ gradient overlay สีสรรแล้วแต่ความชอบและเหมาะสมเลยคร้าบ

ใส่ drop shadow เพื่อให้ปุ่มดูนูนมีมิติ ไม่ต้องมากเช่นเคย distance 1px โหมดเป็น multiply ถ้ายึดบัวตูมเป็นหลักก็เอาสีอมๆฟ้าหน่อยนะ คุมโทนๆ แบบ ใจตุ๊ดๆ

ต่อด้วย inner shadow เช่นเคย แต่คราวนี้ต้องเพิ่มไซส์ blur เป็น 1px ด้วย สังเกตดูว่าจะเกิดแสงเรืองๆ ด้านข้างของปุ่ม

ใส่ stroke เพิ่มเข้าไปอีก โดยเลือก fill type แบบ gradient เพื่อให้เกิดแสงสะท้อนด้านล่าง แต่ค้อนข้างมืดที่ด้านบน ปรับมุม 90 องศา อย่าลืมเลือกสีเปรี้ยวๆสว่างๆ สไลด์ใว้ด้านล่างจะทำให้เกิด effect แบบเรืองๆ และ stroke เพียง 1px เพื่อความคมเช่นเดิมครับ

สุดท้าย copy effect ส่วนตัวหนังสือนูน มาแปะที่ชื่อปุ่ม แล้วปรับแต่งความเหมาะสมเพราะขนาดที่เล็กลง จัดวางองค์ประกอบเล็กน้อยเพียงแค่นี้ก็ได้ เฮดดิ้ง หรือ ฟีเจอร์พาร์ท แบบง่ายๆแต่หรูๆ เชี๊ยๆ! ไว้ใช้แล้ว

เพิ่มภาพประกอบอีกนิดหน่อยได้มอคอัพดีไซน์ แบบเนียนๆ ส่งต่อคุณ developer สมองเพชร พัฒนาต่อได้ทันควัน

ปัจฉิมลิขิต

- การคุมโทนที่ว่าบัวตูมไม่รู้ว่าดีมั้ย ไปดูติวติเรี่ยลฝรั่ง เขาก็ใช้ ดำล้วน ขาวจริง ลงแสงเงาเลย แต่ใช้ blending ช่วยเอา
- ถ้าเกิดบัวตูมเขียนผิดหรือโชว์อ่อนตรงไหน วานช่วยแนะนำกันด้วยนะ
- หวังว่าจะพอมีประโยชน์ นะครับสำหรับ ติ้วต่อเรี้ยล นี้
- สำหรับติวต่อๆไปจะพยายามเขียนนะครับเท่าที่จะมีความสามารถ ถ้าใครเห็นงานไหนแล้วอยากรู้เทคนิคหรือพูดคุยกันยังไงมาแปะๆไว้ได้นะครับ ^ ^
- ขอบคุณทุกคนที่เข้ามาชมครับโผมม แล้วอย่าลืมแวะไปเที่ยว http://buatoom.com เน้อ