วิธีสร้างส่วนหัวของเว็บไซต์แบบมืออาชีพใน Photoshop

Photoshop CC 2014 เป็นเครื่องมือที่เหมาะสำหรับการออกแบบภาพระดับมืออาชีพสำหรับเว็บไซต์ของคุณ รวมถึงแบนเนอร์ เมื่อออกแบบแบนเนอร์แรกของคุณ ให้ออกแบบให้เรียบง่ายเพื่อไม่ให้กราฟิกมีข้อมูลภาพมากเกินไป หากธุรกิจของคุณมีสีของบริษัทและแบบอักษรของบริษัท คุณสามารถใช้สีเหล่านั้นในแบนเนอร์ของคุณได้

ขั้นตอนที่ 1

เปิดตัว Photoshop กด "Ctrl-N" หรือเลือก "ใหม่" จากเมนูไฟล์ ในกล่องโต้ตอบ ให้ระบุความสูงและความกว้างสำหรับแบนเนอร์ของคุณ เช่น กว้าง 900 พิกเซลและสูง 150 พิกเซล คลิก "ตกลง"

ขั้นตอนที่ 2

เลือกสีพื้นหลังทึบสำหรับแบนเนอร์หากต้องการ ในการดำเนินการนี้ ให้คลิกไอคอน "สีพื้นหน้า" ในแถบเครื่องมือและเลือกสี จากนั้นคลิก "เครื่องมือสี่เหลี่ยมผืนผ้า" แล้วลากไปทั่วทั้งแบนเนอร์ อย่างไรก็ตาม ในบทช่วยสอนนี้ เราจะใช้การไล่ระดับสีสองแบบทับซ้อนกันแทนที่จะใช้พื้นหลังแบบทึบ

ขั้นตอนที่ 3

คลิกเครื่องมือ "Gradient" ในกล่องเครื่องมือ คลิกเมนู "เติม" ในแถบตัวเลือก แล้วเลือกการไล่ระดับสีขาวดำจากค่าที่ตั้งไว้ล่วงหน้าที่มีอยู่ คลิกที่ใดก็ได้เหนือแบนเนอร์ในแคนวาส แล้วลากเคอร์เซอร์ไปด้านล่างแบนเนอร์ ปล่อยปุ่มเมาส์เพื่อใช้การไล่ระดับสี

ขั้นตอนที่ 4

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

ขั้นตอนที่ 5

เลือก "เปิด" จากเมนูไฟล์ แล้วเลือกรูปภาพในคอมพิวเตอร์ที่คุณต้องการใช้สำหรับแบนเนอร์ของคุณ เช่น โลโก้บริษัท รูปภาพของคุณเอง หรือผลิตภัณฑ์ที่คุณขาย เมื่อรูปภาพเปิดขึ้น ให้เลือก "ทำซ้ำ" จากเมนูเลเยอร์ เปลี่ยนปลายทางเป็นไฟล์ส่วนหัวซึ่งจะเรียกว่า "Untitled-1" เว้นแต่คุณจะบันทึกไว้แล้ว คลิก "ตกลง" เพื่อเพิ่มรูปภาพเป็นเลเยอร์ใหม่ให้กับแบนเนอร์ของคุณ

ขั้นตอนที่ 6

เลือก "แปลง" จากเมนูแก้ไข จากนั้นคลิก "สเกล" ในกรณีส่วนใหญ่ ภาพทั้งหมดจะไม่ปรากฏบนแบนเนอร์แบบแคบ แต่จะเห็นโครงร่างหลังจากที่คุณเลือก "มาตราส่วน" ลากมุมใดก็ได้ของโครงร่างรูปภาพเพื่อปรับขนาดสำหรับแบนเนอร์ของคุณ กดปุ่ม "Shift" ค้างไว้ขณะลากเพื่อล็อกอัตราส่วนกว้างยาว กดปุ่มตกลง." ลากรูปภาพไปทางด้านขวาของแบนเนอร์

ขั้นตอนที่ 7

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

ขั้นตอนที่ 8

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

ขั้นตอนที่ 9

ค้นหาเลเยอร์ "สี่เหลี่ยมผืนผ้า 1" ในแผงเลเยอร์ ซึ่งเป็นเลเยอร์ที่มีสี่เหลี่ยมไล่ระดับสีที่คุณเพิ่งเพิ่ม ลากเลเยอร์นี้ลงเพื่อทำให้เป็นเลเยอร์ที่สามจากด้านบน ด้านล่าง "Layer 1" และเลเยอร์ที่มีข้อความของคุณ คลิกเมนู "ความทึบ" ที่ด้านบนของแผงเลเยอร์ แล้วลากตัวเลื่อนให้มีค่าประมาณ 50 เปอร์เซ็นต์ การทำให้การไล่ระดับสีด้านบนเป็นแบบกึ่งโปร่งใสช่วยให้รวมกับการไล่ระดับสีด้านล่าง ทำให้เกิดพื้นหลังที่สมบูรณ์

ขั้นตอนที่ 10

เลือกเลเยอร์ที่มีข้อความของคุณในแผงเลเยอร์ คลิกเมนู "Layer" เลือก "Layer Style" จากนั้นคลิก "Bevel & Emboss" ตรวจสอบให้แน่ใจว่าเมนู Style ถูกตั้งค่าไว้ที่ "Emboss" แล้วลากแถบเลื่อน "Depth" ไปทางซ้าย ประมาณ "225" เปอร์เซ็นต์ เพื่อเพิ่มเอฟเฟกต์นี้ให้กับข้อความเพียงเล็กน้อย

ขั้นตอนที่ 11

คลิกตัวเลือก "ซาติน" ในหน้าต่างสไตล์เลเยอร์ สำหรับสไตล์นี้ ใช้ Blend Mode ของ "Multiply" และลดความทึบลงเหลือประมาณ "15" เปอร์เซ็นต์ ผสมผสานสไตล์ซาตินเข้ากับสไตล์ลายนูน ปรับการตั้งค่าหากต้องการและคลิก "ตกลง"

บันทึกรูปภาพเป็นแบนเนอร์ที่ปรับให้เหมาะกับเว็บโดยเลือก "บันทึกสำหรับเว็บ" จากเมนูไฟล์ เลือก "JPEG" จากเมนูรูปแบบ และใช้คุณภาพของรูปภาพระหว่าง 75 ถึง 80 เปอร์เซ็นต์ วิธีนี้จะสร้างภาพที่มีขนาดไฟล์เล็ก ซึ่งเว็บเบราว์เซอร์ใด ๆ โหลดได้อย่างรวดเร็ว โดยไม่ลดทอนคุณภาพของภาพ คลิก "บันทึก" และเลือกตำแหน่งที่จะจัดเก็บไฟล์ในคอมพิวเตอร์ของคุณ หลังจากปิด Photoshop แล้ว ให้เพิ่มไฟล์ลงในหน้าเว็บของคุณ