การออกแบบอินเตอร์เฟสวิดีโอเพรียวบาง - การสอนด้วย Photoshop
ยุคนี้เป็นเพียงส่วนต่อประสานที่ทันสมัย ไม่เพียง แต่ดูเป็นมืออาชีพ แต่ที่สำคัญที่สุดคือการให้ความรู้สึกน่าเชื่อถือแก่ผู้คนและนั่นคือสิ่งที่ธุรกิจส่วนใหญ่มองหา การรับรู้ถึงความสำคัญฉันจะแสดงให้คุณเห็นทีละขั้นตอนเพื่อออกแบบส่วนต่อประสานอันทันสมัยของเครื่องเล่นวิดีโอ.
เราจะใช้เลเยอร์สไตล์การวาดแบบเวกเตอร์และการวาดด้วยตนเองบางส่วนเพื่อทำอินเทอร์เฟซนี้ให้สมบูรณ์ มาเข้าสู่กระบวนการสร้างกันเถอะ!
ทรัพยากรที่จำเป็น
หากต้องการติดตามบทช่วยสอนนี้คุณจะต้องใช้แหล่งข้อมูลฟรีนี้.
- รูปแบบพิกเซลที่ทำซ้ำได้จาก PSDfreemium
ขั้นตอนที่ 1: สร้างพื้นหลัง
เริ่มต้นด้วยการสร้างไฟล์ใหม่ที่มีขนาด 800 × 500 px วาดการไล่ระดับรัศมีจากสีขาวเป็นสีเทา.
ขั้นตอนที่ 2
มาไล่ระดับสีเข้มขึ้นโดยการเพิ่ม Adjustment Layer> Hue / Saturation และลดการตั้งค่า Lightness.
ขั้นตอนที่ 3
สร้างเลเยอร์ใหม่และเติมด้วยสีขาว คลิกตัวกรอง> เสียงรบกวน> เพิ่มเสียงรบกวน ตั้งค่าโหมดผสมผสานเป็น Multiply.
ขั้นตอนที่ 4
ชั้นเสียงซ้ำซ้อนที่เราเพิ่งสร้างขึ้นโดยการกด Ctrl + J เปิดใช้งานเครื่องมือย้ายจากนั้นกดลูกศรลงและลูกศรขวาหนึ่งครั้งเพื่อเลื่อนไป 1 px ลงและขวา กด Ctrl + I เพื่อสลับสีและตั้งค่าโหมดผสมผสานเป็นหน้าจอ ที่นี่เรามีพื้นผิวที่ดี.
ขั้นตอนที่ 5
เลือกทั้งเลเยอร์เสียงรบกวนจากนั้นกด Ctrl + G เพื่อวางไว้ในกลุ่ม ลดความทึบของมันลง 50%.
ขั้นตอนที่ 6: รูปร่างพื้นฐานของ Video Player
วาดสี่เหลี่ยมด้วยสี: # 151d25.
เพิ่มสไตล์เลเยอร์: การไล่ระดับสีและการลากเส้น.
นี่คือผลลัพธ์หลังจากเพิ่มสไตล์เลเยอร์.
ขั้นตอนที่ 7: แถบชื่อเรื่อง
วาดรูปร่างสี่เหลี่ยมผืนผ้าด้านบนของอินเทอร์เฟซหลัก ตั้งค่าสีเป็น # 272e36 เราจะใช้สี่เหลี่ยมนี้เป็นแถบหัวเรื่อง.
เพิ่มสไตล์ของเลเยอร์: ปล่อยเงาและการไล่ระดับสี.
ขั้นตอนที่ 8
ซูมเข้าใกล้ด้านซ้ายของสี่เหลี่ยมผืนผ้า เปิดใช้งานเครื่องมือดินสอและตั้งค่าขนาดแปรงเป็น 1 px วาดเส้นบางเส้นเป็นไฮไลต์.
ขั้นตอนที่ 9
วาดไฮไลต์อื่นที่ส่วนบนของแถบชื่อเรื่อง สร้างเลเยอร์ใหม่แล้ววาดเส้นขาว 1 px ลบปลายทั้งสองโดยใช้เครื่องมือยางลบอ่อน ลดความทึบของมันลง 10%.
ขั้นตอนที่ 10
ทำซ้ำกระบวนการก่อนหน้านี้ทางด้านขวาของแถบชื่อเรื่อง.
ขั้นตอนที่ 11
นี่คือสิ่งที่เรามีในการขยาย 100% อย่างที่คุณเห็นไฮไลท์นั้นบอบบางมาก แต่อินเทอร์เฟซไม่แบนอีกต่อไป.
ขั้นตอนที่ 12: ปุ่มต่ำสุด, สูงสุดและปิด
วาดสี่เหลี่ยมผืนผ้าที่ด้านขวาของแถบชื่อเรื่อง ใช้ color # 5c3936 นี่จะเป็นพื้นหลังสำหรับปุ่มปิด.
เพิ่มสไตล์เลเยอร์: การไล่ระดับสีแบบไล่ระดับ.
ขั้นตอนที่ 13
เพิ่มสัญลักษณ์ปิดที่ทำจากเส้นทางสี่เหลี่ยมผืนผ้าที่ทับซ้อนกันสองเส้นทางในโหมดเพิ่มเป็นรูปร่าง.
เพิ่มสไตล์ชั้น: เรืองแสงด้านนอก.
นี่คือผลลัพธ์หลังจากเราเพิ่ม Outer Glow ไปยังสัญลักษณ์ปิด.
ขั้นตอนที่ 14
ทำซ้ำกระบวนการนี้เพื่อเพิ่มสัญลักษณ์ย่อและขยายให้ใหญ่สุด.
ขั้นตอนที่ 15
ลองเพิ่มตัวคั่นระหว่างสัญลักษณ์แต่ละตัว สร้างเลเยอร์ใหม่วาดเส้นดำ 1 px และลด Opacity เป็น 30% ถัดจากนั้นวาดเส้นดำขนาด 1 px อีกครั้งและลดความทึบของเลเยอร์ลงเป็น 70% อีกครั้งคราวนี้วาดเส้นสีขาว 1 px ด้วยความทึบ 5%.
นี่คือสิ่งที่เรามีในขนาด 100% ตอนนี้เรามีสิ่งที่ใส่เข้าไปแล้วและเพิ่มความลึกเข้าไปในส่วนต่อประสาน.
ขั้นตอนที่ 16
วางบรรทัดเหล่านั้นในเลเยอร์กลุ่มแยกจากกันโดยเลือกจากนั้นกด Ctrl + G กดปุ่ม Alt ค้างไว้แล้วลากกลุ่มเพื่อทำซ้ำ ใส่เส้นระหว่างสัญลักษณ์แต่ละอัน.
ขั้นตอนที่ 17
เพิ่มชื่อวิดีโอบนแถบชื่อเรื่อง เพิ่มสไตล์ของเลเยอร์: ปล่อยเงาและการไล่ระดับสี เลเยอร์สไตล์เหล่านี้จะเพิ่มเอฟเฟกต์โลหะลงบนข้อความ.
ขั้นตอนที่ 18: หน้าจอ
วาดสี่เหลี่ยมสำหรับพื้นที่หน้าจอ ใช้ # 272e36 สำหรับสีของมัน.
เพิ่มสไตล์ของเลเยอร์: ปล่อยเงาและการไล่ระดับสี.
ขั้นตอนที่ 19
สร้างเลเยอร์ใหม่แล้ววาดไฮไลต์โดยใช้เครื่องมือดินสอพร้อมแปรง 1 px.
ขั้นตอนที่ 20
อีกครั้งวาดไฮไลท์อีกครั้งที่ด้านบนของพื้นที่หน้าจอ.
ขั้นตอนที่ 21
วาดสี่เหลี่ยมขนาดเล็กลงด้วยสี # 252626.
เพิ่มสไตล์ของเลเยอร์: วางเงา, เงาภายใน, และวางทับลาด.
นี่คือผลลัพธ์หลังจากเพิ่มสไตล์เลเยอร์.
ขั้นตอนที่ 22: แถบความคืบหน้า
วาดสี่เหลี่ยมที่มีสี # 272e36 ใต้หน้าจอ.
เพิ่มสไตล์ของเลเยอร์: ปล่อยเงาและการไล่ระดับสี.
ขั้นตอนที่ 23
เช่นเดียวกับที่เราทำมาก่อนวาดไฮไลท์บนสี่เหลี่ยมผืนผ้าโดยใช้เครื่องมือดินสอ 1 px.
ขั้นตอนที่ 24
นี่คือสิ่งที่เรามีในการขยาย 100%.
ขั้นตอนที่ 25
วาดสี่เหลี่ยมขนาดเล็กลงด้วยสี # 313131.
เพิ่มสไตล์ของเลเยอร์: เงาใน, เรืองแสงด้านในและการไล่ระดับสี.
นี่คือสิ่งที่เรามี.
ขั้นตอนที่ 26
สี่เหลี่ยมผืนผ้าที่ซ้ำกันที่เราเพิ่งสร้างโดยกด Ctrl + J เปลี่ยนสีเป็น # 357ffa.
เปลี่ยนการตั้งค่าของเลเยอร์สไตล์.
ใช้การตั้งค่าเหล่านี้นี่คือสิ่งที่เรามีตอนนี้.
ขั้นตอนที่ 27
เปิดใช้งานเครื่องมือ Direct Selection จากนั้นเลือกจุดทางด้านซ้าย กด Shift + ลูกศรซ้ายสองสามครั้งเพื่อย้ายจุดที่เลือก.
ขั้นตอนที่ 28
เพิ่มข้อมูลเวลาการติดตามทั้งหมดที่ด้านบนของแถบโหลด.
ขั้นตอนที่ 29
วาดสี่เหลี่ยมสีดำที่ครอบคลุมความคืบหน้าจากนั้นลดความทึบของมันลงเหลือ 10%.
ด้านล่างนี้คุณสามารถเห็นความแตกต่างของแสงบนแถบความคืบหน้าก่อนและหลังการเพิ่มสี่เหลี่ยมสีดำ.
ขั้นตอนที่ 30
วาดไฮไลต์บนแถบความคืบหน้าโดยใช้เครื่องมือดินสอ 1 px.
นี่คือสิ่งที่เราเห็นในการขยาย 100%.
ขั้นตอนที่ 31: ปุ่ม
ลองวาดอีกสี่เหลี่ยมผืนผ้าด้วยสี # 272e36 คราวนี้เราจะใช้มันเพื่อวางปุ่มควบคุม.
เพิ่มสไตล์ของเลเยอร์: ปล่อยเงาและการไล่ระดับสี.
ขั้นตอนที่ 32
เพิ่มไฮไลต์ที่ด้านซ้ายของสี่เหลี่ยมผืนผ้า.
ขั้นตอนที่ 33
ใช้เครื่องมือรูปร่างพื้นฐานเพื่อวาดปุ่มบางปุ่ม.
ขั้นตอนที่ 34: เงา
กดปุ่ม Ctrl ค้างไว้แล้วคลิกรูปร่างพื้นฐานของอินเทอร์เฟซเพื่อสร้างการเลือกใหม่ตามรูปร่าง สร้างเลเยอร์ใหม่และวางไว้ด้านหลังโปรแกรมเล่นวิดีโอ เติมส่วนที่เลือกด้วยสีดำ ลบส่วนที่เลือกโดยกด Ctrl + D. ทำให้เงานุ่มขึ้นโดยใช้ Gaussian Blur คลิกตัวกรอง> เบลอ> Gaussian Blur.
ขั้นตอนที่ 35: เพิ่มการสะท้อน
ทำซ้ำรูปร่างพื้นฐานของอินเตอร์เฟสและลด Fill เป็น 0% วางไว้ที่ด้านบนของหน้าจอ วาดรูปหลายเหลี่ยมทางด้านซ้ายของสี่เหลี่ยมและตั้งค่าโหมดของมันเพื่อลบ.
เพิ่มสไตล์เลเยอร์: การไล่ระดับสีแบบไล่ระดับ.
ขั้นตอนที่ 36: รูปแบบที่บอบบางบนหน้าจอ
ขณะนี้หน้าจอจะแบนมาก เลือกพื้นที่หน้าจอหลักและเติมสีใดก็ได้ ตั้งค่าการเติมเป็น 0%.
คว้ารูปแบบพิกเซลที่ดีจาก PSDfreemium ใช้การตั้งค่าที่มีอยู่อย่างใดอย่างหนึ่งในสไตล์เลเยอร์: การซ้อนทับแบบ.
ตรวจสอบให้แน่ใจว่ารูปแบบบอบบางมากโดยตั้งค่าความทึบเป็นเพียง 1%.
ขั้นตอนที่ 37
สุดท้ายให้เปิดใช้งานเครื่องมือแปรง ตั้งค่าความแข็งของแปรงเป็น 0% และตั้งค่าความทึบเป็นต่ำมาก 2 หรือ 3% วาดแสงสีอ่อน ๆ ที่กึ่งกลางของหน้าจอ.
ขั้นตอนที่ 38: ผลลัพธ์สุดท้าย
นี่คือผลลัพธ์ของการสอน ฉันหวังว่าคุณจะได้เรียนรู้เทคนิคใหม่และสนุกไปกับมัน.
ดาวน์โหลด PSD
ไม่สามารถบรรลุขั้นตอนบางอย่างใช่หรือไม่ นี่คือไฟล์ PSD ของผลลัพธ์เพื่อให้คุณทดสอบและเล่น.
- ไฟล์ PSD ของบทเรียนการสอนรูปแบบไฟล์วิดีโอที่ทันสมัย
