Home-theater-designers
มีสิ่งมหัศจรรย์มากมายที่คุณสามารถสร้างได้ใน Adobe Photoshop ที่มีประโยชน์ทางออนไลน์ ตั้งแต่กรอบรูปธรรมดาไปจนถึง UI ที่ซับซ้อน หนึ่งในสิ่งที่มีประโยชน์มากที่สุดที่คุณสามารถสร้างใน Photoshop ได้คือปุ่ม 3D ซึ่งจะมีประโยชน์หากคุณเรียกใช้บล็อกหรือเว็บไซต์ด้วยอินเทอร์เฟซที่กำหนดเอง
ในบทความนี้ เราจะแสดงวิธีสร้างปุ่ม 3 มิติโดยใช้ Photoshop ร่วมกับสถานะภาพ 'ขึ้น' และ 'ลง' เพื่อให้คุณสร้างภาพเคลื่อนไหวได้ (เราจะไม่กล่าวถึงแอนิเมชั่นในบทความนี้)
ขั้นตอนที่ 1: เตรียมเอกสารของคุณ
ในขณะที่ปุ่ม 3 มิติปรากฏขึ้นบ่อยที่สุดบนเว็บไซต์ สิ่งสำคัญคือต้องทราบว่ามีแอปพลิเคชันอื่นๆ สำหรับปุ่มเหล่านี้ เช่น GIF แบบเคลื่อนไหว การแสดงผลิตภัณฑ์จำลอง และเกมบนมือถือ รูปแบบไฟล์สุดท้ายของคุณและขนาดของปุ่มอาจแตกต่างกันไป ขึ้นอยู่กับสิ่งที่คุณสร้างปุ่มนี้
ในการสร้างปุ่ม 3 มิติใน Photoshop คุณจะต้องสร้างเอกสารที่กำหนดเองสำหรับปุ่มนั้น ในการดำเนินการนี้ ให้เปิด Photoshop แล้วคลิก สร้างใหม่ > กำหนดเอง . เริ่มพิมพ์ค่าของคุณ
ในการสร้างปุ่ม 3D คุณจะต้องการเอกสารแนวนอน ของเราเราใช้:
- สูง 900 x 300 พิกเซล
- 300 พิกเซล/นิ้ว
- โหมดสี RGB
แม้ว่าข้อกำหนดเหล่านี้จะไม่ใช่กฎที่ยากและรวดเร็วอย่างแน่นอน แต่วิธีนี้จะช่วยให้คุณมีพื้นที่เพียงพอสำหรับใช้งาน และความสามารถในการปรับขนาดปุ่มของคุณขึ้นและลงได้ตามต้องการ
ขั้นตอนที่ 2: ตั้งค่าสี่เหลี่ยมผืนผ้าสำหรับปุ่ม 3 มิติของคุณ
หลังจากที่คุณตั้งค่าข้อกำหนดสำหรับไฟล์ของคุณแล้ว คุณจะเข้าสู่พื้นที่ทำงานของคุณ คุณจะมีผืนผ้าใบสีขาวแนวนอนในเลเยอร์เดียว และนี่คือที่ที่คุณจะเริ่มสร้างปุ่มของคุณ
ในการสร้างปุ่ม 3D ของคุณ ให้คลิกที่ เครื่องมือสี่เหลี่ยมผืนผ้าโค้งมน ที่ด้านซ้ายมือของหน้าจอ ซึ่งแสดงเป็นสีแดง คุณยังสามารถใช้ทางลัด ยู เพื่อเข้าถึง
คลิกหนึ่งครั้งบนเลเยอร์สีขาวของคุณ: สิ่งนี้จะแสดง . ของคุณโดยอัตโนมัติ สร้างสี่เหลี่ยมผืนผ้าโค้งมน กล่อง. คุณจะใช้กล่องนี้เพื่อระบุขนาดของสี่เหลี่ยมผืนผ้าของคุณ
สำหรับปุ่มของเรา เราไปกับ:
- กว้าง 300 พิกเซล
- สูง 75 พิกเซล
เรายังทำให้แน่ใจว่ามุมต่างๆ ถูกปัดเศษ 10 พิกเซล ไม่สูงเกินไปและไม่ต่ำเกินไปเช่นกัน จากนั้นเราก็กด ตกลง .
บันทึก: ปุ่มจะแตกต่างกันไปตามขนาดและรูปร่าง คุณจึงไม่จำเป็นต้องใช้ขนาดที่แน่นอนเหล่านี้ นอกจากนี้ หากคุณกำลังมองหาข้อมูลเพิ่มเติมเกี่ยวกับทางลัด ต่อไปนี้คือ คำสั่งแป้นพิมพ์ Photoshop ที่มีประโยชน์ที่สุด .
เมื่อคุณกด ตกลง , Photoshop จะสร้างสี่เหลี่ยมมนที่มีมิติเหล่านี้อยู่ภายในเลเยอร์ของคุณ คุณสามารถเปลี่ยนมัน เติม และ จังหวะ สีโดยใช้เมนูดรอปดาวน์ที่มุมซ้ายบนของหน้าจอ
สำหรับจุดประสงค์ของบทช่วยสอนนี้---และเพื่อแสดงให้เห็นว่าปุ่ม 'ขึ้น' และ 'ลง' อาจมีลักษณะอย่างไร --- เรากำลังจะทำให้ปุ่ม 'ลง' เป็นสีแดง
ขั้นตอนที่ 3: สร้างปุ่มของคุณ 3D
หลังจากที่คุณสร้างปุ่มพื้นฐานและเลือกสีแล้ว คุณจะต้องการปรับปุ่มใน สไตล์เลเยอร์ กล่องโต้ตอบ เพื่อให้ดูเป็น 3D มากขึ้น
ในการเข้าถึง .ของคุณ สไตล์เลเยอร์ กล่องโต้ตอบคุณสามารถไป เลเยอร์ > สไตล์เลเยอร์ จากเมนูด้านบน คุณยังสามารถดับเบิลคลิกที่เลเยอร์ที่มีปุ่มของคุณ เพื่อเรียกมันขึ้นมาโดยอัตโนมัติ วิธีนี้เร็วกว่ามากและโดยส่วนตัวแล้วเราชอบมันมากกว่า
เมื่อกล่อง Layer Style ของคุณหมด ให้ไปที่ตัวเลือก เอียงและนูน . เปิด.
นี่เป็นวิธีที่รวดเร็วและง่ายดายในการทำให้ขอบปุ่มดูนูนขึ้น '3D' สำหรับบทช่วยสอนนี้ นี่คือการตั้งค่าที่เราใช้:
โครงสร้าง
- สไตล์: Inner Bevel
- เทคนิค: สิ่วอ่อน
- ความลึก: 605
- ทิศทาง: ขึ้น
- ขนาด: 5
- นุ่ม: 1
แรเงา
- มุม: 90
- ระดับความสูง: 37
- โหมดไฮไลท์: หลบสี ความทึบ 55%
- โหมดเงา: หลายความทึบ 25%
เคล็ดลับคือทำให้การตั้งค่าสูงพอที่คุณจะมองเห็นความแตกต่างได้ แต่ไม่มากจนเกินบรรยาย
หลังจากทำ Bevel & Emboss เสร็จแล้ว เราก็ไปที่ คอนทัวร์ และเปิดใช้งานด้วย Contour ทำให้คำจำกัดความของ Bevel & Emboss แข็งแกร่งขึ้นเล็กน้อย และสำหรับบทช่วยสอนนี้ เราเลือกการตั้งค่า กรวย - คว่ำ .
ถัดไป เปิด การซ้อนทับแบบไล่โทนสี . นี่คือสิ่งที่ทำให้ปุ่มมีลักษณะ 'มันวาว' โค้งมนเล็กน้อย การตั้งค่ามีดังนี้:
- โหมดผสมผสาน: โอเวอร์เลย์
- ความทึบ: 90
- สไตล์: เชิงเส้น
- มุม: 90
- มาตราส่วน: 100
ในที่สุด เราก็เปิด เงา เพื่อทำให้ปุ่มดู 'สูง' จากพื้นหลังสีขาวของเว็บไซต์หรือบล็อก อีกครั้ง นี่คือการตั้งค่า:
แหล่งดาวน์โหลดหนังสือ epub ที่ดีที่สุด
โครงสร้าง
- โหมดผสมผสาน: หลายรายการ
- ความทึบ: 35
- มุม: 90
- ระยะทาง: 2
- แพร่กระจาย: 6
- ขนาด: 8
คุณภาพ
- รูปร่าง: เชิงเส้น
- เสียงรบกวน: 0
- เลเยอร์ Knocks Out Drop Shadow: บน
ตอนนี้ได้เวลาบันทึกข้อกำหนดเหล่านี้เป็น Layer Style
ขั้นตอนที่ 4: บันทึกเป็นสไตล์เลเยอร์
เมื่อคุณตั้งค่าปุ่มเสร็จแล้ว ปุ่มจะเริ่มเป็น 3 มิติ เนื่องจากมีโอกาสสูงที่คุณจะสร้างปุ่ม 3D มากกว่าหนึ่งปุ่ม เราจึงต้องหาวิธีที่รวดเร็วและง่ายดายในการทำเช่นนี้
นี่คือวิธีการ
ก่อนคลิก ตกลง ใน สไตล์เลเยอร์ กล่องโต้ตอบ คลิกที่ สไตล์ใหม่ . เมื่อคุณทำ Photoshop จะบันทึกสไตล์เลเยอร์นี้ที่คุณสร้างไว้สำหรับปุ่มของคุณ
หากคุณกำลังใช้ Photoshop CC สไตล์ใหม่นี้จะถูกบันทึกไว้ใน .ของคุณ ห้องสมุด ส่วนดังที่คุณเห็นด้านบน เข้าถึงได้ง่ายและรวดเร็วมาก
ขั้นตอนที่ 5: วิธีใช้สไตล์เลเยอร์ที่บันทึกไว้
เมื่อคุณออกแบบปุ่มและบันทึกเป็นสไตล์เลเยอร์แล้ว มาดูการใช้งานจริงสำหรับสถานะ 'ขึ้น' ของคุณ ไม่มีคำโกหก การทำเช่นนี้จะลดเวลาทำงานของคุณลงครึ่งหนึ่ง
ขั้นแรก ให้สร้างปุ่มอื่นที่อยู่เหนือเลเยอร์ปุ่มสีแดงโดยตรง ขอให้เป็นสีเขียวเพื่อเน้น
ถัดไป---แทนที่จะดับเบิลคลิกที่เลเยอร์ตัวเองเพื่อเปิด สไตล์เลเยอร์ กล่องโต้ตอบ---ดับเบิลคลิกที่สไตล์เลเยอร์ในของคุณ ห้องสมุด แผงหน้าปัด.
เมื่อคุณทำเช่นนั้น Photoshop จะนำสไตล์ที่คุณบันทึกไว้ไปใช้กับเลเยอร์ปุ่มใหม่ของคุณโดยอัตโนมัติ ในขณะที่ยังคงสีและรูปร่างใหม่ไว้ ตอนนี้คุณมีปุ่มสองปุ่ม—หนึ่งปุ่มอยู่ในสถานะขึ้น และอีกปุ่มหนึ่งอยู่ในสถานะลง—และมันง่ายมากที่จะทำ ฉันรักทางลัดนี้
ขั้นตอนที่ 6: เพิ่มข้อความลงในปุ่มของคุณ
ต่อไป เราจะเพิ่มข้อความลงในปุ่ม
หากต้องการเพิ่มข้อความ ให้สร้างเลเยอร์ใหม่เหนือเลเยอร์ปุ่มทั้งสอง คลิก พิมพ์เครื่องมือ เพื่อเริ่มพิมพ์
สำหรับบทช่วยสอนนี้ เราจะเขียนคำว่า 'สมัครรับข้อมูล' เพราะเป็นสิ่งที่คุณเห็นค่อนข้างบ่อยบนเว็บไซต์และแพลตฟอร์มโซเชียลมีเดีย
เราจะใช้ฟอนต์ที่ปลอดภัยสำหรับเว็บซานเซอริฟด้วย ตัวเลือกสุดท้ายที่คุณใช้สำหรับปุ่มของคุณเองนั้นขึ้นอยู่กับคุณ Montserrat, Proxima Nova, Arial และ Verdana ล้วนเป็นทางเลือกที่ใช้กันอย่างแพร่หลายและปลอดภัยสำหรับเว็บ
อย่างไรก็ตาม หลังจากเสร็จสิ้นแล้ว ยังมีการเปลี่ยนแปลงเล็กๆ น้อยๆ อีกเล็กน้อยที่คุณต้องทำเพื่อให้ข้อความนี้ 'ป๊อป'
ขั้นแรก ให้ดับเบิลคลิกที่เลเยอร์ที่มีข้อความของคุณ เพื่อให้คุณสามารถนำมันขึ้นมาในของคุณ สไตล์เลเยอร์ กล่องโต้ตอบ
ต่อไปให้คลิกที่ เงาภายใน เพื่อเพิ่มความหดหู่ใจ (หรือพื้นที่จม) ลงในข้อความของคุณ ทำให้ดูเหมือนตัวอักษรถูกสลักไว้บนปุ่ม การตั้งค่าที่แน่นอนที่เราใช้สำหรับบทช่วยสอนนี้อยู่ด้านล่าง
โครงสร้าง
- โหมดผสมผสาน: คูณ
- ความทึบ: 35
- มุม: 90
- ระยะทาง: 2
- สำลัก: 4
- ขนาด: 1
คุณภาพ
- รูปร่าง: เชิงเส้น
- เสียงรบกวน: 0
ต่อไป ใช้ a โอเวอร์เลย์ไล่โทนสี กับตัวอักษรเหล่านั้น เพื่อให้กลมกลืนกับปุ่มได้ง่ายขึ้นโดยไม่ดูแบน อีกครั้ง การตั้งค่าสำหรับเราคือ:
- โหมดผสมผสาน: การเผาไหม้สี
- ความทึบ: 90
- สไตล์: เชิงเส้น
- มุม: 90
- มาตราส่วน: 100
ขั้นตอนที่ 7: เสร็จสิ้น
หลังจากที่คุณสร้างรูปแบบข้อความนี้แล้ว---โดยเฉพาะถ้าคุณต้องการใช้อีกครั้ง---ไปที่ สไตล์ใหม่ และบันทึกไว้ก่อนที่คุณจะคลิก ตกลง .
เมื่อสรุปแล้ว คุณสามารถสลับไปมาได้อย่างรวดเร็วในการมองเห็นระหว่างเลเยอร์ปุ่มทั้งสองของคุณ เพื่อดูว่าสถานะ 'ขึ้น' และ 'ลง' เป็นอย่างไร
เจ๋งมากใช่มั้ย? หากต้องการบันทึกไฟล์ ให้ไป ไฟล์ > บันทึกเป็น และบันทึกเป็นรูปแบบไฟล์ที่เหมาะสมสำหรับโครงการใดก็ตามที่คุณอาจกำลังทำอยู่
ปรับแต่งบล็อกของคุณด้วยปุ่ม 3 มิติและวิดเจ็ต
เมื่อคุณรู้วิธีสร้างปุ่ม 3 มิติใน Photoshop แล้ว คุณก็สร้างสรรค์กับมันได้ โดยออกแบบปุ่ม 3 มิติของคุณเองให้เหมาะกับความต้องการของคุณ และด้วยทักษะเหล่านี้ในคลังแสงของคุณ คุณสามารถสร้างผลิตภัณฑ์ที่ไม่เพียงแต่เป็นมืออาชีพ แต่ยังมีลักษณะเฉพาะตัวอีกด้วย
ต้องการทราบเกี่ยวกับสิ่งอื่น ๆ ที่คุณสามารถทำได้ด้วยโปรแกรมนี้หรือไม่? นี่มัน วิธีลบพื้นหลังใน Photoshop .
แบ่งปัน แบ่งปัน ทวีต อีเมล วิธีเข้าถึงระดับบับเบิ้ลในตัวของ Google บน Androidหากคุณเคยต้องการให้แน่ใจว่าบางสิ่งบางอย่างอยู่ในระดับที่รวดเร็ว ตอนนี้คุณสามารถรับระดับฟองบนโทรศัพท์ของคุณในไม่กี่วินาที
อ่านต่อไป หัวข้อที่เกี่ยวข้อง- ความคิดสร้างสรรค์
- Adobe Photoshop
- เคล็ดลับการแก้ไขภาพ
- กวดวิชา Photoshop
Shianne สำเร็จการศึกษาระดับปริญญาตรีด้านการออกแบบและมีพื้นฐานด้านพอดคาสต์ ตอนนี้เธอทำงานเป็น Senior Writer และ 2D Illustrator เธอครอบคลุมเทคโนโลยีสร้างสรรค์ ความบันเทิง และประสิทธิภาพการทำงานสำหรับ MakeUseOf
เพิ่มเติมจาก Shianne Edelmayerสมัครรับจดหมายข่าวของเรา
เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!
คลิกที่นี่เพื่อสมัครสมาชิก