Share
Photoshop CS6 er fullpakket med nye funksjoner som hjelper deg med å lage bedre grensesnittdesign. I denne opplæringen vil vi utnytte Photoshops nye vektorredigerings- og berøringsfunksjoner for å opprette et administrativt dashbordgrensesnitt. Vi vil også dra nytte av Photoshops nye snap til pikselgridfunksjon for å skape skarp og ren webgrafikk. La oss komme i gang!
Følgende eiendeler ble brukt under produksjonen av denne opplæringen.
Vi skal bruke 960 grid med 12 kolonneoppsett fra 960.gs som ramme for vårt design. Last ned malfilen i zip-format og åpne deretter 12 kolonnerett. Klikk på øyeikonet foran lag 12 Col Grid for å skjule det.
Klikk på svart og hvitt sirkelikon for å legge til nytt justeringslag. Velg Solid Color, og velg hvitt i neste dialogboks.
Lag nytt lag. Klikk på Rediger> Fyll og velg Bruk: Mønster. Bruk diagonal linjemønster fra PSDfreemium. Fordi dette er CS6, la oss prøve å bruke den nyeste funksjonen. Aktiver Scripted Patterns og velg Symetry Fill.
Tone ned laget Opacity til 4%.
Vi vil sørge for at alle lagene er organisert nøye. Så, la oss starte med å gruppere dem i en logisk rekkefølge. Velg begge lagene - bakgrunn og mønster - og klikk deretter Kommando / Ctrl + G for å sette dem i gruppelag.
Vi trenger ikke bakgrunnslag, så slett det ved å dra det til slettikonet.
Velg gruppelag. Hit F2 og endre deretter navnet. Trykk på fanen for å automatisk redigere neste lag. Bytt navn og repeter dette til neste lag.
Aktiver avrundet rektangulært verktøy. Tegn en avrundet rektangelform med radius 10 px og bredde 2 kolonner. Plasser den øverst til høyre på lerretet. I alternativfeltet, sett Fyll farge til # f16424 og Stroke to None.
Dobbelklikklagsform i dialogboksen Lagpanel til dialogboksen for åpen lagstil. Aktiver mønsteroverlegg. Velg pikselmønster fra PSDfreemium. Reduser skalaen og Opacity for å gi det et naturlig tekstilutseende.
Lag nytt lag over formen. Aktiver myk børste og maling skygge på oversiden.
Alt - klikk mellom logoen og dens skygge. Dette vil konvertere laget til en Clipping Mask og plassere skyggen inne i logoen.
Gjenta prosessen et par ganger. Du kan legge til flere lag om nødvendig. Malte høydepunkt på undersiden.
Lag nytt lag under logoen. Kommando / Ctrl - klikk på formen for å lage nytt valg basert på form. Fyll valg med svart.
Påfør Gaussian Blur filter. Klikk på Filter> Uklarhet> Gaussisk uskarphet.
Hit Command / Ctrl + T for å utføre transformasjon. Høyreklikk og velg Warp. Transformasjonsgrenseboksen er delt inn i 3 x 3 bokser. Dra ned den nedre boksen ned. Trykk Enter for å godta transformasjonsresultatet.
Tegn en mindre avrundet rektangelform. Fra Alternativ Bar, sett Fyll til ingen og Stroke til hvit med størrelse 1 pt.
Åpne Stroke-alternativene og velg deretter stiplet forhåndsinnstilt. Klikk på Flere alternativer for å redigere stiplede linjeinnstillinger.
I Lagpanelet dobbeltklikker du på laget for å åpne dialogboksen Lagstil. Aktiver Drop Shadow, sett sin vinkel til 90 °, aktiver bruk Bruk Global Light, sett størrelsen til 0 px og avstand 1 px.
Aktiver rektangulært verktøy og klikk en gang på lerretet. I dialogboksen angir du størrelsen til 6 x 30 px. Klikk på OK for å begynne å lage formen.
Klikk på Fyll-boksen i alternativfeltet. Velg Gradient og sett fargen sin fra #dfdfdf til #ffffff.
Tegn en annen rektangelbane inne i logoen. Dobbeltklikk på laget i lagpanelet, og aktiver deretter Drop Shadow.
Legg til Drop Shadow til lagformen.
Nedenfor er resultatet ved større forstørrelse. Som du kan se at så langt er vektorgraden vår alltid skarp. Det er ingen halv piksel! Dette er takket være vektorfunksjonen i Photoshop CS6. Du kan deaktivere denne funksjonen hvis du vil fra dialogboksen Innstillinger - fortsatt har jeg ingen anelse om hvorfor noen ville gjøre det.
Legg til tekst inne i logoen. Vi kan legge til kontrast på teksten ved ganske enkelt å endre noen av tegnet til fet skrift.
Legg til en annen Drop Shadow på teksten.
Aktivere rektangulært verktøy og deretter tegne et rektangel som hovedinnholdsbakgrunn. Still bredden til 800 px, Fill: #eeeeee, og Stroke: #cccccc, Størrelse: 1 pt.
Legg til ytre glød med følgende innstillinger.
Legg til en trekantform og et avrundet rektangel. Angi banemodus for å kombinere figurer.
Legg til tekst på fanen for å legge til tittelen. Legg til lite statistikkikon laget av noen små rektangler.
Tegn en hvit rektangelform som en base for vår hovedgraf. Sett bredden til 8 kolonner. Sørg for å sette sin slag til ingen. Legg til Layer Style Outer Glow.
Hit Command / Ctrl + J for å duplisere form. Legg til en stor rektangelform på den nedre delen, og still inn modusen for å trekke fra. Legg til graderingsoverlegg.
Tegn et avrundet rektangel. Sett Fyll til Hvit uten slag. Bruk samme ytre glød og legg den bak den forrige formen.
Lag nytt lag mellom disse to figurene. Lag et elliptisk utvalg og fyll det med svart. Fravelg (Command / Ctrl + D) og deretter myk det ved å legge til Gaussian Blur.
Aktiver Typeverktøy. Legg til delen tittel.
Aktiver linjeværktøy og trekk deretter en 1 px linje. Sett sin slagfarve til # e4e4ee4.
Her er forskjellen før og etter å legge til linjen.
Tegn et rektangel. Sett sin Fyll til Ingen og Slag til #cccccc.
Velg strekkstropptype fra valglinjen. Klikk på Flere alternativer og sett Dash and Gap til 4 og 2.
Tegn 1 px horisontal linje med Stroke #cccccc. Velg dashed slag.
Aktiver sporvalgsverktøy og velg linjebane vi nettopp har gjort tidligere. Hit Command / Ctrl + Alt + T for å duplisere og transformere det. Hit Shift + Right Arrow to ganger for å flytte den 20 px til høyre. Gjenta transformasjons- og dupliseringsprosessen ved å trykke Command / Ctrl + Shift + Alt + T.
Fortsett å gjenta prosessen til rektangelet er fylt med kolonner.
Reduser lagets opasitet til 30%.
Gjenta tidligere trinn, men denne gangen med horisontale linjer.
Nedenfor er resultatet. Nå har vi subtile rutenett på statistisk bakgrunn.
Legg til verdier på både akse, x og y.
Aktiver linjeværktøy og tegne en linje på 1 px på rutenettet. Angi stregfarge til # f16424.
Skift - dra for å legge til flere linjer. Fortsett å legge til flere linjer til vi har et komplett linjediagram.
Tegn en liten sirkelform og legg den rett på linjediagrammet. Sett fyllet til hvitt og samme slag til linjens fyllfarge.
Dobbeltklikk sirkelformelaget og aktiver Lagstrektslag. Sett fargen til Hvit og posisjon til utenfor.
Velg sirkelbanen ved hjelp av Path Direction-verktøyet og deretter Alt - dra den for å duplisere den.
Bruk samme trinn for å tegne et annet linjediagram. Denne gangen bruker du forskjellig farge og setter strekkalternativene til dashed.
Som i forrige linjediagram, legg til kretser på hvert linjesegment.
På toppen av diagrammet legger du til diagramlegenden. Du legger bare til en kort linje med samme egenskaper som linjediagrammet og legger til en kort beskrivelse.
Tegn et avrundet rektangel. Sett fyllet til #eeeeee og strekk til #cbcbcb.
Legg til lagskinnets indre skygge og gradvis overlegg.
Tegn et rektangelform på midten av den avrundede rektangelformen. Du kan bruke hvilken som helst farge for Fyll. Sett sitt slag til ingen. Reduser fyllingen til 0%. Legg til Overlay for overlegning av lagsstilgrader.
Tegn 1 px linje med farge #cbcbcb på venstre og høyre side.
Legg til tidsintervallvalg. Du kan se at teksten med annen bakgrunn er nå i aktiv tilstand.
La oss bruke tegnstiler for å definere standardkarakteren. Denne funksjonen er en forenklet versjon av Character Style i Adobe InDesign. Hvis du ofte bruker InDesign, vil du umiddelbart gjenkjenne den.
Åpne Character Styles-panelet og klikk deretter på nytt ikon. I dialogboksen angir du Font Type til Arial Regular, Size til 12 pt, og Color til # 767676. Vi skal bruke denne tegnestilen i det meste av teksten. Derfor vil vi også nevne den som standard karakterstil.
La oss bruke denne tegnstilen til teksten. Aktiver Typeverktøy, velg teksten og klikk deretter Karakterstilstand for å bruke den.
Hva om vi vil lagre egenskaper fra eksisterende tekst som tegnstiler? La oss gjøre dette til verdier på grafaksen. Lag nye tegnstiler. Velg teksten, og klikk på Redefine icon.
Dobbelklikk tegn stil for å redigere dens alternativer. Endre navnet sitt. Bruk denne tegnstilen til alle verdier på begge akse.
Den fine tingen om Character Style (og Paragraph Style too) er at du enkelt kan redigere den for å redigere hver tekst som bruker den stilen. Her er et eksempel. La oss redigere grafakse - en tegnestil som vi laget tidligere for hver verdi på begge akse. Dobbeltklikk på det og endre skrifttype og størrelse.
Aktiver avrundet rektangulært verktøy. Tegn et avrundet rektangel og legg til en liten trekant på venstre side. Angi Fyll: # f1f2f2 og Stroke: None.
Dobbeltklikk laget i Lagpanel og legg til svart slag. Kanskje du spør, hvorfor bruker vi ikke Stroke-alternativ rett fra eiendommen sin? Svaret er i Layer Style Stroke, du kan endre Stroke's Opacity. Det er noe du fortsatt ikke kan gjøre på Photoshop CS6. Legg også til ytre glød og gradvis overlegg.
Dupliser form og endre fyllfarge til # f16424. Fjern lagets stil. Legg til rektangulærbanen på den nedre delen, og still inn modusen for å trekke fram formen.
Legg til lag Stroke og Gradient Overlay til formen.
Tegn 1 px vertikal linje. Sett fyllfarge til svart. Legg til Lagstiler Slag. Redusere lagene Opacity til 8%.
Legg til liten tittel på formen. Lagre tegnegenskapen som tegnstiler. Legg til Layer Style Drop Shadow.
Legg til en annen tittel på den andre siden. Bruk samme tegn stiler og samme drop skygge.
Legg til litt prosentandel i den. Det er alltid en god ide å lagre det som Character Styles. På denne måten kan du enkelt redigere utseendet fra panelet Stilformater.
Aktiver polygonverktøyet og sett Side til 3 i alternativlinjen. Tegn en liten trekant som peker oppover. Angi fyllingen: # c1c1c1 og Stroke: None.
Legg til Layer Style Inner Shadow.
Legg til en liten sirkel og en annen trekantform - peker nedover denne gangen. Bruk samme farge og lagstil.
Legg til prosentnummer. Som vanlig, sørg for å lagre tegnstilen.
Dataene er positive. Så la oss legge vekt på det ved å aktivere opp pilen. Endre formen Fyll farge til # 4ff25d.
Dupliser tallet for en annen data.
Tegn lignende seksjon for mindre graf. Du kan bruke de samme teknikkene som er forklart ovenfor. Pass på at du bruker mindre tekststørrelse på tittelen.
Tegn en blå 1 px linje i rutenettet. Still inn slagtilfelle for å stryke.
Som i hovedgrafen, legg til sirkel på hvert punkt.
Aktiver pennverktøyet. Tegn en ny form som dekker linjen som forbinder den med x-aksen. Bruk samme farge som linjen. Plasser formen bak sirklene.
Legg til gratis pikselmønster fra PSDfreemium.
Tone ned Opacity til 50%.
Legg til prosent på siden. I denne mindre grafen ønsker vi også mindre tekstprosentstørrelse.
Legg til en annen graf.
For tiden jobber vi med statistisk faneblad. La oss legge til en annen fane og sette dem i inaktiv tilstand. Dupliser statistisk fanebakgrunn vi laget i Trinn 25 - 27. Det vil være nyttig hvis du gjemmer statistikkfanen etterpå. Endre Fyll- og Strokefarge til # c1c1c1. Slett lite rektangel på venstre side. Flytt topprundet rektangel til høyre.
Legg til et enkelt ikon laget av en sirkel uten fyll og slag: # 646464 med en jeg i den.
Ta tilbake fanen Statistikk. Tegn en annen inaktiv kategori hvis nødvendig.
Aktiver Rectangle-verktøyet og trekk et rektangel bak hovedfanen. Sett fyllet til #eeeeee og strekk til #cbcbcb.
Tegn et avrundet rektangel. Sett fyllet til en gradient fra # d6d6d6d til # f3f3f3 og Stroke # c1c1c1. Dette kommer til å være bakgrunn for en inaktiv meny.
Kopier det runde rektangelet. Endre fargen sin til Fyll gradient fra # ef6526 til fa834d og Stroke: # f16424. Denne brukes til aktiv meny. Pass på å plassere den under liten trekant på fanen Statistikk.
Dupliser det første avrundede rektangelet for å lage mer bakgrunn for inaktive menyer.
Legg til tekst på knappen. Dobbeltklikk på laget for å legge til Layer Style Drop Shadow. For inaktiv meny, bruk mørk tekst og lys dråpe skygge.
For den aktive menyen, bruk hvit tekst og mørk Drop Shadow.
Tegn et avrundet rektangel. Du trenger ikke å bekymre deg for Fyll eller Stroke.
For Fyll, la oss bruke samme gradient fra forrige sidefeltmeny. Aktiver også Path Selection og velg formen. Høyreklikk og velg Kopier fyll.
Gå tilbake til den nye formen, høyreklikk den og velg Lim inn.
Åpne Fyll alternativ fra Alternativ Bar og klikk på ikon under gradient forhåndsvisning for å vende sin gradient retning.
Gjenta samme prosess for å kopiere Stroke innstilling.
Legg til Innerskygge med følgende innstillinger.
Aktiver Type verktøy og hvit knapp etikett. Legg til Layer Style Drop Shadow.
Legg til en liten trekant som peker nedover. Fyll: #eeeeee og Stroke: None. Legg til samme Drop Shadow som knappetiketten.
Legg til en 1 px linje separerende etikett og pil. Sett fargen til # b04312 og legg deretter til en lys Drop Shadow med vinkel 180 °.
La oss legge til et mini forstørrelsesikon på knappen. Begynn med å tegne en sirkelbane med størrelse 10 x 10 px. Sett strøk til hvitt, med størrelse: 2 pt, og fyll til ingen.
Legg til en 2-punkts linje ved siden av sirkel med 45 ° vinkel.
Igjen, legg til samme Drop Shadow til forstørrelsesikonet.
Tegn et avrundet rektangel ved siden av knappen. Bruk Fyll gradient fra #ededed til white og 1 pt Stroke # c1c1c1.
Legg til liten tekst i formen. Vi vil at den skal være subtil. Så bruker vi en veldig lysegrå (# b0b0b0).
La oss legge til et annet mini-ikon. Start med å tegne en liten sirkelform og legg til et plustegn laget av to avrundede rektangler. Still plussignalmodus for å trekke forfra. Velg skiltformen ved hjelp av Path Selection-verktøyet og drei det 45 °
Endelig! Vi har tegnet en vektorgraff fullstendig i Photoshop. Dette var veldig vanskelig å gjøre i tidligere versjoner av Photoshop, men som du kan se, hjelper Photoshop CS6 virkelig strømlinjen vår arbeidsflyt. Jeg håper du likte disse nye teknikkene og denne opplæringen. Takk for at du leser.
Accentsconagua