Design en statisk Admin Bar i Photoshop
Dette innlegget er en del av en serie som heter Design og bygge en statisk Admin Bar .Building en statisk Admin Bar for nettleseren

La oss piske opp en enkel, men effektive "statisk admin bar 'i Photoshop. Vi tar et utvalg av UI elementer, og utforme sine ulike stater, klar for å bygge i HTML og CSS.

Innledning

Hvis du har brukt WordPress siden v3.1 så har du uten tvil lagt merke til den alltid tilstedeværende admin bar som dukker opp på front-end når du er logget inn ..

En enkel, nyttig verktøy som gjør det mulig å hoppe direkte inn i admin uten - du vet - først gå til admin. Google er fans av den statiske admin bar også; det passer bra med hele web-app ting. Hvis du bruker Gmail, Google Docs, Google +, har du sett denne:

Selv Chrome nettleser har noen ganger en lignende verktøylinje i bunnteksten ..

Og hvis du besøker Themeforest, du vil ofte finne forfattere bruker statiske barer å navigere sine tema forhåndsvisninger.

OK, så nå vet vi hva vi snakker om, la oss nå tenke på noen av design aspekter vi må vurdere

Hensyn

Vi trenger vår admin bar festes til toppen av vår side, og som det alltid kommer til å være synlig, ønsker vi ikke at det skal ta for mye fokus fra selve området. Riktignok vil ingen faktiske brukerne ser det, er det for våre øyne bare, men likevel. . Vi vil derfor gå for nøytrale farger, ingenting for in-your-face

Det må også være relativt smal; en 500px høy verktøylinjen øverst på siden vil være litt restriktiv.

Det må også være raskt lastet, er det ingen vits å ha det tynge våre ressurser. Vi derfor kommer til å holde bilder til et minimum. Egentlig skal vi glemme bildene alle sammen og bruke en stor @ font-face verktøy for våre ikoner.

Nok snakk. La oss åpne opp Photoshop (eller gjerne lage ditt i Fireworks) og sparke ting av ..

Trinn 1: Nytt dokument

Åpne opp et nytt dokument, er mitt 200x1000px, og legge til noen guider å definere verktøylinjen (70 piksler høy), knapper (30px piksler vertikalt sentrert i baren), pluss en margin til venstre og høyre for 20px.

Legg til en tilfeldig tekstur til hoved bakgrunn, representerer denne nettsiden og vil sitte under baren. Deretter kan du legge en form (svart) med 85% dekkevne. Dette er baren selv, og gi den en liten åpenhet vil understreke at det er "over" websiden for innhold.

Vi overvåker nå kommer til å legge noen felles elementer til siden. Det vil være noen få eksempler, men vi trenger ikke tegne alt, bare så lenge vi har plass til alle statene i våre ulike elementer. Med det gjort, kan resten av bygget gjøres i nettleseren

Trinn 2:. Gravatar

Når det gjelder å bygge vår admin bar, vi kommer til å trekke i en miniatyr bildet ved hjelp av Gravatar API. Dette vil være til stede for å illustrere for brukeren at de er logget inn (det kan høres innlysende, men det er en nyttig påminnelse i tilfelle noen ønsker å logge ut når de forlater.)

I mellomtiden, jeg ve grep standard gravatar bilde, og vi kommer til å bruke dette som en plassholder.

Opprett en avrundet rektangel (U), med en radius grensen 2 piksler, mellom førerne som vist nedenfor. Hold nede Shift mens du drar den, besøksforbud dimensjonene til kvadrat. Du vil ha gjort en ryddig 30x30px kvadrat. Plasser miniatyrbilde over den, høyreklikk på den i lag-panelet, og velg "Create Clipping Mask".

Jeg har lagt en mørk skygge til masken lag (dobbeltklikk på lag for å åpne opp egenskaper for lag) av 2 piksler direkte nedover. Dette vil være en vanlig tilstand av mange av våre elementer, som vi skal se senere.

Legg til litt tekst for å ønske brukeren (i dette tilfellet Droid Serif Kursiv 12px), og en mer nøytral etikett for å tillate brukeren å logge

Trinn 3:. En merknad om anti-aliasing

Når du tegner figurer i Photoshop, vil du ofte finne at anti-aliasing (som gjør alt varm og fuzzy) kan ta bort noen av detaljene fra arbeidet. La oss demonstrere dette nå ved å tegne en enkel firkantet form på mørk bakgrunn.

Det er helt presis, eller så du tror. Når du har zoomet inn, kan du tydelig se blur langs hver av kantene. Ved å fjerne disse, kan vi rydde opp vår image og oppnå pixel perfeksjon. Lag en kopi av formen og legg den langs siden.

Veldig bra. Nå tar Direct Selection Tool (A) - den lille hvite markøren pil - og markere figuren. Kommando og klikk for å velge to noder langs den ene kanten, deretter dytte dem innover til du ser et perfekt skarp kant.

Mye bedre! Vektorene står i kø nettopp med pixel rutenettet. Nå gjentar dette for de andre tre kanter, noe som gjør at du beholder objektets dimensjoner så godt som mulig.

OK, det ser mye bedre, men den reelle forskjellen blir tydelig når vi zoomer ut til faktiske piksler ..

En delikat, men likevel betydelig forskjell. Ha dette i bakhodet når du bygger på knappene i løpet av denne opplæringen, og det endelige resultatet vil se alle bedre for det.
Alternativt ..

Unngå å måtte rydde opp noen streif kanter ved første vende på «Lås til punkter» i formen alternativer:

Takk til Jeff for å påpeke dette

Trinn 4:! Meldinger Button

Vi har allerede diskutert den generelle dimensjoner av våre knapper, så går videre og bygge noen få vil ikke være et problem. Nå skal vi se på en frittstående (ikke koblet til noen andre knapper) eksempel -. Knappen varslinger

På samme måte som vi dannet vår gravatar maske, tegne en 30px høy avrundet rektangel rundt noen enkel Arial 12px tekst. Denne knappen kommer til å illustrere en hover staten, så vi kommer til å plassere en godt synlig strek rundt rektangelet, gi den en solid bakgrunnsfarge, og (som vi gjorde med vår gravatar) gjelder en skygge for å gi knappen et hevet titt

Trinn 5:. Påminnelser info

en annen vanlig UI funksjon er nummerert etikett som angir hvor mange e-poster, meldinger, oppdateringer osv er aktive. Du vil bli kjent med disse hvis du er en smarttelefon bruker, en mac eier, kom til å tenke på det - hvis du noen gang har åpnet en nettleser av noe slag ...

Vi kommer til å bruke dette UI konvensjonen og gi varslinger knappen vår en numerisk etikett. Vi vil bruke en mer slående farge som ideen bak disse er å fange brukerens oppmerksomhet. En mørk, fet Arial tekst med en blek skygge, satt opp mot en subtil gul gradient bør gjøre triks. Her er en rask titt på gradient innstillinger:

Igjen, dette er en liten, avrundet rektangel, med en 2 piksler radius på hjørnene, og har en subtil skygge. Vi vil plassere den på toppen av vår knapp, og til høyre. Ryddig

Trinn 6:. Standardtilstanden

Etter å ha laget vår knapp i sin hover staten, bør vi nå forholde seg til standardtilstanden. Dette vil være mindre slående - klart, men likevel diskret. Kopier knappen varslinger, være sikker på å holde hver av elementene pent i en mappe for seg selv i Lag-panelet. Endre etiketten teksten (hvis du ønsker) så kjedelig ned fargen litt. Gjør det samme for hjerneslag farge og fjerne skyggen.

Duplicate denne knappen, fordi vi også kommer til å bruke dette for å demonstrere hvordan Gruppert elementer vises.

Når vi har en liten samling av tilknyttede knapper (navigasjon knapper, for eksempel) vi skal gjøre brukeren oppmerksom på at de arbeider med en gruppe, og ikke bare en rad med tilfeldige elementer. Vi kan bruke nærhet
, en teknikk som enhet i webdesign er oppnådd. Vi plasser gjenstander nær hverandre slik at deres forhold er visuelt indikert.

Som du ser, har vi fjernet de avrundede hjørner hvor våre knapper møtes. Den avrundede effekten vil kun være synlig langs ytterkantene av grupperte objekter. I et øyeblikk, vil vi legge til en annen knapp mellom disse to for å ytterligere fremheve effekten.

Først om, la oss bare se på hvordan vi fjerner de avrundede hjørner. Med vår rektangel uthevet, velg Slett Anchor Point Tool, og fjerne de ytre to noder av kurven.

Deretter velger du Konverter Point Tool, og konvertere de resterende to poeng for å rette vinkler.
!

Bingo

Etter å ha fjernet de avrundede hjørner fra den ene siden av hver av knappene, kan du nå baken dem opp sammen

Trinn 7:. Ikon knapper

det er ingenting som et sett av kvalitet ikoner for å instruere brukere den mest direkte form mulig. På noen av våre knapper kommer vi til å bruke ikoner i stedet for tekst - de ser bra ut, og de sparer på plass. Vi kan alltid bruke verktøytips for å kontrollere hva hver og en er for. Her er et eksempel på to ikoner knapper, stanget sammen, hvorav den ene demonstrerer hover effekt:

Som jeg nevnte selv, vil vi ikke bruke et enkelt bilde i løpet av denne opplæringen (OK, bortsett fra gravatar thumbnail ). I stedet, gå og ta tak i Web Symboler skrift fra Bare vær Nice Studio. Hvor hyggelig av dem.

Det er vakkert, og leveres komplett i .otf format (for å bruke på systemet ditt) og en web font kit for å implementere inn på websidene dine med @ font-ansikt. Dette betyr at vi ikke trenger å bruke noen sprites eller enkeltbildefiler; Vi kan bare bruke tegn og anvende dette skrift -. strålende

I dette tilfellet har jeg brukt den U Hotell og S
henholdsvis, men vi kan hogge og endre seg lett når vi bygger. Vi kan til og med bruke effekter ved hjelp av CSS, akkurat som vi ville gjort med vanlige fonter, men jeg får foran meg selv her .. For nå, bare bygge et par knapper og bruke noen av disse store ikoner.

Trinn 8: Søk feltet

på samme måte som vi har jobbet, bygge et søkefelt. Det er identisk med knappene i sin standardtilstand (lysegrå slag, blek grå skriftfarge, no drop-shadow), bortsett fra det faktum at det har ingen solid bakgrunn.

Den tilstøtende knappen ikke
gjør imidlertid, og igjen bruk av en av våre web-symboler tegn (L). Butt hele opp mot høyre guide, som vi kommer til å plassere den i nettleseren over på denne kanten

Trinn 9:. Ekstra Button

Jeg tenkte at det kunne være hyggelig å inkludere en ekstra knapp som trekker ekstra
oppmerksomhet, i tilfelle noe - eh - ekstra, som må gjøres. A 'publisere', eller 'close ramme "-knappen, for eksempel.

Igjen kan vi gjøre bruk av ikoner, beholder de vanlige knappe dimensjoner og 2PX avrundede hjørner. Denne gangen, derimot, bruker vi den samme gul gradient som vi gjorde med vår varslingsnummer, etikett, # f9d944 til # fee77f, med et strøk av # f9d944. Ikonet er mørk grå # 292929, akkurat som med varselet, med en blek skygge.

Det hover staten vil, som forventet, har en mørk skygge akkurat som med de andre knappene.
< h2> Trinn 10: Meny

Vi er nærmer seg slutten nå, og har nesten dekket alle mulige tilstander av våre UI elementer. Vi kommer til å legge en ekstra knapp mellom våre Innstillinger og Profil knapper, denne gangen for å fungere som en rullegardinmeny (merk fullstendig fravær av avrundede hjørner):

I skjermbildet ovenfor ser du rulle ned synlig, per definisjon deretter på knappen er aktiv (eller svevde over). Knappen tar på den aktuelle tilstand; uthevede slag, lettere tekst, og mørk skygge. Jeg har brukt en annen Web Symboler ikonet ({) for å betegne at det er mer innhold under knappen.

nedtrekksmenyen selv må være visuelt forbundet til resten av elementene i brukergrensesnittet, men trenger å skille seg ut . Det vil også være over en nettside innhold synlig på den tiden. Jeg valgte derfor å gjøre det til en enkel hvit firkant, med en skygge:

lys bakgrunn binder det visuelt med svevet "meny" -knappen, og skyggen hjelper det skiller seg ut fra noe annet innhold. Den markerte hover effekt på rullegardin koblingen er rett og slett en lysere nyanse av gult vi har brukt

Trinn 11:. Tooltip

Det er bare ett lite element som vi nå må forholde seg til med; tipset (husk vi har nevnt det?) Vi kommer til å bruke det som bekreftelse i tilfelle i forbindelse med våre ikon knappene er ikke umiddelbart klart

Bildet over viser min første verktøytips -. helt klart, i prinsipp, men jeg innså at det var visuelt identisk (bortsett fra den lille punktet) til rullegardinmenyen. Som at foreslår at de en eller annen måte utført en tilsvarende rolle, bestemte jeg det er bedre å ta en alternativ rute. Dette er et verktøytips; det bør ikke forveksles for noe annet.

Det andre forsøket er mye mer vellykket. Det er subtile mot vår mørke admin bar, men det gir god kontrast tekst gjør det svært leselig. Alt du trenger for å bygge denne lille valpen er et svart rektangel (ingen avrundede hjørner denne gangen, men det er opp til deg). Med din første formen tegnet, tegne en annen, noe som gjør at du har på Legg til Shape Tool (+) er valgt. Dette vil binde de to figurer i en form, men samtidig beholde de individuelle vektorer for redigering:

Med markøren (A) du kan velge avreise den andre formen, og manipulere det separat. Resize det som det passer deg, og roter den 45-graders;. Du vil ende opp med noe sånt ...

Konklusjon

Den enden av veien! Forhåpentligvis vil du har trukket sammen en UI design som tilfredsstiller din godkjenning. I neste opplæringen vil vi se om koding dette mye opp i en nettleser med barn, gå, snakke statisk admin bar. Takk for lesing, ser jeg frem til å høre hva du synes om dette i kommentarfeltet!