Tutorial: Sådan designes en chatroom IPhone UI
I denne vejledning skal vi designe en iPhone-brugergrænseflade til et forum og chatbaseret mobilapplikation.
Appen indebærer en håndfuld dagligdags touch-grænsefladeelementer, såsom knapper, indtastningsfelter og berøringsbevægelser.
Vi vil dække forskellige Photoshop værktøjer, lag stilarter og selvfølgelig takle eventuelle design begrænsninger; samt gøre design pixel-perfekt og smuk nok til at være værdig til et sted på en iPhone skærm.
Designet blev sat sammen ved hjælp af Photoshop CS5.5, men alle nyere versioner af Photoshop vil fungere vidunderligt.
App skærmen krav
Vi skal bare lave en skærm i denne vejledning. Skærmen bliver den vigtigste chat-skærm til en chatbaseret applikation, ligesom et offentligt chatrum, men på din telefon. Kravene på denne skærm er:
- Et overskrift - dette er det chatrum du er i øjeblikket i.
- En back / close / topics-knap - for at gå tilbage til forrige skærm.
- Et folkeknap - dette viser hvem der er i øjeblikket i chatrummet.
- En liste over meddelelser - meddelelser skal have avatar og tidsstempel.
- En måde at se brugerprofiler på og rapportere meddelelser.
- Et tekstfelt til at skrive dine meddelelser.
- En send-knap for at sende dine beskeder.
Planlægning, skitsering og wireframing
Som med ethvert brugergrænseflade projekt, planlægning, skitsering og wireframing din grænseflade er afgørende. Det regulerer ganske ofte nogle dumme ideer (selvom de måske ikke virker dumme i dit hoved!) Før de sætter digitale koncepter og mockups sammen. Hvad der kan virke som en glimrende løsning til at løse et problem i dit hoved kunne i sidste ende slet ikke fungere i rigtig praksis. Derfor er wireframing før et projekt er et så vigtigt skridt.
Tag en pen og din yndlingsplade og begynd skitsering.
Som du kan se fra ovenstående billede tilbragte jeg blot et par minutter at sammensætte tre forskellige begreber; normalt tager denne proces dage eller nogle gange uger, men da vi kun designer en skærm og formålet med appen er enkel, skal skitsering disse ikke tage lang tid! De er stort set meget ens, men hver har sine unikke forskelle, som jeg sammenfatter nedenfor.
Skitse A
Inspireret af den oprindelige Twitter UI til iPhone giver brugeren mulighed for at svinge på en besked for at se flere muligheder, som f.eks. "Vis profil" og "Rapportér bruger" - en sjov og pladsbesparende måde, der giver mere indhold på denne skærm. Jeg lejede med ideen om at have en indstillingsknap i navigationslinjen på denne skærm, men besluttede at følge min normale regel om "Mindre er mere" - det er usandsynligt, at brugeren får adgang til indstillinger hver gang de bruger appen, så det ikke er nødvendigt her.
Skitse B
Dette koncept er lidt mere kompakt, med knapperne "Vis profil" og "Rapport bruger" som statiske ikoner til højre for meddelelserne. Jeg spillede med tanken om ikke at have en "Send" -knap her, og i stedet gøre brug af send-knappen på iOS-tastaturet. Jeg besluttede imod dette, da de fleste apps (herunder iOS standard apps som beskeder) har tastaturet sendeknappen samt den ekstra send-knap ved siden af tekstindtastningsfeltet. Jeg kan godt lide at holde mine grænseflader i overensstemmelse med andre i App Store.
Skitse C
Skitse C er den skitse, jeg har besluttet mig at gå videre med - i stedet for en back-knap har vi en tæt knap. Jeg synes, det gør det mere indlysende, at når du klikker på tæt, vil du ikke længere være en del af denne samtale (i modsætning til messaging apps, hvor du går tilbage og kan vende tilbage for at se alle de tidligere meddelelser). Folkeknappen viser en liste over brugere i øjeblikket i chatrummet, og jeg har genoptaget ideen om at få billedet til at se flere funktioner (som Twitter-appen) for at give brugeren mulighed for at se brugerens profil eller rapportere dem.
Med dette gjort er det tid til at gå videre til at sætte noget sammen i Photoshop!
Trin 1: Status og navigeringslinje
Før vi går videre med dette trin, skal vi oprette vores dokument. Den normale iPhone skærmstørrelse (ved retina opløsning) er 640px bred og 960px høj med en opløsning på 326ppi. Jeg plejer altid at starte med en hvid baggrund i mine designs.
Det første skridt er at indsætte standard iOS statuslinjen. Statuslinjen er linjen øverst på din iPhone, der fortæller dig vigtige oplysninger som dit signal, transportør, tid og batterilevetid. Der er tre muligheder her: en sort bar, en sort bar med lav gennemsigtighed eller sølvbaren.
Hvis du vil gøre dit app design ligne den virkelige aftale, kan du få fat i statuslinjen fra Retina iPhone GUI PSD kit fundet her . Du skal blot downloade og åbne PSD'en, og træk den bar, du vil have, til dit PSD-dokument. Placer det øverst på lærredet.
Navigeringslinjen er næste på vores opgaveliste. Standardnavigationslinjen er 86px høj og spænder over hele bredden af din iPhone (640px). Igen kan du trække dette element over fra det ovennævnte PSD-sæt, eller du kan oprette dette manuelt (min foretrukne løsning, da der ikke er vedhæftede stilarter). Vælg værktøjet Rektangelform og læg et 640 x 86px rektangel på dit lærred.
Trin 2: Navigationslinje knapper
Henvisning til vores wireframes har vi to knapper på vores nav bar. Vælg værktøj til afrundet rektangelformat (husk at altid bruge formværktøjer til formularer i UI-design, det gør det meget nemmere at skala vores dokument til lavere opløsninger!). Jeg har brugt dimensioner 100 x 50px med en hjørne radius på 6px.
Placer denne form på både din venstre og højre side af din navigationslinje og placer dem pænt.
Trin 3: Stilvalg
Det er på tide at begynde at vælge vores design stil. Denne app vil give folk mulighed for at chatte og møde nye mennesker, og lade folk have det sjovt. Derfor føler jeg mig sjovt, quirky farveskema og typografi her er vigtigt at hjælpe med at få det punkt på tværs af.
Vælg Type Værktøj og vælg et skrifttype, der matcher det billede, du har i dit hoved. Jeg valgte den latterlige Arial afrundet MT bold . Skriv dit emne navn (jeg valgte "UI Design") og juster det centralt på din navigationslinje.
Fortsat med det sjove tema, vi har valgt til appen, er det tid til at vælge nogle farver. Jeg bruger personligt Color Lovers for at inspirere mine farvevalg, når jeg designer. I dette særlige tilfælde søgte jeg efter "sjov" og inden for få sekunder blev jeg præsenteret med mange forskellige muligheder og inspirerende paletter til brug som grundlag for mit design.
Jeg endte med at vælge en kaldet Legerum . Det er vigtigt at tænke over, hvilke farver du skal bruge, når du vælger en palette; Jeg finder at vælge noget lys, noget mørkt, og noget lyst er altid et godt udgangspunkt. Det er vigtigt at have god kontrast i dit design.
Trin 4: Navigationslinje styling
Vi skal nu flytte tilbage på vores navigationslinje og give den den farve, den fortjener. Vælg navigationslinelaget (jeg håber du har holdt dine lag organiseret!), Højreklik og vælg Blandingsindstillinger. Dette er hjemstedet for de mest kraftfulde Photoshop-værktøjer, når det drejer sig om at skabe pixel perfekte interface design. Herfra kan du tilføje skygger, gradienter, mønstre og stokes, med evnen til at kopiere og indsætte disse stilarter på andre lag.
Først og fremmest vil vi tilføje en gradient til vores bar, så klik på Gradient Overlay. Jeg har valgt den turkisfarve som den, jeg vil bruge til min navigationslinje. Det er lyst og pakker et kraftigt slag og gør vores design nemt at huske. Anvend en 90 graders vinkelgradient, der går fra lys (øverst) til mørkt (nederst).
Klik nu på Stroke panelet. Ændre størrelsen af dit slagtilfælde til 2 i stedet for standard 3. Et tip er altid at forsøge at undgå ulige tal i UI-design, især på mobile enheder. Dette vil kun gøre mere arbejde for både designeren og udvikleren, når det kommer til at skalere arbejdet (du kan ikke have halv 3 pixel som en halv pixel eksisterer ikke!).
Skift udfyldningstypen af din strejke til gradient, og sørg for, at slagtilfældet kommer til at vises på ydersiden af din form. Vælg en mørk turkis farve til bunden af dit slagtilfælde og sort til toppen. Da slagtilfælde er ude på vores navigeringslinje, vises den sorte del af slagtilfælde ikke oven på statuslinjen, og derfor kan alle brugere se, at slagtilfælde nederst er.
Vælg panelet Indvendig skygge, og anbring en 15% opacitet hvidskygge på din bar. Dette vises øverst i din bar og giver det en dejlig fremhævning, så den bliver mere 3D. Jeg gav min skygge en afstand på 2px og en størrelse på 3px.
Nu er det tid til virkelig at gøre vores navigationslinje pop. Ved at bruge mønstre kan vi tilføje meget dybde til vores design. Jeg bruger et hvidt gittermønster på min navigationslinje. Hvis du vil bruge dette mønster, kan du downloade en samling af dem gratis på Premium Pixels .
Trin 5: Typografi skygger
For at give vores typografi en dybde, skal du åbne blandingsindstillinger panelet og anvende en drop skygge. Skift vinklen til -90 (sørg for, at Brug Global Style ikke er markeret her ellers vil alle skygger i dit design skifte til -90) og bruge den samme farve du brugte til bunden af dit navigationsstangslag. Giv skyggen en afstand på 2px, og slip størrelsen til 0px. Dette giver en ren skåret dropshadow over din tekst, hvilket gør det mere interessant.
Trin 6: Navigationslinjeknap styling
Vi skal nu bruge nogle fantastiske stilarter til vores knapper til navigationstaster. Vi vil have, at disse knapper skal binde sig godt sammen med vores navigationslinje, men samtidig skal de skille sig godt ud, så brugeren straks kan genkende, at de er knapper. For at gøre dette skal vi bruge flere lag stilarter til at give dem en 3D, øjenbrynende effekt.
Åbn blandingsindstillingspanelet og klik på overløbsoverlejring. Giv din knap et lys (øverst) til mørk (nederste) gradient ved hjælp af farver fra din navigationslinje. Lysfargen blev valgt fra højden af min navbjælke, og den mørke farve blev valgt fra nederst på min navbjælke.
Vælg stregpanelet og ændre størrelsen af din streg til 2px, med en udvendig position. Skift fyldtype til gradient og vinkel til 90 grader. Skift gradientfarverne fra lys (øverst) til mørkt (nederst), og baser farverne på de farver, der allerede er brugt til din navigationslinje og knapper. Umiddelbart kan du se, at dette slag giver din knap et 3D-udseende, som om det kommer ud af navigationslinjen i stedet for at sidde oven på det.
For at sprude knappen op lidt mere og gøre den endnu mere visuelt tiltalende, vil vi tilføje en indre glød til knappen. Klik på det indre lyspanel og skift blandingstilstanden til skærmen. Sæt opacitet til 20% og sørg for, at støj er sat til 0%. Skift den standard gule glød til hvid og sørg for, at størrelsen stadig er indstillet til 5px-standarden. Dette skal give din knap en god indre glød, så knappen bliver rigtig berørbar!
Vi skal nu tilføje en indre skygge for at gøre vores knap lidt mere realistisk. Skift opacitet til 15% og vælg sort som din farve. Sænk afstanden til 2px og størrelsen til 4px. Vend nu vinklen til -90 grader (sørg for, at Brug Global Light ikke er valgt). Dette giver bunden af din knap en lille skygge, der skjuler nogle af de nederste indre glød, vi lige har anvendt. I det virkelige liv ville dette område blive skygget, så det var vigtigt at skjule den indre glød her.
For at afslutte stylingen af vores knap skal vi tilføje en dropshadow. Vælg drop shadow panelet og skift farven til hvid med en opacitet på 25%. Denne skygge skal fungere som en højdepunkt under vores slagtilfælde, så ændre afstanden til 4px (2px for at dække slagområdet og 2px som ses under slagtilfælde).
Trin 7: Knapetiketter
En knap uden etiketten er meningsløs, så nu skal vi bruge lidt tid til at afslutte vores knapper. Først og fremmest skal du højreklikke på din stylede knap og vælge indstillingen Copy Layer Style. Højreklik nu på din un-styled-knap, og vælg indstillingen Laste lagstilstand.
Vi vil fortsætte arbejdet med vores højre knap først. Denne knap vil blive mærket "People", og vi vil bruge et ikon på 2+ personer. Af hensyn til denne tutorial vil jeg bruge ikoner lavet af kreative studio Yummygum; du kan finde den pakke jeg brugte på IconSweets.com - Jeg bruger ikoner fra denne pakke gennem hele tutorialen.
Brug de samme skrifttyper, du brugte til navigeringsbjælktitel, skriv dine knapper ud. Ændre størrelsen på og placere den på din knap, og læg derefter dit eget valgikon (eller lav dit eget) i dit dokument. Placer disse to lag lige over din knap. Jeg har fordelt mine lag ud, så der er 15px hver side af dem og knappen og 10px mellem ikonet og teksten. Indsæt lagestilen fra din navbjælke emnetekst på både dit ikon og knapetiketten. Hvis du har brug for at ændre størrelsen på din knaplængde, skal du bruge Direct Selection Tool til at vælge de 4 ankerpunkter til højre og derefter trække. Du kan holde skift-tasten nede for at holde denne ændring lige.
Gentag denne proces med knappen på venstre side af navigationslinjen, denne gang med et krydsikon og ordet "Luk". For at tilføje lidt mere styling til mine knapper sænkede jeg opaciteten af de to baggrundsformer til 95%, hvilket gør det muligt for en lille smule af gittermønsteret under det at skinne igennem.
Trin 8: Tekstfeltbjælke
Det er nu tid til at være opmærksom på resten af vores skærm. Tag det rektangulære formværktøj, og brug de samme dimensioner af vores navigationslinje (640 x 86 px) til at danne en form på dit lærred. Placer det nederst på skærmen.
Trin 9: Baggrunden
Vi skal nu arbejde på baggrund af vores design. Åbn blandingsindstillingspanelet til dit baggrundslag og vælg et mønster for at udfylde det. Jeg brugte et mørkt mønster med lodrette linjer igennem det fra Subtile Patterns - Du kan downloade det fulde mønstersæt her, som jeg stærkt anbefaler.
Hvis du vil tilføje nogle af dine egne farver til det mønster, du har valgt, kan du gøre det ved at bruge farveoverlay-stilen. Jeg brugte en brun (fra min farvepalet, jeg valgte tidligere) på 35%. Denne uigennemsigtighed er lav nok til, at din tekstur / mønster viser sig endnu høj nok til at tynde farven eller din baggrund.
Nu har vi en mørk baggrund, du ser det punkt, hvor vores navigationslinje opfylder vores baggrundsbillede, ser ikke så godt ud. Du kan nemt løse dette ved at anvende en skyggeformat til din navigationslinje, hvilket får det til at virke som om det ligger over din baggrund.
Genåb blandingsoptioner panelet til din navigationslinje og vælg drop shadow panel. Sørg for, at sort er valgt, og skift opacitet til 25%. Forøg både afstanden til 6px og størrelsen til 10px, og klik på OK. Du kan muligvis eksperimentere med disse muligheder, da resultaterne varierer afhængigt af den farve og type tekstur / mønster, du har valgt til din baggrund.
Trin 10: Beskeder
Nu hvor vi har baggrunden og den øverste navigationslinje komplet, vil vi koncentrere os om at få hovedindholdet i appen lagt ud. Vælg rektangulær formværktøjet og læg et rektangel på dit lærred. Bredden jeg brugte var 600px, hvilket giver mulighed for 20px at vise på hver side af formen. Jeg brugte en meget lettere version af den gule / creme farve fra den farvepalette jeg valgte tidligere.
Vælg værktøj til afrundet rektangelformat og skift dimensioner til 80 x 80px og radius til 6px. Placer formen (som skal bruges som vores avatar form) på dit lærred og placer det korrekt. For at holde mit design konsekvent har jeg tilladt 20px at sidde mellem kanterne af min beskedbakgrundsform og min avatarform.
Skriv dit navn og en besked ved hjælp af tekstværktøjet. Jeg brugte Arial Rounded MT Bold til mit navn og normal Arial til min besked tekst-format din tekst, så den passer fint ind i din besked baggrunds boks.
Vi vil nu tilføje nogle stil til vores besked ved hjælp af bare farve; Jeg har ændret farven på mit navn til en mørk turkis (meget tæt på sort) og en udvasket turkis inspireret af min navigationsbjælke.
Jeg indsatte så et billede af mig selv ved at gå til File> Place. Når jeg er blevet indsat, ændrede jeg billedet og placerede det over min sorte avatar boks, som vi lavede tidligere. For at gemme at skære billedet ud, og også for at give dig mulighed for at flytte eller ændre størrelsen på din avatar på et senere tidspunkt, skal du højreklikke på det og vælge indstillingen Create Clipping Mask. Dette vil forbinde dit avatar billede til din avatar sorte boks og vil kun vise, hvad der er over den sorte boks. Du finder ved at bruge Move Tool, som du stadig kan flytte og ændre størrelse på dette billede.
Ved hjælp af et andet IconSweets-ikon oprettede jeg en dejlig lille tidsstempel. Jeg var nødt til at reducere min ikonstørrelse - du kan gøre dette ved at gå til Rediger> Transformér> Fri omformning og ændring af dimensionerne (enten ved pixels eller procent). Jeg brugte 70% i både bredde og højde for at holde proportioner. Jeg tilføjede nogle tekst og voila. Sørg for at vælge en farve, der er let at læse, men ikke råbe for opmærksomhed.
Trin 11: Duplikater meddelelser
Duplicér dine meddelelsesbokse under hinanden, og efterlad et 2px mellemrum mellem hver baggrunds boks. Du kan gøre dette ved enten at klikke og trække dine lag over ikonet Ny lag, eller du kan også trykke på Cmd + Shift + Pil ned på samme tid for at duplikere og pudse lagene nedad.
Skift alt indhold i dine meddelelsesbokse, som om det var en rigtig samtale. Hvis du skal ændre størrelsen på dine baggrunds bokse, skal du bruge Direct Selection Tool og ændre størrelsen på dem ved hjælp af ankerpunkterne. Dette holder alle kanterne hyggelige og skarpe.
Trin 12: Meddelelses styling
Med det gjort kan vi nu koncentrere os om at bringe vores meddelelsesbokse til livs. Åbn blandingsindstillingspanelet, og vælg drop shadow panelet. Skift blandingstilstanden til normal, og vælg hvid som din farve. Forøg opacitet til 80% i stedet for standard 75% og giv skyggen en afstand på 2px. Dette vil skjule det 2px mellemrum, vi forlod mellem hver af meddelelsesboksens baggrunde.
Kopier og indsæt ovenstående lagestil på alle dine bakker i meddelelsesboksen. Du skal ende med noget som ovenfor.
Trin 13: Tilføjelse af afrundede hjørner
For at gøre vores design mere interessant, og også for at tilføje mere dybde, vil vi tilføje afrundede hjørner til bunden af vores meddelelser og få det til at virke som om det er papir stablet på mere papir.
Vælg det afrundede rektangelværktøj og giv det en radius på 10px. Skift bredden til 600px (eller hvad som helst bredde du brugte til baggrundsbakken i din meddelelsesboks), og en højde, der ikke overstiger højden af din nederste meddelelsesboks baggrund. Jeg brugte en lys farve her, så den er let synlig.
Ved hjælp af Direct Selection Tool skal du vælge indholdet af dit vektorformlag (den afrundede boks, vi lige har tegnet) og gå til Rediger> Kopier. Klik på vektorformlaget på din bundmeddelelsesbakke og gå til Rediger> Indsæt. Dette vil indsætte indholdet af formlaget på dit andet formlag. Du kan nu slette den form, vi tegnede i det foregående trin. Du skal stadig se formen synlig.
Åbn blandingsindstillingerne i den nederste meddelelsesboks baggrund og anvend en drop skygge. Skift farve til sort, opacitet til 25%, afstanden til 1px og størrelsen til 3px. Dette vil skabe en dejlig, subtil dropshadow.
Duplikér dette lag og pudse det ned 5px. Skift laget, så det sidder under din original. Du skal ende med noget som ligner nedenfor. Som du kan se, er dette en enkel måde at skabe et overlappende papirudseende på.
Gentag trin igen, så du har tre stykker papir i stedet for kun to. Du kan måske give dit nederste stykke papir en lidt mere mærkbar dropshadow.
Trin 14: Navigeringslinje skygge
Du har sikkert bemærket, at mens vi designede vores meddelelsesbokse, skjulte vi det meste af dropshadowen, som vores navigationslinje støbte på vores baggrund. For at erstatte dette kan du enten placere dine meddelelser under navigationslinjen (den nemme mulighed men urealistisk) eller gennemføre følgende trin.
Vælg det rektangulære markeringsværktøj og tegn en tynd linje øverst på dine meddelelser, som ligner ovenstående. Fyld det med sort på et nyt lag.
Gå til Filter> Blur> Gaussian Blur og anvend bluren. Dette vil nu fungere som en skygge - skal du bare klippe ud nogle punkter af det uskarphed, der overlapper kanterne af din meddelelsesboks baggrund.
Trin 15: Profil og rapport knapper
Med henvisning til vores wireframes, havde vi besluttet at tillade brugere at skubbe en besked til venstre for at afsløre flere knapper. I dette tilfælde giver disse knapper brugeren mulighed for at se meddelelsesplakatprofilen eller rapportere meddelelseposten.
Vælg de lag, der udgør en af dine meddelelser (jeg vælger Homer Simpsons besked), og ved hjælp af skift-tasten og piletasterne skal du skubbe meddelelsen 10px ad gangen til venstre. Brug tekstværktøjet, skriv dine etiketter, og vælg derefter nogle ikoner, der svarer til disse etiketter. Jeg valgte en person til profil og et mål for rapport (som om du skyder dem ned - jeg troede det var ret sjovt!).
For at give dette område mere dybde, tilføjede jeg en sort dropshadow til både ikonerne og teksten.
Trin 16: Tekstfeltbjælke
Tekstfeltet er et af de vigtigste elementer på denne skærm. Brugere skal kunne indsende deres meddelelser med lethed og ingen forvirring (det er derfor jeg fjernede den skjulte send-knap i de indledende skitserede koncepter).
For at starte med skal du finde dit baggrundslag og kopiere lagformaterne. Indsæt disse lagtyper på det tekstfeltstangslag, som vi lavede tidligere. Åbn blandingsmulighederne for dette lag op og vælg stregpanelet. Påfør en 2px slagtilfælde på ydersiden af din form ved hjælp af solid sort som din farve. Da slagtilfælde er på ydersiden, og formen berører tre kanter på lærredet, vises kun slagtilfælde oven på formen.
Nu skal du vælge den indvendige skyggefane og ændre blandingsfunktionen til normal, farven til hvid, opacitet til 10% og afstanden til 2px. Sørg for, at vinklen er indstillet til den globale lysstandard (90 grader), og klik på OK. Dette giver os en god højdepunkt under vores sorte slagtilfælde. Med disse to enkle 2px linjer anvendt, ser vores tekstfeltet allerede godt adskilt fra resten af baggrunden, selvom den har samme baggrund!
Vælg det afrundede rektangelværktøj. Giv dit værktøj en høj radius, jeg brugte 50px; dette vil give det meget runde (cirkulære) ender. Placer en form på din bar, jeg brugte 460x54px som mine dimensioner. Sørg for, at venstre side af din tekstfeltform er 20 px væk fra venstre side af din lærred for at holde designafstanden ensartet.
Fyld formen med en mørk farve (jeg brugte en brun markeret fra en mørk pixel i baggrunden) og derefter åbne panelet for lagstilstand. Anvende en 2px hvid dropshadow til dit tekstfelt med en opacitet på 10%.
Klik på det indre skyggepanel og anvend en indre skygge til din tekstfeltform. Dette vil give det meget mere dybde og få det til at se ud som om det er skåret ind i stængernes baggrund. Brug sort med en blandingstilstand for multiplikation og en opacitet på 25%. Jeg brugte 5px som min afstand og 10px som min størrelse, selvom du måske vil eksperimentere her.
Brug tekstværktøjet og udstyret med Arial Rounded MT Bold, skriv "Skriv en kommentar ..." og placer det i din tekstfeltboks. Åbn blandingsmulighederne for dit nye tekstlag, og anbring en sort dropshadow med en opacitet på 75%, afstanden på 2px og en størrelse på 3px.
Trin 17: Tekstfelt-knap
Vaelg det runde rektangelformningsværktøj og brug de samme radiusindstillinger og højde, som vi tidligere brugte, læg en form på din tekstfeltbjælke baggrund. Ændre størrelsen på din knap, så den sætter 10 px fra dit tekstfelt og 20 px fra den højre kant af lærredet.
Højreklik på dit nye formularlag og vælg blandingsindstillinger. Vælg panelet for gradientoverlay og anvend en gradient fra lys (øverst) til mørk (nederst). Jeg brugte den storslåede gule farve, der var i den farvepalet, jeg valgte tidligere.
For at holde vores design konsistent, vil jeg anvende et slagtilfælde på vores knap, der gør det til at se ud som om det kommer ud af baggrunden, ligesom vi gjorde med knapperne i navigationslinjen. Denne gang brugte jeg solid sort i stedet for en gradient slag, da baggrunden er meget mørkere og ikke fyldt med en gradient. Jeg brugte en 2px slagtilfælde på indersiden af min form med 100% opacitet.
Vælg tekstværktøjet og skriv "Send" på din knap. Åbn blandingsindstillingerne for dit nye tekstlag og anvend en brun dropshadow til din tekst med en afstand på 1px og en størrelse på 3px.
Og med det er vi færdige! Vi vil gerne se dine resultater, så vær venlig at sende dem i kommentarfeltet nedenfor. Hvis du vil se designet i fuld opløsning, kan du se det her .