อาคว้า เอคว่า aqua

[thaPIXIE]

เนื่องด้วยเรากำลังอยู่ในยุค web2.0 (คืออะไรใครยังไม่รู้ ยอมรับมา เดี๋ยวเล่าให้ฟัง) เทรนด์ปุ่มใสๆ บวมๆ น่ากดบดขยี้กำลังอิน เลยจะมาสอนน้องๆที่อยากทำเป็นให้ทำกัน (ใครที่เป็นเจ้าของสวนห้ามโห่นะ เพราะลองค้นจู๋แล้วยังไม่เห็นมีใครทำ )

เริ่มกันเลย

เปิดโฟโต้ชอพขึ้นมา เวอร์ชั่นพระเจ้าเหายัน cs3 ก็ทำได้หมด เปิดงานใหม่ขึ้นมา แล้วสร้างเลเยอร์ใหม่1ที
สร้างรูปร่างของปุ่มขึ้นมา อันนี้จะยกตัวอย่างปุ่มสี่เหลี่ยม แต่เพื่อความกิ๊บเก๋เราขอขอบมนเป็นเฟอร์นิเจอร์



ถ้าว่ากันตามหลักการวาดภาพ ของที่วางบนพื้นย่อมมีแสงจากพื้นสะท้อนมาโดนที่ด้านล่างของมัน เราก็จะใส่เข้าไปโดย เริ่มจากทำ selection รอบปุ่มเราก่อน โดยกด CTRL+คลิกที่ thumbnail บนหน้าต่าง layer และอย่าลืมสร้างเลเยอร์ใหม่ก่อน จากนั้นก็เอา gradient ลากสีขาวไล่ไปใสที่ขอบล่างแบบนี้



และเนื่องจากมันใสปิ้ง มันต้องมีเงาสะท้อนจากเพดาน จากขั้นที่แล้วเรายังไม่ต้องเอา selection ออก จากนั้นสร้างเลเยอร์ใหม่ขึ้นมาอีก และทีนี้เราก็ใส่ gradient ไล่กลับหัวลงมาบ้าง กะให้เฟดหายไปเลยครึ่งทางมาหน่อยแบบนี้



และด้วยว่ามันมันวาว แสงสะท้อนจะมี contrast ที่ชัดเจน เรามาสร้าง contrast หลอกๆนั่นกันดีกว่า
จากขั้นที่แล้ว ยังไม่ต้องเอา selection ออก ถ้ามันเบื่อปล่อยมันเบื่อไป เป็นหน้าที่ selection ที่ดีต้องทำอยู่แล้ว จากนั้นใช้ pen tool สร้าง path ทำนองนี้ขึ้นมา



คลิดขวาเลือก make selection จะมีหน้าต่างขึ้นมา ให้เลือก operation เป็น intersect with selection เราจะได้ selection ที่เหลือแบบนี้



จากนั้นกด del เบาๆแต่มั่นคง เพื่อลบ gradient นี่ออกไปครึ่งส่วน เอาล่ะ เอา selection ออกได้แล้วทุกคนนน... เราจะได้ของหน้าตาแบบนี้



ทีนี้เรามาแต่งกิ๊กกัน เนื่องจากปุ่มมันนูนๆ ขอบข้างๆมันจะมีเงาดำๆให้เห็น ก็ทำได้ง่ายๆโดย transform แสงสะท้อนให้เล็กลงนิดหน่อยแบบนี้ (นิดหน่อยพอนะ ผู้ดีไม่ทำอะไรกันเยอะแยะมากมาย)



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



ทีนี้มี top tips มาฝาก... อันที่ทำกันไปนี่จะดูว่าปุ่มค่อนข้างใส เพราะ สีขาวข้างล่างโผล่มามาก เราทำให้ปุ่มเปลี่ยนความทึบแสงได้ง่ายๆ โดยการลด opacity ของแสงสะท้อนด้านล่างลง จางมากก็ทึบมาก
แบบนี้...



แต่มองๆดูแล้วขอบมันไม่เรียบร้อยเลย ไม่เป็นไร เราเลื่อนแสงสะท้อนจากพื้นลงมานิดนึงจะดูดีขึ้นแบบนี้



หรือจะลอง drop shadow แบบนี้ก็งามตาดี

[thaPIXIE]

หรือจะใส่อะไรลงไปบนปุ่มก็ได้ ใส่ลงไปใต้แสงสะท้อนบนสุดแบบนี้



ก็ขอให้สนุกกับ web2.0 นะทุกๆคน ...เอวัง

[ooooo]

ไม่ได้มากวนตีนนะครับ 

แต่อยากรู้ว่าทำไมเว็บ ๒.๐ ทั้งหลาย ถึงต้องมีไอคอนหรือต้องมีกลิ่นอายของกราฟฟิกแบบนี้ด้วย
หรือมันเป็นธรรมเนียมไปแล้วว่า ถ้าไม่มีกราฟฟิกแนวนี้ในเว็บ เว็บเราจะไม่ถูกตราหน้าว่าเป็น ๒.๐ ??

ปล๑. บางคนเข้าใจผิดว่าการที่มีไอคอนแบบนี้ในเว็บ แค่นี้เว็บของเราก็เป็น ๒.๐ แล้ว 
ปล๒. แต่ผมก็ชอบในความสวยของมันนะ
ปล๓. ขอขอบคุณสำหรับบทความนี้ครับ 

[thaPIXIE]

ตามความเห็นผมนะ web 2.0 มันเป็นนิยามที่เรียกเวบยุคหลัง web 1.0 กวนตีนม๊ะ คือ web 2.0 มันมี content ที่ซับซ้อนเชิงการเชื่อมโยงมากกว่าเวบสมัยแรก มันมี rss มันมี multimedia มันโพสต์ได้ มันเอาของชาวบ้านมาแปะได้ มัน มัน มัน มัน มันว้อยยย ปุ่มก็เลยมันๆ  บ้าแล้ว ไม่ใช่!! ด้วยความที่มันจำต้องมีปุ่มประจำที่มากขึ้น มันมีฟังก์ชั่นแยะขึ้น ปุ่มมันก็น่าจะไม่กวนตามากนัก แต่มันก็ยังต้องน่าสนใจ น่ากด จริงๆมันก็มีอีกหลายรูปแบบนะอีปุ่มเนี่ย ขอให้ดูเป็นระเบียบก็พอ จะบวมไม่บวม ใสไม่ใส ว่ากัน

แต่ถ้ามันไม่เป็นปุ่มๆ คือเป็น text link แบบแต่ก่อน มันจะดูแปลกมั้ง คือดูยากกว่า นี่ปุ่มกดได้ หรือ text เฉยๆ....












มั้งนะ

[Ah!]

โอ้ว ขอบคุณมากนะครับ
 

[•หมูหมู•™]

+ ครับ

----
ไอค่อนแนวๆนี้มันเป็นตัวแทนของ 2.0 มั้ง

[ยุนเอ]

มันเป็น usability รึเปล่าครับ

เหมือนว่าลดความซับซ้อนของ interface ลงเพื่อให้ผู้ใช้ทำ อะไรได้ง่ายขึ้น ไม่ต้องมานั่งอ่านรายละเอียดเยอะแยะ

เหมือนเป็น trend แบบ zen ที่เข้ามาตอน web 2.0 พอดี เลยเหมือนว่ามันคือ web 2.0 ไปด้วย

[คิ้วหนาจ้ะ]

ขอบคุณสำหรับความรู้ฮะ 
ปกติเคยทำแต่ในอีรัตน์แฮะ

[thaPIXIE]

อีรัตน์ก็ทำได้นะ ดีด้วยปรับขนาดได้ แต่กลัวมันจะแอดแว้นสฺเกินไป

[แตน]

พี่โป้งคะ อันนี้ นี่คือทำได้ง่ายๆสำหรับคนที่ใช้ โฟโต้ชอปไม่เป็นใช่มั้ยคะ

จะได้ลองทำดู

[Soris0ri]

อาคว้าอะไรคะ  {หมีโหด}





ขอบคุณสำหรับความรู้ค่ะ 

ไม่เคยทำมาก่อนเลย ถ้าไม่ยากจะลองทำดูค่ะ

[iannnnn]

ใครอยากอ่านบทความเก่าแก่ๆ ในเนื้อหาเดียวกันนี้
ก็เชิญที่นี่นะครับ http://iannnnn.com/2006/119




ส่วนเรื่องสไตล์เว็บสองนั้น ตูว่ามันเป็นแฟชั่นว่ะ จบ 

[Ah!]

^
|
เออแฮะ ถึงว่าคุ้นๆ

แต่อันนี้ง่ายกว่านะ 

[ป้าแป้งกึ่งสำเร็จรูป]

     ขำน้ำตาของแอน

[Soris0ri]

ใครอยากอ่านบทความเก่าแก่ๆ ในเนื้อหาเดียวกันนี้
ก็เชิญที่นี่นะครับ http://iannnnn.com/2006/119




ส่วนเรื่องสไตล์เว็บสองนั้น ตูว่ามันเป็นแฟชั่นว่ะ จบ 

ก็ตอนนั้นฮิตเอามาทำอวตารกันใหญ่