Jak zaoblit ostré rohy ve photoshopu. Jak zaoblit rohy obrázku pomocí Photoshopu
Tradiční pravoúhlé rohy v designu webových stránek už dávno všechny omrzely. V módě jsou zaoblené rohy, které se dělají nikoli 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é mezerami, 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 pravý horní a levý dolní roh. |  |
| div ( border-radius: 20px 10px 0; ) | První hodnota nastavuje poloměr levého horního rohu, druhá hodnota nastavuje současně poloměr pravého horního a levého dolního rohu a třetí hodnota nastavuje pravý dolní roh. |  |
| div ( border-radius: 20px 10px 5px 0; ) | Postupně nastavuje poloměr levého horního rohu, 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. Blokové rohy
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 nastavením poloměru zaoblení na více 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
Vlastnost border-radius lze také kombinovat s dalšími vlastnostmi, jako je přidání stínu k prvku. Příklad 3 vytvořil sadu kruhů, z nichž jeden je zvýrazněn stínem rámečku . Takovou sadu lze použít k procházení stránek nebo fotografií.
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 na bloku vytvořit nejen kružnici, ale také elipsu a také eliptické zaoblení. Chcete-li to provést, musíte napsat ne jednu hodnotu, ale dvě přes lomítko. Zápis 20px/10px znamená, že horizontální poloměr bude 20 pixelů a vertikálně 10 pixelů. Příklad 4 ukazuje, jak vytvořit eliptické rohy pro přidání komiksového titulku k fotografii.
Příklad 4. Elipsy
HTML5 CSS3 IE 9+ Cr Op Sa Fx
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ů obrázků přidáním vlastnosti border-radius do selektoru obrázku, jak je znázorněno v příkladu 5.
Příklad 5 Obrázky
HTML5 CSS3 IE 9+ Cr Op Sa Fx
V tomto krátkém článku se na to podíváme příklad vytvoření "tenkého" rámečku ve Photoshopu o tloušťce 1 - 2 pixely se zaoblenými hranami. Tyto rámce (a jejich fragmenty) jsou široce používány designéry a webmastery při rozvržení rozvržení a vytváření šablon pro webové stránky. Používají se k orámování článků, menu, tlačítek atd.
Takže začneme:
1. Vytvořme nový dokument (Horní menu "Soubor" - "Nový") s rozměry např. 500 x 500 pixelů. Obsah pozadí: průhledný.
2. Přejděte na Panel nástrojů (umístěný vlevo), vyberte nástroj Obdélníkový výběr (M). Na našem dokumentu nakreslíme obdélníkovou oblast. Možnosti nástroje obdélníkový výběr: Nový výběr, Prolnutí: 0 px, Styl: Normální (obr. 1) .
3. V horním menu vyberte záložku "Výběr" - "Úpravy" - "Optimalizace" (obr. 2). Vezměme si hodnotu poloměru například rovnou 20 pixelům. Klikněte na "Ano". Vidíme, že rohy námi vybraného obdélníku jsou zaobleny o hodnotu zvolené hodnoty (20 pixelů) (obr. 3) .
4. V horním menu zvolte "Edit" - "Stroke". Nastavte možnosti tahu. Šířka: 2px (pro přehlednost). Vezmeme trochu červené barvy. Na stejné záložce nastavte: "Pozice vzhledem k okraji: střed (můžete zvolit hodnoty "uvnitř" a "vně")", "Překrytí: Normální režim", "Neprůhlednost: 100%", "Zachovat průhlednost" : prázdný". Klikněte na tlačítko "Ano" (obr. 4). Odstraňte výběr - stisknutím kombinace kláves na klávesnici "Ctrl + D" získáte rámeček, který potřebujeme, tloušťku 2 pixely, červený se zaoblenými hranami (obr. 5). Nyní lze jeho fragmenty nebo celý rám použít k ozdobení jakékoli šablony, banneru atd.
 |
 |
| Rýže. 1 | Rýže. 2 |
 |
 |
| Rýže. 3 | Rýže. 4 |
 |
 |
| Rýže. 5 | Rýže. 6 |
Pro příklad a lepší vizualizaci jsem vytvořil novou vrstvu vyplněnou bílou, přesunul ji pod vrstvu s naším rámečkem a vytvořil několik dalších podobných rámečků s rozmazanou tloušťkou, barvami a zaoblenými rohy (obr. 6).
V této části mých stránek jsem se rozhodl umístit lekce photoshopu, který se vám může hodit při tvorbě designu webových stránek. Myslím, že z mé strany by nebylo zbytečné, než se začnu učit Photoshop, abych vám to představil klávesové zkratky photoshopu. Použitím klávesové zkratky photoshopu usnadníte si práci a ušetříte čas. .
Můj první Photoshop tutoriál vám poví jak kulaté rohy fotografie.
Při tvorbě webových stránek se člověk často musí potýkat s problémem, jak zaoblit rohy obrázku nebo jak kulaté rohy fotografie. V této lekci photoshop Naučím vás jak kulaté rohy vtahovat se photoshop. Také tento Lekce Photoshopu vám umožní kulaté rohy fotky. Doufám, že je vám to jasné. Přece pro photoshop a obrázek a fotografie jsou stejné. Při své práci používám Adobe. photoshop SC5, ruská verze. No, já nejsem dobrý v jazycích.
Dnešní lekce je o zaoblení rohů fotografie ve Photoshopu. Pojďme se společně vyfotit se zaoblenými rohy jako na mém obrázku.
1. Provést zaoblení rohů ve photoshopu, otevřít s photoshop obrázek, který potřebujeme. Jednu z fotek jsem například vzal ze svého fotoarchivu.
2. Rozměry obrázku uvedeme na parametry, které potřebujeme. Chcete-li to provést, stiskněte ALT + CTRL + I. Otevře se okno Velikost obrázku. Nastavíme rozměry, které potřebujeme. Můžete také jednoduše oříznout obrázek na požadovanou velikost.
3. Vyberte obrázek (CTRL+A) (po obvodu se objeví tečkovaná čára) a zkopírujte jej (CTRL+C); Fotku zkopírujeme tak, aby původní obrázek zůstal nezměněn, zveřejněte, jak budeme implementovat zaoblení rohů ve photoshopu. Sice se dá pracovat na originálu, ale až budou hotové zaoblené rohy, fotku prostě uložíme jako další obrázek.
4. Otevřete nové okno (CTRL + N), nastavte požadované rozměry obrázku a klikněte na "OK". Upozorňujeme, že pozadí jsem nastavil na "průhledné". Můžete okamžitě nastavit pozadí barvy, kterou požadujete;
5. Vložte zkopírovaný obrázek do nového okna (CTRL+V) a vytvořte novou vrstvu (CTRL+SHIFT+N). V této vrstvě pomocí nástroje Obdélník zaoblené rohy"nakreslete obdélník požadované velikosti. Na barvě obdélníku nezáleží. Nástroj se vybírá stisknutím pravého tlačítka myši. Nebo jednoduše stisknutím klávesy (U). Poloměr zakřivení nastavte podle svého uvážení (viz. obrázek níže);
V případě potřeby můžete nakreslenou postavou pohybovat pomocí šipek na klávesnici nebo pomocí myši při stisknuté levé klávese. Nejprve si nezapomeňte aktivovat „pohyb“ na nástrojové liště (horní tlačítko). Můžete také změnit velikost postavy. Chcete-li to provést, stiskněte (CTRL + T) a pomocí myši roztáhněte tvar na požadovanou velikost, zatímco držíte levou klávesu. Pokud chcete změnit velikost při zachování proporcí, musíte podržet klávesu SHIFT a táhnout za roh tvaru.
6. Přejděte na panel vrstev. Podržte CTRL a klikněte levým tlačítkem myši na náhled (obrázek) vrstvy obdélníku. Objeví se tečkovaný obrys tvaru.
7. Přejděte na spodní vrstvu. Chcete-li to provést, klikněte na pravé straně obrázku na panelu vrstev. V našem případě vrstva 1. Modrý výběr přejde na vrstvu 1.
8. Stiskněte CTRL + SHIFT + I. Podél okraje té části obrázku, která je mimo náš obdélník, se objeví tečkovaný výběr zaoblené rohy.
9. Stiskněte DEL na klávesnici. Část obrázku, která je mimo obdélník, bude odstraněna.
10. Znovu aktivujte vrstvu obdélníku. Smažte jej kliknutím na ikonu koše.
11. Stiskněte klávesu "M" a klikněte levým tlačítkem myši kdekoli v obrázku. Výběr byl odstraněn. připraveno. Můžete uložit obrázek, který jsme obdrželi zaoblení rohů ve photoshopu ve formátu, který potřebujeme.
Pokud bude takový obrázek použit k vytvoření návrhu webu, uložte jej pro Web a zařízení (ALT+SHIFT+CTRL+S).
12. Pozor! Pokud máte na okrajích obrázku s zaoblené rohy zůstávají průhledné pixely, je třeba provést oříznutí. Chcete-li to provést, klikněte na "Obrázek", vyberte "Ořezání", v okně, které se objeví, nastavte nastavení jako na mém obrázku a klikněte na "Ok". Velikost plátna se změní na velikost obrázku a všechny nadbytečné průhledné pixely budou odstraněny.
The lekce photoshopu lze použít jak pro oválné fotografie, tak pro kudrnaté fotografie. Chcete-li to provést, v kroku 5 namísto nástroje „obdélník s zaoblené rohy"vyberte nástroj" elipsa "," polygon "nebo" libovolná postava ". Poté provedeme všechny akce, které jsme udělali, abychom získali zaoblení rohu.
Dlouho jsem hledal, jak zaoblit rohy pomocí Adobe Photoshopu, ale všude někde nedopíšou, nebo je to napsané špatně. Jak se ukázalo, zaoblení rohů jakéhokoli obrázku nebude trvat déle než 30 sekund, samozřejmě poté, co se naučíte, jak na to.
A tak, aby bylo možné provést tak jednoduchou operaci, je třeba spustit aplikaci a hodit obrázek, který potřebujeme dovnitř programu, nebo použít Menu->Soubor->Otevřít->Požadovaný obrázek.jpg. Použiji obvyklý obrázek přírodní.
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 duplicitní obrázek kliknutím pravým tlačítkem myši na vrstvu 0 a výběrem možnosti "Duplikovat vrstvu".
Obrázek2
Skryjte "Vrstvu 0" z pracovního prostoru. Chcete-li vrstvu skrýt, klikněte na ikonu EYE 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 výběr".
V dialogovém okně stiskněte tlačítko OK, 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 normálním kliknutím myši.
Pokud je vše provedeno správně, ve Photoshopu uvidíte něco jako tento obrázek. 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ě jedna věc, pokud je vyříznutý kus dvakrát nebo dokonce 3krát menší než původní obrázek, bude mít velkou prázdnou plochu, musí se smazat. Chcete-li to provést, vyberte nástroj pro vnoření 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 „Bez názvu 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ž když jej uložíte obvyklým způsobem.
A k čemu jsme nakonec dospěli.
Pro ty, kteří nechápou, jak se mi podařilo zaoblit 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á vám umožní vytvořit zaoblené rohy. K jejich vytvoření můžete použít masku vrstvy.
Pomocí řady jednoduchých kroků ve Photoshopu budete schopni vytvořit obdélník se zaoblenými rohy. Photoshop nemá žádný filtr ani 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 téměř na každém předmětu. V něm musíte jít do nabídky Efekty > Styly > Zaoblené rohy(Efekty > Stylizovat > Zaoblené rohy).
Krok 1
V tomto rychlém návodu vám ukážu jednoduchou metodu, jak získat zaoblené rohy ve Photoshopu pomocí rastrovaného textu, tvaru nebo obrázku. Vezměme 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 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řejděte do nabídky Výběr a vybrat si Upřesněte Edge(Vyberte > Upřesnit okraj). S možnostmi můžete experimentovat Vyhlazování(hladké) a Peří(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 umístěnou ve spodní části palety vrstev. To je vše, nyní má hvězda zaoblené rohy.
Stejnou metodu můžete použít k vytvoření textu se zaoblenými rohy, jak je znázorněno na obrázku níže. Nyní si můžete vymyslet vlastní písmo.