I denne opplæringen skal vi lage en liten meldingsstripe i Photoshop som du kan plassere i øverste høyre hjørne av et design. Disse små stripene ser veldig trendy ut og Web2.0-y, spesielt i webdesign! Det er en ganske enkel effekt å gjøre, og i denne opplæringen legger vi til litt skygge og lys for å gjøre det pop!
For å starte denne opplæringen som alltid, starter vi med en fin radial gradient. Jeg er avhengige av radiale gradienter, så du bør også være! Jeg bruker en kombinasjon av fin blues. Her er de eksakte fargekodene:
Farge 1 - # 0e324f
Farge 2 - # 062033
Det fungerer bra hvis du setter høydepunktet i graden i øverste høyre hjørne der vi plasserer vår lille meldingsstrimmel. Dette er å gjøre med hvordan vi legger til lys og skygge senere.
Nå er dette trinnet ikke helt nødvendig, men jeg skal legge til et gigantisk brev M slik at meldingsstripen min har noe å gå over. Når meldingsstripen samhandler med bakgrunnen på denne måten, ser den enda kulere ut.
Så uansett, jeg lager en gigantisk M i hvitt og legger den til Overlegg og fader den ut til 40% slik at den har litt av den radiale gradienten og passer inn med lys og skygge.
Lys og skygge er din venn, de vil gjøre designene dine ser mye bedre ut. I den virkelige verden og i trykkdesign, får du lys og skygge fra lyset (sollys, elektrisk lys, uansett), men på skjermen er alt en slags uniform. Så det er fint når du legger til litt skygge og lys for å leve det hele opp. Vær oppmerksom på at dette ikke fungerer nesten like godt i utskrift.
Neste i et nytt lag tegner du et langt rektangel med en lysegrå. Gjør det veldig lenge fordi når du roterer det senere, må du ha enden til å være riktig lang. Legg også til litt tekst. Jeg har skrevet "Made with Love!" i en morsom font - Gill Sans Ultra Bold. Jeg har en predisposisjon til fettfonter fordi de ser vennlig og høyt ut.
Nå skal jeg ta en hjerteform fra Photoshops sett med former. Du kan få disse ved å klikke på Custom Form Tool (U) i verktøylinjen. Og så gå opp til toppen av skjermen og trykk på den lille pil ned ved siden av Form som vist. Hvis du ikke allerede har mange former, klikker du på pilen som peker mot høyre og legger til dem.
Så ved hjelp av denne hjerteformen, i et nytt lag har jeg tegnet et fint, rødt hjerte. Den røde, hvite og blå kombinasjonen ser bra ut.
Trikset med fargekombinasjoner som dette er to ganger. Først vil du ha en hovedfarge (i dette tilfellet blå) og deretter bruke de andre farger til å markere av hovedfarge. Så her har vi en masse blå, en middels mengde lysegrå, og en liten bit rød som virkelig hopper ut.
Den andre tingen å huske er at noen fargekombinasjoner kolliderer som ingen virksomhet. Som om du setter det rødt på det blå, blir det øye. Så her har jeg brukt lysgrået som en mellomfarge.
Nå for å få den røde virkelig popen, har jeg valgt hjertelaget, laget et nytt lag over det, og deretter brukt en jevnere lysere rød farge, jeg har trukket en liten gradient over i øverste høyre hjørne. På denne måten har hjertet vårt en radial gradient og igjen bruker vi lys og skygge!
Jeg har også lagt til en svakt skygge til "Made with Love" -teksten ved hjelp av Drop Shadow-blandingsmodus. Du kan gjøre dette ved å høyreklikke på det laget og velge Blending Options. Kryss deretter Drop Shadow. Still inn avstanden til 0 og endre fargen til å være lysegrå, så det er ikke så fullstendig. Ikke legg til en vanlig skygge fordi vi vil at disse bokstavene skal være en del av stripen, og ikke sveve over den.
Nå vil jeg legge til grenser til stripen, så jeg holder Ctrl og klikker på stripelaget for å velge alt, og deretter lage et nytt lag og lim inn i en mørkere grå farge. Deretter går jeg til Velg> Endre> Kontrakt og kontrakt utvalget med 2 piksler.
Deretter slår jeg slett for å slette midten av det mørkegrået, og forlater bare kantene. (Merk at du må treffe høyre pil et par ganger, og deretter treffe slett og deretter trykke på venstre pil et par ganger og trykk slett igjen for å få venstre og høyre kant.)
Ok, så nå har vi vår meldingsstrimmel, det har kanter, en melding og et fint rødt hjerte som dukker opp.
Den neste tingen å gjøre er å velge alle meldingsstrimmelagene og slå dem sammen i et enkelt lag. Vi gjør dette fordi vi er i ferd med å rotere.
Hvis du roterer uten å slå sammen teksten og kantene, kan du få noen merkelige effekter. Photoshop har en tendens til å utviske og jeg sparer når du roterer, så det er best å minimere effektene ved å slå sammen alt sammen her. Selvfølgelig betyr dette at du må sørge for at meldingslisten er fullstendig ferdig før du smelter sammen!
Sammenslåing har også den ekstra fordelen at vi kan bruke Dodge og Burn senere for å skygge og teste det opp. Du vil se hva jeg mener kort tid ...
Så nå, trykk Ctrl + T for å transformere, hold nede Skift og vri meldingslisten til en 45-vinkel.
Flytt nå meldingslisten oppe til høyre. Det ser allerede bra ut, men nå må vi legge til litt skygger og ting.
Så opprett et nytt lag på toppen og velg en lys grå farge. Hold nede Ctrl og klikk på meldingsstripelaget for å velge alle dens piksler. Deretter tegner du en gradient som går fra lysegrå til gjennomsiktighet og trekker den fra toppen som kommer ned. Deretter tegner du en annen fra bunnen og går opp.
Du bør få noe som ser ut som bildet ovenfor - litt grå som kommer fra toppen og litt mer kommer fra bunnen.
Endre endringsmodus for dette nye laget til Multiply. Fordi vi brukte en fin svak grå, vil det gi en god mengde skygge. Hvis du brukte en mørkere grå, må du kanskje fade oppaktheten tilbake.
Gå nå tilbake til selve meldingsstripsjiktet. Bytt til Brennverktøyet (O) og velg en stor, myk børste til å jobbe med.
Legg sakte til brenn til bunnen og toppen av stripen. Opp i innstillingene for Burn Tool kan du være sikker på at eksponeringen er satt rimelig lav (jeg brukte 20%). Dette gjør at du kan gjøre en subtilere effekt uten å bli overeksponert.
Når du er ferdig med å legge brenningen til toppen og bunnen, kan du, hvis du vil, holde Alt nede og forsiktig børste midten litt. Holding Alt når Brannverktøyet er valgt, bytter det til et unnvik.
Brenne og Dodge er som motsetninger til hverandre. Burning mørkere og Dodge lyser. De er ganske nyttige verktøy, selv om du vil bruke dem subtilt, ellers kan du gjøre litt av et rot.
Så nå som vår meldingsstrimmel ser bra ut, la oss legge til en skygge bak den.
Lag et lag under meldingslisten.
Hold nede Ctrl og klikk på meldingsstripelaget for å velge piksler og i laget nedenfor, fyll det med en middels grå.
Deretter avmarkerer du og trykker på pil ned et par ganger og venstre pil et par ganger, slik at det nye laget ditt er nederst og til høyre på meldingslisten (som vist)
Dette blir vårt skyggelag.
Sett skyggelaget ditt til Multiply, og gå deretter til Filter> Slør> Gaussisk sløring og bruk en innstilling på ca. 3-4px. Du får en fin skygge.
Nå ønsker vi at vår meldingsstrimmel skal se ut som den er buktende opp i midten. Dette betyr at skyggen blir mindre både på toppen og bunnen fordi meldingsstripen er nærmere bakgrunnen. Gir det mening?
I utgangspunktet hvis noe er langt borte fra bakgrunnen, er skyggen større, og hvis dens tettere er skyggen mindre ...
Uansett, velg Erase Tool (E) og med en stor, myk børste forsiktig slette litt av skyggen på toppen og bunnen slik at den blir svak i hver ende.
Og der har du det ferdige produktet: en fin meldingsstrimmel!