สร้างแถบผู้ใช้แบบเคลื่อนไหวพร้อมข้อความเลื่อนใน Photoshop สร้างแถบผู้ใช้ใน Photoshop สร้างแถบผู้ใช้

นี่คือภาพกราฟิกที่มีขนาด 350x19 พิกเซล แถบผู้ใช้ถูกใช้ในฟอรัม วางไว้ในลายเซ็นและแสดงอารมณ์ ทัศนคติต่อบางสิ่ง การเสพติด งานอดิเรก และอื่นๆ สำหรับแต่ละอารมณ์หรือโอกาส คุณต้องสร้างแถบผู้ใช้และวางไว้ในลายเซ็นตามต้องการ

จะสร้างแถบผู้ใช้ได้อย่างไร

การสร้างแถบผู้ใช้เป็นกระบวนการง่ายๆ คุณสามารถสร้างแถบผู้ใช้ออนไลน์โดยใช้โปรแกรมแก้ไขกราฟิกหรือเครื่องมือสร้างแบนเนอร์ฟรี หรือคุณสามารถใช้เครื่องมือสร้างแถบผู้ใช้แบบพิเศษที่ใช้งานง่ายมากและสร้างภาพขนาดคงที่พร้อมข้อความของคุณ

หากต้องการสร้างแถบผู้ใช้ใน Userba ให้เริ่มด้วยการตั้งค่าพื้นหลังโดยเลือกทิศทางและสีของการไล่ระดับสี จากนั้น ตัดสินใจเกี่ยวกับเอฟเฟกต์เพิ่มเติมที่จะใช้บนแถบผู้ใช้ จากรายการดรอปดาวน์ ให้เลือกการฟักพื้นหลัง (รอยบาก) และการซ้อนทับรูปแบบ (เอฟเฟ็กต์) เพื่อสร้างเอฟเฟกต์ดั้งเดิมบนรูปภาพ และตั้งค่าตำแหน่งของไฮไลท์ (ไฮไลท์) เพื่อเพิ่มความเป็นสามมิติและบุคลิกภาพให้กับแถบผู้ใช้ เทมเพลตจำนวนมากจะช่วยให้คุณสามารถรวบรวมแนวคิดที่หลากหลายได้

ยังคงต้องปรับสีของกรอบและองค์ประกอบข้อความของแถบผู้ใช้ ระบุแบบอักษร ขนาด สีของข้อความ และเขียนข้อความเอง หากต้องการดูเวอร์ชันสุดท้าย เพียงคลิกที่ปุ่ม "สร้าง" และแถบผู้ใช้ออนไลน์ที่คุณสร้างขึ้นจะปรากฏในหน้าต่างแสดงตัวอย่าง

บริการสร้างและแก้ไขรูปภาพ ภาพถ่าย และกราฟิกอื่นๆ:

และเอกลักษณ์องค์กร ซองจดหมาย และนามบัตร

คล้ายกับ Photoshop ที่มีชื่อเสียง

บริการที่น่าสนใจสำหรับผู้ที่ชื่นชอบการวาดภาพ

บราเชชกา

เพียงในบริการ BannerFans

เราสร้าง เอกสารใหม่ขนาด 8x8 พิกเซล แล้วทาสีทับตามนี้ คุณสามารถใช้เฉดสีเทาโดยพลการ แต่ต้องสังเกตการจัดลำดับของเฉดสี

จากนั้นเปิดสไตล์เลเยอร์โดยคลิกที่ไอคอนที่เกี่ยวข้องในจานสีเลเยอร์ เลือกรายการ
"การซ้อนทับรูปแบบ" (การซ้อนทับรูปแบบ) ในนั้นเราเลือกรูปแบบที่เราสร้างขึ้นและตั้งค่าต่อไปนี้:

ทุกอย่างพื้นหลังพร้อมแล้ว ควรมีลักษณะดังนี้:

เลือกโลโก้หรือรูปภาพที่เหมาะสมแล้วเปิดใน Photoshop ฉันเอาสิ่งนี้:

เราสร้างโหมดการแสดงผล "Windows" (เปลี่ยนโหมดการแสดงผลด้วยปุ่ม F) และลากโลโก้ไปยังเอกสารด้วยแถบผู้ใช้ด้วยเมาส์ สร้าง เลเยอร์ใหม่และฉันตั้งชื่อให้โดยอัตโนมัติว่า "เลเยอร์ 3" ในแผงเลเยอร์ ตรวจสอบว่าเลเยอร์ที่มีโลโก้เปิดใช้งานอยู่ ใช้เครื่องมือ "ย้าย" เพื่อกำหนดตำแหน่งแนวนอนที่ต้องการให้กับโลโก้ ถัดไป เปิดโหมด snapping หากไม่ได้เปิดใช้งาน (แท็บ View --> Anchor หรือกดปุ่ม Shift + Ctrl +;) และกด Shift ค้างไว้ เลื่อนโลโก้ลงเพื่อให้ขอบด้านบนของโลโก้ "ติด" " ที่ขอบด้านล่างของแถบผู้ใช้

ลองเขียนข้อความ ฟอนต์ Visitor เหมาะสำหรับแถบผู้ใช้ คุณสามารถดาวน์โหลดได้ในบทความ ฟอนต์แถบผู้ใช้ของ Visitor พร้อมรองรับตัวอักษรรัสเซีย วิธีติดตั้งฟอนต์ โปรดดูที่ การทำงานกับฟอนต์และการเพิ่มฟอนต์ใน Adobe Photoshop

สิ่งสำคัญคือต้องจำไว้ว่าเมื่อใช้ฟอนต์ที่มีความหนา 1-2 พิกเซล คุณต้องปิดการลบรอยหยักในแผงฟอนต์

ฉันสร้างคำจารึกสองคำคือ "การประมวลผลภาพ" และ "กราฟิกวิดีโอ.ru" แต่ละคำจารึกบนเลเยอร์ทดสอบที่แยกจากกัน ตั้งชื่อเลเยอร์เหล่านี้ว่า "การประมวลผลภาพ" และ "ข้อความ:กราฟิกวิดีโอ.ru" พวกมันจำเป็นสำหรับแอนิเมชั่นข้อความ โดยเฉพาะอย่างยิ่งสำหรับแอนิเมชั่นของข้อความตัวอักษรต่อตัวอักษร

ไปที่แอนิเมชั่นกันเถอะ

ตอนนี้สิ่งสำคัญคืออย่าสับสนกับลำดับของการกระทำ มิฉะนั้นคุณจะได้รับ krakozyaba แต่ไม่ว่าในกรณีใดโปรแกรม Photoshop ที่ยอดเยี่ยมช่วยให้เราสามารถยกเลิกการกระทำที่ไม่ถูกต้องอย่างน้อยหนึ่งอย่างโดยการกดแป้น Shift + Alt + Z

เปิดแผงภาพเคลื่อนไหว (แท็บ หน้าต่าง --> ภาพเคลื่อนไหว) หากแผงไม่เปิดในโหมดเฟรมต่อเฟรมให้คลิกที่ปุ่ม (2) ภาพเคลื่อนไหวเฟรมแรกถูกสร้างขึ้นโดยอัตโนมัติ ตั้งเวลาแสดงเฟรมเป็น 0.1 วินาทีโดยคลิกที่รูปสามเหลี่ยมที่มุมขวาล่างของไอคอนเฟรม

จำได้ไหมว่าโลโก้ของเราอยู่ด้านล่าง มองไม่เห็น? นี่มันมองไม่เห็น

สร้างเฟรมที่สอง (คลิกที่ปุ่ม (1) บนแผงภาพเคลื่อนไหว) กด Shift ค้างไว้ ลากโลโก้ "เลเยอร์ 3" ในแนวตั้งขึ้น จนกระทั่งโลโก้หายไปจากมุมมอง เพื่อให้ขอบด้านล่างติดกับขอบด้านบนของแถบผู้ใช้ คลิกที่ปุ่ม (3) ในหน้าต่างที่เปิดขึ้น สร้าง 10 เฟรมระดับกลาง

เราตรวจสอบว่าเฟรมทั้งหมดมีเวลาแสดง 0.1 วินาทีหรือไม่ ถ้าไม่เช่นนั้น คุณสามารถเลือกสิ่งที่คุณต้องการโดยกด Ctrl ค้างไว้ คลิกที่สามเหลี่ยมที่มุมขวาล่างของไอคอนของเฟรมใดก็ได้ และเปลี่ยนเวลาในแผงที่เปิดขึ้น มันจะเปลี่ยนไปสำหรับเฟรมที่เลือกทั้งหมด
คลิกที่เล่น สนุกกับผลลัพธ์

หลังจากสนุกกับเวลาที่กำหนดแล้ว เรามาต่อส่วนที่สองของการเต้นรำพร้อมโลโก้กันเถอะ คลิกที่เฟรมสุดท้ายในแผงภาพเคลื่อนไหว (ตรวจสอบให้แน่ใจว่าไม่มีโลโก้ปรากฏอยู่ในช่องแถบผู้ใช้) จากนั้นสร้างเฟรมใหม่ คลิกที่ "เลเยอร์ 3" ในแผงเลเยอร์ กด Ctrl+J สิ่งนี้จะโคลน "เลเยอร์ 3" ผลลัพธ์คือเลเยอร์ใหม่ "เลเยอร์ 3 สำเนา" ย้ายไปที่มุมมอง กด Ctrl+T และปรับขนาดโลโก้ให้พอดีกับแถบผู้ใช้:

ด้วยบทช่วยสอนนี้ คุณสามารถทำเองได้ง่ายๆ แถบผู้ใช้อะนิเมะในโปรแกรม Adobe Photoshop. บทเรียนจะแสดงสองวิธี การสร้างแถบผู้ใช้.

1 วิธี

สร้างเอกสารใหม่ (Ctrl + N) ขนาด 350x19 พิกเซล (ขนาดมาตรฐานสำหรับแถบผู้ใช้)

เราจำเป็นต้องเติมภาพของเราด้วยการไล่ระดับสี

ฉันเลือกขาวดำสำหรับการไล่ระดับสี อย่างไรก็ตามคุณสามารถเลือกสีใดสีหนึ่งหรือแม้แต่สีเดียวก็ได้

ในการตั้งค่าการไล่ระดับสี ฉันตั้งค่าการเติมให้เป็นวงกลม คุณสามารถโพสต์สิ่งที่คุณชอบ

อย่ากลัวที่จะทดลอง

ตอนนี้เรามาสร้างช่องว่างเพื่อเติมเส้นสีดำเฉียง ในการทำเช่นนี้ ให้สร้างเอกสารใหม่ด้วยพารามิเตอร์ 3x3 px, RGB, โปร่งใส (โปร่งใส)

เลือกเครื่องมือ ดินสอ (Pencil) สีดำ ขนาด 1 px

เราใส่จุดในแนวทแยงเหมือนในภาพหน้าจอ

คลิก แก้ไข >

เลือกเครื่องมือ Paint Bucket ในพารามิเตอร์ ให้ตั้งค่า รูปแบบ (รูปแบบ) และเลือกพื้นผิวที่เราทำในรายการแบบเลื่อนลง เติมเลเยอร์ใหม่

เพิ่มภาพใด ๆ ที่ไม่มีพื้นหลัง

การเพิ่มคำจารึก โดยทั่วไปจารึกจะเขียนด้วยอักษร

อย่างไรก็ตาม คุณสามารถใช้แบบอักษรใดก็ได้

ตอนนี้มาสร้างเอฟเฟกต์ระดับเสียงกัน

มาสร้างเลเยอร์ใหม่กันเถอะ ตั้งค่าสีเป็นสีขาว การใช้เครื่องมือ วงรี (วงกลม) ทำให้วงรีมีขนาดเท่ากับรูปภาพ

ไปที่แท็บ เส้นทาง (เส้นทาง) และคลิกที่แถบเครื่องมือด้านล่างของปุ่มแรก (วงกลมสีดำ) จากนั้นลากเส้นทางการทำงานลงในบัคเก็ต

ตั้งค่าความทึบของเลเยอร์เป็น 40%

หากคุณต้องการทำให้แถบผู้ใช้ของคุณซับซ้อน คุณสามารถเพิ่มเลเยอร์ใหม่และใช้แปรงต่างๆ เพื่อวาดภาพ

2 ทาง

เราจะทำให้แถบผู้ใช้ที่สองใหญ่ขึ้นเล็กน้อย

สร้างเอกสารใหม่ (Ctrl + N) ขนาด 350x40 px

เลือกรูปภาพที่คุณต้องการแล้วลากไปยังเอกสารที่สร้างขึ้น

ตอนนี้เรามาสร้างช่องว่างเพื่อเติมเส้นสีขาวเฉียง ในการทำเช่นนี้ ให้สร้างเอกสารใหม่ด้วยพารามิเตอร์ 5x5 px, RGB, โปร่งใส (โปร่งใส)

เติมชั้นแรกด้วยสีดำและสร้างอีกชั้น เลือกเครื่องมือ ดินสอ (Pencil) สีขาว, ขนาด 1 px. เราใส่จุดในแนวทแยงเหมือนในภาพหน้าจอ

ลบเลเยอร์สีดำและบันทึก

คลิก แก้ไข > กำหนดรูปแบบ (การแก้ไข – กำหนดรูปแบบ) และตั้งชื่อพื้นผิวของเรา

เรากลับไปที่ภาพของแถบผู้ใช้ในอนาคตของเราและสร้างเลเยอร์ใหม่

เลือกเครื่องมือ Paint Bucket ในพารามิเตอร์ ให้ตั้งค่า รูปแบบ (รูปแบบ) และเลือกพื้นผิวที่เราทำในรายการแบบเลื่อนลง เติมเลเยอร์ใหม่ ตั้งค่าพารามิเตอร์เลเยอร์ แสงอ่อน (แสงอ่อน)

ซึ่งเราจะติดตามในบทเรียนนี้

1. ขนาด 350x19 พิกเซล
2. พื้นหลังที่มีการฟักไข่ที่มุม 45°
3. ผู้เข้าชมแบบอักษร
4. ขอบสีดำรอบรูปภาพแถบผู้ใช้ทั้งหมดมีความหนา 1 พิกเซล สามารถละเว้นได้ แต่ด้วยโครงร่างสีดำ แถบผู้ใช้จะโดดเด่นกว่าพื้นหลังของโพสต์ในฟอรัม

1. เปิดโปรแกรม Adobe Photoshop สร้างเอกสารใหม่ขนาด 350x19:

2. การทำกรอบ: เติมภาพด้วยสีดำ (แก้ไข --> เติม --> ดำ)แล้วเลือกเครื่องมือ เครื่องมือปะรำสี่เหลี่ยม. เราเลือกส่วนหนึ่งของภาพเพื่อให้มีพื้นที่ที่ไม่ได้เลือก 1 พิกเซลรอบขอบ ลบพื้นที่ที่เลือก หลังจากที่เรายกเลิกการเลือก (Ctrl + D) เราจะมีขอบสีดำรอบปริมณฑลของแถบผู้ใช้

3. สร้างเลเยอร์ใหม่ - สำหรับพื้นหลัง (เลเยอร์ - ใหม่ - เลเยอร์ หรือ Shift-Ctrl-N) และวางไว้ใต้เลเยอร์เฟรม เติมด้วยสีที่เหมาะสม

2a หากต้องการสร้างขอบสีดำ คุณสามารถทำได้ด้วยวิธีอื่น หลังจากสร้างเอกสาร (ดูขั้นตอนที่ 1) ให้เติมสีที่ต้องการ จากนั้นบนแผงเลเยอร์ คลิกที่เลเยอร์ของเรา คลิกขวาเลือกรายการ ตัวเลือกการผสม. ในแผงที่ปรากฏขึ้น ให้ไปที่แท็บ "การฟักไข่" และทำตามที่แสดงในรูปด้านล่าง:

เราได้ผลลัพธ์เช่นเดียวกับหลังจากขั้นตอนที่ 2 และ 3

4. คุณสามารถเพิ่มเงาภายในได้ ไปที่หน้าต่างเดียวกับในวรรค 2a และเลือกรายการ เงาภายใน(เงาภายใน):

ไม่จำเป็นต้องตั้งค่าพารามิเตอร์เหมือนกับในตัวอย่างของเรา คุณสามารถทดลองได้

5. เราทำการฟักไข่ ในการทำเช่นนี้เราจะสร้างพื้นผิวใหม่ เสร็จแล้วครับแบบนี้

มาสร้างเอกสารขนาด 4x4 พิกเซลที่มีพื้นหลังโปร่งใสกันเถอะ

มาเพิ่มเอกสารผลลัพธ์ให้สูงสุด (1600%) เพื่อให้สะดวกในการทำงานยิ่งขึ้น เลือกเครื่องมือดินสอ ( ดินสอ) ที่มีขนาด 1px และลากเส้นด้วยสี #91E780 ดังภาพด้านล่าง:

ตอนนี้บันทึกภาพวาดผลลัพธ์เป็น ลวดลาย: เมนู แก้ไข -> กำหนดรูปแบบและตั้งชื่อรูปแบบของคุณ:

6. เรากลับไปที่แถบผู้ใช้ของเรา เปิดอีกครั้ง ตัวเลือกการผสม(ดูวรรค 2a) ไปที่แท็บ การซ้อนทับแบบในประเด็น ลวดลายเลือกพื้นผิวที่เราเพิ่งสร้างและเปลี่ยนแปลง ตัวเลือกต่อไปนี้:

7. การเพิ่มข้อความ เลือกแบบอักษรของผู้เข้าชม - อ่านได้ดีแม้ในขนาดที่เล็ก (ดาวน์โหลดแบบอักษร) สีขาว. หลังจากสร้างคำจารึกของเราแล้ว เราจะใช้เอฟเฟ็กต์กับข้อความ เงาด้านนอก:

และเพิ่มฟักด้านนอก (เส้นขีด) ที่มีความหนา 1 พิกเซล:

ผลลัพธ์:

8. เราสามารถเพิ่มเอฟเฟกต์กระจกให้กับภาพของเราได้ ในการทำเช่นนี้ ให้สร้างเลเยอร์ใหม่ (เลเยอร์ - ใหม่ - เลเยอร์ หรือ Shift-Ctrl-N)เหนือเลเยอร์พื้นหลัง แต่อยู่ใต้เลเยอร์คำบรรยาย เลือกส่วนบนของภาพด้วยเครื่องมือ เครื่องมือกระโจมวงรีและเติมด้วยสีขาวโดยใช้เครื่องมือ เครื่องมือถังสี (G). ถัดไป ลดความโปร่งใสของเลเยอร์นี้ (ความทึบ)มากถึง 30%:

แถบผู้ใช้ของเราพร้อมแล้ว

แทนที่จะใช้เอฟเฟกต์กระจก คุณสามารถใช้เทคนิคอื่นที่มักใช้เมื่อสร้างแถบผู้ใช้ - เติมพื้นหลังด้วยการไล่ระดับสีแทนสีสม่ำเสมอ ในการทำเช่นนี้ให้เลือกสองสีเพื่อเติมพื้นหลังในแถบเครื่องมือ:

จากนั้นเราก็ใช้เครื่องมือ การไล่ระดับสี (เครื่องมือไล่ระดับสี). เราคลิกที่ด้านบนของรูปวาดของเราและลากเส้นไปที่ด้านล่างของเอกสารโดยไม่ต้องปล่อยปุ่มเมาส์ซ้าย (คุณสามารถกลับกันจากนั้นการไล่ระดับสีจะไปในทิศทางตรงกันข้าม)

จากนั้นแถบผู้ใช้ที่เสร็จแล้วจะมีลักษณะดังนี้:

คุณสามารถดาวน์โหลดซอร์ส PSD ของแถบผู้ใช้นี้เพื่อทดลองด้วยตัวคุณเองและเรียนรู้วิธีวาดแถบผู้ใช้ของคุณเอง อย่าลืมว่าคุณสามารถแทรกรูปภาพลงในแถบผู้ใช้ได้! นี่คือสิ่งที่เราแนะนำให้คุณทำด้วยตัวเอง ;-)