Průhledná barva ve Photoshopu. Jak udělat barvu průhlednou ve Photoshopu? Nastavit průhlednost pro css pozadí

Jak nastavit průhlednou barvu v css? V současnosti existují 3 způsoby, jak toho dosáhnout.

Metoda 1 - transparentní hodnota

Pokud nastavíte barvu textu nebo pozadí na průhlednou , barva bude zcela průhledná, tedy neviditelná. Příklad:

barva:transparentní;

Takový text nebude na stránce viditelný.

Metoda 2 - barevný režim rgba

A to je již inovace css3. Dříve ve vývoji webu žádný takový režim neexistoval, existoval pouze rgb. Jistě víte, jak se v tomto formátu píše barva. Chcete-li to provést, musíte zadat tři hodnoty v závorkách od 0 do 255, které označují sytost jedné ze tří základních barev (červená, zelená, modrá). Například:

Pozadí: rgb(230, 121, 156);

Formát rgba se nijak neliší, přidává se pouze čtvrtá hodnota - stupeň průhlednosti prvku od 0 do 1. Obecně se tento formát zápisu používá především k nastavení poloprůhledné barvy, a ne zcela průhledné. Pro dosažení plné průhlednosti stačí napsat 0 jako čtvrtou hodnotu.

Pozadí: rgba(0, 0, 0, 0);

V tomto případě zbývající 3 číslice nehrají zvláštní roli.

Průsvitnou barvu lze nastavit, pokud je čtvrtý parametr nastaven na hodnotu od 0,01 do 0,99. O nastavení průsvitnosti pro pozadí už O něco málo psal v , můžete si to přečíst, pokud vás to zajímá.

Metoda 3 - neprůhlednost

Další vlastnost z technologie css3. Ale hned vás chci upozornit, že to funguje trochu jinak. S neprůhledností je průhlednost nastavena na celý blok, na který je aplikována. Zhoršuje se tak čitelnost textu a vnímání obrázků. Smysl tedy vidím v použití vlastnosti pouze u bloků, ve kterých není text a nějaké další informace. Hodnoty lze nastavit od 0 do 1, jako v případě čtvrtého parametru při zadávání barvy ve formátu rgba.

Obecně, v tuto chvíli jsou to všechny způsoby, které znám, jak nastavit průhlednou barvu v css. Proč je to nutné, je jiná otázka. Přes průhledné pozadí je vidět, co je pod ním. Někdy je to potřeba udělat tak designově. Obecně je dnes technika s průsvitem velmi běžná.

Průhledné pozadí (pozadí)

Jak možná víte, pozadí je vlastnost CSS, která vám umožňuje nastavit barvu pozadí nebo nahrát obrázek, který bude sloužit jako pozadí.

Nastavit průhlednost pro css pozadí

To vše se tedy děje velmi jednoduše díky takovému formátu záznamu barev, jako je rgba . Pokud pracujete s grafickými editory, pak asi víte, že barevný režim rgb se dekóduje následovně: podíl červené (červená), podíl zelené (zelená) a modré (modrá). Takže rgba je skoro to samé, jen je přidán jeden parametr navíc – průhlednost. Píše se to takto:

Barva pozadí: rgba (173, 57, 22, 0,5)

Nejprve výslovně naznačíme, že nastavujeme barvu v režimu rgba. Poté označíme hodnoty sytosti tří základních barev od 0 do 255, kde 255 je nejvyšší sytost. Čtvrtým parametrem je naše transparentnost. Zde se zapisuje hodnota od 0 do jedné. 1 je zcela neprůhledný prvek a 0 je zcela průhledný prvek. Pokud tedy nastavíte hodnotu 0, barva pozadí nebude vůbec viditelná.

Nyní víte, jak nastavit průhlednost pro vlastnost pozadí v css. Chcete-li to provést, musíte použít barevný režim rgba. Existuje také vlastnost neprůhlednosti, ale vztahuje se na celý prvek jako celek. To znamená, že při použití neprůhlednosti lze na text použít i průhlednost, čímž se stane nečitelným.

Příklad průhledného pozadí

Výhody průsvitného pozadí lze snadno ukázat na příkladu. Máme například obecné pozadí stránky. Takto by blok vypadal, kdyby dostal plnou černou barvu:

A nyní nastavme bloku stejnou černou barvu, ale určete ji pomocí barevného formátu rgba, přičemž jako poslední hodnotu uvedeme například 0,7. Dopadne to takto:

Nyní je pozadí bloku průsvitné a je přes něj viditelný obrázek na pozadí. Tento obrázek a pozadí jsou pouze ilustrační. Jak víte, průhlednost pozadí v css se může hodit, když potřebujete, aby pozadí vnořeného prvku prosvítalo, aniž by zakrývalo ostatní pozadí umístěná v jiných vrstvách.

Samotnou barvu není těžké nastavit pomocí rgba. Jak již bylo zmíněno, první tři písmena znamenají tři základní barvy: červenou, zelenou a modrou, respektive jejich podíl (od 0 do 255). Nastavením různých hodnot můžete získat miliony různých barev a průsvitnost vám v případě potřeby umožní vymyslet spoustu krásných efektů pro web.

V některých případech se například při návrhu webu můžete setkat se situací, kdy pozadí obrázku nijak neladí s barvou samotného webu. Zřejmým řešením je zprůhlednit toto pozadí.

Budete potřebovat

- Adobe Photoshop.

Návod

Otevřete požadovaný obrázek v Adobe Photoshopu (položka nabídky „Soubor“ (Soubor) -> „Otevřít“ (Otevřít) nebo horké klávesy Ctrl + O). Klikněte na položku nabídky "Vybrat" (Vybrat) -\u003e "Rozsah barev" (Rozsah barev). Zobrazí se okno Rozsah barev.

Najděte položku "Vybrat", nachází se úplně nahoře v okně. Klikněte na to. V nabídce, která se otevře, můžete vybrat skupinu barev nebo tónů, které lze později zprůhlednit. Tito. pouze červené, pouze zelené, modré nebo pouze střední tóny, stíny atd. Pokud potřebujete ukázat a vybrat jednu barvu, uveďte v tomto odstavci "Podle vzorků".

Najděte položku "Scatter" (Fuzziness) - s ní můžete rozšířit škálu volitelných barev. Níže jsou položky "Vybraná oblast" a "Obrázek". Pokud vyberete první, pak se vybraná oblast zobrazí v náhledovém okně programu. Pokud je druhý, pak se obrázek zobrazí celý.

V pravé části okna jsou tři tlačítka s obrázkem pipet. Na prvním z nich je pouze pipeta, na druhém - pipeta s plusem a na třetím - s mínusem. Klikněte na první a klikněte v náhledovém okně nebo na samotný dokument na barvu, kterou chcete zprůhlednit. Vyberte "Vybraná oblast", abyste viděli, které části obrázku jsou vybrány.

Pokud chcete k vybrané barvě přidat další barvu, klikněte na „Pipette +“ a poté klikněte na tuto barvu. Pokud ji snížíte, pak postupujte stejně, jen pomocí „Pipety-“. Po výběru požadované barvy (nebo barev) klikněte na OK. Jak vidíte, vybrané barvy se v dokumentu zvýraznily.

V seznamu vrstev (pokud chybí, stiskněte F7) klikněte pravým tlačítkem na pozadí, v zobrazené nabídce vyberte "Z pozadí" a v dalším okně - okamžitě OK. Pozadí se změní na vrstvu. Stiskněte Delete na klávesnici. Vybrané oblasti se stanou průhlednými.

Hlavní věc je určit obrázek v počítači nebo telefonu a poté kliknout na tlačítko OK v dolní části této stránky. Ve výchozím nastavení je obyčejné pozadí obrázku nahrazeno průhledným. Barva pozadí původního obrázku se určí automaticky, stačí v nastavení určit, jakou barvou ji nahradit. Hlavním parametrem, který ovlivňuje kvalitu výměny, je "Intenzita výměny" a ta může být u každého obrázku jiná.

Příklad fotografie růžové růže beze změn a po nahrazení plného pozadí průhledným, bílým a zeleným:

První příklad s květem růže na průhledném pozadí se provádí s následujícím nastavením:
1) Intenzita výměny - 38;
2) Vyhlazení kolem okrajů - 5;
3) Vyměňte pevné pozadí za průhledné;
4) Oříznutí (<0) или Добавление (>0) podél okrajů - "-70";
5) Invertovat - zakázáno (nezaškrtnuto).

Pro tvoření druhý příklad, s bílým pozadím, bylo použito stejné nastavení jako v prvním příkladu, kromě parametru: "Nahradit obyčejné pozadí" - bílé. V třetí příklad, se zeleným pozadím, je také použito nastavení, jako v prvním příkladu, kromě parametru: "barva v hexadecimálním formátu" - #245a2d.

Původní obrázek se nijak nemění. Dostanete další zpracovaný obrázek s průhledným pozadím nebo pozadím, které určíte.