Zaokrąglone krawędzie w Photoshopie cs6. Jak zaokrąglać rogi obrazu za pomocą CSS bez Photoshopa

Wszyscy kochają odpowiednie kąty obrazów. Ale wciąż zdarza się, że te same rogi trzeba zaokrąglić. Wtedy ponownie przyjdzie ci z pomocą program Photoshop. W tym artykule przyjrzymy się jednemu z wielu sposobów, w jaki możesz to zrobić. Pamiętaj, że moja metoda polega również na niewielkim obcinaniu obrazu na krawędziach, jest to rodzaj poświęcenia w imię zaokrąglonych rogów.

Dla tych, którzy lubią większą przejrzystość, nagrałem samouczek wideo, który można obejrzeć na końcu tego samouczka. Zacznijmy więc zaokrąglać rogi obrazu:

Krok 1

Domyślnie wszystkie obrazy otwarte w programie Photoshop stają się obrazem tła. Photoshop nazywa tę warstwę jako „Tło”, a także blokuje ją przed niepotrzebną edycją. Sygnalizuje nam to mała ikona kłódki.

Aby odblokować taką warstwę, musisz ją dwukrotnie kliknąć. Pojawi się okno dialogowe Nowa warstwa. Niczego nie zmieniaj, po prostu kliknij OK. Zamek powinien teraz zniknąć.

Krok 5

W panelu warstw kliknij pierwszą warstwę z naszym oryginalnym obrazem i naciśnij skrót klawiaturowy Ctrl + Shift + I. W efekcie powinniśmy zaznaczyć cały obszar poza granicami naszego placu. Nazywa się . Przyjrzyj się bliżej, co się zmieniło:

Krok 6

Teraz naciśnij kombinację klawiszy Ctrl + X (edytuj - wytnij), aby usunąć zaznaczony obszar. Zaznaczenie powinno zniknąć, a tam, gdzie kiedyś był obraz, pojawi się tło szachownicy (przezroczystość).

Krok 7

Teraz zróbmy niewidoczną warstwę kształtu. Aby to zrobić, w panelu warstw kliknij ikonę oka naprzeciw warstwy z kwadratem. Oto oryginalny obraz z zaokrąglonymi rogami.

Krok 8

Uruchom polecenie Obraz - aby Photoshop usuwał całą dodatkową przestrzeń wokół obrazu. Dzięki temu tryb przezroczystości powinien być widoczny tylko w rogach.

W przyszłości, aby móc wykorzystać taki obraz, należy go zapisać w Format PNG! W takim przypadku rogi pozostaną przezroczyste. W przeciwnym razie, jeśli zapiszesz np. w formacie JPG, rogi automatycznie staną się z białym tłem.

Więc wszystko jest gotowe. Obraz z zaokrąglonymi rogami będzie wyglądał tak:

A jak zrobić tylko np. jeden zaokrąglony róg?

Bardzo prosta. Wróćmy do etapu, na którym rysowaliśmy kształt. Rozciągnij go tak, aby widzieć tylko jeden zaokrąglony róg, a pozostałe trzy były ukryte poza płótnem. Tutaj, a następnie postępuj zgodnie z instrukcjami powyżej. Wszystko jest takie samo.

Mam nadzieję, że instrukcje Ci pomogły i możesz zrobić coś fajnego! Powodzenia.

Jeśli zauważysz błąd w tekście, zaznacz go i naciśnij Ctrl + Enter. Dziękuję!

Wszystkie nowoczesne przeglądarki obsługują standardy znaczników hipertekstowych HTML5 i arkusze stylów CCS3. A jeśli Twoja witryna (szablon) obsługuje nowoczesne standardy, możesz wprowadzać zmiany w projekcie, takie jak zaokrąglanie narożników, cienie, wypełnienie gradientowe, bez korzystania z pomocy edytorów graficznych.

Webmasterzy często używają zaokrąglonych rogów w przypadku bloków i ramek na stronach internetowych. W tym artykule opowiem Ci jak zaokrąglić rogi obrazków i zdjęć na stronie bez użycia programy innych firm używając tylko CSS.

Aby przykłady podane w artykule wyświetlały się poprawnie na Twoim ekranie, musisz użyć jak najwięcej świeże wersje przeglądarki, FireFox, Chrome i oparte na nich: Yandex Browser, Amigo i tak dalej.

Zaokrąglanie rogów pod klocki DIV

Zgodnie ze standardem CSS3, aby blok DIV miał zaokrąglone rogi, trzeba go wystylizować promień-granicy, na przykład tak:

Promień graniczny: 10px;

Dla jasności narysujmy dwa bloki o prostych i zaokrąglonych rogach:

Blok pod kątem prostym

Zaokrąglony blok narożny

Zaokrąglanie rogów zdjęć

Analogicznie do powyższego przykładu, możesz zaokrąglić rogi obrazów na stronie, np. fotografii. Dla jasności zaokrąglimy rogi zdjęcia ze strony.

Oto obrazek bez przetwarzania CSS

Teraz z zaokrąglonymi rogami:

Promień graniczny: 10px;

Aby było całkowicie „piękne”, od początku dodamy obramowanie…

Promień graniczny: 10px; obramowanie: 5px #ccc stałe;

a potem cienie:

Promień graniczny: 10px; obramowanie: 5px #ccc stałe; cień pudełka: 0 0 10px # 444;

Opcja poniżej ( zaokrąglone rogi z cieniem bez obramowania) jest bardzo podobny do podkładki pod mysz:

Promień graniczny: 10px; cień pudełka: 0 0 10px # 444;

I wreszcie kompletna kpina z obrazu

Promień graniczny: 50%; obramowanie: 5px #cfc stałe; cień pudełka: 0 0 10px # 444;

Jeśli otworzysz obraz w nowym oknie, zobaczysz, że jest on (obraz) niezmieniony, a wszystkie rogi, cienie itp. są tylko wynikiem przetwarzania CSS style w Twojej przeglądarce.

Mała dygresja liryczna

Styl granica zwiększa rozmiar obrazu o wielkość obramowania. Jeśli podano wartość obramowanie: 5px, to ostateczny obraz będzie szerszy i wyższy o 10 pikseli. Rozważ to, w niektórych przypadkach układ witryny może „przejść”.

Styl cień pudełka nie wpływa na wielkość obrazu, cień zdaje się przebiegać po sąsiednich elementach. Podczas korzystania z niego układ witryny nie ucierpi.

Jak zaokrąglać rogi obrazów w WordPressie

We wszystkich powyższych przykładach napisałem style bezpośrednio w tagach Kod HTML... Na przykład ten ostatni wygląda tak:

Jest to dobre, gdy trzeba przeprojektować jedno zdjęcie lub zdjęcie. A jeśli chcesz wszystko zmienić? Cóż, nie będziesz wspinać się po całej witrynie, aby edytować wyświetlanie każdego z nich. W większości przypadków Znacznik WordPress IMG definiuje kilka klas stylów. Jeden według unikalnej nazwy pliku z obrazem, drugi według rozmiaru, a także według wyrównania. Możesz uzupełnić jeden z nich o powyższe parametry.

Na przykład dla wszystkich obrazów, dla których nie określono wyrównania, w pliku styl.css Twój Motywy WordPress napisz:

Alignnone (obramowanie-promień: 10px; obramowanie: 5px #cfc solid; box-shadow: 0 0 10px # 444;)

Albo najtrudniejsza metoda dla całego obrazu na stronie. Zastąp styl wszystkich tagów IMG:

Img (obramowanie-promień: 10px; obramowanie: 5px #cfc solid; box-shadow: 0 0 10px # 444;)

Ta ostatnia opcja jest odpowiednia nie tylko dla WordPressa, ale dla dowolnego CMS. A nawet dla prostego HTML strony w przypadku, gdy podczas wyświetlania obrazów tag IMG nie są przypisane żadne klasy stylów. Ale bądź ostrożny. Jeśli zastąpisz opcje wyświetlania tagu IMG zmieniasz wygląd zewnętrzny WSZYSTKIE zdjęcia na stronie!

Zamiast konkluzji

Wszystkie przykłady w tym artykule są warunkowe i mają na celu jedynie zademonstrowanie niektórych możliwości CSS w zakresie przetwarzania obrazów i pokazanie, jak proste jest to.

Dzień dobry, popołudnie, wieczór lub noc wszystkim. Dmitrij Kostin jest z tobą raz za razem. Kiedyś przeglądałem różne zdjęcia, a niektóre z nich mi się podobały. I podobał mu się fakt, że miały zaokrąglone krawędzie. Od razu wygląda to jakoś ciekawiej. Nie sądzisz? I tak w dzisiejszej lekcji chciałbym Wam opowiedzieć, jak zaokrąglać rogi w Photoshopie, żeby zdjęcie wyglądało ciekawiej.

To, co kocham w Photoshopie, to to, że w wielu przypadkach to samo można zrobić na kilka sposobów. Więc to jest tutaj. Przejdźmy do naszego Photoshopa.

Prosty antyaliasing

Antyaliasing przy użyciu obramowań

Ta metoda jest podobna do poprzedniej, ale wciąż bardzo inna. Zrobimy wszystko z tym samym obrazem.

Tworząc kształt

Oto trzecia metoda już radykalnie różni się od dwóch poprzednich. Więc zrób sobie przerwę na kilka sekund i przejdź dalej. Nie zmienię obrazu i ponownie załaduję ten samochód do Photoshopa.

Czy widzisz, co w końcu zrobiłeś? Obraz stał się zaokrąglonymi krawędziami, a wszystko przez to, że jest wyświetlany tylko w taki sposób, w jaki jest nasz narysowany zaokrąglony prostokąt. Ale teraz możesz przyciąć dodatkowe zdjęcie za pomocą narzędzia „Ramka” lub od razu zapisać zdjęcie, a będziesz już mieć osobny obraz z zaokrąglonymi rogami.

Spróbuj zrobić wszystko sam, a jednocześnie powiedz mi, która z przedstawionych metod jest dla Ciebie bardziej preferowana.

A tak przy okazji, jeśli masz luki w Photoshopie lub po prostu chcesz go w pełni przestudiować w jak najkrótszym czasie, gorąco polecam spojrzeć na jeden wspaniały kurs photoshopa dla początkujących... Kurs jest świetnie wykonany, wszystko jest dobrze opowiedziane i pokazane, a każdy materiał jest bardzo szczegółowo analizowany.

Cóż, na dzisiaj kończę lekcję. Nie zapomnij zasubskrybować nowych artykułów i podzielić się tym ze znajomymi. Cieszyłem się, że cię widzę na moim blogu. Nie mogę się doczekać kiedy znów Cię zobaczę. PA pa.

Z pozdrowieniami, Dmitrij Kostin

W tym krótkim samouczku pokażę, jak tworzyć zaokrąglone rogi w Photoshopie za pomocą proste metody maskowanie i filtry.

Będziesz mógł dostosować promień narożnika, aby zaokrąglić krawędź kształtu, tekstu itp. Jest to szybka i łatwa metoda tworzenia zaokrąglonych narożników. Do ich tworzenia można użyć maski warstwy.

Korzystanie z serii proste kroki w Photoshopie możesz zrobić zaokrąglony prostokąt. Photoshop nie ma filtra ani narzędzia do tworzenia zaokrąglonych narożników od razu, ale możesz to zrobić za pomocą programu Illustrator. Pozwoli na stworzenie efektu zaokrąglonych narożników dla niemal każdego przedmiotu. W nim musisz przejść do menu Efekty> Stylizacja> Zaokrąglone rogi(Efekty> Stylizacja> Zaokrąglone rogi).

Krok 1

W tym krótkim samouczku pokażę prostą metodę uzyskiwania zaokrąglonych rogów w Photoshopie za pomocą zrasteryzowanego tekstu, kształtu lub jakiegoś obrazu. Zrób obraz wektorowy gwiazdy z ostrymi narożnikami (ta metoda sprawdzi się również z kątami prostymi).

Krok 2

Teraz musisz zrasteryzować warstwę. Aby to zrobić, kliknij prawym przyciskiem myszy miniaturkę warstwy gwiazdy w palecie warstw i w menu kontekstowe wybierać Rasteryzuj warstwę(Rasteryzuj warstwę). Musisz zrobić to samo, jeśli używasz warstwy tekstowej.

Krok 3

Przejdź do menu Filtr> Rozmycie(Filtr> Rozmycie) i wybierz rozmycie Gaussa(Rozmycie Gaussa). Promień rozmycia będzie zależał od rozmiaru obrazu i efektu, który chcesz uzyskać. Wybiorę promień 5px.

Krok 4

Przytrzymaj klawisz „Ctrl” i kliknij miniaturę warstwy, aby aktywować wybór obrazu. Następnie przejdź do menu Podświetlanie i wybierz Udoskonal krawędź(Wybierz> Popraw krawędź). Możesz eksperymentować z parametrami Wygładzanie krawędzi(Gładkie) i Upierzenie(Wtapianie), aby wybrać żądany efekt. Kontrast(Kontrast) zrób 100.

Krok 5

Weź kolor kształtu, w naszym przypadku jest to żółty i wypełnij cały zaznaczenie tym kolorem. Możesz to zrobić, naciskając kombinację klawiszy „Shift + F5”.

Krok 6

Bez odznaczania, musisz dodać maskę warstwy, klikając ikonę znajdującą się na dole palety warstw. To wszystko, teraz gwiazda ma zaokrąglone rogi.

Możesz użyć tej samej metody, aby utworzyć tekst z zaokrąglonymi rogami, jak pokazano na poniższym obrazku. Teraz możesz wymyślić własną czcionkę.

W tej sekcji mojej strony postanowiłem umieścić Lekcje Photoshop, które mogą Ci się przydać podczas tworzenia projektu strony internetowej. Myślę, że z mojej strony, przed rozpoczęciem nauki Photoshopa nie będzie zbyteczne, aby Cię przedstawić hotkeys photoshop... Za pomocą hotkeys photoshop, ułatwisz sobie pracę i zaoszczędzisz czas. ...

Mój pierwszy Samouczek Photoshop powie ci jak zaokrąglone rogi Zdjęcie.

Tworząc strony często trzeba zmierzyć się z problemem, jak zaokrąglać rogi obrazka, czyli jak zaokrąglone rogi Zdjęcie. W tym samouczku Photoshop nauczę cię jak zaokrąglone rogi postać w Photoshop... Także to Lekcja Photoshopa pozwoli ci zaokrąglone rogi Zdjęcie. Mam nadzieję, że jest to dla ciebie jasne. W końcu dla Photoshop zarówno obraz, jak i fotografia są jednym. Używam Adobe w swojej pracy Photoshop SC5, wersja rosyjska. Cóż, nie znam się na językach.

Moja dzisiejsza lekcja dotyczy zaokrąglania rogów zdjęcia w Photoshopie. Zróbmy zdjęcie razem z zaokrąglonymi rogami jak moje.

1. Wdrożyć zaokrąglanie rogów w Photoshopie, otwierać z Photoshop zdjęcie (zdjęcie), którego potrzebujemy. Na przykład zrobiłem jedno ze zdjęć z mojego archiwum zdjęć.

2. Dopasowujemy wymiary obrazu do potrzebnych nam parametrów. Aby to zrobić, naciśnij ALT + CTRL + I. Otworzy się okno Rozmiar obrazu. Ustalamy potrzebne nam wymiary. Możesz po prostu przyciąć zdjęcie do żądanego rozmiaru.

3. Wybierz obrazek (CTRL + A) (na obwodzie pojawi się przerywana linia) i skopiuj go (CTRL + C); Kopiujemy zdjęcie tak, aby oryginalny obraz pozostał niezmieniony po wdrożeniu zaokrąglanie rogów w Photoshopie... Choć możliwa jest praca na oryginale, to gdy zaokrąglone rogi będą gotowe, po prostu zapiszemy zdjęcie jako kolejny obraz.

4. Otwórz nowe okno (CTRL + N), ustaw żądany rozmiar obrazu i kliknij „OK”. Zwróć uwagę, że ustawiłem tło jako „przezroczyste”. Możesz od razu ustawić tło w żądanym kolorze;

5. Wklej skopiowany obrazek do nowego okna (CTRL + V) i utwórz Nowa warstwa(CTRL + SHIFT + N). W tej warstwie za pomocą narzędzia Prostokąt zaokrąglone rogi"narysuj prostokąt o wymaganym rozmiarze. Kolor prostokąta nie ma znaczenia. Wyboru narzędzia dokonuje się naciskając prawy przycisk myszy. Lub po prostu naciskając klawisz (U). Ustaw promień okręgu na swój dyskrecja (patrz rysunek poniżej);

W razie potrzeby narysowany kształt można przesuwać za pomocą strzałek na klawiaturze lub za pomocą myszy, przytrzymując lewy klawisz. Nie zapomnij aktywować „przesuń” na pasku narzędzi (górny przycisk). Możesz także Zmień rozmiar dane liczbowe. Aby to zrobić, naciśnij (CTRL + T) i przeciągnij kształt do żądanego rozmiaru za pomocą myszy trzymając lewy klawisz. Jeśli chcesz zmienić rozmiar z tymi samymi proporcjami, musisz przytrzymać SHIFT i przeciągnąć za róg kształtu.

6. Przejdź do panelu warstw. Przytrzymaj klawisz CTRL i kliknij lewym przyciskiem myszy podgląd (obrazek) warstwy prostokąta. Pojawia się przerywany zarys kształtu.

7. Przejdź do dolnej warstwy. Aby to zrobić, w panelu warstw kliknij po prawej stronie obrazu. W naszym przypadku - warstwa 1. Niebieskie zaznaczenie przejdzie do warstwy 1.

8. Naciśnij CTRL + SHIFT + I. Kropkowane zaznaczenie pojawi się wzdłuż krawędzi tej części obrazu, która znajduje się poza naszym prostokątem, która ma zaokrąglone rogi.

9. Naciśnij DEL na klawiaturze. Część obrazu znajdująca się poza prostokątem zostanie usunięta.

10. Ponownie aktywuj warstwę prostokąta. Usuwamy go, klikając ikonę kosza na śmieci.

11. Naciśnij klawisz „M” i kliknij lewym przyciskiem myszy w dowolnym miejscu obrazu. Wybór został usunięty. gotowy. Możesz zapisać obraz, który otrzymaliśmy, wykonując & zaokrąglanie rogów w Photoshopie, w wymaganym przez nas formacie.

Jeśli taki obraz będzie używany do tworzenia projektu witryny, zapisz go dla sieci i urządzeń (ALT + SHIFT + CTRL + S).

12. Uwaga! Jeśli masz na krawędziach obrazu z zaokrąglone rogi są przezroczyste piksele, trzeba je przyciąć. Aby to zrobić, kliknij "Obraz", wybierz "Przycinanie", w wyświetlonym oknie ustaw ustawienia jak na moim obrazku i kliknij "OK". Rozmiar płótna zostanie dostosowany do rozmiaru obrazu, a wszelkie dodatkowe przezroczyste piksele zostaną usunięte.

ten Lekcja Photoshopa może być stosowany zarówno do zdjęć owalnych, jak i kręconych. Aby to zrobić, w kroku 5 zamiast „prostokąt z zaokrąglone rogi„wybierz narzędzie” elipsa ”, „wielokąt” lub „dowolny kształt”. zaokrąglone rogi.