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

วิธีทำพื้นหลังโปร่งใสใน Photoshop

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

1. เปิด โฟโต้ชอป- เปิดด้วยรูปภาพที่ต้องวางบนพื้นหลังโปร่งใส ( ไฟล์ -> เปิด...).

2. เลือกรูปภาพทั้งหมด/ภาพถ่าย ( Ctrl+O).

3. คัดลอกรูปภาพที่เลือก ( Ctrl+C).

4. เปิดไฟล์ใหม่ใน Photoshop ( ไฟล์->ใหม่...หรือ Ctrl+N- ในหน้าต่างที่ปรากฏขึ้น ในรายการดรอปดาวน์ต่ำสุด ให้เลือกค่า โปร่งใส- “ความโปร่งใส”:

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

5. วางภาพที่คัดลอกไว้ก่อนหน้านี้ลงในไฟล์ใหม่ที่มีพื้นหลังโปร่งใส สำหรับสิ่งนี้เราใช้แบบดั้งเดิม Ctrl+V- เป็นผลให้ภาพที่คัดลอกไว้ก่อนหน้านี้จะถูกวางลงในเลเยอร์ปัจจุบันที่ว่างเปล่าโดยสมบูรณ์และโปร่งใส

6. เลือกพื้นที่ที่คุณต้องการลบโดยใช้เครื่องมือการเลือกปกติ ( ม)

หรือใช้เครื่องมือ “เวทย์มนตร์” ( ว):

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

วิธีทำข้อความและลายน้ำโปร่งแสง

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

ข้อความ โลโก้ หรือเครื่องหมายโปร่งแสงอื่นๆ บนภาพต้นฉบับมักใช้เพื่อปกป้องลิขสิทธิ์ โดยปกติจะใช้โดยใช้ Photoshop หรือปลั๊กอินพิเศษ เป้าหมายของพวกเขาคือการระบุแหล่งที่มาดั้งเดิมของภาพ ระบุผู้แต่ง และทำให้ชีวิตของผู้ที่ต้องการขโมยภาพเป็นเรื่องยาก

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

1. เปิด Photoshop และเปิดรูปภาพของเราในนั้น ( ไฟล์ -> เปิด...).

2. เลือกเครื่องมือข้อความ ( ต) และเขียนคำจารึกขนาด สี และสไตล์ที่ต้องการไว้ด้านบนของภาพถ่าย:

ในกรณีนี้ ข้อความจะถูกวางในเลเยอร์แยกต่างหากโดยอัตโนมัติและจะมองเห็นได้ 100%

3. ตั้งค่าการมองเห็นข้อความสีขาวในรูปภาพเป็น 40% เมื่อต้องการทำเช่นนี้ในหน้าต่างเลเยอร์ ( เลเยอร์) เลื่อนแถบเลื่อนคุณสมบัติ ความทึบคิดเป็นมูลค่า 40%:

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

ฉันควรบันทึกรูปภาพแบบโปร่งใสในรูปแบบใด

โปรดทราบว่าคุณไม่สามารถบันทึกรูปภาพที่ประมวลผลใน Photoshop โดยมีพื้นที่โปร่งใสในรูปแบบ JPEG - รูปแบบนี้ไม่รองรับความโปร่งใส พื้นที่โปร่งใสเมื่อบันทึกเป็น JPG จะถูกเติมด้วยสีโดยอัตโนมัติ (สีขาวตามค่าเริ่มต้น) ในบรรดารูปแบบที่ใช้บนเว็บ เบราว์เซอร์จะแสดงเฉพาะ GIF และ PNG อย่างถูกต้องและรองรับความโปร่งใส เบราว์เซอร์จะไม่แสดงรูปแบบ Photoshop PSD ดั้งเดิม

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

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

เหตุใดจึงจำเป็น?

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

มีหลายวิธีในการใช้ความโปร่งใสใน Photoshop บางส่วนก็เรียบง่ายไม่เหมาะสมและบางส่วนก็ต้องใช้ความพยายามบ้าง แต่ผลลัพธ์จะเกินความคาดหมายทั้งหมด ใครๆ ก็อยากรู้สึกเหมือนเป็นเทพ Photoshop และหากไม่มีการศึกษา "เนื้อหา" สิ่งนี้ก็เป็นไปไม่ได้ ดังนั้นจงเรียนรู้พื้นฐานเถิดสุภาพบุรุษ และในบทเรียนแรก เราจะมาเรียนรู้วิธีการทำงานอย่างโปร่งใสกัน

ทำให้ภาพทั้งภาพโปร่งใส

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

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

บันทึกภาพที่แก้ไขแล้ว

ความจริงก็คือค่าเริ่มต้นสำหรับรูปภาพไม่สามารถทำงานกับรูปภาพโปร่งใสได้ ดังนั้นคุณต้องบันทึกภาพที่ได้ ไม่มีทางหากไม่มีสิ่งนี้ ไปที่ "ไฟล์", "บันทึกเป็น..." และในบรรทัดสำหรับเลือกรูปแบบไฟล์เอาต์พุต ให้เลือก PNG คลิก "บันทึก" นั่นคือทั้งหมดที่ แต่นี่เป็นเพียงส่วนเล็กๆ เนื่องจากเราดูวิธีที่ง่ายที่สุดในการทำให้โปร่งใสใน Photoshop โดยใช้ภาพทั้งหมดเป็นตัวอย่าง แต่ถ้าเราจำเป็นต้องสร้างลายน้ำพร้อมคำจารึกล่ะ? เพิ่มเติมเกี่ยวกับเรื่องนี้ด้านล่าง

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

การสร้างบนภาพ

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

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

การทำพื้นหลังของภาพให้โปร่งใส

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

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

บทสรุป

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

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

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

แอตทริบิวต์สีพื้นหลัง

แม้แต่ IE8 ก็รองรับวิธีนี้ มีการใช้รูปภาพหลายรูปเป็นพื้นหลังสำหรับการจัดวางที่ยืดหยุ่น สิ่งสำคัญที่สุดคือเมื่อใช้รูปภาพใดๆ อย่าลืมตั้งค่าสีพื้นหลังใน CSS ด้วย เนื่องจากผู้ใช้อาจไม่โหลดรูปภาพเลย

คุณลักษณะตำแหน่งพื้นหลัง

หากคุณใช้รูปภาพเพื่อกำหนดพื้นหลังของบล็อก CSS จะอนุญาตให้คุณวางตำแหน่งรูปภาพไว้ที่ใดก็ได้บนหน้าจอ ตามค่าเริ่มต้น รูปภาพจะอยู่ที่มุมซ้ายบน แอตทริบิวต์ยอมรับการระบุด้วยวาจา (บน ล่าง ซ้าย ขวา) หรือการระบุตัวเลข (เปอร์เซ็นต์ พิกเซล และหน่วยการวัดอื่นๆ) ในกรณีนี้ คุณต้องระบุค่าสองค่า: แนวนอนและแนวตั้ง:

body (ตำแหน่งพื้นหลัง: กึ่งกลางขวา;) - ในตัวอย่างนี้ พื้นหลังจะอยู่ทางด้านขวาของหน้า และระยะห่างจากด้านล่างและด้านบนถึงรูปภาพจะเท่ากัน

แอตทริบิวต์ขนาดพื้นหลัง

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

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

แอตทริบิวต์สิ่งที่แนบมากับพื้นหลัง

คุณลักษณะนี้ระบุลักษณะการทำงานของภาพพื้นหลังเมื่อเลื่อน ดังนั้นจึงอาจมี 3 ค่า (ไม่คำนึงถึงการสืบทอดซึ่งเป็นเรื่องปกติสำหรับคุณลักษณะทั้งหมดที่นำเสนอในบทความนี้):

• ที่ตายตัว— ทำให้ภาพบนพื้นหลังไม่เคลื่อนไหว
• เลื่อน— พื้นหลังจะเลื่อนไปพร้อมกับองค์ประกอบอื่นๆ
• ท้องถิ่น— ภาพพื้นหลังจะเลื่อนหากเนื้อหามีการเลื่อน พื้นหลังที่ขยายเกินเนื้อหาได้รับการแก้ไขแล้ว

ตัวอย่างการใช้งาน:

เนื้อความ (แก้ไขสิ่งที่แนบมากับพื้นหลังแล้ว)

ขณะนี้ Firefox ไม่รองรับคุณสมบัติสุดท้าย (ท้องถิ่น)

คุณลักษณะต้นกำเนิดพื้นหลัง

คุณลักษณะนี้มีหน้าที่รับผิดชอบในการวางตำแหน่งขององค์ประกอบ เบราว์เซอร์ยุคแรกต้องมีคำนำหน้า คุณสมบัตินั้นมีพารามิเตอร์สามตัว:

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

หากระบุหลายค่า เบราว์เซอร์อาจตอบสนองแตกต่างกัน: Firefox และ Opera ยอมรับเฉพาะตัวเลือกแรกเท่านั้น

แอตทริบิวต์การทำซ้ำพื้นหลัง

ตามกฎแล้ว หากรูปภาพกำหนดพื้นหลัง ก็ควรทำซ้ำในแนวนอนหรือแนวตั้ง นี่คือสิ่งที่แอตทริบิวต์การทำซ้ำพื้นหลังใช้สำหรับ ดังนั้น พื้นหลังของบล็อกที่ CSS มีคุณสมบัติดังกล่าวสามารถมีพารามิเตอร์ตัวใดตัวหนึ่งได้:

• ไม่ทำซ้ำ— รูปภาพปรากฏบนหน้าในเวอร์ชันเดียว
• ทำซ้ำ— พื้นหลังถูกทำซ้ำตามแกน x และ y
• ทำซ้ำ-x- แนวนอนเท่านั้น
• ทำซ้ำ-y- แนวตั้งเท่านั้น
• ช่องว่าง— พื้นหลังซ้ำกัน แต่ถ้าไม่สามารถเติมช่องว่างได้ ช่องว่างจะปรากฏขึ้นระหว่างรูปภาพ
• กลม— รูปภาพจะถูกปรับขนาดหากไม่สามารถเติมเต็มพื้นที่ทั้งหมดด้วยรูปภาพทั้งหมดได้

ตัวอย่างการใช้แอตทริบิวต์:

เนื้อความ (พื้นหลังซ้ำ: ไม่ทำซ้ำซ้ำ)- คล้ายกัน พื้นหลังซ้ำ: ซ้ำ-y

ใน CSS3 คุณสามารถตั้งค่าสำหรับรูปภาพหลายรูปได้หากคุณแสดงรายการพารามิเตอร์โดยคั่นด้วยเครื่องหมายจุลภาค

แอตทริบิวต์คลิปพื้นหลัง

คุณลักษณะนี้กำหนดลักษณะการทำงานของพื้นหลังใต้เส้นขอบ (เช่น ในกรณีของเส้นขอบประ):

• ช่องว่างภายใน— พื้นหลังจะแสดงภายในบล็อกอย่างเคร่งครัด
• เส้นขอบกล่อง- ภาพพอดีกับกรอบ;
• เนื้อหากล่อง— รูปภาพในพื้นหลังจะปรากฏเฉพาะภายในเนื้อหาเท่านั้น

ตัวอย่างการใช้งาน:

ร่างกาย (คลิปพื้นหลัง: เนื้อหากล่อง;)

Chrom และ Safari จำเป็นต้องมีคำนำหน้า -webkit-

ความทึบและแอตทริบิวต์ตัวกรอง

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

.block (ภาพพื้นหลัง: url(img.png); ความทึบ: .3;)

หากต้องการตั้งค่าความโปร่งใสของพื้นหลัง CSS ซึ่งจะทำงานได้แม้กับ IE ที่ต่ำกว่าเวอร์ชัน 9 ให้ใช้แอตทริบิวต์ตัวกรอง:

.block (ภาพพื้นหลัง: url(img.png); ตัวกรอง: alpha(opacity=30);)

ในกรณีนี้ ค่าความทึบจะถูกตั้งค่าในช่วงตั้งแต่ 0 ถึง 100 โปรดทราบว่าแอตทริบิวต์ความทึบนั้นแตกต่างจากการตั้งค่าความโปร่งใสโดยใช้ RGBA ตามพันธุกรรม: เมื่อใช้ความทึบ ไม่เพียงแต่พื้นหลังจะโปร่งใสเท่านั้น แต่ยังรวมถึงองค์ประกอบทั้งหมดภายในบล็อกด้วย .

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

ตามค่าเริ่มต้น เลเยอร์ใหม่ทั้งหมดใน Photoshop จะถูกสร้างขึ้นด้วยความทึบ 100% แต่ระดับความโปร่งใสของเลเยอร์สามารถเปลี่ยนแปลงได้โดยใช้การตั้งค่า ความทึบและ เติมตั้งอยู่ที่ด้านบนของจานสีเลเยอร์

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

ความโปร่งใสของเลเยอร์สามารถเปรียบเทียบได้กับกระดาษลอกลายซึ่งใช้กับภาพวาดเพื่อคัดลอก

เติม(เติม) คือการตั้งค่าที่ปรับขนาดได้ 100% ซึ่งช่วยให้คุณเปลี่ยนการมองเห็นของเลเยอร์ได้โดยไม่ส่งผลกระทบต่อการซ้อนทับ

ความโปร่งใสใน Photoshop เป็นอย่างไร

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

Photoshop เปิดตัวหลักการแห่งความโปร่งใสสู่โลกของคอมพิวเตอร์กราฟิก - พื้นหลังหมากรุก.

บัดนี้อนุสัญญานี้ได้กลายเป็นมาตรฐานไปแล้ว โปรแกรมและบริการเว็บจำนวนมากใช้พื้นหลังตารางหมากรุกเมื่อพูดถึงเรื่องความโปร่งใส ตัวอย่างเช่น Yandex.Images หรือ Google Images จะแสดงรูปภาพที่มีองค์ประกอบโปร่งใสบนพื้นหลังลายตารางหมากรุก

3 วิธีในการทำให้เลเยอร์รูปภาพโปร่งใส

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

บันทึก

เลเยอร์พื้นหลัง (ที่มีไอคอนแม่กุญแจ) ต้องไม่โปร่งใส สำหรับเขาแล้ว การตั้งค่าเหล่านี้ไม่ได้ใช้งานอยู่

อีกหนึ่งบันทึก

ภาพขนาดย่อของเลเยอร์จะไม่เปลี่ยนแปลง ไม่ว่าคุณจะตั้งค่าความทึบไว้เท่าใด

วิธีที่ 1 การป้อนตัวเลข

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

วิธีที่ 2 การควบคุมตัวเลื่อน

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

การแสดงตัวเลขจะแสดงค่าปัจจุบัน และภาพจะเปลี่ยนไปตามการเคลื่อนไหวของมือคุณ

วิธีที่ 3 การใช้แป้นพิมพ์

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

ตอนนี้กดตัวเลขบนแป้นพิมพ์ของคุณ:

• หมายเลข 1 จะเปลี่ยนความทึบเป็น 10%, 2 ถึง 20%, 5 ถึง 50% และอื่นๆ
• หมายเลข 0 หมายถึง 100%;
• กด 55 แล้วคุณจะได้รับ 55%, 67 คือ 67% และต่อๆ ไป

เพื่อใช้เทคนิคเดิมในการเปลี่ยนแปลง เติมให้กดปุ่ม Shift ค้างไว้พร้อมกับตัวเลข

วิธีทำให้ส่วนที่แยกต่างหากของเลเยอร์โปร่งใส

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

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

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

หลังจากที่พื้นที่ที่เลือกปรากฏขึ้น คุณสามารถทำให้ส่วนนี้โปร่งใสได้

วิธีที่ 1 ตัดพื้นที่ที่ต้องการของภาพออกบนเลเยอร์ใหม่

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

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

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

วิธีที่ 2 การใช้ยางลบ

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

เลือก ในแถบตัวเลือกให้ตั้งค่า ความทึบแตกต่างจาก 100% จากนั้นลบพื้นที่ของภาพที่อยู่ในพื้นที่ที่เลือก เครื่องมือนี้จะมีผลกับพิกเซลที่คุณเลือกเท่านั้น

เปลี่ยนค่า ความทึบหากคุณต้องการบรรลุผลที่ไม่สม่ำเสมอ

วิธีบันทึกภาพด้วยความโปร่งใส

มีมากมาย แต่มีเพียงสองรายการเท่านั้นที่รองรับความโปร่งใส - PNG และ GIF

GIF มีข้อจำกัด - พิกเซลต้องมีความโปร่งใสหรือไม่ ไม่มีตัวเลือกที่สาม กล่าวคือ ค่าความโปร่งใส เช่น 59% จะไม่รองรับอีกต่อไป รูปแบบนี้มีข้อจำกัดเกี่ยวกับจำนวนสีที่ใช้ - มีได้ไม่เกิน 256 สี

ดังนั้นจึงต้องบันทึกภาพไว้ ในรูปแบบ PNG- มีเพียงแต่ไม่มีข้อบกพร่องทั้งหมดและสามารถแสดงพิกเซลโปร่งแสงได้

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

หากคุณสังเกตเห็นข้อผิดพลาดในข้อความ ให้เลือกแล้วกด Ctrl + Enter ขอบคุณ!

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

วิธีที่ 1

ฉันคิดว่าทุกคนรู้วิธีนี้ เพื่อนำไปใช้ เราใช้รูปภาพ PNG โปร่งแสง เช่น 1 พิกเซลคูณ 1 พิกเซล แล้วคูณกับพื้นหลังของบล็อก สามารถสร้างภาพโปร่งแสงได้ในโปรแกรมแก้ไขกราฟิกสมัยใหม่ ทำไมต้องเป็น png และไม่ใช่ jpg หรือ gif? JPG โดยธรรมชาติแล้วไม่สนับสนุนความโปร่งใสเลย และเมื่อบันทึกในรูปแบบนี้ จะทำให้ส่วนที่โปร่งใสทั้งหมดเป็นสีขาว Gif - รองรับความโปร่งใส แต่ไม่รองรับความโปร่งแสง แต่ PNG มีคุณสมบัติทั้งหมดที่เราต้องการ

ตัวอย่างพื้นหลังบล็อกโปร่งแสง:

วิธีที่ 2

วิธีที่สองขึ้นอยู่กับการใช้คุณสมบัติ opacity css ซึ่งไม่รองรับข้ามเบราว์เซอร์ แต่ปัญหาได้รับการแก้ไขโดยใช้คุณสมบัติอื่นที่คล้ายคลึงกันที่ Dinosaur รองรับโดยตรง ตัวอย่างเช่น สำหรับ ie6 คุณจะต้องใช้คุณสมบัติ CSS ที่ใช้ตัวกรองอัลฟ่าและมีลักษณะดังนี้ ตัวกรอง: อัลฟ่า (ความทึบ = 80);จำนวน 80 ในกรณีนี้คือเปอร์เซ็นต์ สำหรับ Mozilla Firefox เวอร์ชันเก่า คุณสามารถใช้คุณสมบัตินี้ได้ -ความทึบแสง: 0.8;ที่นี่เช่นเดียวกับในทรัพย์สิน ความทึบบล็อกทึบมีค่าสัมประสิทธิ์เป็น 1 และเพื่อความโปร่งใส เราจึงกำหนดค่าทศนิยม (เช่น 0.8 จะหมายถึง 80%)

ตัวอย่างพื้นหลังโปร่งแสงของบล็อก 2:

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

วิธีที่ 3

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

ตัวอย่างพื้นหลังโปร่งแสงของบล็อก 3:

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