ส่วนหัวของเว็บไซต์ใน Photoshop

• อาจ 9, 2024

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

ขั้นตอนแรกของเราคือการสร้างส่วนหัวใน Photoshop เราจะวางแต่ละองค์ประกอบการออกแบบในชั้นของตัวเองในการเตรียมการสำหรับการทำงานกับพวกเขาใน Flash Catalyst อย่างที่คุณเห็นเรามี 6 องค์ประกอบการออกแบบ

1. ความเป็นมา
2. แถบด้านล่างตลอดความกว้างของส่วนหัว
3. ชื่อ บริษัท
4. การ์ดวันเกิด
5. บัตรฟักทอง
6. การ์ดคริสต์มาส

1. เริ่มโครงการใหม่ใน Photoshop กันเถอะ ตั้งค่าความกว้างเป็น 1,000 พิกเซลความสูงเป็น 225 พิกเซลและพื้นหลังเป็นโปร่งใส ขนาดนี้จะพอดีกับด้านบนสุดของหน้าเว็บของเรา
   
   
2. องค์ประกอบเดียวที่จะปรากฏที่จุดเริ่มต้นของภาพเคลื่อนไหวคือพื้นหลังสีขาว เติมเลเยอร์แรกของภาพด้วยสีพื้นหลังที่คุณเลือก ในแผงเลเยอร์เปลี่ยนชื่อเลเยอร์ "พื้นหลัง" นี้
   
   
3. ในการสร้างขอบเงาฉันใช้ Inner Shadow Layer Style คลิกสองครั้งที่เลเยอร์พื้นหลังและทำเครื่องหมายที่กล่องถัดจาก Inner Shadow ตั้งระยะทางและทำให้หายใจไม่ออกเป็น 0 และขนาดเป็น 49
   
   
4. ต่อไปเราจะเพิ่มเส้นขอบบาง ๆ รอบรูปภาพด้วย Stroke Layer Style ฉันได้ตั้งค่าสีเป็นสีน้ำตาล (# 6e674f) ขนาดเป็น 2 และตำแหน่งเป็นภายใน
   
   ต่อไปเราจะเพิ่มการ์ด ฉันลดขนาดการ์ดอวยพรลงเหลือ 230 x 175 พิกเซล สิ่งนี้จะทำให้พวกเขาเป็นสัดส่วนกับขนาดของส่วนหัว
   
   
5. ลองคัดลอก / วางการ์ดฟักทองลงในส่วนหัวของเรา ตั้งชื่อเลเยอร์ใหม่ "Pumpkin" คลิกแก้ไข - แปลงฟรีเพื่อหมุนการ์ดไปทางขวาเล็กน้อย คลิกที่เลเยอร์ฟักทองและใช้สไตล์เลเยอร์เงาปล่อยการตั้งค่าเริ่มต้น
   
   
6. ทำซ้ำขั้นตอนสุดท้ายสำหรับทั้งการ์ดวันเกิดและคริสต์มาส
   
   ต่อไปเราจะเพิ่มบาร์ที่ด้านล่างของส่วนหัว เราจะเก็บบัตรของเราไว้ด้านหลังบาร์นี้เพื่อเลียนแบบบัตรบนชั้นวาง
   
   
7. เพิ่มเลเยอร์ใหม่ให้กับแผงเลเยอร์แล้วตั้งชื่อว่า "บาร์"
   
   
8. ด้วยเครื่องมือ Rectangular Marquee ให้เลือกพื้นที่ด้านล่างของส่วนหัวด้านในของขอบสีน้ำตาล เลือกสีสำหรับแถบของคุณและเติมการเลือกด้วยสีนี้
   
   
9. ดับเบิลคลิกที่เลเยอร์และเพิ่มสไตล์เลเยอร์สโตร๊กเหมือนกับที่คุณทำกับเลเยอร์พื้นหลัง
   
   
10. คลิกที่เครื่องมือประเภทแนวนอนและเลือกแบบอักษรสำหรับชื่อธุรกิจของคุณ ฉันใช้สีน้ำตาลเดียวกับสีขอบ พิมพ์ชื่อธุรกิจทางด้านซ้ายของส่วนหัว
    
    
11. ขั้นตอนนี้เป็นทางเลือก เราจะ rasterize ข้อความ คลิกขวาที่เลเยอร์ข้อความและเลือกประเภทแรสเตอร์จากเมนู
    
    
12. บันทึกโครงการของคุณในรูปแบบ Photoshop. psd
    
    

ลิขสิทธิ์ 2018 Adobe Systems Incorporated สงวนลิขสิทธิ์. ภาพหน้าจอผลิตภัณฑ์ Adobe พิมพ์ซ้ำได้รับอนุญาตจาก Adobe Systems Incorporated Adobe, Photoshop, อัลบั้ม Photoshop, องค์ประกอบ Photoshop, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, องค์ประกอบรอบปฐมทัศน์, สะพาน, After Effects, InCopy, Dreamweaver, แฟลช, ActionScript, ดอกไม้ไฟ, Contribute, Flash Catalyst และ Flash Paper เป็น / เป็น [a] เครื่องหมายการค้าจดทะเบียน [s] หรือเครื่องหมายการค้า [s] ของ Adobe Systems Incorporated ในสหรัฐอเมริกาและ / หรือประเทศอื่น ๆ

คำแนะนำวิดีโอ: การทำภาพส่วนหัวเว็บของ Google site ด้วยโปรแกรม PowerPoint (อาจ 2024).