designer en modulopbygget brugergrænseflade kit i photoshop,,,,,,, rolle med photoshop i web - design, er ved at blive mere modulære.i stedet for at danne et pixel perfekt indretning af en hel hjemmeside, måske er det mere fornuftigt at koncentrere sig om disse dage generelle styles, farve, ordninger og særlige grænseflade elementer.i dag skal vi se nærmere på, at eu - erhvervsgrenen elementer, at samle vores egne eu - erhvervsgrenen i processen.,,,, læring som eksempel, før vi begynder at udforme vores egen indsamling af ui elementer, lad os tage et kig på nogle websteder, der har gjort et stort arbejde med deres grænseflade.det skader ikke at få inspiration!bilag a: flow, strømmen er eu - erhvervsgrenen, strøm er et godt stykke arbejde med deres brugergrænseflade.det er helt ren, levende - - og bare ved at se på det du instinktivt ved, hvad laver og hvor.se de store brug af farver og symboler, der er indarbejdet i webapplikationen. bilag b: gumroad,,, gumroad er eu - erhvervsgrenen,, gumroad har en stor stemning der med deres grænseflade.ikke blot er grænsefladen sjovt, det gør et godt stykke arbejde for at fremlægge information i en ren, kortfattet og enkelt.se, hvordan den opfordring til handling knapper virkelig hoppe ud fra den side, bilag c: squarespace,,, squarespace er eu - erhvervsgrenen,, squarespace tager minimal og ren til næste niveau.uden brug af farver, grænsefladen fortsat tillader brugere let kan navigere igennem instrumentbrættet.- selv om der er en del af indholdet, intelligent anvendelse af skygger, gør alle de tal mindre skræmmende. bilag d: gosquared,,, gosquared er eu - erhvervsgrenen,, gosquared er eu - erhvervsgrenen viser, at indholdet af tunge web ansøgninger kan også udnytte godt design.med anvendelse af moduler grænsefladen bliver ren og consistant.de store brug af farve accent også tilføje, at eu - erhvervsgrenen.bemærk, hvordan denne type grænseflade egner sig godt til tilpasning; brugerne let kan skifte, fjerne, tilføje eller ændre moduler.,, at skabe vores egen design, nu har vi taget et kig på nogle eksisterende brugergrænseflader, det er tid til at gøre det selv.vi begynder med hovedet, farver, som vi tidligere har set, farver, er meget vigtige, når det drejer sig om en webapplikation; farverne bidrager til at definere atmosfære, og det gør app let at identificere.forskellige farver også fremkalde forskellige stemninger eller emner (f.eks. gumroad er legesyge farver på web - app, er stress frit og let at bruge), og de kan bruges til at målrette forskellig demografi (f.eks. stærkt og levende for et ungt publikum, neutral og let for en ældre publikum). husk på, at det ville være bedst at vælge en beskeden farver med farver, som er let at se på.og sørg for at bruge kontrast og forskellige nuancer, som denne bidrager til at definere visuelle hierarki og gør det lettere at indhold filtreres gennem, som det fremgår af ovenstående eksempler.  , som vi ikke har noget formål, til en app, vil vi være beskeden og vælge en mere sofistikeret, gråblå farve ordning:,, otte store farver, vi bruger i vores design, stil, der er enestående i form af stil er vigtigt for en webapplikation, som farver, stil er en måde at få din ansøgning genkendelige og skiller sig ud fra de andre.i dag, vi vil fokusere på moderne og enkelt.selv om stigninger er fint på egen hånd, at mønstre og mønstre kan få elementer stå ud og skabe en mere praktisk erfaring.for at opnå den virkning, vi vil anvende en støj mønster på sejlads bar og knapper.tjek forskel:,,, mærke forskellen støjen gør til venstre?enkelt, men effektivt!, ud over de mønstre, vil vi bruge lag styles at presse på, således at de ikke kun stå ud, men deres stater også er distiguishable.i billedet ovenfor, kan man tydeligt se, at "hjem" knappen er aktiv.,, trin 1: oprettelse af design, uden yderligere forsinkelse, lad os tænde op i photoshop.starte med at skabe et nyt dossier, som er 600px bred og 350px højt (default web indstillinger).skabe et rektangel form, der fylder hele lærred og omdøbe de lag »bg«.da vi har en baggrund, slette misligholdelse "baggrund" lag.næste, ændre fylde farve,&#dde3ec,.,, skabe en ny rektangel form, der er 600px bred og 70px højt, og tilpasse det til toppen af lærred.dette vil være vores web - app 's navigations - bar.det er vigtigt at holde   dimensioner   i betragtning ved udformningen, i dette tilfælde, vi ikke vil have en sejlads, som er for stort og påtrængende, at resten af app 'en, så 70px er ideelt.,, note: i en browser situation, vi kan bruge ems størrelse vores side elementer, men når med photoshop må vi holde os til det, at lag' omdøbe nav bar og ændre fylde farve,񊋤,.det er vigtigt at vælge en kontrasterende farve for deres navigation element og gøre det stå ud fra baggrunden.i dette tilfælde har vi en blå baggrund og en blå grå navigations - bar.lås holdninger i de to lag, bare så de ikke vagt ved et uheld.her er, hvad du har på dette punkt:,,,, trin 2: at skabe en lyd -, før vi begynder at lægge stil vores navigation bar, vi vil simulere støj mønster, som jeg nævnte før, skabe en ny dokumentation, som er 100px bred og 100px højt (default web indstillinger).skabe et nyt lag, udvælge hele lærred (cmd /ctrl +) og fylder den med en anden farve (cmd /ctrl + backspace).fra menuen, sejle til at filtrere > støj > der tilsættes støj.sæt den støj beløber sig til 400%, distributionen til ensartede og sikre hyperaktive er udvalgt.her er hvordan det skal se:,,, når du har det, gå til menu, edit > at definere mønster, navn - "støj" og klik på "okay".nu har du en lyd mønster, som du kan bruge til at stil elementer.der er mange ressourcer på nettet, at give mønstre for web - forsøge at eksperimentere med dem at skabe en enestående, se!,, trin 3: navigation bar, der vender tilbage til vores web - app - psd, gå til lag - muligheder for nav bar ".ved hjælp af en lag, styles, er det let at tilføje nogle store virkninger denne enkle form. vi vil starte ved at tilføje en 1px slag uden for lag, med fyld farve,� og uklarhed på 100%.det vil give os et afgørende linje, som adskiller det element i baggrunden. dernæst vil vi tilføje et drop shadow for lag: blanding tilstand som normale, farve, som�, uklarhed, 58%, vinkel, som 90 grader, afstand, som 1px, fordelt som 0px og størrelse som 5px.dette fald skygge vil give en god effekt med fokus på sejlads bar og gøre den mere fremtrædende. dernæst vil vi tilføje en indre skygge: blanding mode med lineære dodge (tilføj), farve, som&#ffffff, vinkel - 90 grader, afstand, som 1px og kvæle og størrelse som 0px.det lineære skygge tilføjer en 3d - effekt til navigation, bar og tilføjer lidt mere til udformning, vores navigation bar ser lidt flade (er der intet galt med det, bny!), men lad os tilføje en gradient: blanding tilstand som overlay, uklarhed, eftersom 20%, misligholdelse, sort til hvide gradient, stil som lineære og vinkel på 90 grader.for at hjælpe vores gradient ud, lad os sige det mønster, som vi arbejdede på tidligere: blanding tilstand som overlay - og uklarhed med 1%.her er, hvad du skal have:,,,, trin 4: knapper, aktive knap, nu hvor vores navigation bar ser godt ud, det er tid til at tilføje nogle punkter i den.udformningen af knapper er meget vigtigt, at en grænseflade er design - - de er anvendt en masse, og det skal være både   skelnes, funktionelle og representable af mærket.  , idet der skelnes   mellem forskellige knap stater også er vigtigt - brugernes behov løbende feedback, så ved at ændre lag stile lidt, kan vi skabe forskellige stater.vi vil begynde med at skabe aktive button, skabe et nyt lag nav knap aktivt med en rund rektangel form: 100px bredde, højde af 40px, og grænsen radius af 4px.igen,   dimensioner er meget vigtigt.bredde og højde af knap afhænger af mange faktorer såsom dimensioner af deres moderselskab elementer, mængden af tekst og størrelsen af teksten.   holdning den vertikalt koncentreret med hensyn til navigation, bar og 40px fra venstre side af lærredet., der fylder farve,Za2c3, fyld opacitet til 25% og åbne stil indstillinger til lag.endnu en gang, at skabe et slagtilfælde, der er 1px uden for lag er en uklarhed på 100% og har en fylde farve,�,.næste skabe en indre glød: blanding modus normalt, uklarhed på 13%, farve,�, kvæles af 0px og størrelsen af 4px.det indre glød giver os "skubbet" virkning. nu til drop shadow: blanding af normal tilstand, farve,&#ffffff, uklarhed på 10%, vinkel på 90 grader, afstand af 2px.dette fald skygge føjer til skubbet i kraft. næste, tilføje en gradient: blanding modus normalt, uklarhed på 6%, misligholdelse, sort hvid, lineære, og en vinkel på 90 grader.ligesom vi gjorde med navigation bar, tilføje en støj mønster med blandingen mode - overlay - og uklarhed på 2%. resultatet er en knap, der har et intuitivt kvalitet, uden at kigge på den anden knap stater, kan en anvendelse   umiddelbart   erkende, at uanset hvad tekst i den knap er   henviser   til indhold, der er   aktivt   på websiden., knap tekst, tekst, er lige så vigtigt, på en knap, og huske på, at det kræver plads baseret på størrelsen af de knap kan du vælge samt mængden af indhold, du ønsker at se i knap., skabe en ny tekst lag, der hedder "teksten er aktive.den farve,&#f3f5f9, skriftstørrelsen til 12px og skrifttype familie helvetica neue.,, note: helvetica font neue findes som et system i mange versioner af os x, men ikke så for vinduer.du foretrækker måske at bruge arial for dette - kit, som er mere almindeligt tilgængeligt for slutbrugeren, tilføje et drop shadow: blanding tilstand som overlay, uklarhed på 35%, - - 90 grader, afstand af 1px og spredning og størrelsen af 0px.den sans serif tekst ser nu ud til, at det er skubbet med aktiv knap.endelig center teksten med hensyn til knap.her har vi en meget enkel tekst i knap, men med en farve, der er i overensstemmelse med det tema, og en enkelt dråbe skygge, det øger indholdet af og gør det meget lettere at læse.,,, normalt knap, lad os skabe en normal såkaldte knap til poster i navigation bar det er ikke aktiv.det er vigtigt at opretholde temaet for den anden knap stat, men også ændre stil, så det er tilstrækkeligt forskellige fra aktiv tilstand. dobbelt "nav knap aktive lag som nav knap normale og teksten lag 'tekst aktive som tekst, normal.for at gøre normalt knap ser anderledes ud, vil vi omvendt, at presset i se og stil på knappen, så det ser ud, som om det er skubbet ud af skærmen.det gør det ikke kun stå ud, men lader brugeren ved, at det kan vælges.begynde med at ændre de knap fylde farve,&#c2dcff, og fyld uklarhed på 5%. også skifte drop shadow: blanding af normal tilstand, farve, som�, uklarhed på 10%, vinkel på 90 grader, afstand af 2px.næste, ændre den indre skygge: blanding af normal tilstand, uklarhed på 25%, farve, som&#ffffff, afstand af 1px.læg en indre glød: blanding tilstand af skærm, uklarhed på 7%, farve, som&#ffffff, og størrelsen af 3px.endelig ændrer gradient uklarhed og 13% og at fjerne mønster overlap.resultatet vil være en knap, der er lidt lettere end sejlads bar, med hjælp fra drop shadow og slagtilfælde., hvor teksten farve og design er en anden måde, du kan gøre staterne ser anderledes ud.ændre teksten farve,&#e8ecf3  , og drop shadow, således at den uklarhed er 50%, og den vinkel er 90 grader.,,, power knappen, i stedet for at give brugeren en kedelig "login - knappen til klik på, hvorfor ikke ændre på tingene og har en kraft ikon i stedet?det her vil tilføje noget kreativ og enestående til design og samtidig også giver brugerne mulighed for at skelne mellem login hurtigt knappen fra alt andet.starte med at overlappe nav knap normale lag nav - knappen ind.at tilpasse størrelsen af den form, så det er en 40px af 40px afrundet square.du kan gøre dette ved at anvende den direkte udvælgelse værktøj, udvælgelse af de fire punkter i højre side af form lag, og flytte dem til venstre, således at den bredde, ændringer i 40px (forskydning + <).anvende denne metode i stedet for at forme lag, som fordrejer de afrundede kanter. at skabe magt ikon, skabe en række former for et lag, der hedder "magt ikon.først, en 16px af 16px cirkel.næste træk en 12px af 12px cirkel i centrum af den store.det burde give dig en 16px af 16px cirkel, som er 2px tyk.næste træk en square 6px lang linje til toppen i centrum af ringen.endelig tilføje en 2px bred, 8px høje rektangel koncentreret med hensyn til fradraget square og tilpasset 1px over det højeste punkt på den cirkel. på dette punkt, bør du have en form lag med magt ikon.ændre farven på den form for magt ikon,&#ffffff,.åbne lag styles og tilføje et drop shadow: blanding af overlay tilstand, farve, som�, vinkel på 90 grader, afstand af 1px og spredning og størrelsen af 0px.derefter tilsættes en gradient: blanding af normal tilstand, uklarhed på 10% og misligholdelse af sort på hvidt gradient. endelig tilpasse login knap ikon til midten af login knap og tilpasse den knap 40px fra gulvet.her er, hvordan den endelige navigation bar skal anføres:,,, selv om vi brugte det samme design for denne knap så den anden, der erstatter teksten med et ikon, styrkede det overordnede design.,, løntrin 5: login dropdown, vi har etableret et godt grundlag for vores webapplikationen er eu - erhvervsgrenen, men så langt vi har kun til formål knapper og baggrunde.lad os forsøge at udvide eu - erhvervsgrenen ved at tilføje en dropdown login grænseflade.det vil give os en chance for at skabe en vis form elementer og knapper såkaldte for forskellige baggrunde. base - design, lad os først få en ny runde rektangel (4px grænse radius, som inden for konsistens), der er 300px bred og 200px højt, at det login dropdown bg.næste, tilføje en trekant, som er 14px bred og 7px højt til "login dropdown bg 'lag og tilpasse det 13px fra toppen af afrundede rektangel.dette vil skabe en tooltip virkning til dropdown og udgør en forbindelse mellem login knap over det. når vi ændrer farven af login ned til,&#ffffff,, det er ikke stå ud fra lærred baggrund.for at gøre det stå mere vil vi tilføje et drop shadow: blanding af normal tilstand, uklarhed på 25%, vinkel på 90 grader, afstand og spredning af 0px og størrelsen af 4px.det giver os en lille skygge til ned, gør det ikke kun mere fremtrædende, men også at give den virkning, at det hænger over baggrunden.hvis du var kodning, ville det måske være en god idé at tilføje en kort animation at tilføje den flydende virkning.tilpasse det ned i form 40px fra gulvet og 13px fra bunden af navigations - bar.her er, hvad vi har indtil videre:,,, hvor tilpasningen af dropdown er på linie med den knap?  sammenhæng   position og polstring er renere, og det er lettere at kode i en beholder, tekst, tilføje en tekst lag med teksten "logge ind på din konto, eller skabe nye.ændre den skriftstørrelse, at 12px, skrifttype familie helvetica neue (almindelig) og farve,𖬩b,.at repræsentere et link, ændre farven på den skabe nye til,c6f91,., med hensyn til "login dropdown bg 'lag, tilpasse teksten 14px fra venstre og 20px fra toppen.vi ønsker ikke at gøre teksten står ud for meget, vi vil brugerne at fokusere på faktisk skovhugst i, og derfor er en relativt mindre skriftstørrelse og lysere farve er en god idé. tekst område, er det vigtigt at huske på, at vores tekst område bør være temaet for udformning, men også stå ud, så brugerne kan genkende det, og fyld den op.skabe en ny runde rektangel (3px grænse radius), som er 270px bred og 30px højt og kalder det 'tekstfelt.bemærker, at i stedet for en 4px grænse radius, vi bruger en 3px grænse radius for teksten.årsagen er, at teksten er i dropdown og ville det være uheldigt, hvis radius størrelse var den samme. ændre fylde farve af lag,&#f9fafc, og tilføje en 1px slag uden for den form, det er den farve,&#d3d8e1 (100% opacitet).at tilføje lidt fremhæve, at tekstfeltet, tilføje en indre skygge: farve,&#ffffff, uklarhed på 100%, - - 90 grader, afstand af 1px og spredning og størrelsen af 0px.jeg valgte at ændre farven på teksten område, således at det skiller sig ud og ikke blande os i lyset af ned., tilføje en tekst lag med teksten "brugernavn (12px skriftstørrelse helvetica neue regelmæssige, farve,˗d88,) og tilpasse den vertikalt midtpunkt og flyttet 10px tilbage med med hensyn til teksten.tilpasse teksten inden 14px fra venstre ned baggrund og 18px fra bunden af teksten lag.at skabe et kodeord, simpelthen kopiere teksten område lag og tekst lag og bringe den i overensstemmelse 12px fra bunden af den første tekst område lag.her er, hvad du har på dette punkt:,,, - størrelse og holdninger i hele teksten og tekstfelter se naturligt ud. du vil ikke have for meget eller lidt plads, men lige nok til at passe godt på. login knapper, det er tid til at tilføje et login knap for vores form ned, men den knap, vi har skabt for sejlads ikke ligefrem ind med konstruktionen.det er, fordi vi nu har at gøre med en lys baggrund og stilarter, der anvendes på sejlads bar ikke vil stå på hvid baggrund af dropdown.derimod er meget vigtigt for en tilgængelig brugergrænseflade. vil vi skabe en sekundær knap stil, der kan være brug for hovedindholdet af app 'en, og som også fungerer godt på lys baggrund.vi vil bruge lignende design fra sejlads knapper til stil login knap, så vores stil er consistant., begynde med at skabe en ny runde rektangel form (3px grænse radius), som er 90px højt, 35px bred og kalder det 'login - knappen.ændre fylde farve,&#a3b2cd, og tilføje en 1px slag uden for den form, der er den farve,b8da4 (100% opacitet).næste, tilføje en gradient - overlay - 25% opacitet, med standard sort med hvide farver.endelig tilføje en normal indre skygge med farve,&#ffffff, 45% opacitet, vinkel på 90 grader, afstand af 1px og spredning og størrelsen af 0px. til tekstmæssigt indhold, skabe en ny tekst lag (12px størrelse, helvetica neue regelmæssige, farve,&#ffffff) med teksten "login", og der tilsættes en dråbe skygge: blanding af overlay tilstand, farve,�, afstand af 1px og spredning og størrelsen af 0px.tilpasse teksten lag til midten af login knap. ligesom gumroad design, ønsker vi, at vores brugere til at vide, hvor klik, efter at de udfylde deres login detaljer. det er det med vores institut - design., udvidelse af eu - erhvervsgrenen, efter et par lag og et par lag styles, vi har afsluttet design for grundlaget for vores web - app 's sted.med det, vi har, kan du føle det tema, stil, farver og elementer af brugergrænsefladen. bygge yderligere, med alt det arbejde, vi har gjort, det er forholdsvis enkelt at fortsætte udarbejdelsen af flere elementer.vi har fastsat farver og stil af vores design, så alt, hvad der er nødvendigt, er at give flere former og ændre farverne /lag styles.især, når de har grundlæggende konstruktionselementer, du kan lægge betydelige moduler fra din ansøgning. den bedste del om at skabe en "prøve" - er, at det kræver ikke så meget arbejde, som om de var at skabe en samlet eu - erhvervsgrenen.lad os sige, at du ikke er tilfreds med den vej, eu - erhvervsgrenen vil - det er bedre at gå væk fra en lille samling af elementer, i stedet for at arbejdstiden ned i afløbet.det giver dig mulighed for at udforske arbejdsgangene fremgangsmåde også en masse forskellige eu - emner og vælge en, der er perfekt til din app.