Sådan laver du halvcirkelformede kanter i Photoshop. Sådan afrundes skarpe hjørner i Photoshop
25.07.2016 27.01.2018
I denne vejledning lærer du, hvordan du udglatter skarpe hjørner af figurer i Photoshop.
Lad os først skabe en form. Du kan gøre dette ved at vælge Custom Shape Tool fra værktøjslinjen. Genvejstast kalder undermenuen med værktøjer til oprettelse vektor former- U.
Der er to måder at gøre dette værktøj aktivt på:
1. Med fastspændt Skift-tasten Klik på en gruppe værktøjer, og en undermenu åbnes for at vælge det ønskede værktøj;
2. Langt klik på venstre museknap på en gruppe værktøjer vil også åbne en undermenu.
Indlæs alle tilgængelige former i Photoshop (klik på figurens thumbnail ind toppanel og klik på "gearet" til højre for at åbne yderligere indstillinger):
Fra rullelisten skal du vælge en form med skarpe hjørner, for eksempel denne stjerne med 10 hjørner:
Når du opretter en figur, glem ikke at holde nøgleFlytte- dette vil hjælpe med at opretholde proportioner.
Nu skal du rasterisere figuren - Højreklik på laget med formen - Rasterize Layer.
Vi vælger radius afhængigt af størrelsen på lærredet og det ønskede resultat, jeg valgte 6 pixels.
Nu skal vi indlæse udvalget af laget med formen, for at gøre dette skal du holde nede nøgleCtrlklik på lagminiaturebilledet med en figur på Lag panel.
Når valget er aktivt, tryk på knappen "Forbedre kanten" (Forbedre kanten):
En indstillingsmenu åbnes, hvor vi skal bruge parameteren Fjer lade være 0 , og parameteren Kontrastøges til maksimum 100%. Parameter Glat tilpasse det til din smag, det vil hjælpe med at runde hjørnerne af figuren. I tilfældet med den 10-sidede stjerne sætter jeg den til maksimum, men du kan have helt andre indstillinger.
I parameteren Output til... forlad standardindstillingen - tildeling.
Tryk på Enter-tasten for at anvende indstillingerne. Vi skaber nyt lag og med hjælp Malerspandværktøj eller ved at gå til menuen Redigering-Fyld udfyld udvalget i den rigtige farve, For eksempel, sort, som i den originale figur. Sluk for synligheden af det originale lag med formen og få denne form med afrundede hjørner:
Det er alt. I denne tutorial lærte vi, hvordan man runder hjørner af figurer i Photoshop. Jeg håber, lektionen var nyttig for dig.
I denne sektion af mit websted besluttede jeg at placere photoshop lektioner, hvilket kan være nyttigt for dig, når du opretter et webstedsdesign. Jeg tror ikke, det ville være overflødigt, fra min side, at introducere dig, før du begynder at lære Photoshop Photoshop genvejstaster. Ved brug af Photoshop genvejstaster, vil du gøre dit arbejde lettere og spare tid. .
Min første Photoshop lektion vil fortælle dig hvordan rundt om hjørnerne Foto.
Når du opretter hjemmesider, skal du ofte forholde dig til problemet med, hvordan man runder hjørnerne af et billede, eller hvordan man rundt om hjørnerne Foto. I denne lektion Photoshop Jeg skal lære dig hvordan rundt om hjørnerne trækker ind photoshop. Også denne Photoshop lektion vil tillade dig rundt om hjørnerne fotos. Jeg håber, det er klart for dig. Efter alt for Photoshop både billedet og fotografiet er ens. I mit arbejde bruger jeg Adobe Photoshop SC5, russisk udgave. Nå, jeg er ikke god til sprog.
Dagens lektion handler om at runde hjørnerne af et billede i Photoshop. Lad os tage et billede sammen med afrundede hjørner som på mit billede.
1. At implementere runde hjørner i Photoshop, åben med Photoshop billedet (foto) vi har brug for. Som et eksempel tog jeg et af fotografierne fra mit fotoarkiv.
2. Vi bringer dimensionerne på tegningen til de parametre, vi har brug for. For at gøre dette skal du trykke på ALT+CTRL+I. Vinduet Billedstørrelse åbnes. Vi sætter de dimensioner, vi har brug for. Du kan blot beskære billedet til den ønskede størrelse.
3. Vælg billedet (CTRL+A) (en stiplet linje omkring omkredsen vises) og kopier det (CTRL+C); Vi kopierer billedet, så det originale billede forbliver uændret, efter at vi har fuldført runde hjørner i Photoshop. Selvom du kan arbejde på originalen, men hvornår afrundede hjørner vil være klar, gemmer vi blot billedet som et andet billede.
4. Åbn et nyt vindue (CTRL+N), indstil de nødvendige billedmål og klik på "OK". Bemærk venligst, at jeg indstiller baggrunden til "gennemsigtig". Du kan straks indstille baggrunden til den farve, du har brug for;
5. Indsæt det kopierede billede i et nyt vindue (CTRL+V) og opret et nyt lag (CTRL+SHIFT+N). I dette lag skal du bruge rektangelværktøjet afrundede hjørner"Tegn et rektangel i den ønskede størrelse. Farven på rektanglet er ligegyldig. Værktøjet vælges ved at klikke på højre knap mus. Eller ved blot at trykke på tasten (U). Vi indstiller krumningsradius efter eget skøn (se figuren nedenfor);
Hvis det er nødvendigt, kan du flytte den tegnede form ved hjælp af piletasterne på tastaturet eller ved at bruge musen, mens du holder nede venstre nøgle. Først, glem ikke at aktivere "flyt" på værktøjslinjen ( øverste knap). Du kan også ændre størrelse tal. For at gøre dette skal du trykke på (CTRL+T) og strække formen til nødvendige størrelser ved at bruge musen, mens du holder venstre tast nede. Hvis du vil ændre størrelsen og samtidig bevare proportionerne, skal du holde SHIFT nede og trække i hjørnet af formen.
6. Gå til panelet lag. Mens du holder CTRL nede, venstreklik på forhåndsvisningen (billedet) af rektangellaget. En stiplet omrids af formen vises.
7. Gå videre til det nederste lag. For at gøre dette skal du klikke på højre side af billedet i lagpanelet. I vores tilfælde, lag 1. Den blå fremhævning vil gå til lag 1.
8. Tryk på CTRL+ SHIFT+I. En prikket markering vises langs kanten af den del af billedet, der er placeret uden for vores rektangel afrundede hjørner.
9. Tryk på DEL på tastaturet. Den del af billedet, der er uden for rektanglet, slettes.
10. Genaktiver rektangellaget. Slet det ved at klikke på skraldespandsikonet.
11. Tryk på "M"-tasten og venstreklik hvor som helst i billedet. Valget er blevet fjernet. parat. Du kan gemme billedet, som vi modtog af runde hjørner i Photoshop, i det format, vi har brug for.
Hvis et sådant billede skal bruges til at skabe et webstedsdesign, skal du gemme det til web og enheder (ALT+SHIFT+CTRL+S).
12. OBS! Hvis du har billeder rundt i kanterne med afrundede hjørner Der er stadig gennemsigtige pixels, du skal udføre trimning. For at gøre dette skal du klikke på "Billede", vælge "Trimning", i det vindue, der vises, indstille indstillingerne som på mit billede og klikke på "Ok". Lærredet vil blive ændret til størrelsen på billedet, og eventuelle ekstra gennemsigtige pixels vil blive fjernet.
Det photoshop lektion kan bruges til både ovale og formede fotografier. For at gøre dette, i trin 5, i stedet for "rektangelet med afrundede hjørner" vælg værktøjet "ellipse", "polygon" eller " enhver figur Så udfører vi alle de samme handlinger, som vi gjorde for at få afrunde hjørner.
I denne korte artikel vil vi se på et eksempel på at lave en “tynd” ramme 1 - 2 pixels tyk i Photoshop med afrundede kanter . Disse rammer (og deres fragmenter) er meget brugt af designere og webmastere, når de laver layouts og skaber skabeloner til hjemmesider. Bruges til at indramme artikler, menuer, knapper mv.
Så lad os komme i gang:
1. Lad os skabe nyt dokument(Topmenu "Filer" - "Ny") med dimensioner, for eksempel 500 gange 500 pixels. Baggrundsindhold: gennemsigtig.
2. Gå til værktøjslinjen (placeret til venstre), vælg værktøjet "Rektangulære markeringsramme" (M). På vores dokument tegner vi et rektangulært område. Indstillinger for værktøjet "Rektangulært område": "Nyt markering", "Fjer: 0 px.", "Stil: Normal" (fig. 1).
3. B øverste menu vælg fanen "Udvalg" - "Ændring" - "Optimer" (fig. 2). Lad os for eksempel tage radiusværdien, der er lig med 20 pixels. Klik på "Ja". Vi ser, at hjørnerne af vores valgte rektangel er blevet afrundet med den valgte værdi (20 pixels) (fig. 3).
4. Vælg "Rediger" - "Stroke" i topmenuen. Indstil slagparametrene. Bredde: 2 px. (for klarhedens skyld). Lad os tage en rød farve. På samme fane skal du indstille: "Placering i forhold til grænsen: centrum (du kan vælge værdierne "inde" og "udenfor")", "Overlay: Normal tilstand", "Opacitet: 100%", "Gem gennemsigtighed" : tom”. Klik på knappen "Ja" (fig. 4). Vi fjerner markeringen ved hjælp af tastaturgenvejen "Ctrl + D" og får den ramme, vi har brug for, 2 pixels tyk i rødt med afrundede kanter (fig. 5). Nu kan dens fragmenter eller hele rammen bruges til at designe enhver skabelon, banner osv.
 |
 |
| Ris. 1 | Ris. 2 |
 |
 |
| Ris. 3 | Ris. 4 |
 |
 |
| Ris. 5 | Ris. 6 |
For eksempel, og for bedre visualisering, lavede jeg et nyt lag fyldt med hvidt, flyttede det under laget med vores ramme og skabte flere lignende rammer med sløret tykkelse, farver og afrundede hjørner (fig. 6).
Godmorgen, eftermiddag, aften eller nat alle sammen. Dmitry Kostin er med dig igen og igen. På en eller anden måde kiggede jeg igennem forskellige billeder og så kunne jeg godt lide nogle af dem. Og de kunne lide dem, fordi de havde afrundede kanter. Det ser umiddelbart mere interessant ud. Synes du det ikke? Og derfor vil jeg i dagens lektion gerne fortælle dig, hvordan du runder hjørner i Photoshop for at få billedet til at se mere interessant ud.
Det, jeg elsker ved Photoshop, er, at det samme i mange tilfælde kan gøres på flere måder. Så det er her. Lad os komme i gang med vores photoshop.
Udglatning ved hjælp af grænser
Denne metode ligner den forrige, men stadig meget anderledes. Vi vil gøre alt med det samme billede.
Ved at skabe en form
Den tredje metode er allerede radikalt forskellig fra de to foregående. Så tag en pause i et par sekunder og kom videre. Jeg vil ikke ændre billedet og vil indlæse denne bil i Photoshop igen.
Kan du se, hvad du endte med? Billedet har afrundede kanter, og alt sammen fordi det kun vises, hvor vores tegnede afrundede rektangel er. Men nu kan du beskære det ekstra billede ved hjælp af "Frame"-værktøjet, eller du kan straks gemme billedet, og du vil allerede have separat billede med afrundede hjørner.
Prøv at gøre alt selv, og fortæl mig samtidig, hvilken af de præsenterede metoder der er mere at foretrække for dig.
Og forresten, hvis du har huller i Photoshop, eller du bare vil udforske det fuldt ud så hurtigt som muligt, så kan jeg varmt anbefale dig at se en fantastisk photoshop kursus for begyndere. Kurset er gennemarbejdet, alt er fortalt og vist bare godt, og hvert materiale diskuteres meget detaljeret.
Nå, jeg er ved at afslutte min lektion for i dag. Glem ikke at abonnere på nye artikler og dele dette med dine venner. Jeg var glad for at se dig på min blog. Jeg venter på dig igen. Hej hej.
Med venlig hilsen, Dmitry Kostin
Alle moderne browsere støtte standarder hypertekstmarkering HTML5 og CCS3 styling. Og hvis dit websted (skabelon) understøtter moderne standarder, så kan du foretage ændringer i designet, såsom afrunding af hjørner, skygger, gradientfyld uden at ty til grafiske redaktører.
Webmastere bruger det overalt afrundede hjørner i blokke og rammer på hjemmesider. I denne artikel vil jeg fortælle dig, hvordan du runder hjørnerne af billeder og fotografier på webstedet uden at bruge tredjeparts programmer, kun ved hjælp af CSS.
For at eksemplerne i artiklen kan vises korrekt på din skærm, skal du bruge det meste seneste versioner browsere, FireFox, Chrome og dem, der er lavet baseret på dem: Yandex.Browser, Amigo og så videre.
Afrunding af hjørner af DIV-blokke
Ifølge CSS3-standarden, således at blokken DIV havde afrundede hjørner, skal den styles grænse-radius, for eksempel sådan her:
Border-radius: 10px;
For klarhedens skyld, lad os tegne to blokke med lige og afrundede hjørner:
Blok med rette vinkler
Blok med afrundede hjørner
Afrunding af hjørner af billeder
Analogt med eksemplet ovenfor kan du runde hjørnerne af billeder på webstedet, for eksempel fotografier. For klarhedens skyld, lad os runde hjørnerne for billedet fra siden
Her er billedet uden CSS-behandling
Og nu med afrundede hjørner:
Border-radius: 10px;
For at gøre det virkelig "smukt", lad os tilføje nogle kanter fra begyndelsen...
Border-radius: 10px; kant: 5px #ccc fast;
og så skyggerne:
Border-radius: 10px; kant: 5px #ccc fast; box-shadow: 0 0 10px #444;
Indstillingen nedenfor (afrundede hjørner med skygge uden kant) ligner meget en musemåtte:
Border-radius: 10px; box-shadow: 0 0 10px #444;
Og endelig en fuldstændig hån mod billedet
Grænse-radius: 50%; kant: 5px #cfc solid; box-shadow: 0 0 10px #444;
Hvis du åbner billedet i et nyt vindue, vil du se, at det (billedet) er uændret, og alle hjørner, skygger og så videre er kun resultatet af behandlingen CSS stilarter af din browser.
En lille lyrisk digression
Stil grænseøger størrelsen af billedet med grænsen. Hvis en værdi er angivet kant: 5px, så bliver det endelige billede bredere og højere med 10 pixels. Husk dette, i nogle tilfælde fungerer webstedets layout muligvis ikke.
En stil kasse-skygge ikke påvirker størrelsen af billedet, ser skyggen ud til at løbe hen over naboelementer. Når du bruger det, lider webstedets layout ikke.
Sådan runder du hjørnerne af billeder i WordPress
I alle eksemplerne ovenfor skrev jeg stilarter direkte ind html tags kode. For eksempel ser den sidste sådan ud:
Dette er godt, når du skal omarrangere ét billede eller fotografi. Hvad hvis du vil ændre alt? Nå, du vil ikke klatre over hele dit websted for at redigere visningen af hver enkelt. I de fleste tilfælde WordPress tag IMG definerer flere stilklasser. En efter en unikt navn fil med et billede, forskelligt i størrelse og også justeret. Du kan supplere en af dem med ovenstående parametre.
For eksempel for alle billeder, for hvilke justering ikke er angivet, i filen style.css din WordPress temaer skriv følgende:
Alignnone ( kant-radius: 10px; kant: 5px #cfc solid; box-shadow: 0 0 10px #444; )
Enten mest hård metode for alle med et billede på siden. Lad os omdefinere stilen for alle tags IMG:
Img ( kant-radius: 10px; kant: 5px #cfc solid; box-shadow: 0 0 10px #444; )
Den sidste mulighed passer ikke kun til WordPress, men til ethvert CMS. Og endda for simpelt HTML sider i tilfælde af, når der vises billeder, tagget IMG ingen stilklasser er tildelt. Men vær forsigtig. Hvis du tilsidesætter visningsmulighederne for tag IMG du vil ændre dig udseende ALLE billederne på siden!
I stedet for en konklusion
Alle eksempler i artiklen er betingede og har kun til formål at demonstrere nogle CSS funktioner på billedbehandling og vis hvor nemt det er.