ออกแบบเค้าโครงบล็อกที่สะอาดและสง่างามใน Photoshop CS6

ในบทช่วยสอนนี้ฉันจะแสดงให้คุณเห็นถึงกระบวนการของ ทำบล็อกการออกแบบที่เรียบง่ายและสะอาด ใช้ Photoshop ล่าสุด เรากำลังจะใช้สิ่งใหม่ ลักษณะตัวละคร และ ลักษณะย่อหน้า เพื่อช่วยเราปรับปรุงกระบวนการให้ดีขึ้น.

หากต้องการติดตามบทช่วยสอนนี้คุณจะต้องใช้ทรัพยากรต่อไปนี้:

• ฟรีตัวอักษร Sansation จาก Bernd Montag.
• 26 รูปแบบพิกเซลซ้ำได้จาก PSDfreemium.
• ไอคอนโซเชียลมีเดียจาก Daniele Selvitella ฟรี.

• การสาธิต

การเตรียม Canvas

ขั้นตอนที่ 1

ในการออกแบบนี้เราจะใช้ 960 gs เป็นกรอบของมัน ดาวน์โหลดเทมเพลตจากหน้าหลักและในไฟล์ zip ให้ค้นหาไฟล์ photoshop เปิดไฟล์ '12 Column Grid 'ใน Photoshop.

คลิกที่ไอคอนรูปตาสำหรับเลเยอร์ 12 Col Grid เพื่อซ่อน เราจะไม่ต้องการมันในตอนนี้.

ขั้นตอนที่ 2

ขนาดผ้าใบปัจจุบันมีขนาดเล็กเกินไป คลิก รูปภาพ> ขนาดผ้าใบ (หรือ Ctrl + Alt + C) เพิ่มขนาดที่ใหญ่ขึ้นและตรวจสอบให้แน่ใจว่าตั้งจุดยึดไว้ที่กึ่งกลาง.

ขั้นตอนที่ 3

กด Ctrl + R เพื่อเปิดเผยไม้บรรทัด คลิก ดู> ใหม่ คำแนะนำในการสร้างคำแนะนำใหม่ที่จะช่วยให้เราออกแบบได้อย่างถูกต้อง เลือก แนวตั้ง และที่ตำแหน่ง: 185 px เพื่อสร้างไกด์แนวตั้ง 185 px จากมุมซ้ายบนของผ้าใบ.

ขั้นตอนที่ 4

วาดคู่มือแนวตั้งอื่นที่ตำแหน่ง 150 px, 1095 px และ 1130 px.

ด้านล่างนี้เป็นคำแนะนำสุดท้ายของเราภายในผืนผ้าใบ.

กำลังเตรียมชุดรูปแบบสี

ขั้นตอนที่ 5

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

บันทึกการผสมสีและวางไว้ในไฟล์ Photoshop โดยการวางภาพลงในผืนผ้าใบโดยตรงเราสามารถสุ่มสีได้เร็วขึ้นและง่ายขึ้น.

การเตรียมพื้นหลัง

ขั้นตอนที่ 6

เลือก พื้นหลัง ชั้น และคลิกไอคอนล็อคที่ด้านบนของแผงเลเยอร์เพื่อปลดล็อค ดับเบิลคลิกที่ภาพย่อเพื่อเปลี่ยนสี.

คลิกสีที่สอง, # 948371, เพื่อเลือก.

ขั้นตอนที่ 7

วาดรูปร่างสี่เหลี่ยมบนผ้าใบ นี่จะเป็นพื้นหลังที่สอง.

ขั้นตอนที่ 8

เลือกรูปร่างไว้เสมอ ใน แถบตัวเลือก, เปิด ใส่ สี ในกล่องแล้วคลิกปุ่ม ไอคอนวงล้อสี. เมื่อกล่องโต้ตอบตัวเลือกสีเปิดขึ้นให้คลิกสีแรกเพื่อเลือก สำหรับมัน ลากเส้น เลือกสี ไม่มี.

ขั้นตอนที่ 9

สร้างเลเยอร์ใหม่แล้วเลือกผืนผ้าใบส่วนบนโดยใช้เครื่องมือปะรำสี่เหลี่ยม เปิดใช้งาน เครื่องมือไล่ระดับสี และเติมด้วย เป็นแฉก ลาด จากสีขาวเป็นสีดำ ตรวจสอบให้แน่ใจว่าการไล่ระดับสีอยู่ตรงกลางด้านบนของผืนผ้าใบ.

เปลี่ยน การผสมผสาน โหมด ไปยัง จอภาพ และลด ความทึบแสง ไปยัง 37%.

ขั้นตอนที่ 10

สร้างเลเยอร์ใหม่และตั้งชื่อเป็น "เงา".

วาดส่วนที่เลือกเป็นรูปสี่เหลี่ยมผืนผ้าที่ด้านล่างของพื้นหลังรองตามที่แสดง คลิก แก้ไข: เติม. ตั้งค่า ใช้ ไปยัง สีดำ. คลิก ตกลง เพื่อเติมการเลือกด้วยสีดำ.

ขั้นตอนที่ 11

ทำให้มันอ่อนลงโดยใช้ Gaussian Blur คลิก ตัวกรอง> เบลอ> Gaussian Blur.

ขั้นตอนที่ 12

กดปุ่ม Alt ค้างไว้แล้ววางเคอร์เซอร์ไว้ เงา และ พื้นหลังด้านบน ชั้น. โดยไม่ต้องปล่อยปุ่ม Alt คลิกเพื่อ แปลง layer เป็น Clipping Mask. ด้วยการแปลงให้เป็น Clipping Mask ตอนนี้เงาจะอยู่ภายในพื้นหลังส่วนบน.

ขั้นตอนที่ 13

นำมาลงเงา ความทึบแสง ไปยัง 50% เพื่อให้มันบอบบาง ด้านล่างคุณสามารถเห็นผลลัพธ์ในการขยาย 100%.

ขั้นตอนที่ 14

เป็นความคิดที่ดีที่จะใส่เลเยอร์เหล่านี้ไว้ในกลุ่มเดียว เพื่อทำสิ่งนี้, เลือกเลเยอร์ทั้งหมด จากนั้นคลิก Ctrl + G.

ส่วนหัว

ขั้นตอนที่ 15

วาดสี่เหลี่ยมบนผ้าใบด้านบนตามที่แสดง.

ขั้นตอนที่ 16

ใน แถบตัวเลือก, ชุด ลากเส้น สีถึง # af9f8e.

ขั้นตอนที่ 17

สำหรับมัน ใส่ สีใหเลือก การไล่ระดับสีเชิงเส้น จาก # d0c4b9 ถึง # a89c91.

ด้านล่างคือผลลัพธ์ในมุมมอง 100%.

ชื่อเว็บไซต์

ขั้นตอนที่ 18

เพิ่มชื่อไซต์ทางด้านซ้ายของการออกแบบ สังเกตตำแหน่งที่แสดงด้านล่าง คลิกสองครั้งที่ข้อความและเพิ่ม เงา. สำหรับฟอนต์ให้ใช้ Sansation.

เมนู

ขั้นตอนที่ 19

วาดเมนูที่ด้านอื่น ๆ ของแถบเมนู ใช้แบบอักษร Sansation 14 pt สังเกตตำแหน่งอีกครั้ง.

ขั้นตอนที่ 20

สำหรับเมนูที่ใช้งานให้ตั้งค่าแบบอักษรเป็นตัวหนา.

ขั้นตอนที่ 21

กระตุ้น เครื่องมือรูปหลายเหลี่ยม และตั้งค่า ด้านข้าง ไปยัง 3. วาดรูปสามเหลี่ยมด้วย เติม: # 3d3123 และ โรคหลอดเลือดสมอง: ไม่มี. เพิ่ม สไตล์เลเยอร์ > วางเงา.

ขั้นตอนที่ 22

ลองเน้นเมนูที่ใช้งานอยู่โดยการเพิ่มบรรทัดที่อยู่ด้านล่าง เปิดใช้งาน เครื่องมือเส้น และตั้งค่าน้ำหนักของมันเป็น 5 px. เลือก # f76b6a สำหรับการเติมโดยไม่มีโรคหลอดเลือดสมอง.

วางบรรทัดนั้นไว้ใต้เมนูที่ใช้งานอยู่และเพิ่มพื้นที่ 1 px ที่ด้านล่างของแถบเมนู.

ใช้ลักษณะตัวละคร

ขั้นตอนที่ 23

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

คลิกสองครั้งที่ลักษณะอักขระใหม่และใช้การตั้งค่าต่อไปนี้.

ขั้นตอนที่ 24

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

ขั้นตอนที่ 25

ทำซ้ำขั้นตอนก่อนหน้านี้เพื่อสร้างลักษณะอักขระใหม่สำหรับเมนูที่ใช้งานอยู่.

ขั้นตอนที่ 26

ดังนั้นจุดประสงค์ของการใช้ลักษณะของอักขระคืออะไร ลักษณะของตัวละครช่วยให้เรารวมศูนย์การตั้งค่าตัวละคร เราสามารถแก้ไขลักษณะของตัวละครเพื่อแก้ไขทุกข้อความโดยใช้สไตล์นั้น ดูตัวอย่างด้านล่าง หากเราแก้ไขประเภทตัวอักษรภายในลักษณะของตัวอักษร เมนูยอดนิยม - ปกติ เป็น Corbel ทุกเมนูปกติจะถูกเปลี่ยนเป็น Corbel โดยอัตโนมัติ.

ขั้นตอนที่ 27

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

ขั้นตอนที่ 28

ลบส่วนที่เลือกโดยใช้ Ctrl + D ทำให้นิ่มลงโดยการเพิ่ม เกาส์เบลอ, ตัวกรอง> เบลอ> Gaussian Blur.

Slider

ขั้นตอนที่ 29

วาดรูปทรงสี่เหลี่ยมที่มีความกว้าง 10 คอลัมน์ (ดูด้านล่าง).

สำหรับมัน เติมสี เลือก # dfd1c2. สำหรับมัน ลากเส้น เลือก # c8baac ด้วยขนาด 10 จุด. คลิกลูกศรดร็อปดาวน์ขนาดเล็กที่อยู่ถัดจากตัวอย่างบรรทัดและตรวจสอบให้แน่ใจ จัดตำแหน่งภายใน ถูกเลือก.

ขั้นตอนที่ 30

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

ขั้นตอนที่ 31

วาดรูปสี่เหลี่ยมอีกรูปหนึ่งด้านหลังตัวเลื่อนด้วยสีเดียวกัน ตรวจสอบให้แน่ใจว่าได้จัดชิดกับคู่มือด้านนอกสุด เพิ่ม เลเยอร์สไตล์> การซ้อนทับแบบ ใช้รูปแบบพิกเซลจาก PSDfreemium ลดเสียงลง ความทึบแสง เพื่อทำให้มันบอบบาง.

ขั้นตอนที่ 32

วาดรูปร่างสี่เหลี่ยมเหนือรูปร่างด้วย เติม: # b3aca5 และ ไม่มีโรคหลอดเลือดสมอง. กด Ctrl + T แล้ว หมุนมัน 45 °. แปลงรูปร่างของเลเยอร์เป็น มาส์กหน้า.

ขั้นตอนที่ 33

ทำซ้ำรูปร่างและปรับขนาด เปลี่ยน ใส่ เป็นสีเข้ม แปลงรูปร่างของเลเยอร์เป็น มาส์กหน้า.

ขั้นตอนที่ 34

ทำซ้ำขั้นตอนเดียวกันเพื่อวาดลูกศรอื่นที่อยู่อีกด้านหนึ่ง.

ขั้นตอนที่ 35

คลิก Ctrl เฟรมสไลด์เพื่อทำการเลือกใหม่ สร้างเลเยอร์ใหม่และแปลงเป็น มาส์กหน้า. เติมส่วนที่เลือกด้วย สีดำ.

ขั้นตอนที่ 36

ยกเลิกการเลือก (Ctrl + D) จากนั้น ทำให้นิ่ม มันใช้ เกาส์เบลอ.

คุณสามารถลดความทึบเงาได้ถ้าต้องการ.

ขั้นตอนที่ 37

วาดสี่เหลี่ยมมุมมนที่มุมของตัวเลื่อนด้วย เติม # c8baac.

ขั้นตอนที่ 38

วาดวงกลมภายในรูปร่าง ตั้งค่า ลากเส้น ไปยัง สีดำ ด้วยขนาด 1 จุด และ ลบการเติม.

ขั้นตอนที่ 39

เลือก วงกลม ใช้เส้นทาง การเลือกเส้นทาง เครื่องมือ. Shift + Alt- ลากพา ธ เพื่อทำซ้ำ.

ทำซ้ำเพื่อวาดวงกลมเพิ่มเติม.

ขั้นตอนที่ 40

เลือกหนึ่งในเส้นทางวงกลม กด Ctrl + Shift + J เพื่อตัดเป็นเลเยอร์ใหม่.

ขั้นตอนที่ 41

ใน แถบตัวเลือก, ลบมัน ลากเส้น และเปลี่ยน ใส่ ถึง เป็นแฉก ไล่ระดับจาก # e38989 ถึง # bb5c5c. เพิ่ม สไตล์ชั้น> เรืองแสงด้านนอก และ เงา.

ขั้นตอนที่ 42

วาดส่วนที่เลือกเป็นรูปไข่ใต้แถบเลื่อน สร้างเลเยอร์ใหม่และเติมด้วย สีดำ.

ขั้นตอนที่ 43

ยกเลิกการเลือก (Ctrl + D) ทำให้นุ่มโดยใช้ เกาส์เบลอ.

พื้นหลังด้านล่าง

ขั้นตอนที่ 44

วาดรูปสี่เหลี่ยมผืนผ้าอีกรูปสำหรับพื้นหลังด้านล่าง ใช้เหมือนกัน ใส่ และ ลากเส้น สีเป็นรูปร่างของตัวเลื่อน.

เช่นเคยโปรดระมัดระวังในการจัดวาง เราต้องการให้มันครอบคลุมทุกคำแนะนำบนผืนผ้าใบ.

เพิ่ม เลเยอร์สไตล์> การซ้อนทับแบบ.

ด้านล่างเป็นผลลัพธ์ในการขยาย 100%.

ขั้นตอนที่ 45

เลือกพื้นที่ที่สูงขึ้นโดยใช้เครื่องมือ Rectangular Marquee.

ขั้นตอนที่ 46

สร้างเลเยอร์ใหม่วางไว้ด้านหลังรูปร่าง เติมส่วนที่เลือกด้วย สีดำ. กด Ctrl + T คลิกขวาแล้วเลือก มุมมอง.

ลากมุมด้านบนออกด้านนอก.

คลิกขวาอีกครั้งและเลือก ขนาด. ลากที่จับส่วนบนลงมา.

คลิกขวาและเลือก วิปริต. ลากส่วนด้านซ้ายและขวาเข้าด้านใน.

ทำให้นุ่มโดยใช้ เกาส์เบลอ.

ลดเสียงลง ความทึบแสง ไปยัง 20%.

ขั้นตอนที่ 47

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

เพิ่มช่องว่าง 10 px ทางด้านซ้ายขวาและด้านบนของพื้นหลัง ระยะห่างควรง่ายเนื่องจากเราได้จัดทำคู่มือในขั้นตอนแรก เพิ่ม สไตล์ชั้น> เรืองแสงด้านนอก.

ขั้นตอนที่ 48

เพิ่มแนวทางใหม่ 25 px จากด้านบนของรูปร่าง.

หัวข้อมาตรา

ขั้นตอนที่ 49

เพิ่มสไตล์อักขระใหม่สำหรับชื่อส่วนของหน้าและคำอธิบาย.

เพิ่มชื่อส่วนและคำอธิบายโดยใช้เครื่องมือประเภท ใช้สไตล์ที่เราทำไว้ก่อนหน้านี้ ตรวจสอบให้แน่ใจว่าได้เพิ่มช่องว่าง 25 px จากด้านบนของพื้นหลังด้วยความช่วยเหลือจากคำแนะนำที่ทำไว้ก่อนหน้านี้.

ขั้นตอนที่ 50

วาดเส้น 5 px ภายใต้คำอธิบายของไซต์ด้วย เติม: # 938270 และ โรคหลอดเลือดสมอง: ไม่มี.

โพสต์บล็อก

ขั้นตอนที่ 51

สร้างลักษณะตัวละครอื่นสำหรับชื่อโพสต์.

ขั้นตอนที่ 52

เพิ่มชื่อโพสต์และใช้รูปแบบตัวละครก่อนหน้า.

ขั้นตอนที่ 53

วาดรูปร่างสี่เหลี่ยมผืนผ้าภายใต้ชื่อที่มีความกว้าง 4 คอลัมน์ ตั้งค่า ขาว สำหรับมัน ใส่ และ #bebebe สำหรับมัน ลากเส้น. เพิ่ม เลเยอร์สไตล์> จังหวะ.

ขั้นตอนที่ 54

วางรูปภาพที่ด้านบนของรูปร่าง แปลงเป็นรูปแบบการตัด (Ctrl + Alt + G).

ขั้นตอนที่ 55

วาดสี่เหลี่ยมมุมมนด้วย เติม: # 8e8380 และ โรคหลอดเลือดสมอง: ไม่มี. แปลงเป็น มาส์กหน้า.

ขั้นตอนที่ 56

สร้างลักษณะอักขระใหม่สำหรับข้อมูลเมตาบล็อก.

ขั้นตอนที่ 57

เพิ่มข้อความเมทาดาทาที่ด้านบนของรูปร่างและใช้สไตล์อักขระที่เราทำไว้ก่อนหน้านี้.

ขั้นตอนที่ 58

กระตุ้น ชนิด เครื่องมือและคลิกลากเพื่อสร้างกล่องข้อความ ตั้งค่าความกว้างเป็น 4 คอลัมน์ คลิก พิมพ์> วาง Lorem Ipsum เพื่อเติมด้วย Lorem Ipsum ที่สร้างโดยอัตโนมัติจาก Photoshop.

ขั้นตอนที่ 59

สร้างสไตล์ย่อหน้าใหม่สำหรับเนื้อหาตัวละคร คลิกที่ไอคอนใหม่บนแผงลักษณะย่อหน้า.

ดับเบิลคลิกที่สไตล์ย่อหน้าและใช้การตั้งค่าต่อไปนี้.

ขั้นตอนที่ 60

ใช้สไตล์นี้กับเนื้อหาโพสต์ คุณยังสามารถทดลองใช้การตั้งค่าเยื้องและการเว้นวรรค.

สำหรับการออกแบบเว็บให้ปิดการใส่ไฮเฟ็น.

ขั้นตอนที่ 61

วาดสี่เหลี่ยมมุมมนด้วย เติม: # 8e8380 และ โรคหลอดเลือดสมอง: ไม่มี. เพิ่ม เลเยอร์สไตล์> การซ้อนทับแบบ. เพื่อความมั่นคงใช้รูปแบบเดียวกับในแถบเลื่อน.

ขั้นตอนที่ 62

เพิ่มป้ายกำกับปุ่ม ฉันแนะนำให้คุณบันทึกเป็นสไตล์ตัวละคร ด้วยวิธีนี้เราสามารถใช้งานได้อย่างง่ายดายสำหรับปุ่มอื่น ๆ.

ขั้นตอนที่ 63

ปุ่มก่อนหน้านี้เป็นสภาวะปกติ ลองทำซ้ำและเปลี่ยนสีเป็น # f76b6a. รวมทั้งตั้งค่าประเภทฉลากเป็นตัวหนา.

ขั้นตอนที่ 64

วางโพสต์ในกลุ่มแล้วกด Ctrl + J เพื่อทำซ้ำ Alt-drag เพื่อทำซ้ำกลุ่ม.

ทำซ้ำขั้นตอนเดียวกันเพื่อสร้างโพสต์เพิ่มเติม อย่าลืมเปลี่ยนรูปภาพและชื่อของแต่ละโพสต์.

ขั้นตอนที่ 65

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

ขั้นตอนที่ 66: ส่วนท้าย

มาเริ่มทำงานกันที่ท้ายกระดาษกันดีกว่า เพิ่มชื่อวิดเจ็ตและคำอธิบาย.

ขั้นตอนที่ 67

เพิ่มลิงค์และวาดเส้น 1 px ที่อยู่ด้านล่าง ตั้งค่า เติม: ไม่มี และ โรคหลอดเลือดสมอง: # 8e8380.

ขั้นตอนที่ 68

คลิก ตัวเลือกเพิ่มเติม ปุ่มและเลือก เส้นประ.

ขั้นตอนที่ 69

เพิ่มลิงก์เพิ่มเติมลงในวิดเจ็ต.

ขั้นตอนที่ 70

ทำซ้ำวิดเจ็ต.

ขั้นตอนที่ 71

เราต้องเพิ่มเงื่อนไขโฮเวอร์ ตั้งค่าหนึ่งในลิงก์ให้เป็นตัวหนา.

ใต้ลิงก์ที่ใช้งานอยู่ให้เพิ่มบรรทัด 5 px ตั้งค่าสีเป็น # f76b6a. เพื่อความสอดคล้องลักษณะที่ปรากฏของลิงค์นี้จะคล้ายกับเมนูที่ใช้งานบนแถบเมนู.

ขั้นตอนที่ 72

เพิ่มสี่เหลี่ยมผืนผ้าอื่นที่พื้นที่ด้านล่าง ตั้งค่า ใส่ ไปยัง # 3d3123.

ข้อมูลส่วนท้าย

ขั้นตอนที่ 73

เพิ่มข้อมูลส่วนท้ายโดยใช้ ชนิด เครื่องมือ. ให้มันมืด เงา เพื่อเพิ่มความคมชัดให้กับพื้นหลัง.

เครือข่ายสังคม

ขั้นตอนที่ 74

เพิ่มไอคอนโซเชียลมีเดียจาก Daniele Selvitella เพิ่ม สไตล์ชั้น> เรืองแสงด้านนอก.

ขั้นตอนที่ 75

ปรับโทนไอคอนลงให้เป็น 50%. สำหรับเงื่อนไขโฮเวอร์ขอเพียงแค่เก็บไว้ ความทึบแสง ที่ 100%.

ขั้นตอนที่ 76

คว้าไอคอนเคอร์เซอร์มือฟรีและวางเคอร์เซอร์มือที่เล็กที่สุดเหนือลิงก์ที่ใช้งานอยู่หรือโฮเวอร์.

ผลสุดท้าย

นี่คือผลสุดท้ายของเรา คุณจะเห็นได้ว่า Photoshop รุ่นล่าสุดมีคุณสมบัติที่น่าสนใจในการออกแบบเค้าโครงเว็บ ลักษณะของตัวละครและลักษณะย่อหน้าคือการปรับปรุงที่สำคัญสำหรับนักออกแบบเว็บไซต์ทุกคน.

• การสาธิต
• แหล่งดาวน์โหลด