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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

สรุป

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