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

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

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

คุณพร้อมที่จะเรียนรู้เพิ่มเติมเกี่ยวกับ Photoshop แล้วหรือยัง? นี่คือสิ่งที่เราจะเห็นในต่อไปนี้

1 - ปรับปรุงพื้นที่ทำงานของคุณ

เริ่มต้นด้วยพื้นฐาน สิ่งแรกที่ต้องทำเพื่อปรับปรุงเวิร์กโฟลว์ของคุณคือการตั้งค่า Photoshop ในแบบที่เข้ากันได้กับวิธีการใช้งานของคุณ ท้ายที่สุดงานจะง่ายขึ้นด้วยเครื่องมือที่สะอาดกว่า

ด้วยเหตุนี้ จุดแรกของเราคือ “Window > Workspace > Graphic and Web > Essentials” การเลือกตัวเลือกนี้จะเปลี่ยน เครื่องมือ มีให้สำหรับสิ่งที่คุณมักจะใช้สำหรับการออกแบบเว็บ

เลือกพื้นที่ทำงานของ wordpressจากนั้นไปที่ "แก้ไข> ค่ากำหนด" จุดแวะที่สำคัญที่สุดอย่างหนึ่งคือหน่วยและกฎ ไม่ว่าคุณจะเลือกการวัดใดที่นี่ (พิกเซลส่วนใหญ่) จะเป็นค่าเริ่มต้นสำหรับเอกสารในอนาคตทั้งหมด

(คำแนะนำด่วน: หากต้องการเปลี่ยนกฎสำหรับเอกสารเดี่ยวเพียงคลิกขวาที่เอกสารแล้วเลือกหน่วยการวัดที่ต้องการ)

จากนั้นไปที่ "ค่ากำหนด> ประสิทธิภาพ> ประวัติและแคช" แล้วคลิกที่ "การออกแบบเว็บ / UI"

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

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

2 - เรียนรู้แป้นพิมพ์ลัด

สำหรับโปรแกรมใด ๆ ที่คุณใช้เป็นประจำการเรียนรู้แป้นพิมพ์ลัดเป็นสิ่งที่ควรทำ

ตัวอย่างเช่น ฉันใช้ Ctrl + Alt + 2/3 เพื่อสร้างส่วนหัว h2 และ h3 เมื่อเขียนโพสต์นี้ เร็วกว่าการใช้แถบเครื่องมือมากเครื่องมือ ของบรรณาธิการเพราะฉันไม่ต้องออกจากแป้นพิมพ์

เช่นเดียวกับ Photoshop การรู้วิธีดำเนินการด้วยปุ่มเดียวจะเร็วกว่าการคลิกที่เมนูอย่างไม่ จำกัด

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

3 - จัดกลุ่มเลเยอร์และตั้งชื่อ

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

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

ก่อนอื่นโดยดับเบิลคลิกที่เลเยอร์ใดก็ได้คุณสามารถเปลี่ยนชื่อเป็นอะไรก็ได้ที่คุณต้องการ

เปลี่ยนชื่อเลเยอร์บน wordpressด้วยวิธีนี้คุณจะเข้าใจได้ง่ายว่าเลเยอร์มีภาพพื้นหลังเมนูหรือแถบด้านข้างหรือไม่

หรือคุณสามารถเลือกหลายเลเยอร์พร้อมกันได้โดยกดปุ่ม Ctrl ค้างไว้เพื่อเลือกแต่ละเลเยอร์หรือ Shift เพื่อทำเครื่องหมายช่วงของเลเยอร์ใกล้เคียง Ctrl + G เปลี่ยนเป็นกลุ่ม

4 - ทำการค้นหาเลเยอร์

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

สำหรับกรณีเหล่านี้คุณยังมีตัวเลือกในการกรองเลเยอร์ของคุณ ในการทำเช่นนี้เพียงใช้เมนูที่ด้านบนของเมนูเลเยอร์เพื่อกรองตามประเภทชื่อเอฟเฟกต์สีและอื่น ๆ

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

ค้นหาเลเยอร์มิฉะนั้นให้เลือกเลเยอร์โดยตรงโดยใช้เครื่องมือ Move กด "Ctrl" ค้างไว้แล้วคลิกที่เลเยอร์หรือวัตถุ

5 - สร้างตาราง

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

ในการดำเนินการนี้ให้ใช้ "View> New marker" อีกวิธีหนึ่งคือสร้างเส้นบอกแนวแนวนอนและแนวตั้งโดยคลิกที่ไม้บรรทัดค้างไว้แล้วลากเข้าไปในเอกสาร ใช้ Ctrl เพื่อย้ายบรรทัดที่มีอยู่

6 - นำเข้าตัวอย่างสี

คุณสามารถโหลดแถบสีลงใน Photoshop ได้โดยตรงจากไฟล์ HTML, CSS หรือ SVG วิธีนี้ทำให้คุณมีจุดเริ่มต้นที่ดีสำหรับชุดสีของคุณเมื่อใช้ไฟล์ที่มีอยู่ เช่น โลโก้.

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

7 - บันทึกรูปร่างที่กำหนดเอง

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

ในการดำเนินการนี้ให้คลิกขวาที่รูปร่างที่เป็นปัญหาด้วยเครื่องมือการเลือกเส้นทาง (ลูกศรสีดำ) จากนั้นเลือก กำหนดรูปร่างที่กำหนดเอง ". เมื่อคุณทำเสร็จแล้วคุณสามารถเข้าถึงรูปร่างนั้นผ่านตัวเลือกบนแถบด้านบนของเครื่องมือ Custom Shape เพียงคลิกเมนูแบบเลื่อนลงที่มีข้อความว่า " รูปร่าง และเลือกแบบฟอร์มที่คุณบันทึกไว้

กำหนดรูปร่างที่กำหนดเอง

8 - สลับระหว่างสีพื้นหลังและสีพื้นหน้า

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

9 - เปลี่ยนความทึบผ่านแป้นพิมพ์

แป้นพิมพ์ลัดอื่น: สำหรับเครื่องมือใด ๆ ที่สามารถเปลี่ยนความทึบคุณสามารถทำได้ผ่านแป้นพิมพ์ ตัวเลข 1 ถึง 0 จะกำหนดความทึบของทุกอย่างระหว่าง 10% ถึง 100% เช่นเดียวกันกับความทึบของเลเยอร์

10 - วาดเส้นตรง

ในการวาดเส้นตรงด้วยเครื่องมือใด ๆ เพียงกดปุ่ม Shift ค้างไว้ จากนั้นคุณสามารถลากเส้น (แนวนอนและแนวตั้ง) ซึ่งจะถูกเชื่อมโยงโดยอัตโนมัติเป็นเล็บ มิฉะนั้นคลิกที่จุดสองจุดที่แตกต่างกันเพื่อสร้างเส้นตรงระหว่างจุดเหล่านั้น

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