Hvordan lage halvsirkelformede kanter i Photoshop. Hvordan runde skarpe hjørner i Photoshop
25.07.2016 27.01.2018
I denne opplæringen lærer du hvordan du jevner ut skarpe hjørner av figurer i Photoshop.
Først, la oss lage en form. Du kan gjøre dette ved å velge Custom Shape Tool fra verktøylinjen. Hurtigtast kaller undermenyen med verktøy for å lage vektorformer- U.
Det er to måter å gjøre dette verktøyet aktivt på:
1. Med klemt Shift-tasten Klikk på en gruppe verktøy og en undermeny åpnes for å velge ønsket verktøy;
2. Langklikk med venstre museknapp på en gruppe verktøy vil også åpne en undermeny.
Last inn alle tilgjengelige former i Photoshop (klikk på figurens miniatyrbilde inn topppanel og klikk på "tannhjulet" til høyre for å åpne flere innstillinger):
Fra rullegardinlisten velger du en form med skarpe hjørner, for eksempel denne stjernen med 10 hjørner:
Når du lager en figur, ikke glem å holde nøkkelSkifte- dette vil bidra til å opprettholde proporsjoner.
Nå må du rastrere figuren - Høyreklikk på laget med formen - Rasterize Layer.
Vi velger radius avhengig av størrelsen på lerretet og ønsket resultat, jeg valgte 6 piksler.
Nå må vi laste utvalget av laget med formen, for å gjøre dette, hold nede nøkkelCtrlklikk på lagminiatyrbildet med en figur på Lagpanel.
Når valget er aktivt, trykk på knappen "avgrens kant" (Avgrens Edge):
En innstillingsmeny vil åpne der vi trenger parameteren Fjær la på 0 , og parameteren Kontrastøke til maksimum 100%. Parameter Glatt tilpass den til din smak, det vil hjelpe rundt hjørnene på figuren. Når det gjelder den 10-sidige stjernen, setter jeg den til maksimum, men du kan ha helt andre innstillinger.
I parameteren Utgang til... la standardinnstillingen - tildeling.
Trykk på Enter-tasten for å bruke innstillingene. Vi skaper nytt lag og med hjelp Malingsbøtteverktøy eller ved å gå til menyen Redigering-Fyll fyll utvalget i riktig farge, For eksempel, svart, som i den opprinnelige figuren. Slå av synligheten til det originale laget med formen og få denne formen med avrundede hjørner:
Det er alt. I denne opplæringen lærte vi hvordan du runder hjørner av former i Photoshop. Jeg håper leksjonen var nyttig for deg.
I denne delen av nettstedet mitt bestemte jeg meg for å plassere photoshop leksjoner, som kan være nyttig for deg når du lager et nettsteddesign. Jeg tror det ikke ville være overflødig, fra min side, før du begynner å lære deg Photoshop, å introdusere deg Photoshop hurtigtaster. Ved hjelp av Photoshop hurtigtaster, vil du gjøre arbeidet ditt enklere og spare tid. .
Min første Photoshop leksjon vil fortelle deg hvordan rundt hjørnene bilde.
Når du lager nettsider, må du ofte forholde deg til problemet med hvordan du runder hjørnene på et bilde, eller hvordan du rundt hjørnene bilde. I denne leksjonen Photoshop Jeg skal lære deg hvordan rundt hjørnene trekke inn photoshop. Også denne Photoshop leksjon vil tillate deg rundt hjørnene bilder. Jeg håper dette er klart for deg. Tross alt, for Photoshop både bildet og fotografiet er like. I arbeidet mitt bruker jeg Adobe Photoshop SC5, russisk versjon. Vel, jeg er ikke god i språk.
Dagens leksjon handler om å runde hjørnene på et bilde i Photoshop. La oss ta et bilde sammen med avrundede hjørner som på bildet mitt.
1. Å implementere avrunde hjørner i Photoshop, åpne med Photoshop bildet (bildet) vi trenger. Som et eksempel tok jeg et av fotografiene fra bildearkivet mitt.
2. Vi bringer dimensjonene på tegningen til parametrene vi trenger. For å gjøre dette, trykk ALT+CTRL+I. Bildestørrelse-vinduet åpnes. Vi setter dimensjonene vi trenger. Du kan ganske enkelt beskjære bildet til ønsket størrelse.
3. Velg bildet (CTRL+A) (en stiplet linje rundt omkretsen vises) og kopier det (CTRL+C); Vi kopierer bildet slik at originalbildet forblir uendret etter at vi har fullført avrunde hjørner i Photoshop. Selv om du kan jobbe med originalen, men når avrundede hjørner vil være klar, vi lagrer ganske enkelt bildet som et annet bilde.
4. Åpne et nytt vindu (CTRL+N), angi de nødvendige bildedimensjonene og klikk "OK". Vær oppmerksom på at jeg setter bakgrunnen til "transparent". Du kan umiddelbart sette bakgrunnen til den fargen du trenger;
5. Lim inn det kopierte bildet i et nytt vindu (CTRL+V) og lag et nytt lag (CTRL+SHIFT+N). I dette laget bruker du rektangelverktøyet avrundede hjørner"Tegn et rektangel i ønsket størrelse. Fargen på rektangelet spiller ingen rolle. Verktøyet velges ved å klikke på høyre knapp mus. Eller ved å trykke på tasten (U). Vi setter krumningsradius etter eget skjønn (se figuren nedenfor);
Om nødvendig kan du flytte den tegnede formen ved å bruke piltastene på tastaturet eller bruke musen mens du holder nede venstre nøkkel. Først, ikke glem å aktivere "flytt" på verktøylinjen ( øverste knappen). Du kan også endre størrelse tall. For å gjøre dette, trykk (CTRL+T) og strekk formen til nødvendige størrelser ved å bruke musen mens du holder nede venstre tast. Hvis du vil endre størrelsen mens du opprettholder proporsjonene, må du holde SHIFT og dra i hjørnet av formen.
6. Gå til lagpanelet. Mens du holder CTRL, venstreklikk på forhåndsvisningen (bildet) av rektangellaget. En stiplet omriss av formen vises.
7. Gå videre til det nederste laget. For å gjøre dette, klikk på høyre side av bildet i lagpanelet. I vårt tilfelle, lag 1. Det blå høydepunktet vil gå til lag 1.
8. Trykk CTRL+ SHIFT+I. Et stiplet utvalg vil vises langs kanten til den delen av bildet som er plassert utenfor rektangelet vårt avrundede hjørner.
9. Trykk DEL på tastaturet. Den delen av bildet som er utenfor rektangelet vil bli slettet.
10. Aktiver rektangellaget på nytt. Slett den ved å klikke på søppelbøtteikonet.
11. Trykk på "M"-tasten og venstreklikk hvor som helst i bildet. Utvalget er fjernet. klar. Du kan lagre bildet som vi mottok av avrunde hjørner i Photoshop, i formatet vi trenger.
Hvis et slikt bilde skal brukes til å lage et nettsteddesign, lagrer du det for web og enheter (ALT+SHIFT+CTRL+S).
12. OBS! Hvis du har bilder rundt kantene med avrundede hjørner Det er fortsatt gjennomsiktige piksler, du må utføre trimming. For å gjøre dette, klikk på "Bilde", velg "Trimming", i vinduet som vises, angi innstillingene som på bildet mitt og klikk "Ok". Lerretet vil bli endret til størrelsen på bildet og eventuelle ekstra gjennomsiktige piksler vil bli fjernet.
De photoshop leksjon kan brukes til både ovale og formede fotografier. For å gjøre dette, i trinn 5, i stedet for "rektangelet med avrundede hjørner" velg "ellipse", "polygon" eller "verktøy hvilken som helst figur Deretter utfører vi alle de samme handlingene som vi gjorde for å få avrunde hjørner.
I denne korte artikkelen skal vi se på et eksempel på å lage en "tynn" ramme 1 - 2 piksler tykk i Photoshop med avrundede kanter . Disse rammene (og deres fragmenter) er mye brukt av designere og webansvarlige når de lager oppsett og lager maler for nettsteder. Brukes til å ramme inn artikler, menyer, knapper osv.
Så la oss komme i gang:
1. La oss skape nytt dokument(Toppmeny "Fil" - "Ny") med dimensjoner, for eksempel 500 x 500 piksler. Bakgrunnsinnhold: gjennomsiktig.
2. Gå til verktøylinjen (plassert til venstre), velg "Rektangulære markeringsramme"-verktøyet (M). På dokumentet vårt tegner vi et rektangulært område. Alternativer for verktøyet "Rektangulært område": "Nytt utvalg", "Fjær: 0 px.", "Stil: Normal" (fig. 1).
3. B toppmenyen velg fanen "Selection" - "Modification" - "Optimize" (fig. 2). La oss ta radiusverdien, for eksempel lik 20 piksler. Klikk "Ja". Vi ser at hjørnene på vårt valgte rektangel er avrundet med den valgte verdien (20 piksler) (fig. 3).
4. I toppmenyen velger du "Rediger" - "Stroke". Still inn slagparametrene. Bredde: 2 px. (for klarhet). La oss ta litt rød farge. I samme fane, sett: "Posisjon i forhold til grensen: sentrum (du kan velge verdiene "inne" og "utenfor")", "Overlegg: Normal modus", "Opasitet: 100%", "Lagre gjennomsiktighet" : tom”. Klikk på "Ja"-knappen (fig. 4). Vi fjerner valget ved å bruke hurtigtasten "Ctrl + D" og får rammen vi trenger, 2 piksler tykk i rødt med avrundede kanter (fig. 5). Nå kan fragmentene eller hele rammen brukes til å designe hvilken som helst mal, banner osv.
 |
 |
| Ris. 1 | Ris. 2 |
 |
 |
| Ris. 3 | Ris. 4 |
 |
 |
| Ris. 5 | Ris. 6 |
For eksempel, og for bedre visualisering, laget jeg et nytt lag fylt med hvitt, flyttet det under laget med rammen vår og laget flere lignende rammer med uskarp tykkelse, farger og avrundede hjørner (fig. 6).
God morgen, ettermiddag, kveld eller natt alle sammen. Dmitry Kostin er med deg igjen og igjen. På en eller annen måte så jeg gjennom forskjellige bilder og så likte jeg noen av dem. Og de likte dem fordi de hadde avrundede kanter. Det ser umiddelbart mer interessant ut. Tror du ikke det? Og det er derfor jeg i dagens leksjon vil fortelle deg hvordan du runder hjørner i Photoshop for å få bildet til å se mer interessant ut.
Det jeg elsker med Photoshop er at i mange tilfeller kan det samme gjøres på flere måter. Så det er her. La oss komme i gang med vår photoshop.
Utjevning ved hjelp av grenser
Denne metoden ligner den forrige, men fortsatt veldig forskjellig. Vi vil gjøre alt med det samme bildet.
Ved å lage en form
Den tredje metoden er allerede radikalt forskjellig fra de to foregående. Så ta en pause i et par sekunder og gå videre. Jeg vil ikke endre bildet og vil laste denne bilen inn i Photoshop igjen.
Ser du hva du endte opp med? Bildet har avrundede kanter, og alt fordi det bare vises der det tegnede avrundede rektangelet vårt er. Men nå kan du beskjære det ekstra bildet ved å bruke "Ramme"-verktøyet, eller du kan umiddelbart lagre bildet og du vil allerede ha eget bilde med avrundede hjørner.
Prøv å gjøre alt selv, og fortell meg samtidig hvilken av de presenterte metodene som er mer å foretrekke for deg.
Og forresten, hvis du har hull i Photoshop eller du bare vil utforske det fullt ut så snart som mulig, da anbefaler jeg deg å se en flott photoshop-kurs for nybegynnere. Kurset er godt gjennomført, alt er fortalt og vist bare flott, og hvert stoff blir diskutert i detalj.
Vel, jeg er ferdig med leksjonen min for i dag. Ikke glem å abonnere på nye artikler og del dette med vennene dine. Jeg var glad for å se deg på bloggen min. Jeg venter på deg igjen. Ha det.
Med vennlig hilsen, Dmitry Kostin
Alle moderne nettlesere støttestandarder hypertekstmarkering HTML5 og CCS3 styling. Og hvis nettstedet (malen) støtter moderne standarder, kan du gjøre endringer i designet, for eksempel avrunding av hjørner, skygger, gradientfylling uten å ty til grafiske redaktører.
Webmastere bruker det overalt avrundede hjørner i blokker og rammer på nettsider. I denne artikkelen vil jeg fortelle deg hvordan du kan runde hjørnene av bilder og fotografier på nettstedet uten å bruke tredjeparts programmer, bruker kun CSS.
For at eksemplene gitt i artikkelen skal vises riktig på skjermen din, må du bruke det meste siste versjoner nettlesere, FireFox, Chrome og de som er laget basert på dem: Yandex.Browser, Amigo og så videre.
Avrunding av hjørner av DIV-blokker
I henhold til CSS3-standarden, slik at blokken DIV hadde avrundede hjørner, må den styles grense-radius, for eksempel slik:
Kantradius: 10px;
For klarhet, la oss tegne to blokker med rette og avrundede hjørner:
Kloss med rette vinkler
Blokk med avrundede hjørner
Avrunde hjørner av bilder
I analogi med eksemplet ovenfor kan du runde hjørnene av bilder på nettstedet, for eksempel fotografier. For klarhet, la oss runde hjørnene for bildet fra siden
Her er bildet uten CSS-behandling
Og nå med avrundede hjørner:
Kantradius: 10px;
For å gjøre det virkelig "vakkert", la oss legge til litt kant fra begynnelsen ...
Kantradius: 10px; kantlinje: 5px #ccc solid;
og så skyggene:
Kantradius: 10px; kantlinje: 5px #ccc solid; box-shadow: 0 0 10px #444;
Alternativet nedenfor (avrundede hjørner med skygge uten kant) ligner veldig på en musematte:
Kantradius: 10px; box-shadow: 0 0 10px #444;
Og til slutt, en fullstendig hån mot bildet
Kanteradius: 50 %; kantlinje: 5px #cfc solid; box-shadow: 0 0 10px #444;
Hvis du åpner bildet i et nytt vindu, vil du se at det (bildet) er uendret, og alle hjørnene, skyggene og så videre er bare resultatet av behandlingen CSS stiler av nettleseren din.
En liten lyrisk digresjon
Stil grenseøker størrelsen på bildet med grensen. Hvis en verdi er spesifisert kantlinje: 5px, så blir det endelige bildet bredere og høyere med 10 piksler. Husk dette, i noen tilfeller kan det hende at oppsettet til nettstedet ikke fungerer.
En stil boks-skygge påvirker ikke størrelsen på bildet, skyggen ser ut til å løpe over naboelementer. Når du bruker det, lider ikke nettstedets layout.
Slik runder du hjørnene av bilder i WordPress
I alle eksemplene ovenfor skrev jeg stiler direkte inn html-koder kode. For eksempel ser den siste slik ut:
Dette er bra når du trenger å omorganisere ett bilde eller fotografi. Hva om du vil endre alt? Vel, du vil ikke klatre over hele nettstedet ditt for å redigere visningen av hver enkelt. I de fleste tilfeller WordPress-tag IMG definerer flere stilklasser. En etter en unikt navn fil med et bilde, forskjellig i størrelse, og også justert. Du kan supplere en av dem med parametrene ovenfor.
For eksempel for alle bilder som justering ikke er spesifisert for, i filen style.css din WordPress-temaer skriv følgende:
Alignnone ( kantradius: 10px; kantlinje: 5px #cfc solid; box-shadow: 0 0 10px #444; )
Enten mest hard metode for alle med et bilde på siden. La oss omdefinere stilen for alle tagger IMG:
Img ( kant-radius: 10px; kantlinje: 5px #cfc solid; box-shadow: 0 0 10px #444; )
Det siste alternativet passer ikke bare for WordPress, men for alle CMS. Og til og med for enkelt HTML sider i tilfelle når, når du viser bilder, taggen IMG ingen stilklasser er tildelt. Men vær forsiktig. Hvis du overstyrer tag-visningsalternativene IMG du vil forandre deg utseende ALLE bildene på siden!
I stedet for en konklusjon
Alle eksemplene i artikkelen er betingede og er kun ment å demonstrere noen CSS-funksjoner på bildebehandling og vis hvor enkelt det er.