JPG ที่มีพื้นหลังโปร่งใส วิธีทำพื้นหลังโปร่งใสให้กับรูปภาพ? ตัวอย่างที่ดีของการใช้ PNG แบบเรียบง่าย

นอกจากนี้ เนื่องจากเป็นรูปแบบฟรี PNG จึงมีข้อดีในทางปฏิบัติมากกว่า GIF สำหรับนักออกแบบเว็บไซต์:

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

เป็นที่น่าสังเกตว่า PNG ไม่อนุญาตให้มีภาพเคลื่อนไหวเหมือน GIF แต่มีมาตรฐานกราฟิกเครือข่ายหลายภาพ (MNG) ที่อนุญาต แต่เว็บเบราว์เซอร์และโปรแกรมแก้ไขกราฟิกไม่รองรับอย่างกว้างขวางนัก

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

เนื่องจาก Internet Explorer 6 และรุ่นก่อนหน้าไม่รองรับความสามารถของ PNG อย่างเต็มรูปแบบ (รวมถึงความโปร่งใสของช่องอัลฟ่า) ผู้คนจึงถูกปล่อยให้เชื่อ (แม้ว่าจะไม่เป็นความจริงก็ตาม) ว่า Internet Explorer ไม่รองรับ PNG เลย หรืออย่างน้อยก็ไม่รองรับ สนับสนุนความโปร่งใส ในความเป็นจริง Internet Explorer 5 และ 6 รองรับข้อกำหนด PNG เพียงพอที่จะทำให้ฟังก์ชันเทียบเท่า (หรือดีกว่า) กับรูปภาพ GIF ที่ไม่ใช่ภาพเคลื่อนไหว เบราว์เซอร์อื่นๆ ทั้งหมดที่กล่าวถึง รวมถึง Firefox, Netscape 6 ขึ้นไป, Mozilla, Opera 6 ขึ้นไป, Safari และ Camino รองรับความโปร่งใสของ PNG อย่างสมบูรณ์

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

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

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

JPEG เป็นรูปแบบเว็บอีกรูปแบบหนึ่งที่แพร่หลาย และในกรณีส่วนใหญ่ เช่น ภาพถ่าย (และสิ่งที่คล้ายกัน) รูปแบบนี้จะดีกว่า PNG หรือ GIF อีกด้วย PNG ไม่ได้มีจุดมุ่งหมายเพื่อแข่งขันกับ JPEG การบีบอัด JPEG จะสร้างไฟล์ที่มีขนาดเล็กกว่า PNG อย่างมากเมื่อทำงานกับภาพถ่าย ในทางกลับกัน PNG จะสร้างไฟล์ที่มีขนาดเล็กลงเมื่อมีข้อความ เส้นศิลปะ โลโก้ สี "เรียบๆ" ฯลฯ อยู่ภายในภาพ

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

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

รูปแบบการไล่ระดับสีพื้นหลังโดยทั่วไปนั้นใช้สำหรับปุ่ม บล็อก หรือที่อื่นๆ อาจจะดูเหมือนรูปที่ 5-1 ตามเข็มนาฬิกาจากมุมซ้ายบน เราจะเห็นภาพต้นฉบับ (ไม่บีบอัด), เวอร์ชัน GIF, เวอร์ชัน PNG และ JPEG คุณจะเห็นว่า PNG ที่ได้นั้นมีขนาดเล็กที่สุด (515 ไบต์) ซึ่งมีขนาดเล็กกว่าภาพ GIF ถึงสี่เท่า JPEG มีขนาดใหญ่กว่า PNG เล็กน้อยที่ 637 ไบต์ และยังมีคุณภาพต่ำกว่าเนื่องจากการบีบอัดที่สูญเสียไป (แม้ว่าความสามารถของสายตามนุษย์ในการตรวจจับความแตกต่างของคุณภาพในตัวอย่างง่ายๆ นี้ยังคงเป็นที่น่าสงสัย)

รูปที่ 5-1
แผง Photoshop - บันทึกสำหรับเว็บ
แสดงความแตกต่างของขนาดไฟล์สำหรับรูปภาพเดียวกันในรูปแบบที่แตกต่างกัน

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

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

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

ฉันรู้ว่าคุณกำลังคิดอะไร: ความโปร่งใส PNG ทั้งหมดนี้ดูดี แต่ใช้งานได้จริงไหม

ข่าวดีก็คือเบราว์เซอร์รุ่นใหม่ทั้งหมดรองรับรูปภาพ PNG อย่างสมบูรณ์ รวมถึงความโปร่งใสของช่องอัลฟ่า ซึ่งคุณประโยชน์ที่ฉันแสดงให้เห็นในตัวอย่าง Safari (ทุกเวอร์ชัน), Firefox (ทุกเวอร์ชัน), Opera (เวอร์ชัน 6 ขึ้นไป), Netscape (เวอร์ชัน 6 ขึ้นไป) และ Mozilla (ทุกเวอร์ชัน) จะทำสิ่งที่ฉันขอ แต่มีข่าวร้ายอย่างหนึ่ง - เบราว์เซอร์เดียวที่ฉันยังไม่ได้กล่าวถึงและผู้ใช้ส่วนใหญ่ของคุณมี: Internet Explorer

Internet Explorer 6 และต่ำกว่าไม่รองรับความโปร่งใสของช่องอัลฟาที่สร้างในรูปแบบ PNG นับตั้งแต่ตัวเลือกเบราว์เซอร์ (หรือไม่ใช่ตัวเลือก) ถูกสร้างขึ้นสำหรับนักเล่นเว็บส่วนใหญ่ ช่องโหว่นี้ทำให้นักออกแบบเว็บไซต์อยู่ห่างจาก PNG แต่ด้วยการเปิดตัว Internet Explorer 7 เราได้รับการสนับสนุนอย่างเต็มที่สำหรับ PNG alpha ความโปร่งใสในเบราว์เซอร์หลักๆ ทั้งหมด อะไรต่อไป มีวิธีใดบ้างในการทำงานกับความโปร่งใสอัลฟ่า PNG ใน Internet Explorer 6 และต่ำกว่า ดังนั้นหากคุณต้องการใช้เอฟเฟกต์นี้ ไม่มีอะไรจะหยุดคุณได้ Internet Explorer 6 และเวอร์ชันก่อนหน้านั้นต้องการการดูแลเอาใจใส่มากกว่าที่จำเป็น แต่ก็เป็นไปได้อย่างแน่นอน

Internet Explorer มาพร้อมกับตัวกรองเนทิฟต่างๆ ใช้ใน CSS แต่ไม่ได้เป็นส่วนหนึ่งของข้อกำหนด CSS อย่างเป็นทางการ กล่าวอีกนัยหนึ่ง พวกเขาไม่ได้มาตรฐานบนเว็บ น่าเสียดายที่ Internet Explorer 6 และต่ำกว่าไม่รองรับรูปแบบ PNG อย่างสมบูรณ์ (ซึ่ง W3C แนะนำ) แต่ Microsoft มีตัวกรองที่กำจัดข้อบกพร่องนี้: AlphaImageLoader

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

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

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

กลับไปที่ตัวอย่างก่อนหน้านี้แล้วลองโหลดอย่างถูกต้องใน Internet Explorer จำช่อง 49 สถานีโทรทัศน์ในโทพีกาได้ไหม? ฉันแน่ใจว่าใช่ รูปที่ 5-21 แสดงลักษณะของไซต์ใน Internet Explorer 6

รูปที่ 5-21
พาดหัวข่าว 49abcnews.com แสดงผลใน Internet Explorer 6 สำหรับ Windows โดยมีความโปร่งใส PNG เหมือนเดิม

HTML สำหรับส่วนบนสุดของสภาพอากาศดูเหมือนว่าคุณอาจเดาได้แล้ว:

ปัจจุบันอยู่ที่โทพีกา รัฐแคนซัส:
82° มืดครึ้ม
รับพยากรณ์และอื่นๆ...

คุณเห็นภาพและแน่นอนว่าเป็น PNG แม้แต่ Internet Explorer ก็โหลดได้อย่างไม่มีที่ติ ส่วนผสมลับของสิ่งนี้คือ JavaScript จริงๆ แล้ว ฉันใช้สคริปต์ DOM เล็กน้อยเพื่อลบองค์ประกอบ img ทันทีและแทนที่ด้วยองค์ประกอบ div ที่คุณเดาได้ ใช้ AlphaImageLoader JavaScript ได้รับการอธิบายไว้ในความคิดเห็นแบบมีเงื่อนไข ซึ่งเป็นสำนวนที่มีประโยชน์แต่ไม่ได้มาตรฐานอย่างสมบูรณ์จาก Microsoft ที่มีอยู่ใน Internet Explorer ความคิดเห็นแบบมีเงื่อนไขอนุญาตให้คุณใช้โค้ดสำหรับ Internet Explorer เวอร์ชันที่รู้จักเท่านั้น เบราว์เซอร์อื่นๆ ทั้งหมดจะละเว้นโค้ดนี้ ดังนั้นจึงไม่มีผลกระทบใดๆ ทั้งสิ้น ในองค์ประกอบของเว็บไซต์ www.49abcnews.com คุณจะพบกับ:

ต้องขอบคุณบรรทัดแรก หากเป็น lte IE6 สคริปต์นี้จะรวมอยู่ในเอกสารที่แสดงผลก็ต่อเมื่อแสดงใน Internet Explorer เวอร์ชันที่น้อยกว่าหรือเท่ากับ (ระบุด้วย lte) 6. เบราว์เซอร์อื่น ๆ ทั้งหมด รวมถึง Internet Explorer 7 ที่เพิ่งมาใหม่จะเพิกเฉยต่อสิ่งนี้โดยสิ้นเชิง

แล้วไฟล์ JavaScript fixWeatherPng.js มีอะไรบ้าง ลองมาดูกัน:

Window.attachEvent("onload", fixWeatherPng); ฟังก์ชัน fixWeatherPng() ( var img = document.getElementById("weatherImage"); var src = img.src; img.style.visibility = "hidden"; var div = document.createElement("DIV"); div.style. filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(+ src + "", sizing="scale"" // สไตล์ CSS เฉพาะของ 49abcnews.com บางส่วนถูกละเว้นเพื่อความกระชับ img.replaceNode(div); -

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

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

ด้วยเหตุนี้ เราจึงแทนที่องค์ประกอบ img ดั้งเดิม (ซึ่งซ่อนอยู่) ด้วยองค์ประกอบ div ที่สร้างขึ้นใหม่ ซึ่งแนบ AlphaImageLoader ได้สำเร็จ

การใช้สคริปต์ DOM เพื่อแทรก AlphaImageLoader ของคุณ - การกรองบิตทันที - มีข้อเสียที่น่าเกลียด แต่จำเป็น - CSS ไม่ถูกต้อง นอกจากนี้ นอกเหนือจากมาร์กอัป (X)HTML ของคุณแล้ว จะมีองค์ประกอบ div ที่ไม่ใช่ความหมาย และตราบใดที่อธิบายทั้งหมดนี้ไว้ในความคิดเห็นแบบมีเงื่อนไข ก็ไม่มีโอกาสที่เบราว์เซอร์อื่นจะเสียหายจากโค้ดของ Microsoft (handyblogger: ที่นี่ Jeff กำลังพยายามชี้ให้เห็นโซลูชัน "งุ่มง่าม") ของ Microsoft อย่างละเอียด)

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

PNG เป็นรูปแบบกราฟิกที่มีข้อได้เปรียบทางเทคนิคมากมาย นอกเหนือจากที่ใช้ใน GIF ทั่วไป ในความเป็นจริง มีข้อดีมากมายจน PNG สามารถครองตำแหน่งที่โดดเด่นในฐานะรูปแบบกราฟิกที่ไม่ใช่ภาพถ่ายมานานแล้ว การที่ Internet Explorer ขาดการสนับสนุนคุณลักษณะที่สำคัญบางอย่างของ PNG เช่น ความโปร่งใสของช่องอัลฟ่า ส่งผลให้นักพัฒนาเว็บจำนวนมากต้องหยุดชะงัก แต่มีสองเหตุผลที่ดีว่าทำไมคุณไม่ควรกลัว PNG

ประการแรก: แม้แต่ Internet Explorer 6 และเวอร์ชันก่อนหน้าก็รองรับ PNG เกือบทั้งหมดในลักษณะที่ GIF สามารถทำได้ (ยกเว้นแอนิเมชั่นแน่นอน) PNG มักจะสร้างไฟล์ขนาดเล็กลง ทำให้โหลดเร็วขึ้นและใช้ทรัพยากรน้อยลง

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

ตัดตอนมาจากความคิดสร้างสรรค์มาตรฐานเว็บโดย Cameron Adams, Mark Boulton, Andy Clarke, Simon Collison, Jeff Croft, Ethan Marcotte, Derek Featherstone, Ian Lloyd, Dan Rubin และ Rob Weychert; เผยแพร่โดยเพื่อนของ ED ลิขสิทธิ์ Jeff Croft 2007 ใช้โดยได้รับอนุญาตจาก Apress, Inc.

เซอร์เกย์ เฟสชูคอฟ

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

วิธีทำพื้นหลังโปร่งใสให้กับรูปภาพ

มาดูตัวอย่างรูปภาพง่ายๆ ในรูปแบบ .jpg (โดยทั่วไป รูปแบบนี้ไม่สำคัญเป็นพิเศษ):

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

กำลังอัพโหลดรูปภาพของเรา ทางด้านขวาในหน้าต่าง "เลเยอร์" เลเยอร์ "พื้นหลัง" จะปรากฏขึ้นซึ่งมีการล็อคอยู่ (ป้องกันไม่ให้ลบพื้นหลังของรูปภาพ)

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

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

ตอนนี้เราลบพื้นหลังโดยกดปุ่ม "ลบ" และรับภาพที่เราต้องการด้วยพื้นหลังโปร่งใส

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

ขอบคุณ Natalia Petrova

เซอร์เกย์ เฟสชูคอฟ

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

วิธีทำพื้นหลังโปร่งใสให้กับรูปภาพ

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

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

กำลังอัพโหลดรูปภาพของเรา ทางด้านขวาในหน้าต่าง "เลเยอร์" เลเยอร์ "พื้นหลัง" จะปรากฏขึ้นซึ่งมีการล็อคอยู่ (ป้องกันไม่ให้ลบพื้นหลังของรูปภาพ)

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

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

ตอนนี้เราลบพื้นหลังโดยกดปุ่ม "ลบ" และรับภาพที่เราต้องการด้วยพื้นหลังโปร่งใส

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

ขอบคุณ Natalia Petrova

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

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

ปรากฎว่าหลายคนมีปัญหาในเรื่องนี้ แต่ไม่มีสิ่งพิมพ์ทางอินเทอร์เน็ตในหัวข้อนี้เลย เพียงไม่กี่หัวข้อในฟอรั่ม แต่ฉันรับหน้าที่แก้ไขความอยุติธรรมนี้กับตัวเอง...

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

ฉันขอบคุณผู้ที่มีความอดทนมากขึ้นสำหรับความเข้าใจของพวกเขา มาเริ่มกันเลย

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

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

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

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

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

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

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

จากนั้นเลือกประเภทไฟล์ PNG ที่ต้องการ เท่านี้ก็เสร็จเรียบร้อย มันมีอยู่ในรุ่นใดก็ได้ หากคุณไม่เห็นมันให้มองให้ละเอียดยิ่งขึ้น ไม่มีทางหากไม่มีเขา ฉันรับรองกับคุณ

เหตุใดจึงต้องมีรูปแบบอื่นขึ้นมา? ประเด็นก็คือ jpeg ยอดนิยมไม่เข้าใจว่าความโปร่งใสคืออะไร เขาเปลี่ยนเป็นสีขาวตามปกติของเขา

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

ก็เลยเปิดภาพดู

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

คุณสามารถเพิ่มเส้นผ่านศูนย์กลางของยางลบเพื่อให้การลบสะดวกยิ่งขึ้น

ตอนนี้เล่นซอกับองค์ประกอบที่ไม่จำเป็นในภาพ คุณจะเห็นว่าตัวตรวจสอบเริ่มปรากฏอย่างไรและสีก็หายไป!

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

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

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

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

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

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

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

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

ทำอะไรใหม่ๆ. หากคุณรัก Photoshop โปรดฟังหลักสูตรของ Zinaida Lukyanova - “ โฟโต้ชอปตั้งแต่เริ่มต้น“และเชี่ยวชาญมันได้อย่างสมบูรณ์แบบ คุณจะมีงานอดิเรกที่ทำกำไรได้เร็วมาก ไม่เกี่ยวกับการออกแบบเหรอ? ให้ความสนใจกับสิ่งนี้และสร้างโครงการของคุณเอง

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

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

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

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

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

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

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

ฟังก์ชั่นนี้ช่วยให้คุณเปลี่ยนพื้นหลังหรือทำให้โปร่งใสได้ คำแนะนำโดยละเอียดสำหรับการใช้งาน:

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