หน้า: [1] 2
 
ผู้เขียน หัวข้อ: อาคว้า เอคว่า aqua  (อ่าน 9591 ครั้ง)
0 สมาชิก และ 1 ขาจร กำลังดูหัวข้อนี้
เนื่องด้วยเรากำลังอยู่ในยุค 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 แบบนี้ก็งามตาดี

« แก้ไขครั้งสุดท้าย: 09 ก.ค. 2007, 15:10 น. โดย thaPIXIE » บันทึกการเข้า
หรือจะใส่อะไรลงไปบนปุ่มก็ได้ ใส่ลงไปใต้แสงสะท้อนบนสุดแบบนี้



ก็ขอให้สนุกกับ web2.0 นะทุกๆคน เกย์แอบ ...เอวัง
บันทึกการเข้า
ไม่ได้มากวนตีนนะครับ  ไอ้มืดหมี

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

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

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












มั้งนะ ฮี่...
บันทึกการเข้า
โอ้ว ขอบคุณมากนะครับ
  กรี๊ดดดดด

บันทึกการเข้า

        AH_LuGDeK, AH_LuGDeK_R
+ ครับ

----
ไอค่อนแนวๆนี้มันเป็นตัวแทนของ 2.0 มั้ง ฮี่...
บันทึกการเข้า

กำลังโหลดข้อมูล .....


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

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

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

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

จะได้ลองทำดู
บันทึกการเข้า

นานๆ จะเข้ามาที

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





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

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

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



ส่วนเรื่องสไตล์เว็บสองนั้น ตูว่ามันเป็นแฟชั่นว่ะ จบ  ไอ้มืดหมี
บันทึกการเข้า

ทำมาหากินด้วยการเปิดร้านสกรีนเสื้อยืด จ้ะ
^
 |
เออแฮะ ถึงว่าคุ้นๆ กร๊าก

แต่อันนี้ง่ายกว่านะ  กรี๊ดดดดด
บันทึกการเข้า

        AH_LuGDeK, AH_LuGDeK_R
 คริคริ    ขำน้ำตาของแอน
บันทึกการเข้า

เราแก้ไขอดีตไม่ได้ แต่เราทำปัจจุบันให้ดีได้
ใครอยากอ่านบทความเก่าแก่ๆ ในเนื้อหาเดียวกันนี้
ก็เชิญที่นี่นะครับ http://iannnnn.com/2006/119
ฮือๆ~



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

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

Las Noches Rubicundior
หน้า: [1] 2
 
 
Powered by MySQL Powered by PHP Powered by SMF 1.1.21 | SMF © 2006-2007, Simple Machines | Thai language by ThaiSMF Valid XHTML 1.0! Valid CSS!