როდესაც ვებსაიტის დიზაინზე მუშაობთ, ხშირად გიწევთ საქმე იმ ფაქტთან, რომ ნაპოვნი სურათი, რომელიც იდეალურად მოერგება თქვენს საიტს, აქვს განსხვავებული ფონი, რომლის წაშლაც გსურთ.
ასე რომ, ჩვენ ვხსნით ჩვენს სურათს Photoshop-ში.
1.
პირველი, რაც უნდა გააკეთოთ, არის გამოსახულების სამუშაო სივრცის შექმნა გამჭვირვალე ფონით. Ამისთვის:
- ფენების ფანჯარაში ორჯერ დააწკაპუნეთ ჩვენს ფენაზე (დაბლოკვით)
- დააწკაპუნეთ OK ფანჯარაში, რომელიც გამოჩნდება.
საკეტი უნდა გაქრეს
თუ ფონი მარტივია:
აირჩიეთ ინსტრუმენტი " ჯადოსნური ჯოხი” არის ძალიან მოქნილი ინსტრუმენტი სასურველი ზონის შესარჩევად. ჩვენი ამოცანაა შევარჩიოთ მთელი ფონი, გარდა სურათისა. ამისათვის შეცვალეთ ჯადოსნური ჯოხის პარამეტრები (პარამეტრი ტოლერანტობა) სანამ არ მივიღებთ სასურველ შედეგს. ჩვენ ასევე ვიყენებთ Shift კლავიშს უკვე არჩეულის გარდა არეალის შესარჩევად. დააჭირეთ Del და არჩეული ტერიტორია წაიშლება.
თუ ფონი ფერადია:
ჩვენ ვიყენებთ ხელსაწყოს სწრაფი შერჩევა". აქ ჩვენი ამოცანაა არა ფონის ხაზგასმა, არამედ თავად ობიექტი, რომელიც უნდა დარჩეს. დააჭირეთ მანამ, სანამ სასურველი ადგილი არ მონიშნული იქნება. თუ ჭარბი მონიშნულია, გეჭიროთ Alt და გამოკლებული ფართობი. შედეგის ნახვა შეგიძლიათ Q ღილაკით.
როდესაც არჩევანი მზად იქნება, დააკოპირეთ იგი Ctrl+C-ით. შექმენით ახალი დოკუმენტი გამჭვირვალე ფონით (Ctrl + N) და ჩასვით ობიექტი იქ Ctrl + V.
3 . თუ სურათზე ზედმეტია დარჩენილი, გამოიყენეთ ინსტრუმენტი " საშლელი“, უბრალოდ გადაწერეთ დამატებითი ფონი.
4 . შეინახეთ სურათი ინტერნეტში (Alt + Shift + Ctrl + S) აირჩიეთ GIF ან PNG ფორმატი (სხვებში ჩვენი გამჭვირვალე ფონი თეთრი გახდება).
სასარგებლო ვიდეო თემაზე:
ზოგჯერ მომხმარებელს შეიძლება სურდეს PNG სურათი გამჭვირვალე ფონით. თუმცა, საჭირო ფაილი ყოველთვის არ შეესაბამება საჭირო პარამეტრებს. ამ შემთხვევაში, თქვენ თავად უნდა შეცვალოთ იგი ან აირჩიოთ ახალი. რაც შეეხება გამჭვირვალე ფონის შექმნას, ამ ამოცანის შესრულებაში დაგეხმარებათ სპეციალური ონლაინ სერვისები.
გამჭვირვალე ფონის შექმნის პროცედურა გულისხმობს ყველა არასაჭირო ობიექტის მოცილებას, ხოლო მხოლოდ საჭიროს დატოვებას და ძველი ელემენტების ადგილზე გამოჩნდება სასურველი ეფექტი. ჩვენ გირჩევთ გაეცნოთ ინტერნეტ რესურსებს, რომლებიც საშუალებას გაძლევთ განახორციელოთ ასეთი პროცესი.
გრაფიკული რედაქტორი LunaPic მუშაობს ონლაინ და მომხმარებელს სთავაზობს მრავალფეროვან ხელსაწყოებსა და ფუნქციებს, მათ შორის ფონის შეცვლას. მიზანი მიიღწევა შემდეგნაირად:
ეს ასრულებს მუშაობას LunaPic სერვისთან. ზემოაღნიშნული ინსტრუქციების წყალობით, თქვენ შეგიძლიათ მარტივად გახადოთ ფონი გამჭვირვალე. სერვისის ერთადერთი ნაკლი ის არის, რომ ის მუშაობს სწორად მხოლოდ იმ ნახატებთან, სადაც ფონი ივსება ძირითადად ერთი ფერით.
მოდით გავიგოთ PhotoScissors საიტი. აქ არ არის ისეთი პრობლემა, რომ კარგი დამუშავება მიიღება მხოლოდ გარკვეული სურათებით, რადგან თქვენ თავად დააყენეთ ის ტერიტორია, რომელიც ამოჭრილია. დამუშავება ხორციელდება შემდეგნაირად:
ეს ასრულებს მუშაობას ონლაინ რესურსით PhotoScissors. როგორც ხედავთ, მის მართვაში არაფერია რთული, გამოუცდელი მომხმარებელიც კი, რომელსაც არ გააჩნია დამატებითი ცოდნა და უნარები, გაიგებს დავალებას.
ცოტა ხნის წინ, Remove.bg ვებსაიტი ბევრს ეჩვენა. ფაქტია, რომ დეველოპერები უზრუნველყოფენ უნიკალურ ალგორითმს, რომელიც ავტომატურად წყვეტს ფონს და ტოვებს მხოლოდ ადამიანს სურათზე. სამწუხაროდ, სწორედ აქ მთავრდება ვებ სერვისის შესაძლებლობები, მაგრამ ის შესანიშნავად ასრულებს ასეთი ფოტოების დამუშავებას. მოდით უფრო ახლოს მივხედოთ ამ პროცესს:
სწორედ აქ მიდის ჩვენი სტატია თავის ლოგიკურ დასკვნამდე. დღეს ჩვენ შევეცადეთ გითხრათ ყველაზე პოპულარული ონლაინ სერვისების შესახებ, რომლებიც საშუალებას გაძლევთ გახადოთ ფონი სურათზე გამჭვირვალე რამდენიმე დაწკაპუნებით. ვიმედოვნებთ, რომ მოგეწონებათ მინიმუმ ერთი საიტი.
მთავარია, მიუთითოთ სურათი თქვენს კომპიუტერში ან ტელეფონზე და შემდეგ დააწკაპუნეთ OK ღილაკს ამ გვერდის ბოლოში. ნაგულისხმევად, სურათის უბრალო ფონი იცვლება გამჭვირვალე ფონით. ორიგინალური სურათის ფონის ფერი განისაზღვრება ავტომატურად, თქვენ უბრალოდ უნდა მიუთითოთ პარამეტრებში რა ფერით ჩაანაცვლოთ იგი. ძირითადი პარამეტრი, რომელიც გავლენას ახდენს ჩანაცვლების ხარისხზე, არის "ჩანაცვლების ინტენსივობა" და ის შეიძლება განსხვავებული იყოს თითოეული სურათისთვის.
ვარდისფერი ვარდის ფოტოს მაგალითი ცვლილებების გარეშე და მყარი ფონის ჩანაცვლების შემდეგ გამჭვირვალე, თეთრი და მწვანე:
პირველი მაგალითიგამჭვირვალე ფონზე ვარდის ყვავილით მზადდება შემდეგი პარამეტრებით:
1) ჩანაცვლების ინტენსივობა - 38;
2) კიდეების ირგვლივ გასწორება - 5;
3) ჩაანაცვლეთ მყარი ფონი გამჭვირვალეთ;
4) დაჭრა (<0) или Добавление (>0) კიდეების გასწვრივ - "-70";
5) Invert - გამორთულია (შემოწმება არ არის შემოწმებული).
შესაქმნელად მეორე მაგალითი, თეთრი ფონით, გამოყენებული იქნა იგივე პარამეტრები, რაც პირველ მაგალითში, გარდა პარამეტრისა: "Replace plain background with" - თეთრი. AT მესამე მაგალითი, მწვანე ფონით, ასევე გამოიყენება პარამეტრები, როგორც პირველ მაგალითში, გარდა პარამეტრისა: "color in hex format" - #245a2d.
ორიგინალური სურათი არანაირად არ შეცვლილა. თქვენ მოგეცემათ კიდევ ერთი დამუშავებული სურათი გამჭვირვალე ფონით ან თქვენს მიერ მითითებული ფონით.
ზოგიერთ მომხმარებელს შეიძლება დასჭირდეს გამჭვირვალე ფონის გაკეთება ზოგიერთ ფოტოზე. ეს შეიძლება იყოს ესთეტიკური მოსაზრებებით, კომერციული მიზნებისთვის წყლის ნიშნის შექმნის აუცილებლობით და სხვა მიზეზებით - ფაქტია, რომ მომხმარებელმა არ იცის, როგორ და რით შეიძლება ამის გაკეთება. ამ სტატიაში ვეცდები დავეხმარო ასეთ მომხმარებლებს და გითხრათ, როგორ გააკეთოთ გამჭვირვალე ფონი ონლაინ, რა სერვისები არსებობს ამისთვის და როგორ გამოიყენოთ ისინი.
ქსელში არის რამდენიმე სერვისი, რომელიც საშუალებას გაძლევთ უფასოდ წაშალოთ ფოტოს ფონი ონლაინში. ამავდროულად, ყველა მათგანს აქვს საკმაოდ მარტივი ხელსაწყოები, რაც საშუალებას გაძლევთ წაშალოთ ფოტოების ფონი თითქმის რამდენიმე დაწკაპუნებით. ქვემოთ ჩამოვთვლი ამ სერვისებს მათი ფუნქციონირების დეტალური აღწერით.
თუ თქვენც ჩემსავით გაქვთ სურვილი, მაშინ მე მეჩქარება გაგახაროთ, მათი უმეტესობა გამოვცადე და შევადგინე საუკეთესოთა სია (ზემოთ მოცემულ ბმულზე).
პირველი რესურსი, რომელიც საშუალებას გაძლევთ შექმნათ გამჭვირვალე ფონი ონლაინ არის Online-Photoshop. მასთან მუშაობა საკმაოდ მარტივია, რაც საშუალებას გაძლევთ რამდენიმე წუთში მიიღოთ ობიექტი გამჭვირვალე ფონის მქონე ფოტოზე.
ახლა ჩვენ ვაჭერთ ისარს მარჯვნივ და ვუყურებთ შედეგს. თუ ყველაფერი კარგადაა, დააჭირეთ ღილაკს "ჩამოტვირთვა" ზედა და შეინახეთ შედეგი თქვენს კომპიუტერში.
ონლაინ გამჭვირვალე ფონის შესაქმნელად კიდევ ერთი ინსტრუმენტი არის Photoshop-ის მსგავსი Pixlr ონლაინ რედაქტორი. მას აქვს ფუნქციების მნიშვნელოვანი რაოდენობა, მაგრამ ჩვენ, პირველ რიგში, დაინტერესებული ვართ გამჭვირვალე ფონის ინტერნეტით შექმნათ.
ეს სერვისი არის თითქმის სრულად ავტომატიზირებული ვარიანტი, რომელიც საშუალებას გაძლევთ გახადოთ ფონი გამჭვირვალე ონლაინ.
სერვისთან მუშაობისთვის გადადით მასზე, დააწკაპუნეთ ღილაკზე "Browse", დარწმუნდით, რომ "Replace plain background with" ოფცია დაყენებულია "Transparent" და დააწკაპუნეთ დიდ ღილაკზე "OK" ბოლოში.
დამუშავების შემდეგ, თქვენ შეძლებთ შედეგის ნახვას ან თქვენს კომპიუტერში გადმოტვირთვას შესაბამისი ბმულების გამოყენებით.
მე აღვნიშნავ, რომ ავტომატიზაციის გამო, მიღებული დამუშავების ხარისხი ჩვეულებრივ უარესია, ვიდრე ზემოთ ჩამოთვლილ Online-Photoshop-სა და Pixlr-ში.
კიდევ ერთი სერვისი, რომელიც საშუალებას გაძლევთ უფასოდ გააკეთოთ ფოტოზე გამჭვირვალე ფონი ინტერნეტით.
ამ სერვისთან მუშაობისთვის, თქვენ უნდა მოამზადოთ ფოტო, რისთვისაც თქვენ უნდა დახატოთ პოტენციურად გამჭვირვალე ფართობი ფერით, რომელიც არ არის თავად სურათზე (მაგალითად, ლურჯი, როგორც ნაჩვენებია ქვემოთ მოცემულ მაგალითში). ასევე მნიშვნელოვანია, რომ ფოტო იყოს png ან gif ფორმატში.
გამჭვირვალე ფონის შექმნის ეს სერვისი თავისი ფუნქციონალობით მსგავსია წინა, რომელიც მოითხოვს ერთ ფერში დამზადებულ ფონს. ის გარდაქმნის ამ ფერს გამჭვირვალე ფონად, იღებს მომხმარებლის მიერ მოთხოვნილ სურათს.
Watermark.Algid.Net სერვისთან შედარებით, LunaPic სერვისი უფრო ჰგავს სრულფასოვან ფოტო რედაქტორს, რომელიც საშუალებას გაძლევთ დახატოთ ფონი ერთი ფერით ამ სერვისში ჩაშენებული ხელსაწყოების გამოყენებით.
ზემოთ, მე ჩამოვთვალე რამდენიმე მოსახერხებელი და ადვილად გამოსაყენებელი სერვისი, რომელიც საშუალებას გაძლევთ შექმნათ გამჭვირვალე ფონი ონლაინ. ყველაზე ეფექტური, ჩემი აზრით, ონლაინ-Photoshop და Pixlr სერვისებია, მათი დამუშავების შედეგები კარგ დონეზეა და არჩევითი სპეციფიკა საერთოდ არ არის რთული. თუ ფოტოსთვის გამჭვირვალე ფონის გაკეთება გჭირდებათ, გირჩევთ გამოიყენოთ ამ ხელსაწყოების შესაძლებლობები, ისინი საშუალებას მოგცემთ მარტივად და სწრაფად შექმნათ გამჭვირვალე ფონი ონლაინ.
უფრო მეტიც, როგორც უფასო ფორმატი, PNG სთავაზობს ვებ დიზაინერს სხვადასხვა პრაქტიკულ უპირატესობას GIF-თან შედარებით:
მნიშვნელოვანია აღინიშნოს, რომ 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-ის პანელი - Save For Web,
აჩვენებს ფაილის ზომის განსხვავებებს ერთი და იგივე სურათისთვის სხვადასხვა ფორმატში
ხანდახან საჭიროა ისეთი გამოსახულების შექმნა, რომელიც ერთნაირად მუშაობს სხვადასხვა სუბსტრატებზე. ზოგიერთი გავრცელებული მაგალითია ლოგოები და ხატები. ამ სიტუაციებში ტრადიციულად დომინირებს GIF-ები, მაგრამ არსებობს რამდენიმე მიზეზი, რის გამოც PNG შეიძლება იყოს უკეთესი არჩევანი ამ სიტუაციაში. PNG იმარჯვებს ფაილის ზომაში ლოგოებისთვის ან სხვა მარტივი „ხელოვნებისთვის“. გარდა ამისა, PNG-ის თანდაყოლილი გამჭვირვალობა აადვილებს ცალკეული ფაილების შექმნას, რომლებიც მუშაობენ ნებისმიერ ფონზე. PNG გთავაზობთ ბინარულ გამჭვირვალობას, როგორიცაა GIF, მაგრამ ასევე უზრუნველყოფს ბევრად უფრო სასურველ ვარიანტს ალფა არხით, რომელშიც პიქსელები შეიძლება იყოს ნაწილობრივ გამჭვირვალე, უბრალოდ ჩართული ან გამორთულის ნაცვლად. ამ უკანასკნელის გამოყენება ზრდის ფაილის ზომას, ზოგჯერ ორობითი გამჭვირვალობის მქონე GIF-ზე მეტსაც კი, მაგრამ ეს საშუალებას გაძლევთ გამარტივდეს თქვენი სურათის კიდეები და უფრო ელეგანტურს ხდის მის ფონზე განთავსებას.
თუმცა, მე გადავამუშავე მათი კონცეფცია თეთრი გამოსახულების გამოყენებით სტენლის სიმბოლოებით. ისინი იყენებდნენ თეთრ სიმბოლოს გამჭვირვალე ფონზე, რაც, როგორც წესი, საკმაოდ ეფექტური შეიძლება იყოს. ამ შემთხვევაში, თქვენი ფონი css ფერიგამოჩნდება სიმბოლოს გარშემო კვადრატულ ან მართკუთხა არეში, თავად სიმბოლოს ნაცვლად.
დენმა და PJ-მაც გამოიყენეს გამჭვირვალე GIF PNG-ის ნაცვლად. ეს მთლიანად ფარავდა მათ საჭიროებებს და მათ უნდა შეექმნათ პიქსელირებული სურათები ხატების სტილისთვის. PNG-ით შეგიძლიათ მიიღოთ მსგავსი ტექნიკა, მაგრამ დამატებითი უპირატესობით ანტიალიასინგი და ნაწილობრივი გამჭვირვალობა უფრო დეტალურ ხატებში გამოსაყენებლად.
მე ვიცი, რას ფიქრობთ: მთელი ეს PNG გამჭვირვალობა კარგად გამოიყურება, მაგრამ არის თუ არა პრაქტიკული?
სასიხარულო ამბავი ის არის, რომ ყველა თანამედროვე ბრაუზერი სრულად უჭერს მხარს PNG სურათებს, მათ შორის ალფა არხის გამჭვირვალობას, რომლის სარგებელიც მე ვაჩვენე მაგალითებში. Safari (ყველა ვერსია), Firefox (ყველა ვერსია), Opera (ვერსიები 6 და ზემოთ), Netscape (ვერსიები 6 და ზემოთ) და Mozilla (ყველა ვერსია) ყველაფერს გააკეთებენ, რასაც მათ ვთხოვ, გააკეთონ ხმაურით. მაგრამ ცუდი ამბავი არის ერთი ბრაუზერი, რომელიც ჯერ არ მიხსენებია, რომელიც თქვენი მომხმარებლების უმეტესობას აქვს: Internet Explorer.
Internet Explorer 6 და ქვემოთ არ აქვს PNG ფორმატში ჩაშენებული ალფა არხის გამჭვირვალობის მხარდაჭერა. მას შემდეგ, რაც ბრაუზერის არჩევა (ან არა არჩევანი) გაკეთდა მრავალი ვებ სერფერისთვის, ამ უფსკრული ხვრელი ინახავდა ვებ დიზაინერებს PNG-ისგან. მაგრამ, Internet Explorer 7-ის გამოშვებით, ჩვენ მივიღეთ სრული მხარდაჭერა PNG ალფა გამჭვირვალობისთვის ყველა მთავარ ბრაუზერში. რა არის შემდეგი, არის თუ არა 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 ელემენტისთვის (ვთქვათ for
მოდით დავუბრუნდეთ ერთ-ერთ ადრინდელ მაგალითს და შევეცადოთ მისი სწორად ჩატვირთვა Internet Explorer-ში. გახსოვთ 49 არხი, ტელეკომპანია ტოპეკაში? დარწმუნებული ვარ, კი. სურათი 5-21 გვიჩვენებს, თუ როგორ გამოიყურება საიტი Internet Explorer 6-ში.
სურათი 5-21
49abcnews.com-ის სათაური გამოტანილია Internet Explorer 6-ში Windows-ისთვის, PNG გამჭვირვალობით უცვლელი.
HTML ამინდთან დაკავშირებული ტოპისთვის, როგორც ჩანს, უკვე გამოიცანით:
ამჟამად ტოპეკაში, KS:
82°
მიიღეთ პროგნოზი და მეტი...
თქვენ ხედავთ სურათს და ის ნამდვილად არის PNG, Internet Explorer-იც კი იტვირთება უნაკლოდ. ამის საიდუმლო ინგრედიენტია JavaScript. ფაქტობრივად, მე გამოვიყენე ცოტა DOM სკრიპტი, რომ ამომეღო img ელემენტი და შევცვალო ის div ელემენტით, რომელიც - თქვენ წარმოიდგინეთ - იყენებს AlphaImageLoader-ს. JavaScript აღწერილია პირობითი კომენტარების შიგნით, კიდევ ერთი მოსახერხებელი, მაგრამ სრულიად არასტანდარტული იდიომი Microsoft-ისგან, რომელიც ჩაშენებულია Internet Explorer-ში. პირობითი კომენტარები საშუალებას გაძლევთ გამოიყენოთ კოდი მხოლოდ Internet Explorer-ის ცნობილი ვერსიისთვის. კოდი იგნორირებულია ყველა სხვა ბრაუზერის მიერ, ამიტომ ის არანაირად არ მოქმედებს მათზე. ელემენტში
ვებსაიტზე www.49abcnews.com, თქვენ ნახავთ:
პირველი სტრიქონის წყალობით, თუ lte IE6, ეს სკრიპტი ჩაირთვება მხოლოდ გაფორმებულ დოკუმენტში, თუ ის ნაჩვენებია Internet Explorer-ის 6-ზე ნაკლები ან ტოლი (მითითებული lte) ვერსიაში. ყველა სხვა ბრაუზერი, ახლად შემოსული ინტერნეტის ჩათვლით. Explorer 7, სრულიად უგულებელყოფს ამას.
რა არის fixWeatherPng.js JavaScript ფაილში? მოდით შევხედოთ:
Window.attachEvent ("ჩატვირთვა", fixWeatherPng); ფუნქცია fixWeatherPng() ( var img = document.getElementById ("weatherImage"); var src = img.src; img.style.visibility = "დამალული"; var div = document.createElement ("DIV"); div.style. filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(+ src + "", sizing="scale")"; // 49abcnews.com-ის სპეციფიკური CSS სტილი გამოტოვებულია მოკლედ. img.replaceNode(div); )
მოდით გავაანალიზოთ, ეტაპობრივად, რას აკეთებს სცენარი. პირველ რიგში, ჩვენ ვეუბნებით ბრაუზერს, რომ გვსურს შეასრულოს fixWeatherPng ფუნქცია გვერდის ჩატვირთვისას. სკრიპტის დანარჩენი ნაწილი თავად ფუნქციაა.
დასაწყებად, ჯერ ვეძებთ სურათს, რომლითაც ვიმუშავებთ მისი id ატრიბუტით და ვინახავთ img ცვლადში. ჩვენ ვინახავთ src ატრიბუტს (URL სურათის ფაილზე) src ცვლადში. შემდეგ ჩვენ ვმალავთ img ელემენტს ხილვადობის CSS თვისების დამალულზე დაყენებით.
ჩვენ საბოლოოდ შევცვლით ორიგინალური img ელემენტს (რომელიც იმალება) ახლად შექმნილი div ელემენტით, რომელსაც წარმატებით აქვს მიმაგრებული AlphaImageLoader.
DOM სკრიპტის გამოყენებას თქვენი AlphaImageLoader-ის ინექციისთვის - ბიტების გაფილტვრა, აქვს თავისი ცუდი, მაგრამ აუცილებელი მხარე - ცუდი CSS. უფრო მეტიც, არასემანტიკური div ელემენტები იქნება თქვენი (X)HTML მარკირების გარეთ. და სანამ ეს ყველაფერი აღწერილია პირობით კომენტარებში, არ არსებობს შანსი სხვა ბრაუზერებს დაზიანდეს Microsoft-ის კოდით. (handyblogger: აქ ჯეფი ცდილობს დახვეწილად მიუთითოს Microsoft-ის "უხერხული" გადაწყვეტა)
თუ რაიმე არასწორად უნდა გააკეთო, მაინც შეგიძლია ამოიღო და დაცალკევდე ყველაფრისგან, რასაც ეს არ სჭირდება.
PNG, როგორც გრაფიკული ფორმატი, გთავაზობთ ბევრ ტექნიკურ უპირატესობას GIF-ებში ფართოდ გამოყენებულის გარდა. სინამდვილეში, სარგებელი იმდენად დიდია, რომ PNG შეიძლება დიდი ხნის წინ დაეუფლა, როგორც გრაფიკული ფორმატი, რომელიც არ არის დაკავშირებული ფოტო სურათებთან. Internet Explorer-ის მხარდაჭერის ნაკლებობამ ზოგიერთი უფრო მნიშვნელოვანი PNG ფუნქციისთვის, როგორიცაა ალფა არხის გამჭვირვალობა, გამორთო მრავალი ვებ დეველოპერი. მაგრამ არსებობს ორი ძალიან კარგი მიზეზი, თუ რატომ არ უნდა შეგეშინდეთ PNG.
ჯერ ერთი, Internet Explorer 6 და მისი ადრინდელი ვერსიებიც კი თითქმის სრულად უჭერენ მხარს PNG-ს იმ თვალსაზრისით, თუ რისი გაკეთება შეუძლია GIF-ს (გარდა ანიმაციისა, რა თქმა უნდა). PNG თითქმის ყოველთვის აჩვენებს ფაილის უფრო მცირე ზომას, რაც საშუალებას აძლევს მათ უფრო სწრაფად ჩატვირთონ და გამოიყენონ ნაკლები რესურსები.
მეორეც, Internet Explorer 7 გთავაზობთ სრულ მხარდაჭერას PNG ალფა გამჭვირვალობისთვის. ეფექტები, რომლებიც მიიღწევა გამჭვირვალე ვარიანტების სრული გამით, თითქმის უსაზღვროა. მე ველი, რომ დიზაინერები, რომლებიც პოულობენ PNG გამჭვირვალობის გამოსაყენებლად საინტერესო გზებს, ამ სტატიაში აღწერილის მიხედვით, გაუხსნიან კარს ახალი დონის სტილისკენ, რომელიც აქამდე არ უნახავთ. მე მოგაწოდეთ რამდენიმე სასარგებლო იდეა იმის შესახებ, თუ რა შეგიძლიათ შექმნათ PNG გამჭვირვალობით, მაგრამ არ გაჩერდეთ. ეძებე შენი თავი!
ამონარიდი ვებ სტანდარტების შემოქმედებიდან კამერონ ადამსის, მარკ ბულტონის, ენდი კლარკის, საიმონ კოლისონის, ჯეფ კროფტის, ეთან მარკოტის, დერეკ ფეზერსტოუნის, იან ლოიდის, დენ რუბინისა და რობ უეიჩერტის მიერ; გამოქვეყნებულია ED-ის მეგობრების მიერ. საავტორო უფლება Jeff Croft 2007. გამოიყენება Apress, Inc.-ის ნებართვით.
