[illustrator]ทำ Gradient แบบโค้งๆด้วยการ Blend by

27
Feb0

ปกติแล้วใน illustrator เราสามารถทำ Gradient ได้ง่ายๆสองแบบคือ linear กับ radial แบบที่เห็นในรูปครับ ซึ่งหลายๆคนก็คงทราบกันอยู่แล้ว

แต่ถ้าอยากให้มันโค้งๆ ไม่ใช่แบบปกติอย่างนี้ก็สามารถทำได้ครับ

1.สร้างรูปสีเหลี่ยมหรือวงกลม เป็นสีๆแบบในรูปครับ

2.กดคำสั่ง object > blend > make ก็จะได้รูปแบบนี้ครับ

3.เสร็จแล้วก็สร้างเป็น brush ใหม่ครับ เลือก Art Brush (กดสร้าง Brush ใหม่จากหน้าต่าง Brushes)

4.ลองสร้างเส้นโค้งๆขึ้นมา แล้วกดเลือก Brush ที่เราเพิ่งสร้างขึ้นดูครับ

ก็จะได้เส้นโค้งที่ไล่สีแบบโค้งๆตามเส้น

5.นอกจากนี้เรายังสามารถนำไปประยุกต์ทำเป็นรูปแบบอื่นๆได้อีกด้วย

การทำ blend แบบนี้สามารถทำแบบอื่นๆได้อีกด้วย เช่น


Tagged as: , ,
ไม่มีความเห็น

การทำเทคนิคไล่สีในรูปทรงแบบง่ายๆ [Ai] by

27
Oct0

ไม่ใช่ด้วยวิธี Gradient นะคะ แต่มาลองใช้ Blend Options กันบ้าง :-)

เริ่มจากเปิดโปรแกรม Illustrator ขึ้นมา >> เลือก new แ่ผ่นงานใหม่

แล้วสร้างรูปหกเหลี่ยม (เลือก Polygon Tool ด้านข้างค่ะ)

จากนั้นเราจะวางซ้อนรูปหกเหลี่ยมอีกชิ้นที่ตำแหน่งเดิม

Copy ( Ctrl+C) >> Paste in Front (Ctrl+F) นะคะ

แล้วใช้ Scale Tool ย่อชิ้นที่เราวางด้านบนให้เหลือซัก 50% ค่ะ

จะได้หน้าตาออกมาแบบนี้ (เปลี่ยนสีชิ้นบนด้วย ในแบบเราเปลี่ยนเป็นสีขาวนะคะ)

จากนั้นไปที่ Object >> Blend >> Blend Options

จะมีหน้าต่างโผล่มา เลือกโหมด Specified Steps กำหนดค่าตามใจชอบค่ะ

กด OK ออกมาแล้วเลือก Object >> Blend >> Make (click ที่รูปหกเหลี่ยมทั้ง 2 ชิ้นด้วยนะคะ)

จะได้การไล่สีออกมาเป็นแบบนี้ค่ะ เย้ๆ

ทีนี้เรามาลองทำกันอีกรอบตั้งแต่ต้น ฮ่าๆๆๆๆ

แต่เลือก Blend Options เป็นโหมด Smooth Color บ้างนะคะ

จะได้การไล่สีออกมาเป็นอีกแบบค่ะ ดูนุ่มลื่นขึ้นตามชื่อสมู้ททท

(เทียบให้ดูกับชิ้นแรกนะคะ)

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

ง่ายไม๊? อิอิ :-)

Tagged as: ,
ไม่มีความเห็น

สร้างภาพดอกไม้ง่ายๆด้วย Ai by

1
Jul0

ช่วงนี้นั่ง paint บน SAI ตลอด เพิ่งจะได้วาดภาพ vector บน Illustrator วันนี้เอง คิดไม่ค่อยออกแฮะ..  เอาเป็น เทคนิคการสร้างภาพดอกไม้ ที่มีกลีบซ้อนกันหลายๆชั้นละกันนะคะ = =a

เริ่มจาก new กระดาษขึ้นมาใหม่ ซักประมาณ 20 x 20 cm. ใหญ่ๆไปเลย สะใจ!  จากนั้นเลือกใช้เครื่องมือ polygon ที่เป็นรุปหกเหลี่ยมค่ะ
001

Tagged as: ,
Continue reading

เริ่มต้นกับ Flash Catalyst by

28
May1
*เนื้อหาใน entry นี้มาจากความเข้าใจของผมเองล้วนๆ ถ้าผิดถูกยังไงก็ขออภัย และน้อมรับคำแนะนำทุกข้อครับ
Flash Catalyst คืออะไร?
Tool ที่ช่วยแปลงจาก ไฟล์กราฟฟิค(.ai หรือ .psd) กลายเป็น Component ต่างๆ(Button, Tab, Scrollbar, etc.)
ได้อย่างง่ายดาย ชี้ปุ่มเป็นปุ่ม ชี้ tab เป็น tab
ทำไมต้องใช้ Flash Catalyst?
ก่อนหน้าจะมี Flash Catalyst เวลาผมทำ Flash App หรือ Flash Game การที่จะสร้างปุ่มขึ้นมา 1 ปุ่มนั้น
ขั้นตอนที่ต้องคือ Import รูปปุ่มนั้นๆเข้าไปใน .fla สร้างมันเป็น Movieclip ถ้ามีการ Rollover แล้วต้อง ดีดเด้ง เปลี่ยนสี โฉบเฉี่ยวไฉไล ก็ต้องทำ animation ยืดๆีดัดๆมันบน timeline ก็ว่ากันไป เสร็จแล้วก็ ตั้งชื่อ KeyFrame ให้โปรแกรมเมอร์เข้าใจว่า เออ ไอ้นี่ถึงนี่ มันคือ ตอนธรรมดานะ ตอน Rolloverนะ เอาเม้าส์ออกแล้วให้มาหยุดตรงนี้นะ
ซึ่ง!! ต้องเสียเวลาทำความเข้าใจกับโปรแกรมเมอร์ระดับนึง เข้าใจตรงกันบ้าง ไม่ตรงกันบ้าง แต่ถ้าใช้ FC ก็ลืมเรื่องพวกนี้ไปได้เลย บอกมัน(ในที่นี้คือ FC)ไปเลย ไอ้นี่คือธรรมดา ไอ้นี่คือเอาเม้าส์ชี้ เอาเม้าส์ออก หรือ แบบนี้คือ Disable ที่กล่าวมาทั้งหมดนี้คือความสามารถพื้นฐานของ FC เฉยๆนะครับ ยังมีอีกหลายอย่างเลยที่ทำให้ เราสามารถทำงานได้เร็วมากขึ้นเยอะ
Sample กับ Flash Catalyst
1. ปุ่ม
1.1 Import File .ai เข้าไป
1.2 บอกมันว่าเป็นปุ่ม
1.3 Edit ในแต่ละ State ว่าจะเป็นหน้าตายังไง เช่นขนาดใหญ่ขึ้น
State ของ Button จะมี 4 อันคือ up(ปกติ), over(เอาเม้าส์ไปวาง), down(กดคลิก), disable
1.4 Edit Animation ในการเปลี่ยนจาก State นึง ไปอีก State นึง
2. Scrollbar
2.1 บอกมันไปว่าเป็น scrollbar เลือกแนวตั้งแนวนอนให้ถูกด้วยนะ
2.2 ส่วนสำคัญของการ ทำ Scrollbar คือ Part ต่างๆต้องครบ ขั้นตอนถัดมาเราจึงต้อง Edit Part มันก่อน
Scrollbar จะมีองค์ประกอบทั้งหมด 4 ส่วน คือ Thumb(ปุ่มตรงกลางที่ไว้ลากขึ้นลง), Track(ราง), ปุ่มขึ้น, ปุ่มลง
ซึ่ง2ส่วนแรกจำเป็นต้องมี
เท่านี้ก็เสร็จละครับ
ข้อเสียของ Flash Catalyst
เท่าที่ผมรู้สึกตอนนี้คือ มัน edit animation ระหว่าง state ได้ไม่มันส์เท่าไร ทำใน Flash จะคล่องและยืดหยุ่นกว่า
แต่ก็นะ ถ้าทำ Flash App ธรรมดา ไม่ได้มีอะไรพิสดารมาก เท่านี้ก็เพียงพอแล้ว
Tagged as: ,
1 ความเห็น

มีอะไรใหม่ใน Flash CS4 by

31
Oct2

อาจจะแปลกใจว่าทำไมผมเขียน blog หัวข้อ Graphic Design ด้วย พอดีวันนี้ผมไปงานของ Thailand Adobe User Group เลยมาถ่ายทอดหน่อยว่า Flash CS4 มีอะไรเจ๋งๆ ที่เปลี่ยนไป และน่าใช้บ้าง ซึ่งผมคงไม่ลงรายละเอียดถึงขั้นตอนการทำมากนักนะครับ (ขี้เกียจ 55) ตามนี้เลยครับ

Tagged as: , , , ,
Continue reading
Newer

Who are we?

LevelUp! Studio aim to be the world-wide first-class web-based social gaming company.

Contact Us

contact (at) levelup.in.th

หมวดหมู่

ป้ายกำกับ

3d android animation as3 beginner browser bug color css database document excel facebook facebook api flash flex game game design google Graphic html illustrator ios javascript marketing mobile mysql ngui node.js performance photoshop php programming query review sai Server social game spine tools tutorial ui Unity unity3d เรื่องง่ายแต่กูไม่รู้

บันทึกเก่า