Advertisement
  1. Web Design
  2. Complete Websites

สร้างการออกแบบเว็บไซต์เข้ม สะอาดใน Adobe Photoshop

by
Read Time:11 minsLanguages:

Thai (ภาษาไทย) translation by Muhammad Gufron (you can also view the original English article)

ในหัดเล่นเรากำลังจะเรียนรู้วิธีที่จะออกแบบมืดมนทำความสะอาดในเว็บไซต์ของ Adobe โฟโต้ช้อป. เราผ่านการกวดวิชานี้ เราจะทำงานด้วย: ชั้นรูปทรงเรียบง่าย (สี่เหลี่ยม เส้น ลูกศร ฯลฯ), ลักษณะ รูปแบบ การนำ และลักษณะย่อหน้า และหลายอื่น ๆ Photoshop เทคนิคการออกแบบคุณสามารถปรับเปลี่ยนอินเทอร์เฟซสำหรับเว็บไซต์ของคุณออกแบบเวิร์กโฟลว์

 Republished Comment

 ทุกๆสองสามอาทิตย์เราเปิดดูบางอย่างของเราอ่านโปรดของกัปตัน..เสาทางนี้มาจากทั่วประวัติศาสตร์ของเว็บไซต์นะ  นี่หัดเล่นครั้งแรกตีพิมพ์ในธันวาคมของ 2010 น


 เรื่องผู้เขียน

 จูเลียน Chaniolleau นที่รู้จักกันอีกชื่อ Devilcantburn เป็นถามนะเพราะนี่คือสถานะการณ์กราฟิกและบนเว็บของดีไซเนอร์ นอกจากนี้เขายังเป็นผู้เขียนที่ ThemeForest กับแม่เช่น 96Display หรือ Stereoline คุณยังสามารถค้นหาเพิ่มเติมงานของเขาที่ devilcantburn.com

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

 ให้ดำดิ่งลงใน!


ขั้นที่ 1:การตั้งค่าเอกสาร

เริ่มโดยการสร้างเอกสารใหม่ในโฟโต้ชอปนั่นเป็น 1200px x 1600px น แน่ใจความละเอียดของคุณจะตั้งค่า 72 หน่วยเป็นพิกเซล/ตารางนิ้วของคุณและพื้นหลังจะตั้งค่าสีขาว  เราต้องการที่จะปลดล็อคเบื้องหลังเลเยอร์ดังนั้นเราสามารถเพิ่มบางรูปแบบเลเยอร์,การคลิกเมาส์ปุ่มขวาเบื้องหลังและเลือกตัวเลือก"เลเยอร์จากเบื้องหลัง"นะ  คุณสามารถเปลี่ยนชื่อเลเยอร์กลับไปที่พื้นหลัง..

เติมเบื้องหลังกับสี#101010 น

 ตอนนี้สร้างตามเส้นกริ(เมนู>มุมมอง>ใหม่นำทาง...):

  • 120px ทางแนวตั้ง
  • 600px ทางแนวตั้ง
  • 1080px ทางแนวตั้ง

ตอนนี้คุณต้องไปทางชายแดนและกลางของส่วนติดต่อเป็นบริเวณนี้


ขั้นที่ 2:การจัดเรียงของกลุ่มข่าว...

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

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

Dark Web Design

หลักเลเยอร์โฟลเดอร์ที่เราต้องการคือ:

  • ส่วนหัว
  • แถบเลื่อน
  • หลัก
  • ท้ายกระดาษ
Dark Web Design

 ขั้นที่ 3:สร้างส่วนหัว

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

Dark Web Design

สี่เหลี่ยมนะ เปลี่ยนชื่อมันเหมือน"บนแถบ bg".  ทำ Ctrl+T หรือ Cmd+T(แมค)และตั้ง proprieties จะ 1200px ว้างโดย 10px สูง:

Dark Web DesignDark Web DesignDark Web Design

 ตอนนี้ปล่อยให้เป็นอเพิ่มนังจิ้งจอ styling;ดับเบิลคลิกที่ปุ่มสีของภาพตัวอย่างอยู่ในเสื้อผ้าหลายชั้นพาเนลเพื่อตั้งค่าสีที่ต้อง#252525 น ดับเบิลคลิกที่ปุ่มลบเลเยอร์เพื่อตั้งค่า FX-ยังเลเยอร์แบบนี้:

Dark Web Design
 นี่ลึกลับ"ตนภายในเงาของ"จะเพิ่มเป็นชายแดนลูกเล่นที่ด้านล่างของสี่เหลี่ยม-นี่คือสิ่งสำคัญต้องแยกมันออกมาจากที่เหลือของส่วนหัวแบน

ขั้นที่ 4:สร้างเมนู

สร้างโฟลเดอร์ใหม่ชื่อ"บนเมนู"ในส่วนหัวกลุ่ม

วาดสี่เหลี่ยมใหม่นี้ เปลี่ยนชื่อมันเหมือน"บนสุดของเมนู bg". ทำ Ctrl+T หรือแอปเปิ้ล+ทีและตั้ง proprieties เหมือน"บนแถบ bg"แต่กับ 90px ความสูงและ 10px ในแกน Y น งั้นนี่สี่เหลี่ยมจะเป็นแค่ภายใต้ค"สุด nar bg"เลเยอร์ในเสื้อผ้าหลายชั้นพาแนล

Dark Web DesignDark Web DesignDark Web Design

สร้างรายการเมนูของข้อความที่คุณต้องการ  ฉันใช้แบบอักษรที่ว่า"ดรอยด์เซ"เพื่อสร้างเมนูแต่คุณสามารถใช้อะไรที่คุณต้องการ ตำแหน่งที่ 20px จากที่ถูกต้องนำทางบนเส้น.

Dark Web DesignDark Web DesignDark Web Design

ฉันใส่อง 4 ช่องว่าง"(โด spacebar 4x)ระหว่างแต่ละรายการและการแสดงแบบอักษร-ขนาด 18px น


ขั้นที่ 5:สถานที่สัญญลักษณ์

สร้างโฟลเดอร์ใหม่ที่ชื่อ "ด้านบนโลโก้" ในกลุ่มหัวข้อกลุ่มทั้งหมด เลือกมันแล้วไปที่เมนู>แฟ้ม>นำเข้าได้ อยู่ในโฟลเดอร์ทรัพยากรผมต้องรวมตัวอย่างของโลโก้ที่ชื่อ"logo_zombie นpsdcomment". เลือกมันและตำแหน่งที่ 130px ของทางด้านซ้ายและ 5px ของด้านบน

คุณสามารถเพิ่มใหม่ FX รูปแบบบนโลโก้อย่างที่คุณต้องการ


ขั้นที่ 6:สร้างแถบเลื่อน

เลือดบอกระดับบนแถบเลื่อนกลุ่มและสร้างเป็นสี่เหลี่ยมเหมือนขั้นที่ 3 และตั้ง proprieties กับ 400px ความสูงและ 100px ในแกน Y น

 เปลี่ยนชื่อมันอะไรแบบ"การไล่ระดับสี"และดับเบิลคลิกที่ปุ่มสีของภาพตัวอย่างอยู่ในเสื้อผ้าหลายชั้นพาเนลเพื่อตั้งค่าสีที่ต้อง#77b400 น คลิกสองครั้งบนชั้นการตั้งค่าชั้น FX เช่นนี้:

Dark Web Design

ไล่ระดับสีดำ(#00000)กับระดับความโปร่งแสงตอน 100%หรอกเพื่อนสีดำกับ opactity ที่ 0

Dark Web DesignDark Web DesignDark Web Design

ตอนนี้คุณควรจะได้ออกแบบเหมือนนี้:

Dark Web DesignDark Web DesignDark Web Design

 มันกลยุทธของการเพิ่ม"เงาของการไล่ระดับสี"แทนที่จะใช้ซ่อมสีสำคัญเพราะมันจะช่วยให้เราไปอย่างง่ายดายเปลี่ยนสีหลังจากนั้นโดยปรับตัวที่ฐาน-สี่เหลี่ยมสีน

ต่อไปสร้างโฟลเดอร์ใหม่ชื่อ"slider_block".  สร้างสี่เหลี่ยม(กับเว็กเตอร์เครื่องมือ(ดำน้ำ)เช่นเค)อยู่ในกลุ่มที่ชื่อ"ความโปร่งแสงล่องหน"

Dark Web DesignDark Web DesignDark Web Design

ตำแหน่งมันด้วยค่า:ดับเบิลคลิกที่ปุ่มลบเลเยอร์อยู่เลเยอร์แผนที่จะเปิด FX-ยังเลเยอร์ทางเลือก และตั้งค่ามันเหมือนนี้:

Dark Web DesignDark Web DesignDark Web Design

 ที่ซ้ำกัน"ความโปร่งแสงล่องหน"ลบเลเยอร์,เอา FX-ยังเลเยอร์ตัวเลือกและชื่อมันว่า"ภาพพื้นที่"ย
ตั้งค่าพื้นหลังของ opactity ไปด้วย 100%และปรับขนาดมันกับเรื่องนี้ค่าที่จะสร้างหลายเลเยอร์ลูกเล่น:

Dark Web DesignDark Web DesignDark Web Design

ขั้นตอน 7:สร้างแถบเลื่อนควบคุมส่วนประกอบ

สร้างเอกสารใหม่ 100px x 100px น เลือกกำหนดเองเว็กเตอร์รูปร่าง(ยู)จากเครื่องมือบาร์และคลิก-นั่นล่ะเอกสารที่จะเปิดรายการของกำหนดเองเว็กเตอร์รูปร่าง  เพื่อสร้างลูกศรฉันจะเริ่มต้นกับเป็นค่าปริยายลูกศรรูปร่างและจากนั้นเราจะปรับแต่งมัน:

Dark Web Design

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

Dark Web DesignDark Web DesignDark Web Design

เอา FX-ยังเลเยอร์บเลเยอร์กับเรื่องนี้ตั้งค่า:

Dark Web DesignDark Web DesignDark Web Design

ลบพื้นหลังของเอกสารนี้และการบันทึกเอกสารเป็น:ArrowSlider นpsdcomment ใน PSDCOMMENT โฟลเดอร์

 บ้านนี้ลูกธนูอยู่ใน"slider_block"กลุ่ม ต้องทำอย่างนั้นเมนู>แฟ้ม>นำเข้า...
เลือก ArrowSlider นpsdcomment และสถานที่ที่ตำแหน่งคุณต้องการคนต่อไปที่แถบเลื่อน

Dark Web Design

ที่ซ้ำกันออกลูกศรลบเลเยอร์(ปุ่มพิมพ์ Ctrl+เจอหรือ Cmd+เจ)เพื่อสร้างลูกศรซ้ายและตำแหน่งมัน
 ใช้เมนู>แก้ไข>กลายร่าง>หมุนอยู่บนเส้นแนวนอกษะการหมุนภาพที่ลูกธนูอยู่ในที่ที่เหมาะสมจสอบข้อมูลจากตำรวจ


ขั้นตอน 8:การทำตัวเน้นที่แถบเลื่อน

 ซ่อน"slider_block"กลุ่ม
 สร้างใหม่ว่างเปล่าเลเยอร์และใช้คนในวงเวทย์ส่วนที่เลือกเครื่องมือ(M)เพื่อสร้างเป็นวงกลมเรื่อง 200px น
เติมมันเข้ากับสีขาวนะ

Dark Web Design

ปล่อยตัวของคุณการเลือกและจากนั้นใช้ตัวกรอง>Gaussian เบลอและจัดมันตอน 50px น

Dark Web DesignDark Web DesignDark Web Design

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

Dark Web DesignDark Web DesignDark Web Design

ขั้นที่ 9:เพิ่มแถบเลื่อน

ที่ซ้ำกัน"การไล่ระดับสี"เลเยอร์และเปลี่ยนชื่อมันว่า"มือนบาร์น" ลดความสูงของเพื่อ 20px และตำแหน่งนี้ที่ด้านล่าง ot"การไล่ระดับสี"เลเยอร์นะ

Dark Web Design

เปลี่ยนสีของเลเยอร์ที่จะดำแทนที่จะเป็นของไล่ระดับสีและตั้งเลเยอร์พื้นหลังระดับความโปร่งแสงตอน 60%แล้วกัน
 ดับเบิลคลิกเพื่อเปิด FX-ยังเลเยอร์ตัวเลือกและสร้าง dropshadow และ innershadow เหมือนนี้:

Dark Web DesignDark Web DesignDark Web Design
Dark Web DesignDark Web DesignDark Web Design

ย้ายเลเยอร์ที่ 1px ลง
ตอนนี้เธอมีดีเน้นเส้นแบ่งระหว่างแถบเลื่อนและคนผิวดำเบื้องหลัง

Dark Web Design

 ขั้นตอน 10 โมงทำให้คนแถบเลื่อนลอย!

 เปิด background.jpg แฟ้มจากทรัพยากรโฟลเดอร์(จากดาวน์โหลดข้อมูลแฟ้ม)แล้วไปที่เมนู>แก้ไข>กำหนดรูปแบบกวนนะ งั้นก็ปิดแฟ้มได้
 ตอนนี้เลือกพื้นหลังเลเยอร์และดับเบิลคลิกเพื่อเปิด FX-ยังเลเยอร์ตัวเลือกและคลิกที่ปุ่มรูปแบบบนแท็บนี้ นี่เลือกใหม่ของพื้นหลังแค่สร้างขึ้นมา

ตอนนี้ไปส่วนที่เลือกไว้ของความโปร่งแสงล่องหลบเลเยอร์(ปุ่มพิมพ์ Ctrl+คลิกหรือ Cmd+คลิกที่ปุ่มลบเลเยอร์)ย
 สร้างเลเยอร์ใหม่ชื่อ"เงา"และที่อยู่ภายใต้คำว่า"ความโปร่งแสงล่องหน"ลบเลเยอร์นะ
ใส่สีดำ และเพิ่มความเบลอนที่
เมนู>ตัวกรอง>Blurs>Gaussian เบลอ...และทำให้มันกับ 20px lenght น
ตอนนี้เปลี่ยนมันเพื่อทำให้มันเหมือนเป็น dropshadow นนนน

Dark Web DesignDark Web DesignDark Web Design

อีกครั้ง ใช้เมนู > กรอง > Blurs > นที่เบลอ... แต่ตอนนี้ มีความยาว 5px
ตอนนี้กลายร่างมันอีกครั้งเพื่อปรับขนาดมันต้องตรงกับความโปร่งแสงล่องหลบเลเยอร์นอกกนะ

Dark Web Design

ให้เลือกว่า"เงา"เลเยอร์แล้ว"ความโปร่งแสงล่องหน"ลบเลเยอร์เป็นการเลือก(ปุ่มพิมพ์ Ctrl+คลิกหรือ Cmd+คลิกที่ปุ่มลบเลเยอร์ในเสื้อผ้าหลายชั้นแผงควบน)

ตอนนี้กลับค่าการเลือกปุ่มพิมพ์ Ctrl+ฉันหรือ Cmd+ฉันและคลิกบนไอคอนเพื่อสร้างการระดับความโปร่งแสงหน้ากาก"เงา"เลเยอร์นะ เงาคือตอนนี้ซ่อนอยู่ข้างหลังโปร่งใสบริเวณนี้

Dark Web DesignDark Web DesignDark Web Design

ขั้นตอน 11:ปรับแก้ภาพที่โลโก้

ก่อนที่เราย้ายไปที่หลักส่วนหนึ่งเราจะต้องปรับแก้ภาพสัญญลักษณ์เพื่อทำให้มันมากกว่าแมสสีฟไดนามิค

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

เพิ่ม Gaussian เบลอๆกับ 1,5%lenght น
เปลี่ยนมัน ปุ่มพิมพ์ Ctrl+T หรือ Cmd+ทีเพื่อเปลี่ยนมันย้าย referer ประเด็นที่เหลือและเคลื่อนที่ถูกต้อง
จัดการไปทางด้านล่างสำหรับ 20px...

Dark Web DesignDark Web DesignDark Web Design

ตอนนี้นายมีคดีความลึกใต้เงาของลูกเล่น คุณยังสามารถเพิ่มมากกว่าผลกระทบกับสัญญลักษณ์ตัวเองถ้าคุณต้องการ!


ขั้นตอน 12:กำหนดสดมภ์

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

สร้างตามเส้นกริ(เมนู>มุมมอง>ใหม่นำทาง...):

  •  355px ทางแนวตั้ง
  • 375px ทางแนวตั้ง
  • 590px ทางแนวตั้ง
  • 610px ทางแนวตั้ง
  • 825px ทางแนวตั้ง
  •  845px ทางแนวตั้ง

เราต้องตอนนี้ 4 คอลัมน์ของ 215px แต่ละคนและ 20px เกิดขึ้นระหว่างพวกเขา


ขั้นที่ 13:Slogan บล็อค

นำเข้าที่ geek_zombie นภาพจากโฟลเดอร์ทรัพยากรและตำแหน่งมันตอนกลางของคอลัมน์แรกนะ

สร้างเส้นใหญ่ของข้อความสำหรับ slogan กับข้อความของทางเลือกของคุณ ฉันใช้แบบอักษร"ดรอยด์เซ"ที่ขนาดของ 30px และสายเลือดความสูงของที่ 42pt น คุณสามารถปรับการออกแบบตัวอักษรเป็นคำว่า;)

สี่เหลี่ยมอยู่ใต้ slogan กับ 7px ของความสูงของนะ

Dark Web DesignDark Web DesignDark Web Design

ที่สี่เหลี่ยมสีดำสร้าง FX-ยังเลเยอร์ตัวเลือกเหมือนนี้:

Dark Web DesignDark Web DesignDark Web Design

คุณต้องตอนนี้เป็น bevel(ได้กดปุ่ม)บาร์

Dark Web DesignDark Web DesignDark Web Design

เลือกเลเยอร์ 3(ซอมบี้+Slogan+สีดำบาร์)และปุ่มพิมพ์ Ctrl+G หรือ Cmd+G ให้กลุ่มพวกเขา เปลี่ยนชื่อกลุ่ม"Slogan".  โน้ตยังไงเราต้องอยู่จัดการผ่านทางโพรเซสทั้งหมด!


ขั้นที่ 14:คอลัมน์แรกบล็อค

 เอาเครื่องมือข้อความและสร้างตำแหน่อย  ฉันกำลังใช้ 30pt พิมพ์อีกครั้ง-สังเกตเห็นว่านี่มันเหมือนกันกับที่ slogan เพื่อช่วยเก็บ typography ที่คล้ายกัน มันจะช่วยเพื่อให้แน่ใจว่าเป็นสอดคล้องมืออาชีพมองข้ามทั้งการออกแบบ

กำหนดพื้นที่ของข้อความที่อยู่ 128px ของหัวเรื่องและบางอย่างเล็ก"filler"ข้อความข้างในมัน ฉันกำลังใช้ 13pt Arial แต่คุณสามารถใช้อะไรก็ได้ที่คุณต้องการ

ที่ซ้ำกันผิวดำบาร์เราต้องสร้างขึ้นสำหรับ slogan อยู่ในขั้นตอนก่อนแล้วเอามันภายใต้ข้อความที่ 20px ของทางด้านล่างของการส่งข้อความนั่น
 ปรับขนาดมันต้องทำให้มันเติมเต็มแรกคอลัมน์

Dark Web Design

สร้างภาพพื้นที่กับเว็กเตอร์รูปร่างเครื่องมือ(U น) 215 x 88px น
ที่ซ้ำกันมันเปลี่ยนชื่อมันว่า"Tranparency_1col"และยืดแข้งยืดมันในความสูงของเพื่อให้เป็นบล็อกของ 215 x 108px น
กดปุ่ม Ctrl+หรือ Cmd+เพื่อย้ายเลเยอร์ลงในเลเยอร์แผน

เลือก"ความโปร่งแสงล่องหน"ลบเลเยอร์และคัดลอก FX-ยังเลเยอร์แบบที่จะใส่มันอยู่บนชั้นแค่ duplicated("Tranparency_1col")ได้

 ตอนนี้คุณสามารถทำให้คุณภาพในรูปถ่ายบริเวณนี้  ถูกคลิกบนภาพแล้วเลือก"สร้าง clipping หน้ากาก".

Dark Web Design

ขั้นที่ 15:สร้างอื่นๆสดมภ์

คุณสามารถตอนนี้ที่ซ้ำกันคนแรกคอลัมน์(เลเยอร์กลุ่ม)แล้วก็ย้ายไปที่สวนคอลัมน์ เปลี่ยนเนื้อหา(ภาพ/ข้อความ)เป็นต้องการ

ทำแบบเดียวกันกับในคอลัมน์ 3 และ 4...

Dark Web DesignDark Web DesignDark Web Design

ขั้นที่ 16:ท้ายกระดาษ

ไปที่เมนู>รูปภาพ>พื้นที่วาดภาพและแก้ไขขนาดของคนงานเหมือนนี้:

Dark Web Design

สี่เหลี่ยมนะ เปลี่ยนชื่อมันเหมือน"ท้ายกระดาษ bg". ทำ Ctrl+T หรือ Cmd+T(แมค)และตั้ง proprieties ไปยัง:

Dark Web DesignDark Web DesignDark Web Design

 ดับเบิลคลิกที่ปุ่มสีของภาพตัวอย่างอยู่ในเสื้อผ้าหลายชั้นพาเนลเพื่อตั้งค่าสีที่ต้อง#101010 น ดับเบิลคลิกที่ปุ่มลบเลเยอร์เพื่อตั้งค่า FX-ยังเลเยอร์แบบนี้:

Dark Web DesignDark Web DesignDark Web Design

เลือกและคัดลอกซ้ำเสื้อผ้าหลายชั้น"มือนบาร์"และ"การไล่ระดับสี"จากแถบเลื่อนกลุ่ม

กลุ่มเสื้อผ้าหลายชั้นและที่พวกเขาอยู่ใต้"ท้ายกระดาษ bg"อยู่ในเสื้อผ้าหลายชั้นพาแนล

จะให้ย้ายพวกเขาไปทางด้านล่างของเอกสาร

 ปรับขนาดพวกเขาเพื่อสร้างรูปแบบที่คุณต้องการ.
ขอตัวอย่างเช่น,ฉันทำการไล่ระดับสีเลเยอร์ 35px สูงและ"มือนบาร์"เลเยอร์ 8px สูง...

วางโลโก้ที่ด้านล่างตรง 20px ของนำทางถูกต้อง

Dark Web DesignDark Web DesignDark Web Design

ที่ซ้ำกันบนสุดของเมนูรายการเพื่อให้พวกเขาอยู่ในท้ายกระดาษที่"ท้ายกระดาษ bg"เลเยอร์นะ

สร้างการสงวนลิขสิทธิ์บนเส้นใน Arial,11pt ดำสีน

Dark Web DesignDark Web DesignDark Web Design

 ที่ซ้ำกัน"ท้ายกระดาษ bg"และปรับขนาดมันในความสูงของที่ 10px น
 ย้ายมันแค่"ท้ายกระดาษ bg". นั่นสร้างดี bevel ผลกระทบด้านล่างของเมนูได้

Dark Web DesignDark Web DesignDark Web Design

เรียบร้อยแล้ว! สร้างของตัวเองกำหนดเองรุ่น!

Dark Web DesignDark Web DesignDark Web Design
Dark Web DesignDark Web DesignDark Web Design
Dark Web DesignDark Web DesignDark Web Design

สรุป

ขอบคุณสำหรับติดตามด้วย! ฉันหวังว่าคุณจะสามารถใช้เวทมนตร์บางอย่างของเทคนิคและเทคนิคที่อยู่ในหัดเล่นบางส่วนของตัวเองโครงการของนะ ถ้าคุณจำอะไร,ฉันหวังว่ามันเป็นที่อยู่แผนเป็นเรื่องสำคัญกำลังสร้างอกออกแบบเว็บไซต์นะ  พวกเดียวกันเลเยอร์-ตั้งค่าจะถูกใช้ในการสร้างแฟ้ม HTML/CSS เฟรมเวิร์กตอนที่คุณเริ่มเขียนโปรแกรม ขอบคุณอีกครั้ง!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.