วาดฉากให้ดูมีความลึกแบบง่ายๆ by akara
Nov0
วิธีทำให้ฉากหลัง ดูมีมิติ มีความลึก แบบง่ายๆ ตามสไตล์มือใหม่หัดวาดฉากครับ
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 akara
Aug0
ผมเคยมีปัญหาว่าจะลงสีทับเส้นยังไงดี ตอนแรกสุดเลยใช้วิธีโง่มากคือ 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 akara
Jun0
ว่าด้วยเืรื่องของถาดสี by akara
Aug0
ถาดสีที่ผมจะพูดถึงต่อไปนี้ ผมหมายถึง Swatches ในโปรแกรม Illustrator กับ Photoshop นะครับ
ความสำคัญ
ก่อนหน้านี้ผมเองก็ไม่เคยได้ใช้ถาดสีพวกนี้หรอกนะครับ มาถึงผมก็ิจิ้มๆสีเอาเองเลย แต่พอได้เริ่มมีการทำงานกับคนอื่นบ้าง ก็ทำให้ผมเห็นความสำคัญของเจ้าถาดสีนี้แล้วล่ะ
ข้อดีของการใช้ถาดสีก็คือ มันทำให้งานที่ออกมาจาก designer คนละคนนั้น ดูเ้ข้ากันได้ พอจะดูเป็นงานๆเดียวกัน
และนอกจากจะเป็นประโยชน์ในการทำงานหลายๆคนแล้ว ยังมีประโยชน์เวลาที่เรากลับมาแก้งานเก่าๆ ที่เคยทำเมื่อนานมาแล้วด้วย
การสร้างถาดสีใช้เองในโปรแกรม Illustrator และ Photoshop
เริ่มจากการเปิดหน้าต่าง Swatches ขึ้นมาก่อนครับ คลิ๊กที่เมนูด้านบน window>swatches
หน้าต่าง swatches ในโปรแกรม Illustrator
หน้าต่าง swatches ในโปรแกรม Photoshop
จากนั้นเลือกสีที่เราต้องการครับ
แล้วคลิ๊กที่ปุ่ม New Swatch ครับ
สีที่เราเลือกไว้ก็จะเข้ามาอยู่ใน Swatches ของเราครับ (วิธีเดียวกันทั้ง2โปรแกรม)
และเมื่อเราได้สีทั้งหมดที่เราต้องการแล้ว
สำหรับ Illustrator
คลิ๊กที่มุมขวาบนของ Swatches window ครับ แล้วเลือก Save Swatch Library as AI…
การเซฟ swatches ในโปรแกรม Illustrator
สำหรับ Photoshop
คลิ๊กที่มุมขวาบนของ Swatches window ครับ แล้วเลือก Save Swatches
การเซฟ 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 akara
May4
ถ้าพูดถึงปัญหา 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 แทน
Who are we?
