สวยใสด้วย Layer Style [Free PSD]

banku

พอดีช่วงนี้ได้ออกแบบพวก UI (User Interface) บ่อยๆ ก็ได้ทำพวกปุ่มต่างๆมากขึ้น
ก็เลยได้เรียนรู้เรื่องการทำให้นูน ให้ยุบ เอาไว้ใช้งานต่างๆ ด้วยการใช้ Layer Style ใน Photoshop นี่ล่ะ
เรียกว่าเลเยอร์เดียวอยู่เลย มาดูตัวอย่างที่จะแจกให้โหลดกัน เผื่อใครจะก๊อป Layer Style เอาไปเปลี่ยนสีใช้เองก็ได้เล้ย

แต่เราไม่แจกเฉยๆ ไหนๆก็ไหนๆแล้ว มาสอนวิธีการทำด้วยเลย เผื่อใครจะประยุกต์เอาไปทำอย่างอื่นได้อีก
(จริงๆก็โหลดไฟล์ไปแล้วแกะดูก็ได้ แต่ทำแบบนั้นจะไม่รู้ว่าใส่ตัวนี้แล้วจะเกิดผลยังไงน่ะซี่ย์)
มาดูวิธีการทำปุ่มแบบง่ายๆกัน

ขั้นแรกเลยก็สร้าง Shape ขึ้นมาเป็นรูปปุ่ม หรือจะสร้างรูปอื่นก็ได้นะไม่ว่ากัน แล้วใส่ Gradient Overlay ให้มัน
โดยให้สีข้างล่างเข้มกว่าจะได้ดูมีมิตินูนขึ้นมานิดนึงละ

ต่อมาใส่ Stroke ขนาด 1px ซักนิดเพื่อเน้นขอบให้ชัดเจน เส้นขอบผมจะใช้สีที่เข้มกว่าตัวปุ่มเพื่อให้มันเด่นหน่อย
แล้วปรับ Position ของเส้นให้เป็น inside เผื่อที่มันจะได้ไม่ไปขยายขนาดของปุ่มนั่นเอง

ใส่ Inner Glow เข้าไปอีก แต่ปรับ Choke ให้เยอะๆมันจะได้ไม่ฟุ้ง แล้วปรับขนาดเป็น 2px เพราะตอนแรกเราใส่ Stroke ไปแล้ว
1px ก็เลยต้องเพิ่มเข้าไปอีก ไม่งั้นจะมองไม่เห็ฯ ค่าอื่นๆ สี Opacity ก็ปรับเอาตามสวยงาม จะเริ่มเห็นเส้นขอบเน้นขึ้นมาทำให้ดูนูนมากขึ้นละ

แล้วก็ใส่เงาให้มันด้วย Drop Shadow นั่นเอง ปรับเอาตามชอบเลย ใครคิดไม่ออกก็ปรับตามในรูปก็ได้นะครับ
เป็นอันว่าเสร็จส่วนของปุ่มแล้ว ทีนี้เรามาดูส่วนของข้อความกันมั่ง

พิมพ์ข้อความลงไป ถ้าข้อความเป็นสีเข้มๆ หรือไม่เป็นสีขาวผมจะใช้วิธีใส่ Drop Shadow สีขาว Blend mode เป็น normal
แล้วปรับ Distance กับ Size ตามรูปครับ สังเกตในภาพว่าตัวหนังสือของเราดูยุบ ดูลึกลงไป

ยัง เท่านั้นยังไม่พอสำหรับปุ่มวิ้งๆ ดูเงาๆแบบนี้ก็ทำไม่ยากเลยล่ะ แค่ไล่ Gradient ให้เป็น ซึ่งก็ตามในรูปได้อธิบายเอาไว้ละครับ

แล้วถ้าตัวอักษรสีอ่อนเราจะทำให้มันลึกลงไปยังไงล่ะ ง่ายๆเลย ใส่ Inner Shadow ให้มัน ปรับค่าเล็กน้อยก็ได้แล้วล่ะ
แต่มันจะมีปัญหากับพวก font บางๆ หรือตัวอักษรเล็กๆใส่ไปแล้วจะไม่สวยเพราะว่าเงาดำนั่นจะไปกินเนื้อที่ของตัวหนังสือ
เราก็มีวิธีแก้อย่าห่วงไป

ให้เราเปลี่ยนจาก Inner Shadow มาใส่ Drop shadow แทน เพียงแต่ให้เราปรับองศาให้เงามันชี้ขึ้นไปข้างบนแทนนั่นเอง
ผลลัพธ์ที่ได้แยกไม่ออกเลยล่ะ แต่จะมีผลกับบาง font บางขนาดที่ผมได้บอกไปนั่นล่ะ

เอาล่ะใครขี้เกียจก็โหลดเอาไปดูเอาไปใช้กันเลยยย [button url=”https://www.banku.me/wp-content/uploads/2012/01/button-style.psd_.zip” style=”red” size=”small”] Download [/button]

สำหรับเทคนิคต่างๆ ก็ไม่ได้มาจากตัวผมเองคนเดียว ก็ต้องขอบคุณ พี่เม่น, พี่แอน, พี่บัวตูม ด้วยคร้าบ
ที่ทำให้ผมได้เรียนรู้อะไรมากขึ้นทีเดียวเชียว (แอบเลีย แผล่บๆ)

ปล. จริงๆยังมีอีกหลายวิธี หลายรูปแบบทำให้สวยงามน่าชม แต่เอาแค่นี้ก่อนเหนื่อยแล้ว แฮ่กๆ

Related Posts

พลิกไปพลิกมาง่ายๆ ด้วย Script

สวัสดีครับ ^^ วันนี้ได้มีทางลัดมานำเสนอกับการใช้ 3d Layer ในการทำให้วัตถุพลิกไปพลิกมาแบบง่ายๆ โดยใช้ Script ซึ่งเราไม่ต้องเขียนเองด้วยนะ
banku2,011 Comments on พลิกไปพลิกมาง่ายๆ ด้วย Script

[แจกฟรี] Lightroom Preset Fullfilm V1

มาแจก Preset Lightroom อีกแล้ว นอกจากทำกราฟิกแล้ว ก็มีถ่ายรูปนี่ล่ะครับที่ทำเป็นงานอดิเรก แล้วช่วงนี้ได้ใช้ App VSCO CAM ซึ่งค่ายนี้เค้าเก่งเรื่องปรับสีให้เหมือนฟิล์มอยู่แล้ว เลยลองนั่งทำเล่นๆดูมั่ง แล้วก็ออกมาเออ ก็โอเคนะ ถึงจะไม่เมพแบบของเค้าแต่ก็ใช้ได้เหมือนกัน ส่วนจะเข้ากันกับภาพประเภทไหนนั้นก็ต้องไปลองกันดูเอง
banku2,619 Comments on [แจกฟรี] Lightroom Preset Fullfilm V1

ทำระเบิดควันแนวการ์ตูนด้วย Particular

ติดค้างกันไว้นานสำหรับติวเตอร์นี้ วันนี้พอมีเวลา (อู้งาน) ก็เลยมาเขียนเสียหน่อย ใครจะหัดทำก็ควรมีพื้นฐาน Particular ซักนิ๊ดดดนึง จะได้รู้ว่าค่าไหนปรับไปเพื่ออะไรเนาะ และนี่คือตัวอย่างงานที่เราจะทำกันในวันนี้จ้า
banku2,036 Comments on ทำระเบิดควันแนวการ์ตูนด้วย Particular

1663 Comments

  693. La compatibilidad del software de rastreo móvil es muy buena y es compatible con casi todos los dispositivos Android e iOS. Después de instalar el software de rastreo en el teléfono de destino, puede ver el historial de llamadas del teléfono, mensajes de conversación, fotos, videos, rastrear la ubicación GPS del dispositivo, encender el micrófono del teléfono y registrar la ubicación circundante.

  832. Yes you can. The idea is that you get to play real money games at the online casino using the No Deposit Bonus funds. You get to try out the games for free without risking your own bankroll, allowing you to test-drive the products ahead of real-money play. Take into account that the online casino won’t give you a huge amount of bonus cash or free spins to play with – it’s usually enough to give you a feel for the site. As such, your winnings will be proportionate to the size of the bonus. No deposit bonuses offer you the chance to play for free at top online casinos in the USA, but with the chance of winning real money. We’ve secured exclusive casino bonuses from the best gambling sites around. Simply note down the bonus code you want and click through to claim the bonus. Play for free at our #1 casino today.
    https://asisol.llc/blog/asisol/archived/
    We really love the graphics on this app. Its definitely worth 5 stars and you can win real cash. To be even more precise, Cash Slots is a slot machine-themed game available on Google Play for the Android mobile operating system. Slots Empire pays out your bonus winnings through Bitcoin, bank wire, and debit card. This is a fairly standard lineup. However, their $150 withdrawal minimum might raise an eyebrow or two. Online sweepstakes games are legal in the Empire State because there’s no “consideration” element. You can play without having to risk a single penny of your own money. The sites do award prizes with real value, but it isn’t necessary for you to pay to win them. It takes zero effort to argue in favor of land-based casinos developing their own slot game apps. They have the know-how and the hands-on experience to know which games need to be optimized for mobile use and how to make the fans of this gaming category happy. That being the case, we did our research on the top slot apps of land-based casinos and came up with the following recommendation:

Leave a Reply

Your email address will not be published. Required fields are marked *