ออกแบบ Web 2.0 Interface ใน Photoshop
การทำความเข้าใจเกี่ยวกับการสอนด้านล่างคือการทำความเข้าใจกับเทคนิคของมันด้วยคุณสามารถวาดส่วนติดต่อผู้ใช้แบบกราฟิกสำหรับเว็บไซต์. การนำทางด้านข้าง, ปุ่ม, ส่วนหัว, เช่น สไตล์ Web 2.0 ทั้งหมด.
เปิดตัวผ้าใบใหม่ ขนาดใดก็ได้ สิ่งที่ใหญ่กว่า 450x300px น่าจะดี เลือก เครื่องมือทรงกลมมน และวาดสี่เหลี่ยมขนาดใหญ่ตามที่แสดงในภาพด้านบน.
ดับเบิลคลิกที่เลเยอร์ของ Rounded Rectangular เพื่อเปิด ตัวเลือกการผสม. เปลี่ยนการตั้งค่าสำหรับสไตล์ต่อไปนี้.
เงา
ความทึบ: 31% ระยะทาง: 1px สเปรด: 0% ขนาด: 5px
เอียงและนูน
ความลึก: 100% ขนาด: 0px นุ่ม: 0px
การซ้อนทับแบบไล่สี
ดับเบิลคลิกที่ Gradiant และตั้งค่าจุดหยุดดังต่อไปนี้ ตำแหน่งที่ตั้ง: 0%, # 1378cd ที่อยู่: 100% # 4da5f0
ลากเส้น
ขนาด: 5px ตำแหน่ง: สีภายใน: # 54abf6
ลองแทรกข้อความสโลแกน URL หรืออะไรก็ได้ วางไว้ตรงกลางและจัดชิดขวาเพื่อให้โลโก้อยู่ด้านซ้ายในภายหลัง มาจัดสไตล์ข้อความ ฉันใช้ Lucida Sans Unicode; 55pt; เรียบ; -120 สำหรับการติดตามตัวอักษร (เว้นวรรคตัวอักษร) ดับเบิลคลิกที่เลเยอร์ข้อความและตั้งค่าต่อไปนี้ ตัวเลือกการผสม.
โอเวอร์เลย์ไล่ระดับสี
ดับเบิลคลิกที่ Gradiant และตั้งค่าจุดหยุดดังต่อไปนี้ สถานที่: 0%, # 9ec7eb สถานที่ตั้ง: 100% ecf6ff
คุณจะต้องใส่โลโก้ทางด้านซ้ายของข้อความ ฉันจะใช้สี่เหลี่ยมโค้งมนที่มีรัศมี 5px เพื่อแสดงโลโก้ นี่คือ ตัวเลือกการผสม การตั้งค่าสำหรับสี่เหลี่ยมมุมมน.
เงาภายใน
ความทึบ: 45% ระยะทาง: 0px ขนาด: 43px;
เอียงและนูน
ความลึก: 100% ขนาด: 0px ทำให้นุ่มลง: 0px โหมดความสว่างความทึบ: 50% ShadowMode ความทึบแสง: 100%
การซ้อนทับแบบไล่สี
ดับเบิลคลิกที่ Gradiant และตั้งค่าจุดหยุดดังต่อไปนี้ ที่อยู่: 0% # 0e2f4a ที่อยู่: 47% # 001a31 ที่อยู่: 48% # 002545 ที่อยู่: 100% # 0f4b7f
ลากเส้น
ขนาด: 5px คลิกสองครั้งที่การไล่ระดับสีและตั้งจุดหยุดดังต่อไปนี้ ตำแหน่งที่ตั้ง: 0% # 1468af ที่ตั้ง: 100% # 50abf8
เราจะให้เอฟเฟกต์มันวาวเล็กน้อย ถือ CTRL และคลิกซ้ายบนรูปสี่เหลี่ยมผืนผ้าโค้งมน ภาพขนาดย่อของเลเยอร์. เมื่อเลือกสี่เหลี่ยมที่ถูกปัดเศษทั้งหมดให้เปลี่ยนเป็น เครื่องมือปะรำสี่เหลี่ยม, ถือ ALT และดึงออกในช่วงครึ่งหลังของพื้นที่ที่เลือก เหมือนภาพด้านบน.
สร้างเลเยอร์ใหม่ ลากขึ้นเพื่อให้มันอยู่ด้านบนของทุกชั้น เติมส่วนที่เลือกด้วยสีขาว [#ffffff]; เปลี่ยนความทึบเป็น 15%.
บทแนะนำจะสิ้นสุดที่นี่ วิธีที่คุณจะใช้ประโยชน์จากการออกแบบนี้ขึ้นอยู่กับคุณทั้งหมด โดยการเปลี่ยนขนาดและสีของมันเล็กน้อยสามารถใช้เป็นส่วนหัวของเว็บหรือปุ่ม นี่คือตัวอย่างบางส่วน.
ส่วนหัวของเว็บไซต์
ปุ่มเว็บไซต์
