ส่วนต่อประสานที่ใช้งานง่าย กราฟิกที่วาดออกมาอย่างดี การจัดเรียงองค์ประกอบบนหน้าที่ถูกต้อง - ครึ่งหนึ่งของความสำเร็จของไซต์กับผู้เยี่ยมชม การวาดปุ่มสำหรับเว็บไซต์เป็นส่วนเล็กๆ แต่มีความสำคัญในการทำงานในโครงการออนไลน์
คำแนะนำ
ขั้นตอนที่ 1
ลองวาดปุ่มกลม วิธีการที่ระบุด้านล่างนี้เป็นวิธีการสากลสำหรับการสร้างโลโก้และอวาตาร์ การวาดนั้นไม่ยากแม้จะมีจำนวนการกระทำที่คุณต้องทำ
ขั้นตอนที่ 2
เปิด Adobe Photoshop สร้างเอกสารใหม่โดยกดชุดค่าผสม "Ctrl + N" พารามิเตอร์รูปภาพ 300 * 300 ความละเอียด 72 ppi พื้นหลังและโหมดสีเริ่มต้นคือสีขาวและ RGB ตามลำดับ
ขั้นตอนที่ 3
เป็นการดีที่สุดที่จะวาดด้วยเวกเตอร์เพื่อที่ว่าเมื่อปุ่มลดลง คุณภาพของปุ่มจะไม่ลดลง เลือกเครื่องมือ Oval กด Shift ค้างไว้แล้ววาดวงกลมจากจุดศูนย์กลาง
ขั้นตอนที่ 4
ตอนนี้ใช้เอฟเฟกต์บางอย่างกับวงกลมผลลัพธ์ ไปที่เมนู "เลเยอร์" - "สไตล์เลเยอร์" - "ตัวเลือกการผสม" ที่นี่คุณจะต้องใช้การไล่ระดับสี
ขั้นตอนที่ 5
ถัดไป ที่นี่ ให้ทำเครื่องหมายที่ช่องถัดจาก "ลายนูน" เพื่อให้ปุ่มนูนที่จำเป็น และตั้งค่าพารามิเตอร์ต่อไปนี้: ลักษณะ - ลายนูนเค้าร่าง วิธีการ - การตัดแบบนุ่มนวล ความลึก - 220% ขนาด - 1 พิกเซล การอ่อนตัว - 5 พิกเซล, มุม - 135® ไม่มีแสงส่วนกลาง, ความสูง - 32, โหมดไฮไลท์ - ปกติด้วยความทึบ 30%, โหมดเงา - คูณด้วยความทึบ 25%
ขั้นตอนที่ 6
เพื่อเพิ่มระดับเสียง ที่นี่ในพารามิเตอร์การผสม ให้ทำเครื่องหมายที่ช่อง "เงา" และตั้งค่าพารามิเตอร์ต่อไปนี้: โหมดการผสม - การคูณ ความโปร่งใส - 40% มุม - 125o โดยใช้การส่องสว่างทั่วโลก ออฟเซ็ต - 5 พิกเซล ขนาด - 20 พิกเซล.
ขั้นตอนที่ 7
ผลลัพธ์ของการกระทำที่ได้จะเป็นภาพดังแสดงในรูป
ขั้นตอนที่ 8
ตอนนี้สร้างเลเยอร์ใหม่ เลือก "วงรี" อีกครั้งแล้ววาดวงกลมที่มีรัศมีเล็กกว่ารูปร่างแรก เปิด "ตัวเลือกการผสม" ทำเครื่องหมายที่ช่องถัดจาก "เงาภายใน" และตั้งค่าพารามิเตอร์: โหมดการผสม - แสงอ่อน, มุม - 125o, ออฟเซ็ต - 0px, หด - 45%, ขนาด - 21px
ขั้นตอนที่ 9
ถัดไป ในตัวเลือกการผสม ให้เลือก "การไล่ระดับสีซ้อนทับ" และสร้างการไล่ระดับสีด้วยพารามิเตอร์ดังในภาพ คลิกตกลง
ขั้นตอนที่ 10
ถัดไป ตั้งค่า Blending Style เป็น Radial, Scale เป็น 124%
ขั้นตอนที่ 11
ตอนนี้ทำเครื่องหมายที่ช่อง "จังหวะ" และตั้งค่าพารามิเตอร์ต่อไปนี้: ขนาด - 5 พิกเซล, ตำแหน่ง - ภายนอก, โหมดการผสม - ปกติ, ความทึบ - 100%, ประเภทจังหวะ - การไล่ระดับสี
ขั้นตอนที่ 12
จากการกระทำเหล่านี้ คุณควรได้สิ่งที่ดูเหมือนปุ่มมากขึ้น คุณสามารถเปิดตัวเลือกการผสมอีกครั้งและทดลองกับตัวเลือกเหล่านั้นได้
ขั้นตอนที่ 13
ตอนนี้เราต้องเพิ่มปุ่มไฮไลท์เพื่อให้ปุ่มนั้นปรากฏบนพื้นผิวกระจก ในการทำเช่นนี้ ให้สร้างเลเยอร์ใหม่อีกครั้ง เลือกเครื่องมือ Oval Selection สร้างวงรีเหนือปุ่ม แล้วเติมด้วยสีขาวโดยใช้เครื่องมือเติม กด Ctrl ค้างไว้ คลิกที่เลเยอร์ที่มีวงกลมสี กลับส่วนที่เลือก ("Selection" - "Inversion") ตอนนี้กด Delete ควรตัดวงรีรอบปริมณฑลของวงกลม
ขั้นตอนที่ 14
ในแผง Layers ให้เปลี่ยนตัวเลือก Normal เป็น Soft Light จากนั้นคลิกที่ไอคอน vector mask และเลือก Fill Tool - Gradient เติมไฮไลท์จากล่างขึ้นบน ปุ่มเกือบจะพร้อมแล้ว
ขั้นตอนที่ 15
คุณสามารถเพิ่มคำจารึกลงในปุ่มได้ คุณยังสามารถใช้เอฟเฟกต์การผสมกับมันได้ เช่น การเรืองแสงด้านใน ด้านนอก การไล่ระดับสี และอื่นๆ อย่ากลัวที่จะทดลอง ยิ่งใช้จินตนาการในงานมากเท่าไหร่ คุณก็จะเชี่ยวชาญทั้งตัวแก้ไขและการออกแบบเว็บเร็วขึ้นเท่านั้น