เปลี่ยนสีเส้นแบบไฮโซ โอ้โห ชูปิ๊ง! by

29
Feb
0

สะวีดัดกับนุ้งพาเพลินซีซั่นที่ 2 (ตอนไหน!?)

วันนี้รีบมากเพราะเพิ่งนึกออกว่าต้องอัพบลอค วี้ดๆๆๆๆ มาดูวิธีเปลี่ยนสีเส้นสำหรับงาน CS ใน PS กันเถอะ!

Step1

เตรียมภาพจ้าเตรียมภาพ แสกนเข้ามา ปรับLevel เอารอยเปื้อนออก เช็คภาพซ้ายขวาตรงไหนเบี้ยวตรงไหนอุบี๋ ก็แก้ให้เสร็จก่อนเลย ไม่ังั้นจะแก้ทีหลังลำบากนะจ๊ะ :3

Step2

จากนั้นก็ขึ้น Layer ใหม่ แล้วกด Add A Mask ก็จะได้เลเยอร์พร้อมโซ่เหมือนในภาพนะจ๊ะตัวเธอ

Step3

ต่อไป กด Ctrl+A เพื่อครอบทั้งภาพของเรา แล้วกด ALT ค้างไว้(สำคัญมาก ห้ามลืม) แล้วเลือกคำสั่ง Edit > Copy (อย่าเพิ่งปล่อยมือจาก Alt นา) แล้วเลือกเลเยอร์ช่องบน ตามในภาพ แล้วกด Edit>Patse ตามในภาพเลยจ้ะ ถึงจะปล่อยALTได้ ถ้าไม่กดค้างไว้ มันจะไม่ติดอะ ว่าง่ายๆคือเหมือนจะใช้แอคชั่นรีเพลย์แต่ใส่สูตรผิด มันเลยไม่ติด ทำนองนั้น

Step4

จากนั้นเลือกคำสั่ง Image > Adjustment > Invert ก็จะได้ตามในภาพ อย่าเพิ่งตกใจ ไม่ได้ไฟดับ ใจเย็นนะอีนู๋นะ

Step 5

ให้สร้างเลเยอร์พื้นสีขาวขึ้นมาใต้เลเยอร์มาสก์ (แบบในรูป) แล้วหลังจากนั้นก็เลือกสีเส้นที่อยากได้ เทป้าบลงไปบนช่องเลเยอร์ซ้ายบน เป็นอันเสร็จ!

** สำคัญมาก เวลาเราแสกนงานเข้ามาเนี่ย บางคนไม่ทันได้ดูว่ามันอาจจะอยู่ในโหมด Grayscale ทำให้เวลาเทสีลงไป มันก็กลายเป็นสีขาวดำเทาเข้าให้ เตือนไว้ก่อน เพราะเมื่อก่อนก็สครีมมิ่งเพราะเหตุนี้เหมือนกัน เปลี่ยนเป็น RGB ซะก่อนนะจ๊ะ เดี๋ยวจะหาว่าหญิงแม่ไม่เตือน

Tips

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

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

หมดเวลากับนุ้งมิลพาเพลินซีซั่น2 เจอกันใหม่ซีซั่นหน้า จบเห่ชีวิตแม่ทัลค่ะ

นุ้งมิลพาเพลิน

ก.พ.2012

อยากได้ code เก่ากลับคืนมา~ ทำไงดี? by

29
Feb
0

ในโปรแกรม Flash Builder เนี่ย แอบมีฟีเจอร์เด็ดๆซ่อนอยู่นะ ซึ่งหลายๆคนไม่รู้


หลายครั้ง หลายครา แก้โค้ดไป แก้โค้ดมา เฮ้ย ไอ้ของที่เคยเขียนเมื่อคราวที่แล้วมันก็ใช้ได้นี่นา แต่…ลบไปแล้ว อร๊ากกกกกก


โชคดีที่โปรแกรม Flash Builder มีฟีเจอร์นี้ทำให้เรารอดชีวิตมาได้ นั่นคือ local history
โปรแกรมเก็บโค้ดเวอร์ชั่นเก่าๆให้เราด้วย ไหนๆ ทำไงอ่ะ


คลิ๊กขวาบนหน้าจอโค้ดเราเลย –> Compare With –> Local History…
เดี๋ยวไม่เห็นภาพ อ่ะ



พอเปิดแล้วแท็บนี้ก็จะขึ้นมา

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



ขอบพระคุณ Flash Builder ที่มีฟีเจอร์นี้ให้โปรแกรมเมอร์ตัวน้อยๆได้ย้อนเวลากลับไปมองหาอดีต
กราบบบ m(_ _)m

วิธีทำให้รูปที่โหลดมาโดย tag mx:Image เป็น anti-alias โดยอัตโนมัติ by

29
Feb
0

ใน Flex นั้นโดยปกติจะมี tag ที่ใช้โหลดรูปเข้ามาในตัว app ได้อย่างง่ายๆ โดยแค่ใช้
<mx:Image id=”imgReward” source=”image.png” />
ก็สามารถโหลดรูปมาแสดงได้ทันที ไม่ต้องสร้าง Loader มาโหลดให้วุ่นวายถ้าใช้เป็น as3 เพียวๆ และใน Flex 4 จะมี tag
<s:BitmapImage ai:embed=”1″ smooth=”true” source=”@Embed(‘image.png’)” />
ใช้โหลดรูปเข้ามาเช่นกัน แถมยังทำ Anti-Alias ให้ด้วย เพียงแต่ว่ามันใช้กับรูปในลักษณะของ Embed มาตั้งแต่ตอน compile ได้เท่านั้น ไม่สามารถสั่ง Load path ที่ต้องการขณะ Run-time ได้จึงเป็นที่มาของปัญหานี้ ในบทความนี้เราจะแนะนำวิธีทำให้ <mx:Image> สามารถทำ Anti-Alias ได้ในตัวครับ

รูปก่อนทำ Anti-Alias

รูปก่อนทำ Anti-Alias

ก่อนอื่นให้สร้าง function ขึ้นมาใส่ไว้ใน class ที่เก็บ function ที่ใช้งานบ่อยๆ ของเราเอง (มันใช้บ่อยแน่ๆ ละครับ) แล้วใส่ function ดังนี้ (ของผมใช้ชื่อ class EffectHelper)


public static function smoothImage(evt:Event):void{
var myBitmap:Bitmap = ((evt.target as Image).content as Bitmap);
if (myBitmap != null) {
myBitmap.smoothing = true;
}
}

ทีนี้ตอนเรียกใช้งาน ก็เรียกแบบนี้ครับ

<mx:Image id=”imgReward” source=”image.png” complete=”EffectHelper.smoothImage(event)” />

บรรทัดเดียวก็ “เอาอยู่” ละครับ :D ชีวิตง่ายขึ้นเยอะจริงๆ

รูปหลังทำ Anti-Alias

รูปหลังทำ Anti-Alias

วาดเส้นง่ายๆกับแท็ก Spark Path by

29
Feb
0

โดยปกติแล้วโปรแกรมเมอร์อย่างๆเรา วาดเส้นต่างๆก็ลำบากแล้วใช่ไหมล่ะครับ

path01

อย่างเช่นถ้าจะให้วาดสามเหลี่ยมเป็นกราฟ ปกติแล้วก็คงจะสร้าง MovieClip มาแล้วใช้ AS3 วาดเส้นเอาโดยใช้ฟังก์ชั่นวาดรูปพื้นฐาน graphics.lineTo แบบนี้

var triangleShape:Shape = new Shape();

triangleShape.graphics.moveTo(0,0);

triangleShape.graphics.lineTo(100,0);

triangleShape.graphics.lineTo(100,100);

triangleShape.graphics.lineTo(0,100);

แต่แล้วใน Flex 4 หลังจากมี Spark แท็กเราก็สามารถวาดเส้นง่ายๆได้แล้วล่ะครับ

โดยวิธีที่จะมาเสนอในวันนี้คือแท็ก <s:Path> ครับ โดยแท็กนี้เราสามารถวาดเส้นต่างๆภายในบรรทัดเดียวได้เลยล่ะครับ!

โดยเจ้า Spark Path นี้มี Attribute ที่สำคัญหลักๆตัวเดียวเลยครับคือ data ที่มีไทป์เป็น String ธรรมดาๆนี่แหละครับ

เราสามารถวาดเส้นได้ดังนี้ครับ

ตัวอย่าง:
<s:Path data=”M 0 0 L 100 0 L 100 100 L 0 100 Z”>
<s:stroke>
<s:SolidColorStroke color=”#333333″ caps=”square” joints=”miter” />
</s:stroke>
<s:fill>
<s:SolidColor color=”#00CCFF” />
</s:fill>
</s:Path>

Stroke จะมีไว้กำหนดลักษณะของเส้น และ fill จะมีไว้กำหนดลักษณะของสีด้านในครับ
ทีนี้พระเอกของเราคือเจ้า data โดยเจ้า data จะเป็นตัวกำหนดรูปร่างของเส้นวาดๆของเราครับ
วิธีใช้ก็เพียงแค่ใส่ตัวหนังสือที่ระบุความสมารถนำหน้าแล้วเคาะเว้นตามด้วยค่าต่างๆครับ
โดยตัวหนังสือจะกำหนดสิ่งต่างๆดังนี้

  • M / m
เลื่อนไปที่จุดๆนั้นเพื่อเริ่มมีค่าเท่ากับการใช้แท็ก graphics.moveTo
  • L / l
วาดเส้นจากจุดปัจจุบันไปยังจุดที่กำหนดมีค่าเท่ากับการใช้แท็ก graphics.lineTo
  • C / c
วาดเส้นโค้งจากจุดหลายๆจุด
  • Q / q
วาดเส้นโค้งจากจุดๆหนึ่ง
  • H / h
วาดเส้นแนวนอน
  • V / v
วาดเส้นแนวตั้ง
  • Z / z
วาดกลับไปยังจุดเริ่มต้น


ทีนี้เราก็เพียงนำค่าต่างๆมาต่อกันเป็น String โดยมีเว้นวรรคคั่นก็สามารถวาดรูปในบรรทัดเดียวได้แล้วครับ

ถ้าค่าของเราต้องเปลี่ยนจากการคำนวนก็เพียงตั้ง id ให้กับ Path ของเราแล้วเซ็ทค่า data ให้ตรงกับ String ที่ผ่านการคำนวนมาแล้ว

เช่นดังนี้ครับ

graphStat.data = “M “+musicX+” “+musicY+” L “+entertainX+” “+entertainY+” L “+charmX+” “+charmY+” Z”;

เท่านี้เราก็จะได้กราฟสามเหลี่ยมตามค่าที่เราตั้งไว้ได้ครับ

path02

เปลี่ยน Disco ball 3d เป็น Vector กัน!!! by

27
Feb
2

จากครั้งก่อนที่เราได้สร้าง Disco ball 3d กันมาแล้ว

ครั้งนี้จะมาทำ  Disco ball ลูกเดิม ให้กลายร่างเป็นไฟล์ Vector กัน

แบบว่าสูงสุดคืนสู่สามัญ อะไรเงี๊ยะ!!!

ขั้นแรกเลยต้องไปแก้เอฟเฟคก่อน โดยเข้าไปที่ Object>Expand Appearance

***Expand Appearance เป็นคำสั่งคำคัญนะครับ สามารถแก้เอฟเอฟทั้งหลาย ให้เป็นไฟล์ Vector ปกติได้

>Ungroup

ไปที่ Layers แล้วลบ 3เลเยอร์ที่อยู่ข้างล่างทิ้งไปเลย

Release Clipping Mask

ลบเลเยอร์ Group ที่อยู่ข้างล่างทิ้งไป

>Ungroup

แล้วเลือกลงสีตามใจชอบเลย

วาดวงกลมให้มีขนาดเท่าไฟล์ที่ลงสี(ข้างบน) แล้วย้ายเลเยอร์วงกลมไปไว้ข้างล่าง

วาดวงกลมเพื่อทำเป็นไฮไลท์ แล้วเปลี่ยนโหมด ไปที่ Transparency>Soft Light

วาดเงา เปลี่ยนโหมดไปที่ Transparency>Multiply

ตกแต่งเพิ่มเติมทำให้งานมีความน่าสนใจมากขึ้น

จบ…สวัสดี

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