I denne opplæringen skal vi designe et iPhone-brukergrensesnitt for et forum- og chatbasert mobilprogram.

Appen innebærer en håndfull hverdagens berøringsgrensesnittelementer, for eksempel knapper, inngangsfelt og berøringsbevis.

Vi vil dekke ulike Photoshop-verktøy, lagstiler og selvfølgelig takle noen designbegrensninger; i tillegg gjør designpixel-perfekt og vakkert nok til å være verdig til et sted på en iPhone-skjerm.

Designet ble satt sammen ved hjelp av Photoshop CS5.5, men alle nyere versjoner av Photoshop vil fungere fantastisk.

Krav til appskjermen

Vi skal bare lage en skjerm i denne opplæringen. Skjermbildet skal være den viktigste chat-skjermen for et chatbasert program, omtrent som et offentlig chatrom, men på telefonen. Kravene til denne skjermen er:

  • En header - dette er chatterommet du er inne i.
  • En tilbake / lukk / emner-knapp - for å gå tilbake til forrige skjerm.
  • Et folkeknapp - dette viser hvem som er i øyeblikket i chatterommet.
  • En liste over meldinger - meldinger må ha avatar og tidsstempel.
  • En måte å vise brukerprofiler og rapportering av meldinger på.
  • Et tekstfelt for å skrive meldingene dine.
  • En send-knapp for å legge inn meldingene dine.

Planlegging, skissering og wireframing

Som med ethvert brukergrensesnittprosjekt, planlegging, skissering og wireframing er grensesnittet ditt essensielt. Det regulerer ganske ofte noen dumme ideer (selv om de kanskje ikke virker dumme i hodet ditt!) Før du setter digitale konsepter og mockups sammen. Det som kan virke som en glimrende løsning for å fikse et problem i hodet, kan i det hele tatt ikke fungere i praksis. Derfor er wireframing før et prosjekt blir et så viktig skritt.

Ta en penn og favorittputen din og begynn å skisse.

Som du kan se fra bildet ovenfor, brukte jeg bare noen få minutter å sette sammen tre forskjellige konsepter; vanligvis tar denne prosessen dager eller noen ganger uker, men da vi bare designer en skjerm og formålet med appen er enkel, bør skisse disse ikke ta lang tid! De er mest liknende, men hver har sine unike forskjeller, som jeg vil oppsummere nedenfor.

Skisse A

Inspirert av den opprinnelige Twitter-brukergrensesnittet for iPhone, kan brukergrensesnittet gi brukere mulighet til å sveipe på en melding for å vise flere alternativer, for eksempel "Vis profil" og "Rapporter bruker" - en morsom og plassbesparende måte å tillate mer innhold på denne skjermen. Jeg lekte med ideen om å ha en innstillingersknapp i navigeringslinjen på denne skjermen, men bestemte meg for å følge min normale regel om "Less Is More" - det er usannsynlig at brukeren vil få tilgang til innstillingene hver gang de bruker appen, slik at det ikke er nødvendig her.

Skisse B

Dette konseptet er litt mer kompakt, med "Vis profil" og "Rapport bruker" -knappene som statiske ikoner til høyre for meldingene. Jeg spilte med ideen om ikke å ha en "Send" -knapp her, og bruk istedenfor send-knappen på IOS-tastaturet. Jeg bestemte meg for dette fordi de fleste apper (inkludert iOS standardapper som meldinger) har tastaturet send-knappen og tilleggs-send-knappen ved siden av tekstfeltet. Jeg liker å holde grensesnittene mine i samsvar med andre i App Store.

Skisse C

Skisse C er skissen jeg har bestemt meg for å fortsette med - i stedet for en tilbakeknapp har vi en nær knapp. Jeg tror dette gjør det mer tydelig at når du klikker på Lukk, vil du ikke lenger være en del av den samtalen (i motsetning til meldingsapps, hvor du går tilbake, og kan komme tilbake til fortsatt å se alle de tidligere meldingene). Folkknappen viser en liste over brukere som er i øyeblikket i chatroomet, og jeg har lest opp ideen om å ha lysbildet for å vise flere funksjoner (for eksempel Twitter-appen) for å tillate brukeren å se brukerens profil eller rapportere dem.

Med dette gjort, er det på tide å fortsette å sette noe sammen i Photoshop!

Trinn 1: Status og navigeringslinje

Før vi går videre med dette trinnet, må vi opprette dokumentet vårt. Den vanlige iPhone-skjermstørrelsen (ved Retina-oppløsning) er 640px bred og 960px høy med en oppløsning på 326ppi. Jeg pleier å begynne med en hvit bakgrunn i designene mine.

Det første trinnet er å sette inn standardstatuslinjen iOS. Statuslinjen er linjen øverst på iPhone som forteller deg viktig informasjon som signal, bærer, tid og batterilevetid. Det finnes tre alternativer her: en svart bar, en svarte bar med lav gjennomsiktighet eller sølvbaren.

Hvis du vil gjøre app-designen din til den virkelige avtalen, kan du hente statuslinjen fra Retina iPhone GUI PSD-settet funnet her . Bare last ned og åpne PSD, og ​​dra den linjen du vil over til PSD-dokumentet. Plasser den øverst på lerretet ditt.

Navigeringsfeltet er neste på vår oppgaveliste. Standardnavigasjonslinjen er 86px høy, og spenner over hele bredden på iPhone (640px). Igjen kan du trekke dette elementet over fra det nevnte PSD-settet, eller du kan opprette dette manuelt (mitt foretrukne alternativ, da det ikke er noen vedlagte stiler). Velg Rectangle Shape Tool og legg et 640 x 86px rektangel på lerretet ditt.

Trinn 2: Navigeringslinjeknapper

Med henvisning til våre wireframes har vi to knapper på navbaren vår. Velg avrundet rektangelformet verktøy (husk å alltid bruke formverktøy for former i UI-design, det gjør det mye lettere å skalere dokumentet vårt for lavere oppløsninger!). Jeg har brukt dimensjoner 100 x 50 px med en hjørne radius på 6px.

Legg denne formen på både venstre og høyre side av navigasjonsfeltet, og plasser dem pent.

Trinn 3: Stilvalg

Det er på tide å begynne å velge vår design stil. Denne appen tillater folk å snakke og møte nye mennesker, og la folk ha det gøy å gjøre det. Av den grunn føler jeg meg en morsom, quirky fargevalg, og typografi her er viktig for å få det poenget på tvers.

Velg Typeverktøyet og velg et skrift som samsvarer med bildet du har i hodet ditt. Jeg valgte den latterlige Arial Avrundet MT Fet . Skriv inn emnet ditt (jeg valgte "UI Design") og juster det sentralt på navigasjonsfeltet.

Fortsetter med det morsomme temaet vi har valgt for appen, er det på tide å velge noen farger. Jeg bruker personlig Color Lovers for å inspirere mine fargevalg når jeg designer. I dette tilfellet søkte jeg etter "morsom" og i løpet av få sekunder ble jeg presentert med mange forskjellige alternativer og inspirerende paletter å bruke som en base for designet mitt.

Jeg endte med å plukke en kalt lekerom . Det er viktig å tenke på hvilke farger du trenger når du velger en palett; Jeg finner å plukke noe lys, noe mørkt, og noe lyst er alltid et godt utgangspunkt. Det er viktig å ha god kontrast i designet.

Trinn 4: Navigeringstast styling

Vi skal nå flytte tilbake til navigasjonsfeltet og gi den fargen den fortjener. Velg navigasjonslinjelaget (jeg håper du har holdt lagene dine organisert!), Høyreklikk og velg Blandingsalternativer. Dette er hjemmet til de kraftigste Photoshop-verktøyene når det gjelder å skape pixel-perfekt grensesnittdesign. Herfra kan du legge til skygger, gradienter, mønstre og stokes, med muligheten til å kopiere og lime inn disse stilene på andre lag.

Først av alt skal vi legge til en gradient i baren vår, så klikk på Gradient Overlay. Jeg har valgt den turkise fargen som den jeg vil bruke til navigeringslinjen min. Det er lyst og pakker en kraftig slag, og vil gjøre vårt design lett å huske. Påfør en 90 graders vinkelgradient som går fra lys (topp) til mørk (bunn).

Klikk nå på Stroke-panelet. Endre størrelsen på ditt slag til 2 i stedet for standard 3. Et tips er å alltid prøve å unngå ulike tall i UI-design, spesielt på mobile enheter. Dette vil bare gi mer arbeid for både designeren og utvikleren når det gjelder å skalere arbeidet (du kan ikke ha halvparten av piksler som en halv pixel ikke eksisterer!).

Endre fyllingstypen av streken din til gradienten, og sørg for at streken kommer til å vises på utsiden av figuren din. Velg en mørk turkis farge for bunnen av ditt slag og svart for toppen. Fordi strekket er på utsiden av navigeringslinjen, vil den svarte delen av strekket ikke vises øverst på statuslinjen, og derfor kan alle brukerne se slaget nederst.

Velg Innerskyggepanelet og bruk en hvit skygge på 15% på baren din. Dette vises øverst i baren din, og gir det et flott høydepunkt, slik at det vises mer 3D. Jeg ga min skygge en avstand på 2px og en størrelse på 3px.

Nå er det på tide å virkelig gjøre vår navigasjonslinje pop. Ved å bruke mønstre, kan vi legge til mye dybde i vårt design. Jeg bruker et hvitt rutenett på navigasjonsfeltet. Hvis du vil bruke dette mønsteret, kan du laste ned en samling av dem gratis på Premium piksler .

Trinn 5: Typografi skygging

For å gi vår typografi litt dybde, åpner du blandingsalternativer-panelet og bruker en dråpeskygge. Endre vinkelen til -90 (pass på at Bruk Global Style ikke er merket her ellers vil alle skygger i designet endres til -90) og bruke samme farge du brukte til bunnen av navigasjonslinjene. Gi skyggen en avstand på 2px og slipp størrelsen til 0px. Dette gir en ren, snitt drop skygge over teksten din umiddelbart, noe som gjør det mer interessant.

Trinn 6: Navigeringsknapp knapp styling

Vi skal nå bruke noen kjempebra stiler til knappene på navigasjonsfeltet. Vi vil at disse knappene skal binde seg godt sammen med navigeringslinjen, men samtidig må de skille seg godt ut slik at brukeren umiddelbart kan gjenkjenne at de er knapper. For å gjøre dette, skal vi bruke flere lagstiler for å gi dem en 3D, øyeffekt.

Åpne oppsettpanelet for blanding og klikk på gradientoverlegg. Gi knappen en lys (topp) til mørk (nederst) gradient ved å bruke farger fra navigasjonslinjen. Lysfargene ble valgt fra høydepunktet på navlinjen, og den mørke fargen ble valgt fra nederst på min navstang.

Velg strekpanelet og endre strekens størrelse til 2px, med en utvendig posisjon. Bytt fyllingstype til gradient og vinkelen til 90 grader. Endre gradientfargene fra lys (topp) til mørkt (nederst), basere farger på farger som allerede er brukt til navigasjonslinjen og knappene. Umiddelbart ser du at dette slaget gir knappen et 3D-utseende, som om det kommer ut av navigeringslinjen i stedet for å sitte på toppen av det.

For å skru opp knappen litt mer og gjøre den enda mer visuelt tiltalende, skal vi legge til en indre glød på knappen. Klikk på det indre lyspanelet og endre blandemodus til skjerm. Slipp opaciteten til 20% og sørg for at støy er satt til 0%. Endre standard gul glød til hvit og sørg for at størrelsen fortsatt er satt til 5px-standarden. Dette burde gi knappen en fin indre glød, noe som gjør at knappen ser veldig behagelig ut!

Vi skal nå legge til en indre skygge for å gjøre knappen vår litt mer realistisk. Endre opaciteten til 15% og velg svart som fargen din. Ta avstanden til 2px og størrelsen til 4px. Endre vinkelen til -90 grader (pass på at bruk Global Light ikke er valgt). Dette gir bunnen av knappen din en liten skygge, gjemmer noe av den nederste indre gløden vi nettopp har brukt. I virkeligheten ville dette området være skyggelagt, så det var viktig å skjule den indre glansen her.

For å fullføre stilen på knappen vår, legger vi til en dråpeskygge. Velg drop shadow panelet og bytt farge til hvitt med en dekkhet på 25%. Denne skyggen kommer til å fungere som et høydepunkt under vårt slag, så endre avstanden til 4px (2px for å dekke slagområdet og 2px som blir sett under slag).

Trinn 7: Knappetiketter

En knapp uten etikett er meningsløs, så nå skal vi tilbringe litt tid for å fullføre knappene våre. Først av alt, høyreklikk på den stylede knappen og velg alternativet Kopier lagstil. Nå høyreklikk på din un-styled-knapp og velg alternativet Lim inn lagstil.

Vi skal fortsette arbeidet med vår høyre knapp først. Denne knappen vil bli merket "People" og vi vil bruke et ikon på 2+ personer. For denne tutorials skyld skal jeg bruke ikoner laget av kreative studio Yummygum; du kan finne pakken jeg brukte på IconSweets.com - Jeg bruker ikoner fra denne pakken gjennom hele opplæringen.

Bruk de samme skriftene du brukte til navigeringslinjens tittel, skriv inn knappene dine. Endre størrelsen og plasser den på knappen, og plasser deretter ditt eget valgikon (eller lag ditt eget) i dokumentet. Plasser disse to lagene like over knappen din. Jeg har fordelt lagene mine så det er 15px hver side av dem og knappen, og 10px mellom ikonet og teksten. Lim inn lagstilen fra nav-navet emnetekst på både ikonet og knappetiketten. Hvis du trenger å endre størrelsen på knappens lengde, bruker du direktevalgverktøyet til å velge de 4 ankerpunktene til høyre, og deretter dra. Du kan holde skift-tasten nede for å holde denne endringen rett.

Gjenta denne prosessen med knappen på venstre side av navigasjonsfeltet, denne gangen med et kryssikon og ordet "Lukk". For å legge til litt mer styling til knappene mine, reduserte jeg opaciteten til de to bakgrunnsformene til 95%, dette tillater en liten bit av rutenettet under det å skinne gjennom.

Trinn 8: Tekstfeltfelt

Nå er det på tide å være oppmerksom på resten av skjermen. Ta tak i rektangulærformverktøket og bruk de samme dimensjonene i navigeringslinjen (640 x 86px). Legg på en form på lerretet ditt. Plasser den nederst på skjermen.

Trinn 9: Bakgrunnen

Vi skal nå jobbe på bakgrunn av vårt design. Åpne oppsettpanelet for blanding for bakgrunnslaget ditt og velg et mønster for å fylle det opp. Jeg brukte et mørkt mønster med vertikale linjer som går gjennom det fra Subtile Patterns - Du kan laste ned hele mønsteret her som jeg anbefaler.

Hvis du vil legge til noen av dine egne farger i mønsteret du har valgt, kan du gjøre det ved å bruke fargelagringsstilen. Jeg brukte en brun (fra min fargepalett jeg valgte tidligere) på 35%. Denne opaciteten er lav nok til at tekstur / mønster viser seg fremdeles høyt nok til å tynne fargen eller bakgrunnen.

Nå har vi en mørk bakgrunn, du ser punktet der navigasjonslinjen vår oppfyller bakgrunnsbildet vårt, ikke ser ganske bra ut. Du kan enkelt fikse dette ved å bruke en skyggestil til navigasjonslinjen din, noe som gjør at det ser ut som om det ligger over bakgrunnen din.

Åpne åpningsalternativpanelet for navigeringslinjen og velg drop shadow panelet. Kontroller at svart er valgt, og endre opaciteten til 25%. Øk både avstanden til 6px og størrelsen til 10px, og klikk OK. Du må kanskje eksperimentere med disse alternativene, da resultatene vil variere avhengig av farge og type tekstur / mønster du har valgt for bakgrunnen.

Trinn 10: Meldinger

Nå som vi har bakgrunnen og toppnavigasjonslinjen fullført, skal vi konsentrere oss om å få hovedinnholdet til appen lagt ut. Velg Rectangle Shape Tool og sett et rektangel på lerretet ditt. Bredden jeg brukte var 600px, slik at 20px kunne vises på hver side av formen. Jeg brukte en mye lettere versjon av gul / creme fargen fra fargepaletten jeg plukket tidligere.

Velg verktøyet med avrundet rektangulær form og endre dimensjonene til 80 x 80px, og radiusen til 6px. Plasser formen (som skal brukes som vår avatarform) på lerretet og plasser det på riktig måte. For å holde designen min konsekvent, har jeg tillatt 20px å sitte mellom kantene av meldingsbakgrunnsformen og min avatarform.

Bruk tekstverktøyet, skriv navnet ditt og en melding; Jeg brukte Arial Rounded MT Bold for mitt navn og normal Arial for min melding, tekst-format teksten slik at den passer pent inn i meldingsbakgrunnsboksen.

Vi skal nå legge til stil i vårt budskap ved hjelp av bare farge; Jeg endret fargen på navnet mitt til en mørk turkis (svært nær svart) og en utvasket turkis inspirert av navigasjonsbaren.

Jeg så inn et bilde av meg selv ved å gå til File> Place. Når jeg har satt inn, endret jeg bildet og lagde det over min svarte avatar boks som vi opprettet tidligere. For å lagre skjære bildet ut, og også å gi deg muligheten til å flytte eller endre størrelsen på avataren din på et senere tidspunkt, høyreklikk på det og velg alternativet Create Clipping Mask. Dette vil koble avatarbildet ditt til din avatar-svart boks og vil bare vise hva som er over den svarte boksen. Du finner ved å bruke Move Tool som du fortsatt kan flytte og endre størrelse på dette bildet.

Ved å bruke et annet IconSweets-ikon skapte jeg en fin liten tidsstempel. Jeg måtte redusere størrelsen på ikonet - du kan gjøre dette ved å gå til Rediger> Transform> Gratis Transform og endre dimensjonene (enten ved piksler eller prosentandel). Jeg brukte 70% i både bredde og høyde for å holde proporsjoner. Jeg la til litt tekst, og voila. Pass på å velge en farge som er lett å lese, men ikke rope for oppmerksomhet.

Trinn 11: Dupliser meldinger

Dupliser meldingsboksene dine under hverandre, og la et 2px mellomrom mellom hver bakgrunns boks. Du kan gjøre dette ved å enten klikke og dra lagene dine over ikonet Ny lag, eller alternativt du kan trykke Cmd + Shift + Pil ned samtidig som du kopierer og dytter lagene nedover.

Endre alt innholdet i meldingsbokser, som om det var en ekte samtale. Hvis du trenger å endre størrelsen på bakgrunnsboksene dine, bruk Direct Selection Tool og endre størrelsen på dem ved å bruke ankerpunktene. Dette holder alle kantene fine og skarpe.

Trinn 12: Melding styling

Med det gjort kan vi nå konsentrere oss om å bringe våre meldingsbokser til livs. Åpne oppsettpanelet for blanding og velg drop shadow panelet. Endre blandemodus til normalt, og velg hvitt som fargen din. Øk opaciteten til 80% i stedet for standard 75% og gi skyggen en avstand på 2px. Dette vil skjule 2px-gapet vi igjen mellom hver av meldingsboksens bakgrunner.

Kopier og lim inn ovennevnte lagstil på alle bakgrunnsbokene i meldingsboksen. Du burde ende opp med noe som ovenfor.

Trinn 13: Legge til avrundede hjørner

For å gjøre vårt design mer interessant, og for å legge til mer dybde, skal vi legge til avrundede hjørner nederst i meldingene våre, og få det til å virke som om det er papir på pilen på mer papir.

Velg det avrundede rektangelverktøyet og gi det en radius på 10px. Endre bredden til 600px (eller hvilken bredde du brukte til bakgrunnsboksen til meldingsboksene) og en høyde som ikke overskrider høyden på bunnbakgrunnsbakgrunnen. Jeg brukte en lys farge her slik at den er lett synlig.

Bruk direkte utvalgsverktøyet, velg innholdet i vektormodellaget (den avrundede boksen vi nettopp har tegnet) og gå til Rediger> Kopier. Klikk på vektorformlaget på bakgrunnsbakgrunnsbakgrunnen og gå til Rediger> Lim inn. Dette vil lime inn innholdet i formlaget på det andre formlaget. Du kan nå slette formen vi tegnet i forrige trinn. Du bør fortsatt se formen synlig.

Åpne blandingsalternativene i bakgrunnen til den nederste meldingsboksen og bruk en dråpeskygge. Bytt fargen til svart, opaciteten til 25%, avstanden til 1px og størrelsen til 3px. Dette vil skape en fin, subtil dropshadow.

Dupliser dette laget og dytt det ned 5px. Sett på laget slik at det sitter under originalen. Du bør ende opp med noe som ligner på under. Som du kan se, er dette en enkel måte å skape et overlappende papir utseende på.

Gjenta trinnet igjen slik at du har tre papirer i stedet for bare to. Du vil kanskje gi bunnstykket et litt mer merkbart dropshadow.

Trinn 14: Skygge i navigeringslinjen

Du har sikkert lagt merke til at mens du utformet våre meldingsbokser, skjulte vi mesteparten av dropshadowen som vår navigasjonslinje stødte på bakgrunnen vår. For å erstatte dette kan du enten plassere meldingene under navigasjonsfeltet (det enkle alternativet, men urealistisk) eller fullføre følgende trinn.

Velg Rectangular Marquee Tool og trekk en tynn linje øverst på meldingene dine som ligner på ovenfor. Fyll den med svart på et nytt lag.

Gå til Filter> Uklarhet> Gaussisk uskarphet og bruk uskarphet. Dette vil nå fungere som en skygge - bare kutte ut noen biter av uskarphet som overlapper kantene på meldingsboksens bakgrunn.

Trinn 15: Profil- og rapportknapper

Med henvisning til våre wireframes, hadde vi besluttet å la brukerne sveipe en melding til venstre for å avdekke flere knapper. I dette tilfellet tillater disse knappene brukeren å vise meldingsplattformprofilen, eller rapportere meldingsplakaten.

Velg lagene som utgjør en av dine meldinger (jeg velger Homer Simpsons melding) og bruk skift-tasten og piltastene, slett meldingen 10px om gangen til venstre. Bruk tekstverktøyet, skriv etikettene dine, og velg deretter noen ikoner for å korrespondere med disse etikettene. Jeg valgte en individuell person for profil, og et mål for rapport (som om du skyter dem ned - jeg trodde det var ganske morsomt!).

For å gi dette området mer dybde, la jeg til en svart dropshadow til både ikonene og teksten.

Trinn 16: Tekstfeltfelt

Tekstfeltfeltet er et av de viktigste elementene på denne skjermen. Brukere må kunne skrive inn meldingene sine med lethed og ingen forvirring (det er derfor jeg fjernet den skjulte sendeknappen i de første skisserte konseptene).

For å starte, finn bakgrunnslaget ditt og kopier lagformatene. Lim inn disse lagformatene på tekstfeltbjelaget som vi opprettet tidligere. Åpne blandingsalternativene for dette laget og velg berøringspanelet. Påfør en 2px slag på utsiden av figuren din ved å bruke solid svart som fargen din. Ettersom strekken er på utsiden, og formen berører tre kanter på lerretet, vises bare slaget på toppen av formen.

Velg nå den indre skyggefanen og endre blandemodus til normalt, fargen til hvit, opaciteten til 10% og avstanden til 2px. Kontroller at vinkelen er satt til global lysstandard (90 grader) og klikk OK. Dette gir oss et fint høydepunkt under vårt svarte slag. Med disse to enkle 2px-linjene som brukes, ser vår tekstfeltbjelke seg godt ut fra resten av bakgrunnen, selv om den har samme bakgrunn!

Velg det avrundede rektangelverktøyet. Gi verktøyet en høy radius, jeg brukte 50px; Dette vil gi det veldig runde (sirkulære) ender. Sett en form på baren din, jeg brukte 460x54px som mine dimensjoner. Pass på at venstre side av tekstfeltformen er 20px unna venstre side av lerretet for å holde designavstanden konsistent.

Fyll formen med en mørk farge (jeg brukte en brun valgt fra en mørk piksel i bakgrunnen), og deretter åpner du lagformatpanelet. Påfør en 2px hvit slippskygge til tekstfeltet med en opasitet på 10%.

Klikk på det indre skyggepanelet og bruk en indre skygge til tekstfeltformen. Dette vil gi det mye mer dybde og få det til å se ut som om det er kuttet i stolpene. Bruk svart med blandingsmodus for multiplikasjon og en opasitet på 25%. Jeg brukte 5px som min avstand og 10px som min størrelse, selv om du kanskje vil eksperimentere her.

Bruk tekstverktøyet og utstyrt med Arial Rounded MT Bold, skriv "Skriv en kommentar ..." og plasser den i tekstfeltet. Åpne blandingsalternativene for det nye tekstlaget, og bruk en svart dropshadow med en opasitet på 75%, avstand på 2px og størrelse på 3px.

Trinn 17: Tekstfelt-knapp

Velg det runde rektangelformverktøyet og bruk de samme radiusinnstillingene og høyden vi tidligere brukte, sett en form på tekstfeltbjelken din. Endre størrelsen på knappens lengde slik at den sitter 10px fra tekstfeltet og 20px fra høyre kant av lerretet.

Høyreklikk på det nye knappen for formlag og velg blandingsalternativer. Velg gradientoverleggspanelet og bruk en gradient fra lys (topp) til mørk (nederst). Jeg brukte den flotte gule fargen som var i fargepaletten jeg valgte tidligere.

For å holde konseptet konsistent, skal jeg bruke et slag til vår knapp som gjør at det ser ut som om det kommer ut av bakgrunnen, akkurat som vi gjorde med knappene i navigeringsfeltet. Denne gangen brukte jeg solid svart i stedet for et gradientslag, da bakgrunnen er mye mørkere og ikke er fylt med en gradient. Jeg brukte en 2px slag på innsiden av min form med 100% opacity.

Velg tekstverktøyet og skriv "Send" på knappen. Åpne blandingsalternativene for det nye tekstlaget, og bruk en brun dropshadow til teksten med en avstand på 1px og en størrelse på 3px.

Og med det er vi ferdige! Vi vil gjerne se resultatene dine, så vær så snill å poste dem i kommentarfeltet nedenfor. Hvis du vil se designen i full oppløsning, kan du se det her .