วาดฉากให้ดูมีความลึกแบบง่ายๆ by

30
Nov
0

วิธีทำให้ฉากหลัง ดูมีมิติ มีความลึก แบบง่ายๆ ตามสไตล์มือใหม่หัดวาดฉากครับ

1.แบ่งส่วนของภาพเป็น Foreground และ Background ก่อน Foreground คือระยะด้านหน้าของภาพ Background คือด้านหลังเป็นระยะที่ไกลออกไป

2.ใส่วัตถุต่างๆลงไปใน Background โดยคิดไว้ก่อนว่า วัตถุอันไหนอยู่ลึกกว่าอันไหนด้วย(ไกลจาก Foreground กว่ากัน)

โดยภาพนี้ผมแบ่งระดับความลึกออกเป็น 4 ระดับ

3.คอนเซปต์หลักๆคือ
วัตถุที่ไกลที่สุด สี จะใกล้เคียงกับ สีของbackground มากที่สุด
วัตถุที่ใกล้ที่สุด จะเห็นรายละเอียดชัดที่สุด
ก็ลองเลือกสีของแต่ละระดับมาก่อนคร่าวๆครับจากการปรับเฉดสี(Hue)

*หมายเหตุ: ไม่ควรเลือกสีของ Background เป็นโทนที่ใกล้เคียงกับ Foreground ไม่งั้นภาพของเราจะกลายเป็น Monotone ไป

จากนั้นก็ใช้ Blending Option ใส่ Color Overlay สีตามที่เราเลือกมาเลยครับ แล้วก็ปรับ Opacity ของ Color Overlay ตามระดับความลึกด้วย อันที่อยู่ไกล ก็ปรับเยอะๆ อันที่ใกล้ก็ปรับน้อยๆ

จากภาพนี้ระดับที่ไกลสุด ผมใช้ Opacity 85% ส่วนอันที่ใกล้สุด 25%

4.จากการปรับ Opacity จะทำให้รายละเอียดของวัตถุชัดน้อยไล่กันไปแล้ว แต่ถ้ายังไม่พอ ใช้ Blur ช่วยให้รายละเอียดชัดน้อยลงอีกก็ได้ครับ

5.สุดท้ายถ้ายังรู้สึกไม่สาแก่ใจก็ปรับอุณหภูมิของภาพดูด้วยก็ได้ครับ โดยธรรมชาติแล้ว สีโทนร้อนจะมีความสว่างมากกว่าสีโทนเย็น
ถ้า Background มืดกว่า Foreground ก็ปรับให้เย็นขึ้นอีก ถ้ากลับกันก็ใช้สีโทนร้อนครับ

ภาพจาก http://harizanov.com/2013/07/temperature-to-rgb-led/


ภาพที่ปรับอุณหภูมิของ Background แล้ว

ลงสีทับเส้นใน SAI ง่ายๆด้วย Opacity Lock by

31
Aug
0

ผมเคยมีปัญหาว่าจะลงสีทับเส้นยังไงดี ตอนแรกสุดเลยใช้วิธีโง่มากคือ select ทั้ง layer แล้วลงสีไปใน selection นั้น ซึ่งไม่เวิร์คเลย เพราะตรงขอบๆของ selection มันจะแตกๆ

ต่อมาได้รู้จักกับ Ctrl+Alt+G ของ Photoshop ชีวิตก็ดีขึ้นมา

เคยเขียนเรื่องนี้แล้วที่ http://blog.levelup.in.th/2012/06/28/how-to-color-hair-simply-%E0%B8%A5%E0%B8%87%E0%B8%AA%E0%B8%B5%E0%B8%9C%E0%B8%A1%E0%B8%87%E0%B9%88%E0%B8%B2%E0%B8%A2%E0%B9%86/

แต่กระนั้น ก็ยังคงนึกว่าทำได้แต่ใน Photoshop ผมเลยต้องวาดเส้นลงสีจุดอื่นๆใน SAI แล้วค่อยย้ายไปลงสีเฉพาะเส้นใน Photoshop มาซักระยะ

แต่วันนี้ก็พึ่งมารู้ว่าใน SAI แม่งก็ทำได้นี่หว่า วิธีการเป็นดังนี้ครับ

1. ติ๊ก Opacity Lock ที่ Layer เส้น

2.ลงมือปาดสีเข้าไป

3.เสร็จ

ลงสีผมง่ายๆสไตล์ชาวร็อค by

28
Jun
0
วิธีนี้ได้นักวาดภาพชาวร็อคในตำนาน Kaskia สอนมาอีกทีครับ
ภาพต้นฉบับ
1. ลงสีกลางๆของเส้นผม
ซึ่งในภาพนี้ผมแยกออกมาเป็นผมด้านหน้าและ้ด้านหลังอีกทีครับ
ขั้นตอนนี้ต้องระวังเรื่องจุดขาวๆตามซอกหลืบให้ดีครับ ลงสีไปให้ครบ
อย่างภาพนี้เป็นต้น
2. เปิด Layer ใหม่ขึ้นมาด้านบน Layer สีผมที่ลงไปแล้ว
กด Ctrl+Alt+G เพื่อให้อะไรก็ตามใน Layer นี้ไม่หลุดขอบของ Layer ล่างครับ
แล้วใช้ Gradient วงกลม เลือกสีที่สว่างกว่าสีเดิม แล้วลากจากบริเวณขวัญของตัวละคร
ต่อมาขึ้น Layer ใหม่อีกอัน แล้วใช้ Gradient เส้นตรงสีเข้มกว่าสีเดิม ลากจากด้านล่างขึ้นมาครับ
ภาพที่ได้จะประมาณนี้
แล้วก็ทำแบบเดียวกันกับผมด้านหลังด้วยครับ
3.ลงสีเงาของเส้นผม
เลือกสีค่อนข้างออกไปทางเทาๆครับ
จากนั้นขึ้น Layer ใหม่ ปรับเป็น Multiply อย่าลืม Ctrl+Alt+G นะครับ
4.ลงสี Hilight
เลือกสีที่สว่างขึ้นกว่าเทาตะกี้ครับ แล้วขึ้น Layer ใหม่ ปรับเป็น Overlay
ถ้ารู้สึกว่าสีที่ได้มันแรงไป อาจจะปรับเป็น Soft Light แทนก็ได้ครับ
เท่านี้ก็เรียบร้อยพอใช้ได้แล้วครับ
แต่ถ้าอยากให้ดูนุ่มขึ้นก็ไปลงสีของเส้นผมเพิ่มได้ครับ
โดยใช้เทคนิค Ctrl+Alt+G เหมือนเดิม แต่ทำกับ Layer เส้นแทน
ภาพที่ได้ก็จะออกมาประมาณนี้
Fin.

ว่าด้วยเืรื่องของถาดสี by

1
Aug
0

ถาดสีที่ผมจะพูดถึงต่อไปนี้ ผมหมายถึง Swatches ในโปรแกรม Illustrator กับ Photoshop นะครับ

ความสำคัญ

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

ข้อดีของการใช้ถาดสีก็คือ มันทำให้งานที่ออกมาจาก designer คนละคนนั้น ดูเ้ข้ากันได้ พอจะดูเป็นงานๆเดียวกัน

และนอกจากจะเป็นประโยชน์ในการทำงานหลายๆคนแล้ว ยังมีประโยชน์เวลาที่เรากลับมาแก้งานเก่าๆ ที่เคยทำเมื่อนานมาแล้วด้วย

การสร้างถาดสีใช้เองในโปรแกรม Illustrator และ Photoshop

เริ่มจากการเปิดหน้าต่าง Swatches ขึ้นมาก่อนครับ คลิ๊กที่เมนูด้านบน window>swatches

หน้าต่าง swatches ในโปรแกรม Illustrator

หน้าต่าง swatches ในโปรแกรม Photoshop

หน้าต่าง swatches ในโปรแกรม Photoshop

จากนั้นเลือกสีที่เราต้องการครับ

แล้วคลิ๊กที่ปุ่ม New Swatch ครับ

สีที่เราเลือกไว้ก็จะเข้ามาอยู่ใน Swatches ของเราครับ (วิธีเดียวกันทั้ง2โปรแกรม)

และเมื่อเราได้สีทั้งหมดที่เราต้องการแล้ว

สำหรับ Illustrator

คลิ๊กที่มุมขวาบนของ Swatches window ครับ แล้วเลือก Save Swatch Library as AI…

การเซฟ swatches ในโปรแกรม Illustrator

การเซฟ swatches ในโปรแกรม Illustrator

สำหรับ Photoshop

คลิ๊กที่มุมขวาบนของ Swatches window ครับ แล้วเลือก Save Swatches

การเซฟ swatches ในโปรแกรม Photoshop

การเซฟ swatches ในโปรแกรม Photoshop

แล้วพอถึงเวลาที่จะใช้งานก็กด Open Swatch Library(Illustrator) หรือ Load Swatches(Photoshop) ได้เลยครับ

การแลกเปลี่ยนถาดสีระหว่าง 2 โปรแกรม

เราสามารถจะนำถาดสีที่เราสร้างในโปรแกรมใดโปรแกรมนึง ไปใช้งานในอีกโปรแกรมได้ไม่ยากเลยครับ

เพียงแค่ ในขั้นตอนที่ save swatches นั้น เราเลือกเป็น Save Swatch Library as ASE… หรือ Save Swatches for Exchange เท่านั้นเองครับ

เราก็จะได้เป็นไฟล์ .ase ซึ่งสามารถเปิดได้ในทั้ง2โปรแกรมครับ

หมายเหตุ ไฟล์ swatches ของ Illustrator จะเป็นไฟล์ .ai แต่ใน photoshop จะเป็นไฟล์ .aco ครับ

Png Color Problem in IE by

29
May
4

ถ้าพูดถึงปัญหา png ในIEแล้ว ปกติทุกๆคนก็คงนึกว่า เป็นเรื่อง png ไม่แสดงtransparencyใน ie6 ใช่ไหมครับ

แต่คราวนี้ผมจะมาพูดถึงอีกปัญหานึงครับ ไม่ใช่ปัญหาธรรมดาๆอย่างที่กล่าวมา

ก็ไม่รู้จะอธิบายเป็นคำพูดยังให้เข้าใจง่ายๆยังไงอ่ะนะครับ ลองไปดูจากตัวอย่างเลยดีกว่า

<div style=”background:#567ED4;padding:20px;”>
<img src=”color_code_567ED4.png”>
</div>

นี่คือโค้ดHTMLที่ผมกำหนดให้พื้นหลังของ div มีค่าสีเป็น #567ED4

ซึ่งเป็นสีเดียวกับรูป color_code_567ED4.png

แล้วลองมาดูผลที่ไ่ด้ใน firefox และ ie ครับ

จะเห็นได้ว่าผลที่แสดงออกมาบน ie นั้น สีของรูป เพี้ยนไปจากเดิมครับ

ซึ่งปัญหานี้เท่าที่ผมค้นหามา รู้สึกว่าจะเจอแต่บน ie เท่านั้น browserอื่นๆ ไม่มีปัญหาอะไร

ส่วนวิธีแก้น่ะหรอครับ เหอะๆๆๆ

ผมก็ใช้วิธีโง่ๆเอาด้วยการใช้รูป png ที่เป็นสีที่ต้องการนั้นแหละไปใส่เป็น background แทน

กู้เงิน | เศรษฐกิจพอเพียง | สินเชื่อบุคคล | สมัครบัตรกดเงินสด | สินเชื่อ | เงินกู้ด่วน | ยืมเงินทรูมูฟ | เงินด่วนนอกระบบ