Photoshop 101: บทนำสำหรับนักพัฒนาเว็บ

บทนำ

บ่อยครั้งเมื่อทำงานเป็นนักพัฒนาเว็บเราจำเป็นต้องผสานรวมเทมเพลต อาจมาจาก Photoshop หรือซอฟต์แวร์อื่น ๆ ในบทความนี้เราจะมาดูพื้นฐานของ Photoshop สำหรับนักพัฒนาเว็บ

เนื้อหานี้เขียนขึ้นในตอนแรกสำหรับเวิร์กชอปสำหรับ DAMDigital London

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

เปิดตัวในปี 1988 และเติบโตขึ้นเป็นมาตรฐานอุตสาหกรรมสำหรับซอฟต์แวร์กราฟิก

คุณสามารถดาวน์โหลด Photoshop เวอร์ชันทดลองใช้ฟรีได้ที่เว็บไซต์ Adobe

พื้นที่ทำงาน

พื้นที่ทำงานของ Photoshop เป็นแบบแยกส่วนดังนั้นคุณสามารถปรับเปลี่ยนได้ขึ้นอยู่กับงานที่คุณทำ พื้นที่ทำงานเริ่มต้นบางส่วนได้รับการตั้งค่าใน Photoshop แล้ว ในบทความนี้ฉันกำลังใช้Graphic and Webอันนี้ Window/workspace/Graphic and Webมีการเปลี่ยนแปลงไปยังพื้นที่ทำงานนี้ไปลง

มาดูพื้นที่ทำงานของเรากัน:

  • A - แถบเมนู : ที่นี่คุณจะพบตัวเลือก Photoshop ส่วนใหญ่
  • B - แถบตัวเลือก : แถบนี้จะให้ตัวเลือกทั้งหมดสำหรับเครื่องมือที่เลือกในปัจจุบัน
  • C - กล่องเครื่องมือ : แผงนี้มีเครื่องมือทั้งหมดที่มีจาก photoshop เครื่องมือที่เกี่ยวข้องจะถูกจัดกลุ่มเข้าด้วยกันและคุณสามารถคลิกที่เครื่องมือใดเครื่องมือหนึ่งเพื่อดูเครื่องมือทั้งหมด
  • D - แผง : มันเป็นพื้นที่ที่คุณมีการติดตั้งขั้นพื้นฐานของคุณเปิดเช่นLayers, Historyและอื่น ๆ หากต้องการเปิดแผงควบคุมให้เข้าไปที่Window/(Panel that you want to open)

สร้างไฟล์ใหม่

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

คุณจะต้องเปลี่ยนค่า PPI (Pixels Per Inch) ทั้งนี้ขึ้นอยู่กับคำตอบของคำถามนี้

พิกเซลต่อนิ้ว (PPI) คือการวัดที่ใช้เพื่อกำหนดความละเอียดของจอคอมพิวเตอร์ เมตริกนี้ประเมินคุณภาพของภาพ / ภาพที่อุปกรณ์แสดงผลคอมพิวเตอร์หรือเอาท์พุตเฉพาะสามารถแสดงได้ พิกเซลต่อนิ้วเรียกอีกอย่างว่าความหนาแน่นของพิกเซล เทโคพีเดีย

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

สำหรับหน้าจอและเว็บคุณต้องมีสี 72PPI และ RGB จากนั้นคุณต้องระบุขนาดหน้าจอของคุณ ฉันขอแนะนำให้ออกแบบก่อนสำหรับมือถือแท็บเล็ตและเดสก์ท็อป

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

ตอนนี้เราจะดู.psdเทมเพลตที่มีอยู่และทำงานกับมันเพื่อดู Photoshop

คุณสามารถดาวน์โหลดและเปิดเทมเพลต PSD นี้ได้จาก Luis Costa

เลเยอร์

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

Window/Layersคุณสามารถเปิดแผงชั้นใน

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

ถัดจากแต่ละโฟลเดอร์และเลเยอร์คุณจะมีไอคอนรูปดวงตา วิธีนี้ช่วยให้คุณสามารถสลับการเปิดเผยได้

PSD ของคุณอาจมีเลเยอร์และเอกสารจำนวนมาก วิธีหนึ่งในการค้นหาเลเยอร์อย่างรวดเร็วคือการเลือกไฟล์move tool (v). คลิกขวาบนผืนผ้าใบที่คุณต้องการค้นหาเลเยอร์ของคุณ คุณจะได้รับเลเยอร์ทั้งหมดในพื้นที่ที่คุณคลิกขวา เมื่อคลิกที่หนึ่งมันจะเลือกเลเยอร์นี้ในแผงเลเยอร์ของคุณ

กล่องเครื่องมือ

Photoshop มาพร้อมกับเครื่องมือมากมาย ฉันจะแสดงสิ่งที่มีประโยชน์สองสามอย่างที่จะช่วยคุณได้

ขั้นแรกหากคุณเพิ่งติดตั้ง Photoshop CC 2018 คุณจะต้องกู้คืนเครื่องมือทั้งหมด ไปที่Edit > Toolแถบและคลิกที่ปุ่มคืนค่าเริ่มต้น

เราจะเห็นเครื่องมือที่มีประโยชน์ที่สุดที่คุณจะใช้ในการรวมเทมเพลต:

A - เครื่องมือการเลือก

  • ย้าย : อนุญาตให้ผู้ใช้ย้ายเลเยอร์ไปรอบ ๆ ผืนผ้าใบ ดังที่เราเห็นก่อนหน้านี้สามารถใช้เพื่อค้นหาเลเยอร์ได้เช่นกันหากคุณคลิกขวาบนผืนผ้าใบของคุณ
  • Rectangular Marquee : เครื่องมือนี้ใช้เพื่อเลือกพื้นที่ของผืนผ้าใบเพื่อคัดลอกและวางกรอกข้อมูลและอื่น ๆ สามารถใช้วัดได้เช่นกัน Window/Infoเมื่อคุณเลือกที่จะทำคุณสามารถหาขนาดของพื้นที่ที่เลือกใน คุณอาจต้องเปลี่ยนหน่วยเริ่มต้นใน photoshop Edit/preferences/general/Unit & Rulersจากนั้นตั้งค่าหน่วยของคุณเป็นพิกเซล

B - เครื่องมือครอบตัดและชิ้นส่วน

  • ครอบตัด : เครื่องมือนี้สามารถ ... ครอบตัดรูปภาพ? ในการตั้งค่าเครื่องมือ (แถบตัวเลือก) คุณสามารถกำหนดอัตราส่วนภาพที่คุณต้องการเก็บไว้

C - เครื่องมือวัด

  • Eyedropper : eyedropper ช่วยให้คุณได้รับการอ้างอิงสีในการออกแบบของคุณได้อย่างรวดเร็ว เพียงคลิกตำแหน่งที่คุณต้องการสี จากนั้นที่ด้านล่างของกล่องเครื่องมือของคุณสีพื้นหน้าจะเปลี่ยนเป็นสีที่เลือก หากคุณคลิกที่สีพื้นหน้าจะเป็นการเปิดไฟล์color picker window. จากนั้นคุณจะได้รับค่าของสีของคุณ
  • ตัวอย่างสี : เมื่อรวมการออกแบบของคุณคุณอาจต้องเลือกหลายสี Window/Infoเราจะใช้หน้าต่างข้อมูลอีกครั้ง เครื่องมือนี้ช่วยให้เราสามารถสร้างตัวอย่างสีได้ เพียงคลิกบนพื้นที่ของภาพที่คุณต้องการรับสี คุณจะได้รับแต่ละสีในแผงข้อมูล คุณสามารถเปลี่ยนประเภทสีเป็นเว็บได้โดยคลิกที่ไอคอน Eyedropper ใต้ตัวเลข
  • ไม้บรรทัด : ช่วยคุณในการวัดเทมเพลตของคุณ ข้อมูลทั้งหมดจะปรากฏในหน้าต่างข้อมูลของคุณ รักษาShiftเมื่อทำการวัดเพื่อให้ไม้บรรทัดของคุณตั้งตรง คุณจะได้รับมุมด้วย

G - เครื่องมือนำทาง

  • มือ : เครื่องมือนี้ช่วยให้คุณเดินไปรอบ ๆ ผืนผ้าใบ คุณสามารถเข้าถึงเครื่องมือนี้ได้ทุกเมื่อโดยกด Spacebar ค้างไว้แล้วลากด้วยเมาส์
  • ซูม : ช่วยให้คุณสามารถซูมเข้าและออกได้ (คุณสามารถCtrl+ +หรือCtrl+ ได้-ด้วย)

คำแนะนำ

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

คุณสามารถย้ายคำแนะนำที่มีอยู่โดยใช้move tool(v)

คำแนะนำในการสร้างใหม่คุณจะต้องเปิดไม้บรรทัดของคุณ: View/Rulerหรือ+Ctrl Rไม้บรรทัดจะปรากฏในพื้นที่ทำงานของคุณ จากไม้บรรทัดคุณสามารถลากคำแนะนำใหม่ลงในผืนผ้าใบของคุณ

ในการลบเส้นบอกแนวให้ใช้move tool(v) แล้ววางไกด์กลับเข้าไปในไม้บรรทัด

เพื่อซ่อนและแสดงคำแนะนำของคุณทุกท่านก็สามารถใช้Ctrl+ หรือไปที่HView/Extras

วัตถุอัจฉริยะ

วัตถุอัจฉริยะคืออะไร?

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

คุณสามารถจดจำวัตถุอัจฉริยะในเลเยอร์ของคุณได้เมื่อมีไอคอนต่อไปนี้ในภาพขนาดย่อ:

วัตถุอัจฉริยะมีประโยชน์มากหากคุณทำงานกับรูปภาพประเภทเวกเตอร์ (SVG, EPS, AI) แต่ยังมีประโยชน์กับไฟล์แรสเตอร์ที่ซับซ้อนอื่น ๆ

ลองนำเข้าวัตถุอัจฉริยะไปยัง PSD ของเรา ดาวน์โหลดไฟล์ SVG จาก flaticon ในการนำเข้า SVG ของเราในผืนผ้าใบของเราเพียงลากไฟล์ลงในผืนผ้าใบ ตอนนี้เราสามารถแก้ไข SVG ของเราในโปรแกรมวาดภาพประกอบหรือซอฟต์แวร์เวกเตอร์อื่น ๆ ได้โดยดับเบิลคลิกที่ภาพขนาดย่อหรือวัตถุอัจฉริยะของเรา การเปลี่ยนแปลงจะปรากฏใน PSD ของเรา

แม้ว่าวัตถุอัจฉริยะสามารถทำได้มากกว่านั้น หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับสิ่งเหล่านี้โปรดดู 10 สิ่งที่คุณต้องรู้เกี่ยวกับ Smart Objects ใน Photoshop

ส่งออกสินทรัพย์

ก่อนอื่นขอเตือนว่า photoshop เป็นซอฟต์แวร์แรสเตอร์ไม่ใช่ซอฟต์แวร์เวกเตอร์ ซึ่งหมายความว่าเรา "ไม่สามารถ" ส่งออกไฟล์ SVG จาก photoshop ได้ ในการทำเช่นนั้นคุณจะต้องส่งออกไฟล์ประเภทนี้จาก Illustrator หรือ Inkscape เป็นต้น

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

ส่งออกผ้าใบของเรา

ในการส่งออกแคนวาสให้ทำตามขั้นตอนเหล่านี้:

  1. ไปที่ File/Export/Save for Web
  2. เลือกรูปแบบไฟล์
  3. เลือกขนาดภาพ
  4. เลือกคุณภาพ
  5. บันทึก

ส่งออกเฉพาะเนื้อหาจากผืนผ้าใบ

คุณอาจต้องส่งออกเนื้อหาบางส่วนของเทมเพลตของคุณ

มาส่งออกลูกศรซ้ายในภาพหมุนผลิตภัณฑ์:

ใช้เครื่องมือย้ายเราจะพบเลเยอร์ของเรา Arrow Leftคลิกขวาที่ลูกศรและเลือกชั้น ตอนนี้เพียงคลิกขวาที่เลเยอร์นี้ในแผงเลเยอร์ เลือกexport asและเลือกประเภทไฟล์ที่คุณต้องการ

เรายังสามารถส่งออกโฟลเดอร์

การดำเนินการ

การกระทำใน Photoshop คืออะไร?

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

ฟีเจอร์นี้สะดวกมากหากคุณต้องการปรับขนาดรูปภาพสำหรับเว็บ!

มาสร้างแอคชั่นใหม่เพื่อครอบตัดรูปภาพและส่งออกภาพนี้:

  1. ดาวน์โหลดรูปภาพจำนวนมากจาก //unsplash.com/
  2. เปิดหนึ่งในภาพเหล่านั้น
  3. เปิดActionsแผงWindow/Actions,
  4. สร้างการกระทำใหม่โดยคลิกที่ไอคอนสร้างการกระทำใหม่ (อันที่อยู่ทางซ้ายของไอคอนถังขยะ) มาตั้งชื่อการกระทำนี้ว่าExport สำหรับเว็บ - ชื่อไคลเอ็นต์
  5. ตอนนี้เรากำลังบันทึกการกระทำของเรา ปุ่มบันทึกจะเป็นสีแดงและคุณสามารถหยุดบันทึกได้โดยคลิกที่ไอคอนหยุด (ไอคอนสี่เหลี่ยมทางด้านซ้าย) /
  6. เลือกไอคอนครอบตัดและตั้งค่าอัตราส่วนเป็น 1x1 และครอบตัดรูปภาพ /
  7. ตอนนี้เราต้องการส่งออกรูปภาพของเราFile/Export/Save for WebเลือกJPGคุณภาพ 50% และความกว้าง 500px
  8. คลิกบันทึกและเลือกโฟลเดอร์ปลายทางของคุณ
  9. ปิดภาพของคุณโดยไม่บันทึก
  10. หากต้องการหยุดบันทึกให้คลิกที่ไอคอนหยุด (ไอคอนสี่เหลี่ยมทางด้านซ้าย)

ตอนนี้เรามีการกระทำของเราดังนั้นเราสามารถเปิดภาพและเพียงแค่ "เล่น" การกระทำของเราโดยคลิกที่ปุ่มเล่น

หากเราต้องการใช้การกระทำของเรากับภาพชุดหนึ่งให้ทำตามขั้นตอนเหล่านี้

  1. ไปที่ File/Automate/Batch
  2. เลือกSourceโฟลเดอร์
  3. เลือกการกระทำของเรา
  4. คลิกที่ Ok

และ voila! ภาพทั้งหมดของคุณอยู่ในโฟลเดอร์ส่งออก

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

  • @vince_umo
  • vincent-humeau.com