เนื่องด้วยเรากำลังอยู่ในยุค web2.0 (คืออะไรใครยังไม่รู้ ยอมรับมา เดี๋ยวเล่าให้ฟัง) เทรนด์ปุ่มใสๆ บวมๆ น่ากดบดขยี้กำลังอิน เลยจะมาสอนน้องๆที่อยากทำเป็นให้ทำกัน (ใครที่เป็นเจ้าของสวนห้ามโห่นะ เพราะลองค้นจู๋แล้วยังไม่เห็นมีใครทำ :40:)
เริ่มกันเลย :26:
เปิดโฟโต้ชอพขึ้นมา เวอร์ชั่นพระเจ้าเหายัน cs3 ก็ทำได้หมด เปิดงานใหม่ขึ้นมา แล้วสร้างเลเยอร์ใหม่1ที
สร้างรูปร่างของปุ่มขึ้นมา อันนี้จะยกตัวอย่างปุ่มสี่เหลี่ยม แต่เพื่อความกิ๊บเก๋เราขอขอบมนเป็นเฟอร์นิเจอร์
(http://img2.f0nt.com/09/b3f2ed2934caa704b31b7813e65dc0d2.jpg)
ถ้าว่ากันตามหลักการวาดภาพ ของที่วางบนพื้นย่อมมีแสงจากพื้นสะท้อนมาโดนที่ด้านล่างของมัน เราก็จะใส่เข้าไปโดย เริ่มจากทำ selection รอบปุ่มเราก่อน โดยกด CTRL+คลิกที่ thumbnail บนหน้าต่าง layer และอย่าลืมสร้างเลเยอร์ใหม่ก่อน จากนั้นก็เอา gradient ลากสีขาวไล่ไปใสที่ขอบล่างแบบนี้
(http://img2.f0nt.com/09/c7d479229b343a63b1b3bb741f60d9aa.jpg)
และเนื่องจากมันใสปิ้ง มันต้องมีเงาสะท้อนจากเพดาน จากขั้นที่แล้วเรายังไม่ต้องเอา selection ออก จากนั้นสร้างเลเยอร์ใหม่ขึ้นมาอีก และทีนี้เราก็ใส่ gradient ไล่กลับหัวลงมาบ้าง กะให้เฟดหายไปเลยครึ่งทางมาหน่อยแบบนี้
(http://img2.f0nt.com/09/40b8d396d62363854036a3d19e0446d0.jpg)
และด้วยว่ามันมันวาว แสงสะท้อนจะมี contrast ที่ชัดเจน เรามาสร้าง contrast หลอกๆนั่นกันดีกว่า
จากขั้นที่แล้ว ยังไม่ต้องเอา selection ออก ถ้ามันเบื่อปล่อยมันเบื่อไป เป็นหน้าที่ selection ที่ดีต้องทำอยู่แล้ว :26: จากนั้นใช้ pen tool สร้าง path ทำนองนี้ขึ้นมา
(http://img2.f0nt.com/09/7385f7f827d22d6a147acd4672fd8ac3.jpg)
คลิดขวาเลือก make selection จะมีหน้าต่างขึ้นมา ให้เลือก operation เป็น intersect with selection เราจะได้ selection ที่เหลือแบบนี้
(http://img2.f0nt.com/09/a7c9941d861914131891354378d9be39.jpg)
จากนั้นกด del เบาๆแต่มั่นคง เพื่อลบ gradient นี่ออกไปครึ่งส่วน เอาล่ะ เอา selection ออกได้แล้วทุกคนนน... เราจะได้ของหน้าตาแบบนี้
(http://img2.f0nt.com/09/93a0773418c5e85ef42b8bdd8c889c66.jpg)
ทีนี้เรามาแต่งกิ๊กกัน เนื่องจากปุ่มมันนูนๆ ขอบข้างๆมันจะมีเงาดำๆให้เห็น ก็ทำได้ง่ายๆโดย transform แสงสะท้อนให้เล็กลงนิดหน่อยแบบนี้ (นิดหน่อยพอนะ ผู้ดีไม่ทำอะไรกันเยอะแยะมากมาย)
(http://img2.f0nt.com/09/c6643b951062f03e493e819a5145ccc3.jpg)
เราจะเห็นว่าแสงสะท้อนบาดตาบาดใจมันเข้มเกินไป ไม่ค่อยผู้ดีนัก เราก็จัดการลด opacity ลงเอาเหลือสัก 70% ก็พอ แบบนี้
(http://img2.f0nt.com/09/a3740114f7393a5b4b565b6b83a555e1.jpg)
ทีนี้มี top tips มาฝาก... อันที่ทำกันไปนี่จะดูว่าปุ่มค่อนข้างใส เพราะ สีขาวข้างล่างโผล่มามาก เราทำให้ปุ่มเปลี่ยนความทึบแสงได้ง่ายๆ โดยการลด opacity ของแสงสะท้อนด้านล่างลง จางมากก็ทึบมาก
แบบนี้... :26:
(http://img2.f0nt.com/09/c5fde94f5628f4dfaa95745c165eb92e.jpg)(http://img2.f0nt.com/09/53d48a7962894cfd1ee036a9d2de1ab6.jpg)(http://img2.f0nt.com/09/cd6cb8d8849931042d6cdf68bac69c0c.jpg)(http://img2.f0nt.com/09/642ea65804e6cc00a5638631dd5b66fb.jpg)
แต่มองๆดูแล้วขอบมันไม่เรียบร้อยเลย ไม่เป็นไร เราเลื่อนแสงสะท้อนจากพื้นลงมานิดนึงจะดูดีขึ้นแบบนี้
(http://img2.f0nt.com/09/1ba1592c3f2db6ba401b877b1dea2faf.jpg)
หรือจะลอง drop shadow แบบนี้ก็งามตาดี
(http://img2.f0nt.com/09/cfc9c80ce3eadab5caa2f9e5b1531727.jpg)
หรือจะใส่อะไรลงไปบนปุ่มก็ได้ ใส่ลงไปใต้แสงสะท้อนบนสุดแบบนี้
(http://img2.f0nt.com/09/5839bb4df059b9f7032382bc13ebb262.jpg)
ก็ขอให้สนุกกับ web2.0 นะทุกๆคน :26: ...เอวัง
ไม่ได้มากวนตีนนะครับ :31:
แต่อยากรู้ว่าทำไมเว็บ ๒.๐ ทั้งหลาย ถึงต้องมีไอคอนหรือต้องมีกลิ่นอายของกราฟฟิกแบบนี้ด้วย
หรือมันเป็นธรรมเนียมไปแล้วว่า ถ้าไม่มีกราฟฟิกแนวนี้ในเว็บ เว็บเราจะไม่ถูกตราหน้าว่าเป็น ๒.๐ ??
ปล๑. บางคนเข้าใจผิดว่าการที่มีไอคอนแบบนี้ในเว็บ แค่นี้เว็บของเราก็เป็น ๒.๐ แล้ว :31:
ปล๒. แต่ผมก็ชอบในความสวยของมันนะ
ปล๓. ขอขอบคุณสำหรับบทความนี้ครับ :12:
ตามความเห็นผมนะ web 2.0 มันเป็นนิยามที่เรียกเวบยุคหลัง web 1.0 กวนตีนม๊ะ :30: คือ web 2.0 มันมี content ที่ซับซ้อนเชิงการเชื่อมโยงมากกว่าเวบสมัยแรก มันมี rss มันมี multimedia มันโพสต์ได้ มันเอาของชาวบ้านมาแปะได้ มัน มัน มัน มัน มันว้อยยย ปุ่มก็เลยมันๆ :35: บ้าแล้ว ไม่ใช่!! ด้วยความที่มันจำต้องมีปุ่มประจำที่มากขึ้น มันมีฟังก์ชั่นแยะขึ้น ปุ่มมันก็น่าจะไม่กวนตามากนัก แต่มันก็ยังต้องน่าสนใจ น่ากด จริงๆมันก็มีอีกหลายรูปแบบนะอีปุ่มเนี่ย ขอให้ดูเป็นระเบียบก็พอ จะบวมไม่บวม ใสไม่ใส ว่ากัน
แต่ถ้ามันไม่เป็นปุ่มๆ คือเป็น text link แบบแต่ก่อน มันจะดูแปลกมั้ง คือดูยากกว่า นี่ปุ่มกดได้ หรือ text เฉยๆ....
มั้งนะ :35:
โอ้ว ขอบคุณมากนะครับ
:25:
+ ครับ
----
ไอค่อนแนวๆนี้มันเป็นตัวแทนของ 2.0 มั้ง :35:
มันเป็น usability รึเปล่าครับ
เหมือนว่าลดความซับซ้อนของ interface ลงเพื่อให้ผู้ใช้ทำ อะไรได้ง่ายขึ้น ไม่ต้องมานั่งอ่านรายละเอียดเยอะแยะ
เหมือนเป็น trend แบบ zen ที่เข้ามาตอน web 2.0 พอดี เลยเหมือนว่ามันคือ web 2.0 ไปด้วย
ขอบคุณสำหรับความรู้ฮะ :46:
ปกติเคยทำแต่ในอีรัตน์แฮะ
อีรัตน์ก็ทำได้นะ ดีด้วยปรับขนาดได้ แต่กลัวมันจะแอดแว้นสฺเกินไป :26:
พี่โป้งคะ อันนี้ นี่คือทำได้ง่ายๆสำหรับคนที่ใช้ โฟโต้ชอปไม่เป็นใช่มั้ยคะ :09:
จะได้ลองทำดู
อาคว้าอะไรคะ {หมีโหด}
ขอบคุณสำหรับความรู้ค่ะ :46:
ไม่เคยทำมาก่อนเลย ถ้าไม่ยากจะลองทำดูค่ะ
ใครอยากอ่านบทความเก่าแก่ๆ ในเนื้อหาเดียวกันนี้
ก็เชิญที่นี่นะครับ http://iannnnn.com/2006/119
:05:
ส่วนเรื่องสไตล์เว็บสองนั้น ตูว่ามันเป็นแฟชั่นว่ะ จบ :31:
^
|
เออแฮะ ถึงว่าคุ้นๆ :30:
แต่อันนี้ง่ายกว่านะ :25:
:21: ขำน้ำตาของแอน
อ้างคำพูดจาก: uuuuuɐı เมื่อ 09 ก.ค. 2007, 18:32 น.
ใครอยากอ่านบทความเก่าแก่ๆ ในเนื้อหาเดียวกันนี้
ก็เชิญที่นี่นะครับ http://iannnnn.com/2006/119
:05:
ส่วนเรื่องสไตล์เว็บสองนั้น ตูว่ามันเป็นแฟชั่นว่ะ จบ :31:
ก็ตอนนั้นฮิตเอามาทำอวตารกันใหญ่ :27:
ชอบค่ะ :25:
กว่าจะงมทำได้ โง่ตั้งนาน :31: แอบไปถามพี่แอนมาด้วย
ขอบคุณสำหรับความรู้ค่ะ :46:
(http://img2.f0nt.com/10/f998dd299981f999173f48163c70de36.png)
อืม เป็นติวเตอเรียล นี่น่าสนดี สำนวนที่ใช่นี่... ถ้าไม่รักกันจริง คงเกลียด และหมันไส้ไปเลย 555
มีตัวช่วยมาช่วยเสริม คือมี style ของ PS แนวนี้เลย web 2.0 ได้มาจากไหนจำไม่ได้แล้ว หลายเดือนแล้ว
ใครสนใจลองเอาไปใช้ แล้วก้ปรับๆ แต่งๆ ดูนะ
ใครอยากอ่านโหลดไฟล์เก่าแก่ๆ เนื้อหาเดียวกันนี้
ก็เชิญที่นี่นะครับ http://iannnnn.com/2007/396
:05:
ถึงว่าคุ้น ๆ เอ๊ะ คุ้น ๆ จริง ๆ {หมีโหด}
555 พี่แอน :30:
ชอบว่ะ
ดูดมาแล้วนะ
:46:
ส่วนอันที่เรามาปล่อยอ่ะ มันเป็นของที่เค้าใช้กันจริง(จะอธิบายไงดีละ) เช่น โลโก้ สไก้ป์ อ่ะ
// เพิ่มเติม
จากที่ดูด ไฟล์ จากลิ้งก์ที่พี่แอนให้แล้วอ่ะ
อยากทำให้เป็นไฟล์ของ style โดยเฉพาะเลย (.asl) เวลาที่ฟอแมต เครื่องไปแล้วมันจะได้กลับมาอ่ะ
ใครรู้วิธีช่วยสอนที