Jpg s priehľadným pozadím. Ako vytvoriť priehľadné pozadie pre obrázok? Niekoľko skvelých príkladov použitia skromného PNG

Okrem toho, že PNG je bezplatný formát, ponúka webovým dizajnérom rôzne praktické výhody oproti GIF:

  • Lepšia kompresia: Pre väčšinu obrázkov PNG dosahuje menšiu veľkosť súboru ako GIF
  • Väčšia farebná hĺbka: PNG ponúka truecolor až do 48 bitov, zatiaľ čo v GIF máme iba 256 farebnú paletu
  • Transparentnosť alfa kanála: Tam, kde GIF ponúka iba binárnu priehľadnosť, PNG umožňuje prakticky neobmedzené efekty transparentnosti tým, že ponúka alfa kanál pre priehľadnosť.

Stojí za zmienku, že PNG neumožňuje animáciu ako GIF. Existuje však štandard Multiple-image Network Graphics (MNG), ktorý to umožňuje, ale nie je tak široko podporovaný webovými prehliadačmi a grafickými editormi.

Prečo je teda GIF stále taký populárny?

Pravdepodobne sa pýtate, prečo PNG nie je na webe taký rozšírený formát, ak je taký dobrý, ako sa propaguje. Odpoveďou je z veľkej časti mylná predstava o formáte a podpore prehliadača.

Keďže Internet Explorer 6 a staršie verzie nepodporujú celý rozsah možností PNG (vrátane transparentnosti alfa kanála), ľudia sú ponechaní veriť (aj keď to nie je pravda), že Internet Explorer nepodporuje PNG vôbec alebo aspoň nie. podporovať transparentnosť. Internet Explorer 5 a 6 v skutočnosti podporujú dostatok špecifikácií PNG na to, aby boli funkčne ekvivalentné (alebo lepšie) s neanimovanými obrázkami GIF. Všetky ostatné uvedené prehliadače, vrátane Firefox, Netscape 6 a vyššie, Mozilla, Opera 6 a vyššie, Safari a Camino plne podporujú priehľadnosť PNG.

Okrem tejto mylnej predstavy o podpore prehliadača bola (a stále je) hlavným dôvodom jeho úspechu vstavaná animácia GIF. Aj keď v priebehu rokov sa používanie GIF stáva čoraz menej populárnym v porovnaní s inými technológiami (napríklad Flash), ktoré sú čoraz vhodnejšie na animáciu.

Transparentnosť je kľúčovou charakteristikou GIF a PNG a je často dôvodom, prečo webový dizajnér vyberá formát, ktorý použije. Aj keď PNG ponúka komplexnejšiu podporu pre transparentnosť, weboví dizajnéri často potrebujú vytvoriť GIF verziu obrázkov, aby vyhovovali starším prehliadačom. Pomocou CSS je to možné (a trochu triviálne) odosielaním obrázkov GIF pre staršie prehliadače a vysokokvalitných obrázkov PNG do prehliadačov, ktoré im rozumejú. Pre webového dizajnéra je to však dvojitá práca a výsledkom je, že ľudia idú cestou najmenšieho odporu a naďalej používajú obrázky GIF.

Pozreli sme sa teda na niekoľko dôvodov, prečo je GIF stále taký populárny, no väčšina z nich je založená na nepochopení pojmov alebo na použití známeho pracovného postupu. Vyzbrojení kľúčovými znalosťami PNG a toho, ako ho možno spoľahlivo používať v prehliadačoch, môžete využiť všetky výhody, ktoré ponúka.

A čo JPEG?

JPEG je ďalší všadeprítomný webový formát a vo väčšine prípadov, ako sú fotografie (a podobne), je dokonca lepší ako PNG alebo GIF. PNG nemá konkurovať JPEG. Kompresia JPEG vytvára pri práci s fotografiami výrazne menšie súbory ako PNG. Na druhej strane, PNG vytvára menšie súbory, keď sa vo vnútri obrázkov nachádza text, umelecké čiary, logá, „ploché“ farby atď.

Niekoľko skvelých príkladov použitia skromného PNG

Teraz sa pozrime na to, ako používať PNG vo webdizajne. Zhromaždil som všetky súbory pre každý príklad do samostatného priečinka, ktorý je dostupný pre priateľov ED.

Gradient

Za posledných niekoľko rokov sa prechody – plynulý prechod medzi dvoma alebo viacerými farbami – stali najlepším priateľom webových dizajnérov. Obľúbené sú najmä jemné, jemné prechodové výplne, ktoré bez toho, aby boli nápadné, vytvárajú pocit hĺbky a textúry.
Niekedy je GIF najlepšou voľbou pre gradient. Ak je prechod jednoduchý dvojfarebný prechod, GIF v ňom funguje bezchybne. Obmedzenie GIF len na 256 farieb však často vytvára viditeľné a nedbalé „pásy“ medzi zložitejšími prechodmi. Na druhej strane JPEG dokáže vygenerovať niekoľko pekných prechodov, ale často za cenu väčšej veľkosti súboru. Zatiaľ čo prechody JPEG sú vo všeobecnosti celkom dobré, musíte si uvedomiť, že JPEG používa stratovú kompresiu, čo znamená, že výsledný obrázok nikdy nebude zodpovedať kvalite nekomprimovaného obrázka.

Typický štýl prechodu pozadia sa používa pre tlačidlá, bloky alebo kdekoľvek inde. Môže to vyzerať ako na obrázku 5-1. V smere hodinových ručičiek z ľavého horného rohu vidíme pôvodný (nekomprimovaný) obrázok, verziu GIF, verziu PNG a JPEG. Môžete vidieť, že výsledný PNG má najmenšiu veľkosť (515 bajtov). To je štyrikrát menšie ako obrázok GIF. JPEG je o niečo väčší ako PNG pri 637 bajtoch a má tiež nižšiu kvalitu kvôli stratovej kompresii (hoci schopnosť ľudského oka rozpoznať rozdiel v kvalite v tomto jednoduchom príklade zostáva otázna).

Obrázok 5-1
Panel Photoshop - Uložiť pre web,
zobrazenie rozdielov vo veľkosti súboru pre ten istý obrázok v rôznych formátoch

Obrázok, ktorý by mal fungovať na akomkoľvek pozadí

Niekedy potrebujete vytvoriť obrázok, ktorý funguje rovnako na rôznych substrátoch. Niektoré bežné príklady sú logá a ikony. V týchto situáciách tradične dominujú súbory GIF, ale existuje niekoľko dôvodov, prečo môže byť PNG v tejto situácii lepšou voľbou. PNG zvyčajne vyhráva vo veľkosti súboru pre logá alebo nejaké iné jednoduché „umenie“. Navyše, priehľadnosť PNG uľahčuje vytváranie jednotlivých súborov, ktoré fungujú na akomkoľvek pozadí. PNG ponúka binárnu priehľadnosť ako GIF, ale poskytuje aj oveľa žiadanejšiu možnosť alfa kanála, v ktorom môžu byť pixely čiastočne priehľadné, namiesto toho, aby boli iba zapnuté alebo vypnuté. Jeho použitie zväčšuje veľkosť súboru, niekedy dokonca väčšiu ako GIF s binárnou priehľadnosťou, ale umožňuje vyhladzovanie okrajov obrázka a jeho umiestnenie na pozadí je elegantnejšie.

Ich koncept som však prepracoval pomocou bieleho obrázku so šablónovými symbolmi. Použili biely symbol na priehľadnom pozadí, čo by vo všeobecnosti mohlo byť dosť efektné. V tomto prípade by sa farba pozadia CSS objavila v štvorcovej alebo obdĺžnikovej oblasti okolo symbolu namiesto samotného symbolu.

Dan aj PJ použili namiesto PNG priehľadný GIF. To úplne pokrylo ich potreby a museli vytvoriť pixelové obrázky tak, aby zodpovedali štýlu ikon. Pomocou PNG môžete dosiahnuť podobnú techniku, ale s niektorými výhodami v podobe vyhladzovania a čiastočnej priehľadnosti pre použitie v detailnejších ikonách.

Dobre, ale v ktorých prehliadačoch to funguje?

Viem, čo si myslíte: celá táto priehľadnosť PNG vyzerá dobre, ale je to praktické?

Dobrou správou je, že všetky moderné prehliadače plne podporujú obrázky PNG, vrátane transparentnosti alfa kanálov, ktorých výhody som ukázal v príkladoch. Safari (všetky verzie), Firefox (všetky verzie), Opera (verzie 6 a vyššie), Netscape (verzie 6 a vyššie) a Mozilla (všetky verzie) urobia všetko, o čo ich požiadam. Je tu však jedna zlá správa – jediný prehliadač, ktorý som ešte nespomenul a ktorý má väčšina vašich používateľov: Internet Explorer.

Internet Explorer 6 a staršie verzie nepodporujú transparentnosť alfa kanála zabudovanú do formátu PNG. Odkedy bola voľba prehliadača (alebo nevyberanie) urobená pre väčšinu z mnohých internetových surferov, táto priepastná diera držala webových dizajnérov ďaleko od PNG. S vydaním Internet Explorera 7 sme však získali plnú podporu pre transparentnosť PNG alfa vo všetkých hlavných prehliadačoch. Čo ďalej, existujú nejaké spôsoby, ako pracovať s priehľadnosťou PNG alfa v programe Internet Explorer 6 a nižších verziách? Ak teda chcete využiť tento efekt, nič vás nezastaví. Internet Explorer 6 a jeho staršie verzie vyžadujú viac pozornosti, ako je potrebné, ale určite je to možné.

Hack pre Internet Explorer: AlphaImageLoader

Internet Explorer sa dodáva s rôznymi natívnymi filtrami. Používajú sa v CSS, ale nie sú súčasťou oficiálnej špecifikácie CSS. Inými slovami, na webe nie sú štandardizované. Bohužiaľ, Internet Explorer 6 a nižšie nepodporujú plne formát PNG (ktorý odporúča W3C), ale Microsoft má filter, ktorý tento nedostatok odstraňuje: AlphaImageLoader.

Podľa sekcie na oficiálnej webovej stránke spoločnosti Microsoft AlphaImageLoader „zobrazuje obrázok v rámci hraníc objektu a medzi pozadím objektu a jeho obsahom“. Inými slovami, AlphaImageLoader načíta obrázok PNG s plnou priehľadnosťou, ale načíta ho ako svoju vlastnú vrstvu, pod ktorou je obsah objektu, na ktorý je aplikovaný. Obrázky PNG načítané týmto spôsobom pôsobia skôr ako obrázky na pozadí než obrázky v popredí (hoci v skutočnosti „sedia“ na pozadí objektu).

V podstate môžete jednoducho použiť AlphaImageLoader v CSS na prvky img a vychutnať si výsledok. Najskôr sa načíta obrázok, priehľadnosť zostane, ale potom sa obrázok načíta znova – ako predný obsah objektu – s nepriehľadnými oblasťami (čím sa „zatieni“ vaša priehľadná verzia).

Nemôžete použiť priehľadný PNG ako obrázok na pozadí CSS pre (povedzme) prvok (X)HTML a očakávať, že AlphaImageLoader vykoná prácu správne v Internet Exploreri. Pamätajte, že AlphaImageLoader vloží váš obrázok medzi pozadie a popredie objektu. Takže aj keď načíta váš obrázok v celej svojej priehľadnej kráse, bude ho aj naďalej načítavať ako obrázok na pozadí CSS a bez vašich nádherných priesvitných pixelov.

Skutočné využitie AlphaImageLoader

Vráťme sa k jednému z predchádzajúcich príkladov a skúsme ho správne načítať v programe Internet Explorer. Pamätáte si Channel 49, televíznu stanicu v Topeka? Som si istý, že áno. Obrázok 5-21 ukazuje, ako vyzerá lokalita v programe Internet Explorer 6.


Obrázok 5-21
Titulok 49abcnews.com, vykreslený v Internet Exploreri 6 pre Windows, s neporušenou priehľadnosťou PNG.

HTML pre hornú časť počasia vyzerá tak, ako ste už možno uhádli:

V súčasnosti v Topeka, KS:
82° Zamračené
Získajte predpoveď a ďalšie...

Vidíte obrázok a je to určite PNG; dokonca aj Internet Explorer ho načítava bezchybne. Tajnou zložkou je JavaScript. V skutočnosti som použil trochu skriptovania DOM na odstránenie prvku img za behu a jeho nahradenie prvkom div, ktorý - uhádli ste - používa AlphaImageLoader. JavaScript je popísaný v podmienených komentároch, čo je ďalší praktický, ale úplne neštandardný idiom od Microsoftu zabudovaný do Internet Explorera. Podmienené komentáre vám umožňujú použiť kód len pre známu verziu Internet Explorera. Všetky ostatné prehliadače kód ignorujú, takže ich to nijako neovplyvňuje. V prvku stránky www.49abcnews.com nájdete:

Vďaka prvému riadku, ak je lte IE6, bude tento skript zahrnutý do vykresleného dokumentu iba vtedy, ak je zobrazený vo verzii Internet Explorer nižšej alebo rovnej (označuje sa lte) 6. Všetky ostatné prehliadače, vrátane novo prichádzajúci Internet Explorer 7 to bude úplne ignorovať.

Čo je teda v súbore JavaScript fixWeatherPng.js? Pozrime sa:

Window.attachEvent("onload", fixWeatherPng); function fixWeatherPng() ( var img = document.getElementById("weatherImage"); var src = img.src; img.style.visibility = "skryté"; var div = document.createElement("DIV"); div.style. filter = "progid:DXImageTransform.Microsoft. AlphaImageLoader(+ src + "", sizing="scale")"; // Niektoré štýly CSS špecifické pre 49abcnews.com boli kvôli stručnosti vynechané. img.replaceNode(div); )

Poďme analyzovať, krok za krokom, čo skript robí. Najprv prehliadaču povieme, že pri načítaní stránky chceme vykonať funkciu fixWeatherPng. Zvyšok skriptu je samotná funkcia.

Začnime, najprv si podľa atribútu id vyhľadáme obrázok, s ktorým budeme pracovať a uložíme ho do premennej img. Atribút src (URL k súboru obrázka) uložíme do premennej src. Potom prvok img skryjeme nastavením vlastnosti viditeľnosti CSS na skryté.

Výsledkom je, že pôvodný prvok img (ktorý je skrytý) nahradíme novovytvoreným prvkom div, ku ktorému sa úspešne pripojí AlphaImageLoader.

Používanie skriptovania DOM na vloženie vášho AlphaImageLoader – filtrovanie bitov za behu – má svoju škaredú, ale nevyhnutnú nevýhodu – nesprávne CSS. Okrem toho budú mimo vášho označenia (X)HTML nesémantické prvky div. A pokiaľ je toto všetko popísané v podmienených komentároch, nie je možné, aby ostatné prehliadače boli poškodené kódom Microsoftu. (handyblogger: Tu sa Jeff snaží nenápadne poukázať na „nemotorné“ riešenie Microsoftu)

Ak musíte niečo urobiť nesprávne, aspoň to môžete extrahovať a držať oddelene od všetkého ostatného, ​​kde to nie je potrebné.

Vo vyšetrovacej väzbe

PNG ako grafický formát ponúka mnoho technických výhod nad rámec tých, ktoré sa bežne používajú v GIF. V skutočnosti sú výhody také veľké, že PNG mohol už dávno zaujať dominantné postavenie ako nefotografický grafický formát. Nedostatočná podpora niektorých dôležitejších funkcií PNG, ako je napríklad transparentnosť alfa kanálov, v Internet Exploreri odradila mnohých webových vývojárov. Existujú však dva veľmi dobré dôvody, prečo by ste sa PNG nemali báť.

Po prvé: dokonca aj Internet Explorer 6 a jeho staršie verzie takmer úplne podporujú PNG spôsobom, ktorý dokáže GIF (samozrejme s výnimkou animácií). PNG takmer vždy vytvára menšie súbory, čo im umožňuje rýchlejšie sa načítať a využívať menej zdrojov.

Po druhé: Internet Explorer 7 ponúka plnú podporu pre transparentnosť PNG alfa. Efekty, ktoré možno dosiahnuť pomocou celej škály priesvitných možností, sú prakticky neobmedzené. Očakávam, že pre dizajnérov, ktorí nájdu zaujímavé spôsoby využitia priehľadnosti PNG, ako sú tie, ktoré sú opísané v tomto článku, sa otvoria dvere do novej úrovne štýlov, ktoré tu ešte neboli. Poskytol som vám niekoľko užitočných nápadov o tom, čo môžete vytvoriť pomocou priehľadnosti PNG, ale nezastavte sa tam. Hľadajte sami!

Vyňaté z Web Standards Creativity od Camerona Adamsa, Marka Boultona, Andyho Clarkea, Simona Collisona, Jeffa Crofta, Ethana Marcotteho, Dereka Featherstonea, Iana Lloyda, Dana Rubina a Roba Weycherta; publikovali priatelia ED. Copyright Jeff Croft 2007. Použité s povolením Apress, Inc.

Online program Pixir - vytvorte priehľadné pozadie pre obrázok. Sergej Feschukov

Niekedy narazíte na veľmi vhodný obrázok pre váš príspevok a všetko by bolo v poriadku... Pozadie obrázka však nezodpovedá pozadiu blogu alebo bloku s textom. Tento problém zrejme nikto nemá a nikto nemá biele pozadie, ktoré by sa vo väčšine prípadov hodilo. Potrebujem priehľadné pozadie!

Na internete som nenašiel žiadne dobré nápady, ako urobiť priehľadné pozadie pre hotový obrázok, tak som začal sám experimentovať a našiel som viac či menej vhodné riešenie!

Ako vytvoriť priehľadné pozadie pre obrázok

Vezmime si ako príklad jeden jednoduchý obrázok vo formáte .jpg (vo všeobecnosti formát nie je zvlášť dôležitý):

Je tu biele pozadie, ktorého sa chcem zbaviť a namiesto toho urobiť priehľadné pozadie. Pomôže nám s tým Pixlr, online verzia Photoshopu.

Nahrávame náš obrázok. Vpravo v okne „Vrstvy“ sa zobrazí vrstva „Pozadie“, na ktorej je zámok (bráni vymazaniu pozadia obrázka).

Dvojitým kliknutím ľavým tlačidlom myši na tento zámok môžete odstrániť zámok z pozadia. Namiesto visiaceho zámku sa zobrazí značka začiarknutia.

Teraz vezmite čarovný prútik (panel nástrojov, pravý stĺpec, druhé tlačidlo zhora) a zadajte nasledujúce parametre: tolerancia = 21, zaškrtávacie políčka pre vyhladenie a kontinuitu(zvyčajne sú takéto parametre štandardné), aj keď s parametrami môžete experimentovať; a kliknite na pozadie obrázka (v našom prípade na biele pozadie).

Teraz vymažeme pozadie stlačením tlačidla „Odstrániť“ a získame požadovaný obrázok s priehľadným pozadím.

Výsledkom je, že výstupom je rovnaký obrázok s priehľadným pozadím.

Jedinou nevýhodou Pixlr je, že nemôžete uložiť obrázok vo formáte .gif, ktorý tiež zachováva priehľadné pozadie, ale je oveľa svetlejší ako formát .png. Ale ak nie je iná možnosť, prečo to nevyužiť?

vďaka Natálii Petrovej

Online program Pixir - vytvorte priehľadné pozadie pre obrázok. Sergej Feschukov

Niekedy narazíte na veľmi vhodný obrázok pre váš príspevok a všetko by bolo v poriadku... Pozadie obrázka však nezodpovedá pozadiu blogu alebo bloku s textom. Tento problém zrejme nikto nemá a nikto nemá biele pozadie, ktoré by sa vo väčšine prípadov hodilo. Potrebujem priehľadné pozadie!

Na internete som nenašiel žiadne dobré nápady, ako urobiť priehľadné pozadie pre hotový obrázok, tak som začal sám experimentovať a našiel som viac či menej vhodné riešenie!

Ako vytvoriť priehľadné pozadie pre obrázok

Vezmime si ako príklad jeden jednoduchý obrázok vo formáte .jpg (vo všeobecnosti formát nie je zvlášť dôležitý):

Je tu biele pozadie, ktorého sa chcem zbaviť a namiesto toho urobiť priehľadné pozadie. Pomôže nám s tým online verzia Photoshopu.

Nahrávame náš obrázok. Vpravo v okne „Vrstvy“ sa zobrazí vrstva „Pozadie“, na ktorej je zámok (bráni vymazaniu pozadia obrázka).

Dvojitým kliknutím ľavým tlačidlom myši na tento zámok môžete odstrániť zámok z pozadia. Namiesto visiaceho zámku sa zobrazí značka začiarknutia.

Teraz vezmite čarovný prútik (panel nástrojov, pravý stĺpec, druhé tlačidlo zhora) a zadajte nasledujúce parametre: tolerancia = 21, zaškrtávacie políčka pre vyhladenie a kontinuitu(zvyčajne sú takéto parametre štandardné), aj keď s parametrami môžete experimentovať; a kliknite na pozadie obrázka (v našom prípade na biele pozadie).

Teraz vymažeme pozadie stlačením tlačidla „Odstrániť“ a získame požadovaný obrázok s priehľadným pozadím.

Výsledkom je, že výstupom je rovnaký obrázok s priehľadným pozadím.

Jedinou nevýhodou Pixlr je, že nemôžete uložiť obrázok vo formáte .gif, ktorý tiež zachováva priehľadné pozadie, ale je oveľa svetlejší ako formát .png. Ale ak nie je iná možnosť, prečo to nevyužiť?

vďaka Natálii Petrovej

2 hlasy

Dobrý deň, milí čitatelia. Schopnosť vytvárať obrázky s priehľadným pozadím je neuveriteľne potrebná pre každého začínajúceho vývojára webových stránok, dizajnéra a dokonca aj bežného človeka.

Toto je najobľúbenejšia funkcia vo Photoshope, a preto som sa rozhodol čo najpodrobnejšie vám povedať nielen o samotnom procese, ale aj o tom, ako uložiť obrázok vo Photoshope bez pozadia.

Ukazuje sa, že veľa ľudí má s tým problémy, ale na internete neexistujú žiadne publikácie na túto tému. Len pár tém na fórach. Ale beriem na seba poslanie napraviť túto nespravodlivosť...

Takže teraz si oblečiem rytierske brnenie a rozptýlim všetky obavy, pochybnosti, nedorozumenia a premením ťažkosti umenia Photoshopu na jednoduchý každodenný život. Poviem vám tiež o všetkých jemnostiach remeselného spracovania. Pripraviť sa. Budem „viesť“ veľmi jednoduchým jazykom, aby tomu každý rozumel, preto sa ospravedlňujem čitateľom, ktorí sú z takejto pedantnosti v rozpakoch a sami všetko dokonale vedia.

Tým trpezlivejším ďakujem za pochopenie. Začnime.

Čo je potrebné dosiahnuť, aby bola fotografia skutočne transparentná?

Priehľadnosť na obrázku sa zvyčajne zobrazuje takto. Ak ho vidíte na Google, znamená to, že obrázok sa dá bez problémov stiahnuť a keď sa tento objekt prekryje na iné pozadie, farba sa nezmení.

Ako vidíte, táto kontrola sa nezobrazí, ak sa obrázok vo vyhľadávaní odráža v miniatúre. Musíte kliknúť na obrázok a otvoria sa ďalšie informácie.

Pozri, skopíroval som tento nákres a vložil som ho do fotografie poľa. Nebudem rozoberať, ako som to presne urobil, na tom teraz nezáleží. Najdôležitejšie je, že vidíte všetky časti poľa, kocky sa zdajú byť vystrihnuté a prekryté na obrázku.

Ak by som vo vyhľadávaní nenašiel fotku so šachovnicou, ilustrácia by vyzerala úplne inak. Pozadie bude biele a obdĺžnikové.

prečo je to tak? Táto šachovnica je všeobecne akceptovaný znak; ak ho vidíte, znamená to, že v tejto časti ilustrácie nie je vôbec žiadna farba a po prekrytí uvidíte spodnú časť kresby. Priehľadnosť sa zobrazuje rovnakým spôsobom. Ak potrebujete z fotografie odstrániť pozadie, musíte sa uistiť, že namiesto farby uvidíte tento cenný vzor. Dáma.

Ako správne ukladať priehľadné obrázky

Všetci sme zvyknutí na tento formát fotografií ako jpeg. Niektorí ľudia ani nevedia, že iní existujú. Nerozumie však tomu, čo je transparentnosť. Aby ste si mohli stiahnuť a uložiť „správne“ fotografie do počítača, budete musieť pochopiť a zapamätať si nový formát - png.

Vidíte, že okrem kontroly na Google môžete takmer vždy vidieť túto kombináciu písmen spolu s potrebnými obrázkami.

Potom vyberte požadovaný typ súboru, png, a máte hotovo. Je k dispozícii v akejkoľvek verzii. Ak to nevidíte, pozrite sa pozornejšie. Bez neho to nejde. Dôveruj mi.

Prečo bolo potrebné vymyslieť iný formát? Ide o to, že populárny jpeg nerozumie tomu, čo je transparentnosť. Zmení ho na svoju obvyklú bielu.

Ako sa zbaviť pozadia: jednoduchý a pomerne rýchly spôsob bez zbytočných problémov

V mojom blogu nájdete článok, v ktorom ukazujem 4 nástroje a poskytujem video, v ktorom nájdete 3 spôsoby, ako sa zbaviť pozadia v kresbe (). V prípade záujmu si ho môžete prečítať. Teraz by som vám rád ukázal ešte jednu techniku, pretože verím, že bez nej by článok nebol kompletný. Nikdy nevieš, niekto nebude chcieť surfovať na mojom blogu. A tu je všetko na jednom mieste.

Takže otvorte obrázok.

Nájdite nástroj „Vymazávanie pozadia“. Ak ho nemôžete nájsť, podržte niekoľko sekúnd myš a ľavé tlačidlo stlačené na tlačidle bežnej gumy. Otvorí sa požadovaný nástroj. Môžete ho pridať kliknutím naň.

Môžete zväčšiť priemer gumy, aby bolo vymazávanie pohodlnejšie.

Teraz sa pohrajte s nepotrebnými prvkami na obrázku. Uvidíte, ako sa šachovnica začne objavovať a farba zmizne!

Dúfam, že po dokončení nebudete mať otázku, v akom formáte uložiť spracovaný výkres. Samozrejme PNG.

Túto metódu vymazania nemožno nazvať najlepšou a neuveriteľne pohodlnou. Preto vám odporúčam, aby ste ešte venovali pozornosť môjmu predchádzajúcemu článku, ktorý je celý venovaný tejto téme.

A ak máte záujem o prácu vo Photoshope, potom vám radím, aby ste na tom začali zarábať! Existuje dopyt. Môžete jednoducho skúšať, spracovávať obrázky a robiť veľa zaujímavých vecí. Verte mi, je to naozaj potrebné. Môžete sa o tom presvedčiť na niekoľkých nezávislých stránkach.

Myslíš si, že to nezvládneš, alebo si na tieto sračky príliš starý? Nedostatok času? Verte mi, sú to všetko smiešne výhovorky. Som právnik a zarábam dosť, ale...máš nejaký koníček, obľúbený koníček? Žiješ život naplno? Naozaj sa nenudíš?

Čokoľvek viete a čo vás zaujíma. Internet otvára množstvo nových príležitostí. Vpustite zmeny do svojho života. Ak vás peniaze nezaujímajú, je to ešte lepšie. To dáva vášmu projektu väčšiu šancu stať sa drahým, cool a úspešným. Všetci známi ľudia nepracujú pre zisk, ale preto, lebo milujú to, čo robia. Málokedy to niekto z nich nazýva „práca“.

Uplynula doba, keď ľudia trávili väčšinu času pri počítači alebo televízii. Teraz sa každý rozvíja, zlepšuje niektoré svoje zručnosti a zdieľa s ľuďmi to, čo vie. V skutočnosti to tak bolo vždy, len sa zväčšila mierka.

Mimochodom, nedávno som čítal tajomstvá dlhovekosti kaukazských horalov. Jednou zo zásad je, že mladšia generácia k nim neustále prichádza po radu v niektorých dôležitých otázkach. Starí ľudia sa cítia potrební, a preto neprežívajú žiadne negatívne emócie týkajúce sa staroby. Na Kaukaze nie je strach zo starnutia.

Mimochodom, pozitívny prístup je ďalším ich tajomstvom. Starší tvrdia, že nikto nechce komunikovať s nahnevanými, podráždenými a nudnými ľuďmi, ktorí nemajú žiadne zaujímavé koníčky, a preto je tento životný štýl mimoriadne nerentabilný, najmä v starobe.

Urobte niečo nové. Ak máte radi Photoshop, venujte pozornosť kurzu Zinaidy Lukyanovej - “ Photoshop od začiatku“ a ovládaš to dokonale. Veľmi rýchlo budete mať ziskový koníček. Nie je to do dizajnu? Venujte tomu pozornosť a vytvorte si vlastné projekty.


Ak sa vám tento článok páčil a dokonca som vás trochu zaujal, prihláste sa na odber noviniek. Aj keď nie teraz, dajte si šancu urobiť niečo nové. Pošlem vám svoje publikácie o tom, ako môžete zarobiť peniaze na internete.

Možno vás jeden z nich inšpiruje k niečomu novému a zatiaľ neznámemu. Uvedomíte si, že je to zaujímavé a chcete to vyskúšať sami, a potom... ktovie, čo sa stane potom?

Premení sa váš koníček na niečo viac alebo výsledok svojej práce jednoducho ukážete svojim priateľom, aby ste získali ich chválu a obdiv? Na rozdiel od mnohých vstanete z pohovky a urobíte niečo, čo vás posunie za hranice vašich obvyklých možností. Budete sa snažiť zmeniť svoj život. To je veľmi chvályhodné.

Úprimne vám želám veľa úspechov vo vašom snažení a dúfam, že toto stretnutie nebude naše posledné.

Najčastejšie sa vyžaduje priehľadné pozadie na prekrytie jednej časti obrázka na inú alebo na ilustráciu samotnú. Bezfarebné pozadie sa aktívne používa pri navrhovaní webových stránok. Mnoho fotografií v internetových obchodoch vyžaduje aj bielu farbu za hlavným obrázkom, čo sa dá dosiahnuť len použitím priehľadnej, keďže fotoaparát nedokáže vytvoriť čisto biele pozadie farby RGB 255 255 255.

Pomocou čarovného prútika

Najjednoduchší spôsob, ako vytvoriť priehľadné pozadie vo Photoshope CS6 a nových verziách, je použiť nástroj „čarovná palička“. Nasledujú pokyny krok za krokom:

Guma

Nástroj magická guma podobné farby odstráni, navyše vrstvu pozadia automaticky prevedie na normálnu. Nižšie sú uvedené podrobné pokyny na vytvorenie priehľadného pozadia pre obrázok:


  • Ďalej môžete použiť bežnú gumu na odstránenie zvyškov pozadia a dokončenie úprav, čo vám umožní vytvoriť obrázok na priehľadnom pozadí.
  • Výmena pozadia

    Táto funkcia vám umožňuje nahradiť pozadie alebo ho dokonca spriehľadniť. Podrobný návod na jeho použitie:

    Ako uložiť obrázok bez pozadia vo Photoshope

    Obrázok bez pozadia nie je možné uložiť v bežnom formáte JPEG, po uložení ilustrácie sa pozadie vytvorí automaticky. Ak chcete uložiť požadovanú ilustráciu s priehľadným pozadím, musíte použiť formát PNG. Ak ho chcete použiť, musíte postupovať podľa cesty: súbor - uložiť ako - určiť typ pri ukladaní ako PNG.