20 เคล็ดลับ Photoshop สำหรับนักออกแบบเว็บไซต์
เผยแพร่แล้ว: 2017-08-16อาจเป็นไปได้ว่านักออกแบบเว็บไซต์ทุกคนมีชุดเทคนิค Photoshop ที่ชื่นชอบอยู่ในแขนเสื้อ ด้วยเหตุผลที่ดี การแก้ไขภาพอันทรงพลังของ Adobe เป็นแก่นของโลกแห่งการออกแบบเว็บ มีโปรแกรมเพียงไม่กี่โปรแกรมที่สามารถแข่งขันกับซอฟต์แวร์ที่ยอดเยี่ยมนี้และคุณสมบัติที่หลากหลายได้
อย่างไรก็ตาม แม้ว่านักออกแบบเว็บไซต์ส่วนใหญ่จะรู้จัก Photoshop เป็นอย่างดี แต่ก็ยังมีอีกมากที่คุณสามารถเรียนรู้ได้ ท้ายที่สุดแล้ว โปรแกรมไม่เพียงแต่ทรงพลัง แต่ยังซับซ้อนอีกด้วย นอกจากนี้ยังมีการเพิ่มสิ่งใหม่ ๆ ผ่านการอัพเดทเป็นประจำ
ด้วยเหตุผลดังกล่าว คุณควรสำรวจเครื่องมือโปรดของคุณต่อไป เพื่อช่วยให้คุณทำเช่นนั้น ในบทความนี้ เราจะมาดูเทคนิค Photoshop ที่ดีที่สุดบางส่วน สิ่งที่สามารถปรับปรุงเวิร์กโฟลว์ของคุณ ทำให้การทำงานและชีวิตง่ายขึ้น ประหยัดเวลา และช่วยคุณออกแบบเว็บไซต์ที่ดีที่สุด
คุณพร้อมที่จะเรียนรู้เพิ่มเติมเกี่ยวกับ Photoshop แล้วหรือยัง? แล้วอ่านต่อ
เคล็ดลับ Photoshop เพื่อเปลี่ยนคุณให้กลายเป็นตัวช่วยสร้างการออกแบบเว็บ
คำแนะนำต่อไปนี้มีตั้งแต่ระดับเริ่มต้นไปจนถึงเนื้อหาที่ซับซ้อนมากขึ้น แต่ละคนได้รับเลือกเพื่อช่วยให้คุณเป็นนักออกแบบเว็บไซต์ที่ดีที่สุด
1. ปรับปรุงพื้นที่ทำงานของคุณ
เริ่มจากพื้นฐานกันก่อน สิ่งแรกที่ต้องทำเพื่อปรับปรุงเวิร์กโฟลว์ของคุณคือการตั้งค่า Photoshop ในลักษณะที่สนับสนุนวิธีการใช้งานของคุณ ท้ายที่สุด การทำงานจะง่ายขึ้นด้วยเครื่องมือที่คมชัดยิ่งขึ้น
ด้วยเหตุนี้ จุดแรกของเราคือ Window > Workspace > Graphic and Web การเลือกตัวเลือกนี้จะเปลี่ยนเครื่องมือที่มีอยู่เป็นสิ่งที่คุณน่าจะใช้สำหรับการออกแบบเว็บมากที่สุด
หลังจากนั้น ไปที่ Edit > Preferences จุดแวะที่สำคัญที่สุดจุดหนึ่งคือ หน่วยและไม้บรรทัด ไม่ว่าคุณจะเลือกการวัดใดที่นี่ (พิกเซลที่มีแนวโน้มมากที่สุด) จะเป็นค่าเริ่มต้นสำหรับเอกสารทั้งหมดที่จะตามมา
(คำใบ้ด่วน: หากต้องการเปลี่ยนไม้บรรทัดสำหรับเอกสารเดี่ยว เพียงคลิกขวาที่พวกมันแล้วเลือกหน่วยการวัดที่คุณต้องการ)
หลังจากนั้น ไปที่ Preferences > Performance > History & Cache แล้วคลิก Web / UI Design
การทำเช่นนั้นจะเปลี่ยนการตั้งค่าแคชให้เหมาะกับไฟล์ขนาดเล็กที่มีเลเยอร์จำนวนมาก ซึ่งเป็นสิ่งที่คุณจะใช้งานเป็นส่วนใหญ่
ในที่เดียวกัน คุณสามารถเลือกจำนวนสถานะประวัติได้ นั่นคือจำนวนขั้นตอนที่คุณสามารถย้อนกลับได้หากต้องการยกเลิกบางอย่าง
สุดท้าย ออกจากการตั้งค่า ปิดเอกสารทั้งหมดแล้วกดปุ่ม T บนแป้นพิมพ์ของคุณ ซึ่งจะทำให้เมนูแบบอักษรปรากฏที่ด้านบนของหน้าจอ สิ่งที่คุณกำหนดไว้ที่นี่จะเป็นมาตรฐานสำหรับเอกสารใหม่ เพราะไม่มีใครชอบ Myriad Pro มากขนาดนั้น
2. เรียนรู้แป้นพิมพ์ลัด
สำหรับโปรแกรมที่คุณใช้เป็นประจำ การเรียนรู้แป้นพิมพ์ลัดโดยทั่วไปถือเป็นคำแนะนำที่ดี
ตัวอย่างเช่น ฉันใช้ Ctrl+Alt+2/3 เพื่อสร้างส่วนหัว h2 และ h3 ขณะเขียนโพสต์นี้ เร็วกว่าการใช้แถบเครื่องมือแก้ไขมาก เนื่องจากฉันไม่ต้องละมือจากแป้นพิมพ์
เช่นเดียวกับ Photoshop การรู้วิธีดำเนินการด้วยการกดแป้นอย่างง่ายนั้นเร็วกว่าการคลิกผ่านเมนูอย่างไม่มีขีดจำกัด
เราจะพูดถึงแป้นพิมพ์ลัดจำนวนมากในบทความนี้ อย่างไรก็ตาม ฉันยังแนะนำเอกสารสรุปนี้สำหรับการเรียนรู้ทางลัดไปยังการทำงานของ Photoshop ทั่วไป นอกจากนั้น คุณควรสร้างนิสัยในการดูแป้นพิมพ์ลัดสำหรับสิ่งที่คุณทำซ้ำแล้วซ้ำอีก
3. กลุ่มและชั้นชื่อ
เมื่อทำงานกับ Photoshop คุณจะทำงานกับเลเยอร์จำนวนมาก ไม่เพียงแต่ทำให้องค์ประกอบส่วนใหญ่มีเลเยอร์ของตัวเองเท่านั้น แต่การดัดแปลง เช่น ความสว่าง/คอนทราสต์ จะถูกเพิ่มเป็นเลเยอร์ด้วย
ด้วยเหตุผลดังกล่าว อาจทำให้สับสนได้อย่างรวดเร็ว โชคดีที่มีตัวเลือกมากมายที่จะทำให้ลดน้อยลง โดยสองตัวเลือกคือความสามารถในการจัดกลุ่มและตั้งชื่อเลเยอร์
ขั้นแรก โดยการดับเบิลคลิกที่เลเยอร์ใดๆ ก็ตาม คุณจะสามารถเปลี่ยนชื่อเลเยอร์เป็นสิ่งที่คุณต้องการได้
ด้วยวิธีนี้ คุณจะเข้าใจได้ง่ายว่าเลเยอร์มีภาพพื้นหลัง เมนู หรือแถบด้านข้างหรือไม่
หรือคุณสามารถเลือกหลายเลเยอร์พร้อมกันได้ โดย กด Ctrl ค้าง ไว้เพื่อเลือกแต่ละเลเยอร์ หรือ Shift เพื่อทำเครื่องหมายช่วงของเลเยอร์ที่อยู่ใกล้เคียง Ctrl+G จะเปลี่ยนเป็นกลุ่ม
หรือคลิกขวาที่เลเยอร์แล้วเลือกตัวเลือกกลุ่มจากที่นั่น ไม่ว่าจะด้วยวิธีใด เลเยอร์ของคุณจะเป็นระเบียบมากขึ้น นอกจากนี้คุณยังสามารถตั้งชื่อเลเยอร์ที่จัดกลุ่มได้อีกด้วย!
4. กรองเลเยอร์
การตั้งชื่อและการจัดกลุ่มเลเยอร์เป็นการเริ่มต้นที่ดี อย่างไรก็ตาม เมื่อทำงานกับหลายสิบหรือหลายร้อยรายการ คุณก็ยังสับสนได้ง่าย
สำหรับกรณีเหล่านี้ คุณยังมีตัวเลือกในการกรองเลเยอร์ของคุณ ในการทำเช่นนั้น เพียงใช้เมนูที่ด้านบนของเมนู เลเยอร์ เพื่อกรองตามประเภท ชื่อ เอฟเฟกต์ สี และอื่นๆ
หรือเลือกเลเยอร์โดยตรงโดยใช้เครื่องมือ ย้าย โดย กด Ctrl ค้าง ไว้แล้วคลิกบนเลเยอร์หรือวัตถุ
5. สร้าง Grid
รูปภาพโดย PureSolution / shutterstock.com
ตารางเป็นหนึ่งในหลักการที่สำคัญที่สุดในการออกแบบเว็บ มันนำคำสั่งในการออกแบบและช่วยให้คุณวางวัตถุของคุณ ด้วยเหตุผลดังกล่าว การสร้างกริดใน Photoshop เท่านั้นจึงเหมาะสม
ในการดำเนินการดังกล่าว ให้ใช้ มุมมอง > เค้าโครงคำแนะนำใหม่ หรือสร้างเส้นบอกแนวแนวนอนและแนวตั้งโดยคลิกที่ไม้บรรทัดแล้วลากเข้าไปในเอกสาร ใช้ Ctrl เพื่อย้ายเส้นบอกแนวที่มีอยู่
6. นำเข้า Swatches สี
คุณสามารถโหลดตัวอย่างสีลงใน Photoshop ได้โดยตรงจากไฟล์ HTML, CSS หรือ SVG ด้วยวิธีนี้ คุณมีจุดเริ่มต้นที่ดีสำหรับรูปแบบสีของคุณเมื่อทำงานกับเนื้อหาที่มีอยู่ เช่น โลโก้
หากต้องการใช้ประโยชน์จากเคล็ดลับ Photoshop นี้ เพียงเปิดแผง Swatches คลิกเมนูแบบเลื่อนลงที่มุมขวาบนและเลือก Load Swatches ไปที่ไฟล์ที่เป็นปัญหาแล้วเปิดเพื่อนำเข้าตัวอย่างสีใหม่ของคุณ
7. บันทึกรูปร่างที่กำหนดเอง
โดยเฉพาะอย่างยิ่งเมื่อออกแบบหลายหน้าสำหรับไซต์เดียวกันหรือเว็บไซต์ที่มีการออกแบบคล้ายกัน คุณจะพบว่าตัวเองใช้วัตถุและรูปร่างเดียวกันซ้ำแล้วซ้ำอีก ด้วยเหตุผลดังกล่าว จึงควรบันทึกเป็นรูปร่างที่กำหนดเองเพื่อนำมาใช้ใหม่อย่างรวดเร็ว
ในการดำเนินการดังกล่าว ให้คลิกขวาที่รูปร่างที่ต้องการด้วยเครื่องมือการเลือกเส้นทาง (ลูกศรสีดำ) จากนั้นเลือก กำหนดรูปร่างที่กำหนดเอง เมื่อคุณทำเสร็จแล้ว คุณจะสามารถเข้าถึงรูปร่างนี้ผ่านตัวเลือกแถบด้านบนของเครื่องมือ Custom Shape เพียงคลิกที่เมนูดรอปดาวน์ที่เขียนว่า รูปร่าง: และเลือกรูปร่างที่คุณบันทึกไว้
8. สลับระหว่างสีพื้นหลังและสีพื้นหน้า
สลับไปมาระหว่างสีพื้นหลังและสีพื้นหน้าโดยไม่ต้องคลิกที่ไอคอน เพียงกด X บนแป้นพิมพ์ของคุณ นอกจากนี้ หากคุณต้องการให้สีกลับไปเป็นขาวดำแบบเรียบง่าย คุณสามารถทำได้โดยกด D
9. เปลี่ยนความทึบผ่านแป้นพิมพ์
แป้นพิมพ์ลัดอื่น: สำหรับเครื่องมือใดๆ ที่สามารถเปลี่ยนความทึบได้ คุณสามารถทำได้โดยใช้แป้นพิมพ์ ตัวเลข 1 ถึง 0 จะตั้งค่าความทึบเป็นอะไรก็ได้ระหว่าง 10% ถึง 100% เช่นเดียวกับความทึบของเลเยอร์
10. วาดเส้นตรง
หากต้องการวาดเส้นตรงด้วยเครื่องมือใดๆ เพียง กดปุ่ม Shift ค้าง ไว้ หลังจากนั้น คุณสามารถลากเส้น (ทั้งในแนวนอนและแนวตั้ง) ที่จะเป็นเส้นตรงโดยอัตโนมัติ หรือคลิกที่จุดสองจุดเพื่อสร้างเส้นตรงระหว่างจุดทั้งสอง
11. สีตัวอย่าง
ต่อไปในกระเป๋าของเทคนิค Photoshop ของเราคือความสามารถในการสุ่มตัวอย่างสีใดๆ หากคุณต้องการสีจากวัตถุใดๆ ให้กดปุ่ม Alt ค้างไว้แล้วคลิกที่เฉดสีที่คุณต้องการ ใช้งานได้ทั้งกับ แปรง ดินสอ ถังสี และเครื่องมืออื่นๆ ที่ใช้สี
12. เพิ่มหรือลบออกจากส่วนที่เลือก
คุณสามารถเพิ่มไปยังส่วนที่เลือกที่มีอยู่ได้โดยกด shift ค้างไว้และเลือกส่วนที่คุณต้องการรวมไว้ หากต้องการลบ ทำสิ่งเดียวกันแต่ใช้ปุ่ม Alt
13. เลิกทำมากกว่าหนึ่งขั้นตอน
วิธีคลาสสิกในการเลิกทำการกระทำล่าสุดของคุณคือการใช้ Ctrl+Z อย่างไรก็ตาม สิ่งนี้ใช้ได้กับสิ่งสุดท้ายที่คุณทำเท่านั้น หากต้องการย้อนกลับหลายขั้นตอน ให้ใช้ Ctrl+Alt+Z
14. เปลี่ยนขนาดแปรงของคุณแบบไดนามิก
หากต้องการเปลี่ยนขนาดแปรง ไม่จำเป็นต้องคลิกเมนูแบบเลื่อนลงแล้วลากไปยังขนาดที่เหมาะสม ให้กด Alt และปุ่มขวาของเมาส์ค้างไว้ แล้วลากไปทางซ้ายและขวาเพื่อลดและเพิ่มขนาดของแปรง
15. บันทึกสำหรับเว็บ
การใช้ฟังก์ชัน Safe for Web เป็นสิ่งสำคัญ เนื่องจากช่วยให้แน่ใจว่าขนาดรูปภาพมีขนาดเล็กที่สุด นี่เป็นสิ่งสำคัญมากในการปรับปรุงความเร็วของไซต์
ใน Photoshop คุณสามารถทำได้ผ่าน File > Export > Save for Web อย่างไรก็ตาม วิธีที่รวดเร็วกว่าคือการใช้ Ctrl+Alt+Shift+S ยินดี!
16. เปิดรูปภาพเป็นเลเยอร์
บางครั้งจำเป็นต้องนำเข้ารูปภาพจำนวนมากไปยัง Photoshop พร้อมกัน แต่เมื่อคุณลากมันลงในพื้นที่ทำงานของคุณ คุณจะถูกขอให้วางด้วยตนเอง
วิธีที่ใช้งานได้จริงกว่าคือ File > Scripts > Load Files into Stack เรียกดูรูปภาพที่เป็นปัญหา ทำเครื่องหมายและกด Ok สองครั้ง ตอนนี้ แต่ละภาพจะถูกนำเข้าไปยังเลเยอร์ของตัวเองโดยอัตโนมัติ
17. คัดลอก CSS โดยตรงจาก Photoshop
หนึ่งในเทคนิค Photoshop ที่สะดวกสบายที่สุดสำหรับนักออกแบบเว็บไซต์คือความจริงที่ว่าโปรแกรมสร้าง CSS ที่คุณสามารถส่งออกได้ ไม่จำเป็นต้องพิมพ์ทั้งหมดด้วยมือหรือใช้การลองผิดลองถูกเพื่อนำไปใช้
หากต้องการใช้ประโยชน์จากสิ่งนี้ เพียงคลิกขวาที่เลเยอร์แล้วเลือก Copy CSS หรือใช้เมนู เลเยอร์ เพื่อค้นหาตัวเลือกเดียวกัน ตอนนี้คุณมีสไตล์ที่จำเป็นทั้งหมดเพื่อวางลงในสไตล์ชีตของคุณหรือโปรแกรมอื่นๆ ที่คุณใช้อยู่
18. การออกแบบสำหรับอุปกรณ์และการวางแนวหลายอย่างพร้อมกัน
การออกแบบสำหรับเว็บในปัจจุบันหมายถึงการออกแบบอุปกรณ์ต่างๆ มากมายเหลือเฟือ ในช่วงเวลาที่อุปกรณ์พกพากระทบต่อคอมพิวเตอร์เดสก์ท็อปทุกที่ในโลก การนำการออกแบบมือถือมาใช้เป็นสิ่งจำเป็น
ที่มา: ComScore
โชคดีที่ Photoshop มีอาร์ตบอร์ดและวัตถุอัจฉริยะที่ช่วยให้ปรับขนาดการออกแบบของคุณให้เป็นรูปแบบต่างๆ ได้อย่างง่ายดาย
ฉันสามารถอธิบายรายละเอียดทั้งสองอย่างได้ที่นี่ อย่างไรก็ตาม Phlearn ได้จัดทำบทแนะนำที่ยอดเยี่ยมเกี่ยวกับเรื่องนี้ ซึ่งทำงานได้ดีกว่าที่ฉันเคยทำมามาก:
19. ใช้การประมวลผลอัตโนมัติสำหรับงานซ้ำๆ
คุณสมบัติ Photoshop ที่ยอดเยี่ยมอีกอย่างหนึ่งคือการประมวลผลอัตโนมัติ หมายความว่าคุณสามารถทำงานที่บันทึกไว้ซ้ำแล้วซ้ำอีกโดยไม่ต้องดำเนินการด้วยตนเอง สิ่งนี้มีประโยชน์มาก ตัวอย่างเช่น หากคุณต้องการบันทึกรูปภาพจำนวนมากสำหรับเว็บ
นี่คือวิธีการทำงาน ขั้นแรก เปิดไฟล์ของคุณ จากนั้นเปิด Actions ( Alt+F9 ) ค้นหา Create New Action แล้วคลิก ระบุชื่อและกำหนดคีย์ผสมและสี (ไม่บังคับ)
หากต้องการบันทึกการกระทำของคุณ ให้กด บันทึก จากนั้นดำเนินการที่คุณต้องการทำซ้ำ ในกรณีของฉัน ฉันเปิดรูปภาพจากโฟลเดอร์หนึ่งและบันทึกไว้สำหรับเว็บในอีกโฟลเดอร์หนึ่ง
เมื่อเสร็จแล้วให้หยุดการบันทึก ตอนนี้คุณสามารถใช้การกระทำนี้ซ้ำกับรูปภาพอื่นๆ ทั้งหมดได้ ซึ่งช่วยประหยัดเวลาได้มาก สำหรับข้อมูลเพิ่มเติมเกี่ยวกับสิ่งที่คุณสามารถทำให้เป็นอัตโนมัติใน Photoshop ได้ โปรดดูบทความนี้
20. แสดงตัวอย่างบนอุปกรณ์
สุดท้ายนี้ นอกจาก Photoshop แล้ว Adobe ยังมีแอปที่ให้คุณดูตัวอย่างงานของคุณบนอุปกรณ์ iOS ได้หลายเครื่อง สิ่งที่ดีที่สุด: คุณสามารถสังเกตการเปลี่ยนแปลงบนอุปกรณ์เมื่อคุณทำการเปลี่ยนแปลงบนคอมพิวเตอร์
ในการดำเนินการดังกล่าว ให้ติดตั้งแอปและใช้ Device Preview เพื่อเชื่อมต่อ Photoshop กับอุปกรณ์ภายนอกผ่าน USB หรือ wifi คุณพบตัวเลือกภายใต้ Window > Device Preview
อะไรคือเทคนิค Photoshop ที่คุณชื่นชอบ?
Photoshop เป็นหนึ่งในเครื่องมือออกแบบเว็บที่ใช้กันมากที่สุด คุณสมบัติอันทรงพลังทำให้เหมาะสำหรับการออกแบบเว็บไซต์และทรัพย์สินคุณภาพสูง
อย่างไรก็ตาม พลังอันยิ่งใหญ่ยังมาพร้อมกับความซับซ้อนอย่างมาก โดยเฉพาะอย่างยิ่งสำหรับผู้เริ่มต้น อาจต้องใช้เวลาพอสมควรในการควบคุมซอฟต์แวร์
เพื่อย่นช่วงการเรียนรู้ ด้านบนเราได้จัดเตรียมเทคนิค Photoshop ที่มีประโยชน์มากมายสำหรับนักออกแบบเว็บไซต์ ทำให้หลายสิ่งหลายอย่างง่ายขึ้นตั้งแต่เวิร์กโฟลว์ทั่วไปไปจนถึงการประมวลผลไฟล์อัตโนมัติ
การรู้จัก Photoshop ทั้งภายในและภายนอกเป็นการลงทุนที่ยอดเยี่ยมในผลกำไรของคุณ เมื่อคุณสามารถทำสิ่งต่าง ๆ ได้เร็วขึ้น คุณสามารถทำงานมากขึ้น จึงสร้างรายได้มากขึ้น และนั่นไม่เคยเป็นสิ่งที่เลวร้าย
อะไรคือเทคนิค Photoshop ที่คุณชื่นชอบ? โปรดแจ้งให้เราทราบในส่วนความคิดเห็นด้านล่างเพื่อให้เราทุกคนสามารถช่วยเหลือซึ่งกันและกัน
ภาพขนาดย่อของบทความโดย Creative Stall / shutterstock.com