Pixel art
31/8/53
30/8/53
29/8/53
28/8/53
27/8/53
26/8/53
How to Pixel art Isometric
ต่อไปนี้จะเป็นการสอนวิธีทำ pixel art Isometric ขั้นพื้นฐาน ตั้งไข่กันไปเลย
ISOMETRIC แปลว่า เป็นภาพที่มองเห็นสัดส่วนใกล้และไกลออกไปมีขนาดเท่ากัน ลักษณะภาพเป็นภาพจริง มี เส้นต่างๆดังนี้ เส้นแกนนอน เส้นแกนตั้งฉาก เส้นแกนเอียงซ้ายและแกนเอียงขวายกขึ้น ทำมุม 30 องศาทั้งสองข้างกับเส้นแกนนอน
* แต่สำหรับ pixel art ในคอม เราไม่สามารถทำเส้นมุม 30องศาได้ เพราะเส้นจะไม่สวยงาม เลยต้องเป็นภาพมุม 26.565 แทน
3. ยางลบก็ปรับ Mode เป็น pencil เหมือนกันครับ เวลาลบจะได้ไม่เลอะ
4.ตัวอย่างเส้นที่ถูกต้องสำหรับ Pixel แบบ Isometric มีหลักในการทำคือ 2:1 หมายความว่า จุดไป 2 จุดแล้ว ขึ้นลง 1 จุด หรือ ซ้ายขวา 1 จุด (ฝรั่งเค้าเขียนมางี้)
ตัวอย่างคร่าวๆ ของเส้นในแต่ละมุม
5.หลังจากที่เรามีตัวอย่างเส้นแล้ว ลองสร้างออกมาเป็นรูปสี่เหลี่ยมขึ้นมาลูกหนึ่งครับ ถ้าเราลองทำสี่เหลี่ยมตามรูปด้านล่างแล้วจะเกิดปัญหาหนึ่งขึ้นมาก็คือ มุมของสี่เหลี่ยมลูกบาศก์ ที่เคยเห็นจะมี2แบบตามรูปด้านล่างครับ มุมไหนก็ใช้ได้เหมือนกันแล้วแต่ความชอบ สำหรับมุมจะให้แบบที่ 2 เพราะแบบที่1 มันดูแข็งเกินไปสำหรับผม
6.ตัวอย่างการใส่สี ก็ตามหลักแสงเงาทั่วไป มีมืด ปกติ และสว่าง ส่วนเส้นขอบของวัสถุให้สว่างกว่าทุกส่วนครับตามหมายเลย 4
ตัวอย่างมุมสี่เหลี่ยมใส่สีเสร็จแล้วเอามาติดกัน
เวลาเทสีด้วยเครื่องมือ Bucket ให้ติ้กเอา เครื่องหมาย Anti-aliased ออกด้วย
7.หลักๆหมดแล้วครับ คร่าวนี้ลองสร้างตึกอย่างง่ายๆดู
พอเริ่มแข็งแ้ล้วก็ค่อยๆสร้างตึกที่มันดีกว่าเดิมตามแต่จินตนาการ
สุดท้ายท้ายนี้ก็อยู่ที่กิเลสเราเองครับว่าสามารถทำจนสุดได้หรือป่าว
ISOMETRIC แปลว่า เป็นภาพที่มองเห็นสัดส่วนใกล้และไกลออกไปมีขนาดเท่ากัน ลักษณะภาพเป็นภาพจริง มี เส้นต่างๆดังนี้ เส้นแกนนอน เส้นแกนตั้งฉาก เส้นแกนเอียงซ้ายและแกนเอียงขวายกขึ้น ทำมุม 30 องศาทั้งสองข้างกับเส้นแกนนอน
* แต่สำหรับ pixel art ในคอม เราไม่สามารถทำเส้นมุม 30องศาได้ เพราะเส้นจะไม่สวยงาม เลยต้องเป็นภาพมุม 26.565 แทน
********
สิ่งที่ต้องใช้
- โปรแกรม Photo Shop
- Tablet เมาส์ปากกา (แนะนำ)
- สำคัญสุด Passion เพื่อที่เราสามารถทำงานให้เสร็จได้
********
1.สร้างกระดาษขึ้นมาโดยตั้ง Resolution ที่ 72 pixels/inch งานพวก pixel เป็นภาพที่สร้างขึ้นมาจากคอมพิวเตอร์สมัยโบราณทำให้ได้ความละเอียดต่ำครับ(สมัยนั้นคอมยังไม่ดีเท่าสมัยนี้) ความละเอียดเลยอยู่ที่ 72
2. ตั้ง Brust ให้เป็น pencil เพื่อที่เราจะสามารถจุด pixelลงไปในภาพได้โดยไม่เลอะ
1.สร้างกระดาษขึ้นมาโดยตั้ง Resolution ที่ 72 pixels/inch งานพวก pixel เป็นภาพที่สร้างขึ้นมาจากคอมพิวเตอร์สมัยโบราณทำให้ได้ความละเอียดต่ำครับ(สมัยนั้นคอมยังไม่ดีเท่าสมัยนี้) ความละเอียดเลยอยู่ที่ 72
2. ตั้ง Brust ให้เป็น pencil เพื่อที่เราจะสามารถจุด pixelลงไปในภาพได้โดยไม่เลอะ
3. ยางลบก็ปรับ Mode เป็น pencil เหมือนกันครับ เวลาลบจะได้ไม่เลอะ
4.ตัวอย่างเส้นที่ถูกต้องสำหรับ Pixel แบบ Isometric มีหลักในการทำคือ 2:1 หมายความว่า จุดไป 2 จุดแล้ว ขึ้นลง 1 จุด หรือ ซ้ายขวา 1 จุด (ฝรั่งเค้าเขียนมางี้)
ตัวอย่างคร่าวๆ ของเส้นในแต่ละมุม
5.หลังจากที่เรามีตัวอย่างเส้นแล้ว ลองสร้างออกมาเป็นรูปสี่เหลี่ยมขึ้นมาลูกหนึ่งครับ ถ้าเราลองทำสี่เหลี่ยมตามรูปด้านล่างแล้วจะเกิดปัญหาหนึ่งขึ้นมาก็คือ มุมของสี่เหลี่ยมลูกบาศก์ ที่เคยเห็นจะมี2แบบตามรูปด้านล่างครับ มุมไหนก็ใช้ได้เหมือนกันแล้วแต่ความชอบ สำหรับมุมจะให้แบบที่ 2 เพราะแบบที่1 มันดูแข็งเกินไปสำหรับผม
6.ตัวอย่างการใส่สี ก็ตามหลักแสงเงาทั่วไป มีมืด ปกติ และสว่าง ส่วนเส้นขอบของวัสถุให้สว่างกว่าทุกส่วนครับตามหมายเลย 4
ตัวอย่างมุมสี่เหลี่ยมใส่สีเสร็จแล้วเอามาติดกัน
เวลาเทสีด้วยเครื่องมือ Bucket ให้ติ้กเอา เครื่องหมาย Anti-aliased ออกด้วย
7.หลักๆหมดแล้วครับ คร่าวนี้ลองสร้างตึกอย่างง่ายๆดู
พอเริ่มแข็งแ้ล้วก็ค่อยๆสร้างตึกที่มันดีกว่าเดิมตามแต่จินตนาการ
สุดท้ายท้ายนี้ก็อยู่ที่กิเลสเราเองครับว่าสามารถทำจนสุดได้หรือป่าว
25/8/53
24/8/53
23/8/53
22/8/53
21/8/53
20/8/53
19/8/53
Misc Set F Day 137
รูปคราวนี้ออกไปทางเหมือนของเล่นครับ ประมาณ Logo ส่วนตัวผมชอบนะเพราะมันเหมือนค่อยๆสร้างจากที่ละนิด ไปเรื่อยๆจนใหญ่โต
18/8/53
17/8/53
16/8/53
15/8/53
14/8/53
13/8/53
12/8/53
11/8/53
10/8/53
9/8/53
8/8/53
7/8/53
6/8/53
5/8/53
4/8/53
3/8/53
2/8/53
Misc Set E Day 120
เสร็จไปอีกชุดแล้วครับ ตอนแรกทำออกมาคิดว่ามันต้องสวยแน่ๆเลยคร้ังนี้ เพราะรู้สึกถึงความมีสีสรรในภาพ แต่พอทำไปทำมาผมก็คิดว่ามันเริ่มมั่วแล้วสิครั้งนี้ จนได้ออกมาแบบนี้แหละครับ :P
1/8/53
สมัครสมาชิก:
บทความ (Atom)