Vytvořte kulaté okraje ve Photoshopu. Vytváření zaoblených rohů obrázků ve Photoshopu. Rychlý způsob, jak doplnit fotografii

Zaoblené rohy na fotografii vypadají docela zajímavě a atraktivně. Nejčastěji se takové obrázky používají při vytváření koláží nebo vytváření prezentací. Obrázky se zaoblenými rohy lze také použít jako miniatury pro příspěvky na webu. Možností využití je mnoho, ale je jen jeden způsob (správný), jak takovou fotku získat. V tomto tutoriálu vám ukážeme, jak zaoblit rohy ve Photoshopu.

Zaoblení rohů ve Photoshopu

K dosažení výsledku používáme jeden z nástrojů skupiny "tvary" a pak jen odstraňte vše nepotřebné.

1. Otevřete fotografii ve Photoshopu, kterou chcete upravit.

   

2. Poté vytvořte kopii vodopádové vrstvy s názvem "Pozadí". Chcete-li ušetřit čas, používejte klávesové zkratky CTRL+J. Kopie je vytvořena, aby zůstal původní obrázek nedotčený. Pokud se (najednou) něco pokazí, můžete odstranit neúspěšné vrstvy a začít znovu.

   

3. Jdeme dál. A pak potřebujeme nástroj "Obdélník se zaoblenými rohy".

   

   V tomto případě nás zajímá pouze jedno z nastavení – poloměr zaoblení. Hodnota tohoto parametru závisí na velikosti obrázku a potřebách. Hodnotu nastavíme na 30 pixelů, výsledek tak bude lépe viditelný.

   

4. Dále na plátno nakreslete obdélník libovolné velikosti (později upravíme měřítko).

   

5. Nyní musíte výslednou postavu natáhnout přes celé plátno. Volání funkce "Volná transformace" klávesové zkratky CTRL+T. Na tvaru se objeví rámeček, který můžete použít k přesunutí, otočení a změně velikosti objektu.

   

6. Zajímá nás škálování. Natáhněte postavu pomocí značek naznačených na snímku obrazovky. Po dokončení změny velikosti klikněte ENTER.

   

   rada: abyste škálovali co nejpřesněji, tedy aniž byste překročili plátno, musíte povolit tzv. "Vazba". Podívejte se na snímek obrazovky, který ukazuje, kde se tato funkce nachází. Způsobuje, že se objekty automaticky „přilepí“ k podpůrným prvkům a okrajům plátna.

   

7. Dále musíme vybrat výsledný obrázek. Chcete-li to provést, podržte klávesu CTRL a klikněte na miniaturu vrstvy s obdélníkem.

   

8. Jak vidíte, kolem postavy se vytvořil výběr. Nyní přejděte do vrstvy kopírování a odeberte viditelnost z vrstvy s tvarem (viz snímek obrazovky).

   

9. Vrstva vodopádu je nyní aktivní a připravená k úpravám. Úprava spočívá v odstranění nepotřebných věcí z rohů obrázku. Invertování výběru pomocí klávesových zkratek CTRL+SHIFT+I. Nyní zůstává výběr pouze na rozích.

   

Dlouho jsem hledal, jak zaoblit rohy pomocí Adobe Photoshop, ale vše je někde vynecháno, nebo je to špatně napsané. Jak se ukázalo, zaoblení rohů jakéhokoli obrázku nezabere déle než 30 sekund, přirozeně poté, co se naučíte, jak na to.

A tak, abyste mohli provést tak jednoduchou operaci, musíte spustit aplikaci a vložit obrázek, který potřebujeme do programu, nebo použít Menu->Soubor->Otevřít->Potřebný obrázek.jpg přírody.

Věnujte pozornost pravému dolnímu rohu, ve „Vrstvy“ se objevil obrázek na pozadí, musí být převeden na vrstvu. Chcete-li to provést, klikněte pravým tlačítkem myši na pozadí a vyberte „Vrstva z pozadí“.

V důsledku této akce bude naše pozadí převedeno na vrstvu.

Vytvořte duplikát obrázku kliknutím pravým tlačítkem na Vrstvu 0 a výběrem „Vytvořit duplicitní vrstvu“.

Obrázek2

Skryjte "Vrstvu 0" z pracovní oblasti. Chcete-li vrstvu skrýt, klikněte na ikonu OČI vedle názvu vrstvy.

Vyberte požadovanou část obrázku.

Jakmile označíte požadovanou část obrázku obdélníkem, klikněte pravým tlačítkem do výběru a vyberte „Vytvořit vybranou oblast“.

V dialogovém okně klikněte na tlačítko OK, ale nedotýkejte se prolnutí.

Velmi důležitý bod! Vyberte Layer 0 (Copy) a poté stiskněte tlačítko DELETE na klávesnici. Vrstva 0 (kopie) by měla být vybrána běžným kliknutím myši.

Pokud je vše provedeno správně, ve Photoshopu uvidíte něco takového. Nyní si můžete obrázek uložit například ve formátu png a užít si umělecké dílo.

Je tu ještě jeden bod: pokud je vyříznutý kus dvakrát nebo dokonce 3krát menší než původní obrázek, bude mít velkou prázdnou plochu, kterou je třeba odstranit. Chcete-li to provést, vyberte řezací nástroj a vyberte oblast obrázku bez prázdné oblasti.

Poté přejděte do nabídky Úpravy->Kopírovat.

Přejděte do nabídky Soubor->Nový a klikněte na OK. Program automaticky upraví šířku a výšku plátna vybrané oblasti obrazu.

V novém projektu „Unnamed 1“ a automaticky se v něm ocitneme, přejděte do nabídky Úpravy->Vložit.

Nejlepší způsob, jak uložit obrázek, je použít možnost „Uložit pro web“. Za prvé můžete ručně vybrat kvalitu obrázku v procentech a za druhé bude velikost obrázku několikanásobně menší než při uložení obvyklým způsobem.

A co jsme jako výsledek dostali?

Pro ty, kteří nechápou, jak se mi podařilo zakroutit rohy, jsem speciálně natočil video, které vám s tímto jednoduchým úkolem pomůže.

V tomto rychlém návodu vám ukážu, jak můžete ve Photoshopu vytvořit zaoblené rohy pomocí jednoduchých maskovacích technik a filtrů.

Poloměr rohu můžete upravit tak, aby zaoblil okraj vašeho tvaru, textu atd. Jedná se o rychlou a snadnou metodu, která vytvoří zaoblené rohy. K jejich vytvoření můžete použít masku vrstvy.

Pomocí řady jednoduchých kroků ve Photoshopu můžete vytvořit zaoblený obdélník. Photoshop nemá filtr ani žádný nástroj k okamžitému vytvoření kulatého rohu, ale můžete to udělat pomocí Illustratoru. Umožní vám vytvořit efekt zaobleného rohu pro téměř každý objekt. V něm musíte jít do nabídky Efekty > Stylizace > Zaoblené rohy(Efekty > Stylizovat > Zaoblené rohy).

Krok 1

V tomto rychlém návodu vám ukážu jednoduchou metodu, jak ve Photoshopu vytvořit zaoblené rohy pomocí rastrovaného textu, tvaru nebo obrázku. Vezměme si vektorový obrázek hvězdy s ostrými rohy (tato metoda bude dobře fungovat i s pravými úhly).

Krok 2

Nyní musíte vrstvu rastrovat. Chcete-li to provést, klepněte pravým tlačítkem myši na miniaturu hvězdné vrstvy v paletě vrstev a vyberte z kontextové nabídky Rastrovat vrstvu(Rasterizovat vrstvu). Totéž byste měli udělat, pokud používáte textovou vrstvu.

Krok 3

Přejděte do nabídky Filtr > Rozostření(Filtr > Rozostření) a vyberte Gaussovské rozostření(Gaussovské rozostření). Poloměr rozostření bude záviset na velikosti vašeho obrázku a výsledku, kterého chcete dosáhnout. Zvolím poloměr 5 pixelů.

Krok 4

Podržte klávesu Ctrl a kliknutím na miniaturu vrstvy aktivujte výběr obrázku. Dále přejdeme do menu Výběr a vybrat si Zpřesnit okraj(Vyberte > Upřesnit okraj). S parametry můžete experimentovat Antialiasing(hladké) a Stínování(Feather) pro výběr požadovaného efektu. Kontrast(Kontrast) udělejte to 100.

Krok 5

Vezměte barvu tvaru, v našem případě je žlutá a vyplňte celý výběr touto barvou. To lze provést stisknutím kombinace kláves „Shift + F5“.

Krok 6

Bez odstranění výběru musíte přidat masku vrstvy kliknutím na ikonu, která se nachází ve spodní části palety vrstev. To je vše, nyní má hvězda zaoblené rohy.

K vytvoření textu se zaoblenými rohy můžete použít stejnou metodu, jak je znázorněno na obrázku níže. Nyní si můžete vymyslet vlastní písmo.

Tradiční pravoúhlé rohy v designu webových stránek už každého dávno omrzely. V módě jsou zaoblené rohy, které se nedělají pomocí obrázků, ale prostřednictvím stylů, pro které se používá vlastnost border-radius. Tato vlastnost může mít jednu, dvě, tři nebo čtyři hodnoty oddělené mezerou, které určují poloměr všech rohů nebo každého jednotlivě.

V tabulce 1 ukazuje jiný počet hodnot a typ bloku, který je v tomto případě získán.

Kód	Popis	Pohled
div ( border-radius: 10px; )	Poloměr zaoblení pro všechny rohy najednou.
div ( border-radius: 0 10px; )	První hodnota nastavuje poloměr levého horního a pravého dolního rohu, druhá hodnota nastavuje poloměr pravého horního a levého dolního rohu.
div ( border-radius: 20px 10px 0; )	První hodnota nastavuje poloměr levého horního rohu, druhá - pravý horní i levý dolní a třetí hodnota - pravý dolní.
div ( border-radius: 20px 10px 5px 0; )	Postupně nastavuje poloměr levého horního, pravého horního, pravého dolního a levého dolního rohu.

Příklad 1 ukazuje, jak vytvořit blok se zaoblenými rohy.

Příklad 1. Rohy bloku

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Výsledek tohoto příkladu je znázorněn na Obr. 1.

Rýže. 1. Blok se zaoblenými rohy

Zajímavého efektu lze dosáhnout, pokud nastavíte poloměr zaoblení na větší než polovinu výšky a šířky prvku. V tomto případě získáte kruh. Příklad 2 ukazuje, jak vytvořit kulaté tlačítko s obrázkem.

Příklad 2: Kulaté tlačítko

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Výsledek tohoto příkladu je znázorněn na Obr. 2.

Rýže. 2. Kulaté tlačítko

V prohlížeči Opera zaokrouhlení na se použije nesprávně, pokud není ohraničení specifikováno prostřednictvím vlastnosti border.

Vlastnost border-radius lze kombinovat s dalšími vlastnostmi, například přidáním stínu k prvku. V příkladu 3 je vytvořena sada kruhů, z nichž jeden je zvýrazněn pomocí box-shadow . Tuto sadu lze použít k procházení stránkami nebo fotografiemi.

Příklad 3. Záře

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Výsledek tohoto příkladu je znázorněn na Obr. 3.

Rýže. 3. Záře kolem kruhu

Pomocí border-radius můžete vytvořit nejen kružnici, ale také elipsu a také eliptické zaoblení bloku. Chcete-li to provést, musíte napsat ne jednu hodnotu, ale dvě, oddělené lomítkem. Zápis 20px/10px znamená, že horizontální poloměr zaoblení bude 20 pixelů a vertikální poloměr bude 10 pixelů. Příklad 4 ukazuje, jak vytvořit eliptické rohy pro přidání popisku ve stylu komiksu k fotografii.

Příklad 4: Elipsy

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Jste svým vlastním učitelem

Výsledek tohoto příkladu je znázorněn na Obr. 4.

Rýže. 4. Použití eliptických rohů

Můžete také změnit vzhled rohů na obrázcích přidáním vlastnosti border-radius do selektoru img, jak je znázorněno v příkladu 5.

Příklad 5: Obrázky

HTML5 CSS3 IE 9+ Cr Op Sa Fx