Design en fersk Web Service /SaaS Website Interface (Pluss en gratis PSD!)
I denne opplæringen vil vi bruke Adobe Photoshop til å designe en ren og frisk grensesnitt som kan brukes til alle web-tjeneste eller SaaS-basert web-app. Vi skal dekke noen varemerke web-elementer som bånd, knapper og klistremerker, samt noen grunnleggende inkludert figurer, masker, typografi, og mye mer. Den fullt kodet versjon av denne design, kalt FreshServe, er tilgjengelig på Themeforest i både HTML og Wordpress versjoner.
Trinn 1
La oss begynne med å lage en ny Photoshop-dokument ved å velge Fil > Ny.
Sett lerret Bredde til 1100px, Høyde til 1300px, Oppløsning til 72, og bakgrunnen Innhold til White.
Trinn 2
Neste, vi . må lage to guider som vil fungere som den beholder for vår side
Velg Vis > Guide New ...
For første guide, angir du orienteringen til vertikal og posisjon til 70 px
For den andre guiden, velg Vis >.; Guide New ... igjen og opprette en ny vertikal guide med posisjonen satt til 1030 px.
Vi skal nå ha en skissert plass som er 960 x bredde for vår side.
Trinn 3
La oss sette en bakgrunnsfarge for vår side. Velg Paint Bucket Tool (G) og sette din forgrunnsfarge Swatch til "ebebeb". Deretter klikker du hvor som helst på lerretet for å bruke fargen til vår bakgrunnslaget.
Trinn 4
Nå skal vi legge til en liten gradient boksen øverst på vår side . Dette vil bidra til å gi vår bakgrunn litt dimensjon.
Start med å velge rektangel Tool (U) og tegne et stort rektangel (rundt 160 piksler i høyden) fra utenfor til venstre på lerretet som omfatter hele bredden av dokumentet.
Deretter endre fargen på boksen til "ebebeb" (i samme farge som vår bakgrunn). Da gjelder følgende lag stil:
Trinn 5
For vår logo, vi kommer til å bruke enkel tekst med noen fine-tuned lagstiler hjelper det å skille seg ut mens fortsatt være lett tilpasses
Start ved å velge Horizontal Type (T) og legg til litt tekst (ex: navnet på nettstedet ditt).. Gi din tekst følgende egenskaper:
Font Familie: Aller (last ned her)
Størrelse: 40 px
Stil: Fet
sporing : -25
Anti-aliasing: Sharp
Farge: #ACACAC
Når du er ferdig, flytter du teksten laget slik at den berører venstre guiden og er 50 piksler . fra toppen av dokumentet
Deretter lar gjelder følgende lagstiler:
Trinn 6
Neste opp er å lage våre navigasjonskoblinger. Grab Horisontal Type (T) og legge inn teksten som vises nedenfor (gjerne skrive hva du vil):
Space ut hvert ledd med 12 plasser (12 berøringer på din mellomromstasten), og angi følgende egenskaper:
Font Familie: Helvetica Neue
Størrelse: 13 px
stil: Fet
Tracking: -25
Anti-aliasing: Glatt
Farge. # 555555
Plasser teksten laget 60px fra toppen av lerretet og berøre den rette guiden
Neste, vi kommer til å legge til en "aktiv" stat til vår "Home" -linken. Velg Avrundet rektangel Tool (U) og sett Radius å 6PX.
Tegn et 60x25px rektangel over "Home" tekst. Deretter flytter dette nye laget under Nav tekstlaget.
Nå, ved å bruke Horisontal Type (T) velg bare "Home" del av teksten laget og endre det farge til "000000" (svart). Vår sluttresultatet skulle gjerne slik ut:
Trinn 7
Neste vi kommer til å lage selve beholderen for vår side. Grab Avrundet rektangel Tool (U) og endre avstanden til 10px.
Opprett en boks som er 1065px i høyden fra 135px fra toppen av vår lerret og som dekker bredden mellom våre guider (det kan være lurt for å zoome ut for dette)
Endre fargen på boksen til "f8f9f8" og gjelder følgende lagstiler til det.
for å stille opp nederst på vår side, vi vil må velge lag vi har nettopp opprettet, og velg Layer > Raste > Layer.
Neste, i Lag-panelet, klikk på "Mask" -knappen to ganger for å legge til en vektormaske til vår Page lag.
Nå velger rektangel Tool (U) og trekke et rektangel fra utenfor venstre side av vår lerret til utenfor høyre side av lerretet og 30px ovenfor vår side lag som går ned til bunnen av vår side rett før det begynner avrunding. Zoome ut et par ganger for best resultat.
Sluttresultatet vil være en avrundet topp og rektangulær bunn container for innholdet vårt.
Trinn 8
La oss få startet på toppen av vår side ved å importere et skjermbilde av vår app /tjeneste ved å velge Fil > Place ... Endre størrelsen på innsatt fil til rundt 340x230px og plassere det 65px fra venstre og 50 piksler fra toppen av siden beholderen.
Neste, vi kommer til å legge til en refleksjon i vår skjermbilde for å hjelpe den skille seg ut. Velg skjermbilde laget og klikk Layer > Duplicate Layer ... Name it "Skjermbilde Reflection" og klikk OK.
Neste vi trenger å snu vår skjermbilde opp ned. Velg Rediger > Transform > Vend loddrett, plasser deretter snudd lag direkte under den opprinnelige skjermbilde.
Legg til en lagmaske ved å klikke på lagmaske ikonet i Lag-panelet.
Velg Gradient Tool (G) og velg en svart til hvitt swatch. Tegn en linje fra topp til bunn på venda skjermbilde som er rundt 50 piksler i høyden.
Til slutt, senk opacity på laget til 30%.
Trinn 9
Neste vi kommer til å legge en kort introduksjon for vår tjeneste /app. Velg Horizontal Type Tool (T) og skriver i en kort tittel. Posisjon dette laget 40px igjen av skjermbildet, 60px fra toppen av vår side container og satt skriftegenskapene til følgende:
Font Familie: Helvetica Neue
Størrelse: 30 px
stil: Vanlig
Tracking: -25
Anti-aliasing: Crisp
color: # 363636
Direkte under vår tittel, legge til en annen tekstboks og litt mer tekst for vår beskrivelse, plasser den 30px under tittelen og sette det skriftegenskaper til følgende:
Font Familie: Helvetica Neue
Størrelse: 13 px
stil: Vanlig
Ledende: 22 px
Tracking: -25
Anti-aliasing: Crisp
Farge: # 363636
Trinn 10
Under beskrivelsen vår, vi kommer til å lage en glatt registrering knapp. Begynn med å velge Avrundet rektangel Tool (U) og lage en 135x30px rektangel. Ikke bekymre deg for fyllfargen for nå, bare velg noe som er synlig
Plasser vår knappen 35px er under vår beskrivelse og gjelder følgende lagstiler til det.
Neste, vi er kommer til å lage et lite ikon for vår-knappen. Velg Ellipse Tool (U) og lage en sirkel med en diameter på 20px over knappen. Sett det er bakgrunnsfargen til svart og plassere det 5PX fra toppen og 8 piksler fra venstre av vår knapp
Bruk følgende lag stil til det.
Så senk opacity av sirkelen til 25%. Når du er ferdig, ta tak i Custom Shape Tool (U) og lage en liten form på innsiden av sirkelen (jeg har valgt en enkel pil).
Til slutt, vi kan legge til i vår knappetekst. Velg Horizontal Type (T) og lage litt tekst 10px til høyre for vår ikonet ved hjelp av følgende skriftegenskaper:
Font Familie: Helvetica Neue
Størrelse: 13 px
stil: Fet
Tracking: -15
Anti-aliasing: Crisp
Farge: #FFFFFF
For en avslutt touch, legg på et lag stil skygge.
Step 11
Legge i en bit av teksten ved siden av vår registreringsknappen kan bidra til å informere og lokke brukerne til å klikke det
Velg Horizontal Type (T) og lage litt tekst 15px til høyre for vår knappen og angi skriftegenskapene til:
Font Familie: Helvetica Neue
Størrelse: 11 px
stil: Vanlig
Anti-aliasing: Crisp
color: # 636363
Trinn 12
< p> for å bidra til å trekke brukerens oppmerksomhet til toppen av vår side og også oppnå noen separasjon, vi kommer til å lage en gradient boks som vil bli plassert bak alle lagets vi nettopp opprettet.
start med å velge rektangel Tool (U) og lage en boks går fra venstre guide til høyre guide og det er 305px i høyden.
Endre det er fyllfarge til "F8F9F8", og i lagpanelet, flytte den slik at det er under alle våre innholds lag, men over vår side beholder laget. Når det er gjort, gjelder følgende lag stil til det:
Når plassert og stylet, det skal se slik ut:
Step 13
Våre gradient boksen ser stor og definitivt forbedrer våre beste innholdsområdet. Men det mangler fortsatt en "ferdig" utseende, spesielt nær bunnen av graderingen. For å hjelpe stenge vår øverste området, kommer vi til å legge inn to linjer som vil gi oss en "set-in" og polert utseende.
Velg Line Tool (U) og mens du holder Skift-tasten , tegne en 1px linje ved starten av vår gradient som spenner fra venstre guide til høyre guide, deretter endre linjens farge til "000000" (svart).
endre tettheten av denne linjen til 10% og kopiere den ved å velge Layer > Duplicate Layer ... og klikk på OK. Endre fargen på denne duplisert linjen til "FFFFFF" (hvit) og endre det opacity til 100%. Deretter flytter dupliseres linje ned 1px.
Trinn 14
Neste, vi kommer til å lage et klistremerke for å fremme en promo som kan skjer. For å begynne, velg Ellipse Tool (U) og lage en sirkel som måler 120 piksler i diameter og plassere den over toppen hjørne av vår side container. . Endre fyllfarge til noe synlig (ex: "000000")
Bruk de følger lagstiler til sirkelen:
Duplicate denne sirkelen laget ved å velge Select Layer > Duplicate Layer ... og klikk på OK. Deretter endre størrelse på denne dupliserte laget ved å velge Rediger > Transform > Skala og sette bredde og høyde til 88%
Bruk /endre følgende lagstiler av duplisert sirkel:.
Deretter må vi velge både sirkel lag og velg Layer > .. Merge Layers
Etter det, ta tak i Marquee Tool (M) og, mens du holder Skift-tasten, tegne en 170 piksler boks
Deretter klikker du på Velg > Transform Selection, endre rotasjonen til 37 grader, og plasser vinklet utvalg over øvre venstre hjørne av sirkelen som vist nedenfor:
Når vår Marquee er i posisjon, klikk på ENTER for å lagre transformasjon, deretter velg nytt > Layer > Layer via Cut
Nå velger nyklippet laget og klikk på Rediger >.; Transform > Rotere 180 grader. Plasser lag 1px ned og 1px til venstre, slik at det harmonerer sømløst.
Nå må vi gjøre folden en solid farge. For å gjøre dette, høyreklikker du på lag thumbnail for fold lag og klikk Velg piksler. Grab Brush Tool (B), endre swatch farge til "58b672" og pensle over fold lag
Deretter legger følgende lagstiler til folden lag.
Til slutt, vi kan legge til litt tekst på innsiden av vår klistremerke. Lag tre tekstlag med følgende tekst og egenskaper:
Første linje: "$ 24,95" med egenskapene:
Font Familie: Genève (last ned her)
størrelse: 10,5 px
Tracking: -75 px
Anti-aliasing: Sterk
Farge: #FFFFFF
andre linje: "$ 19,95 "med egenskapene:
Font Familie: Genève (last ned her)
Størrelse: 19,5 px
Tracking: -75 px
Anti -aliasing: Sterk
Farge: #FFFFFF
Tredje linje: "Limited Time" med egenskapene:
Font Familie: Helvetica Neue
Font Stil: Kursiv
Størrelse: 10 px
Tracking: 0 px
Anti-aliasing: Crisp
Farge: #FFFFFF
Plasser dem som vist nedenfor:
For en siste finishen, grip line Tool ( U), tegne en vinklet linje gjennom "$ 24,95" tekst og endre linjen fyllfarge til "FFFFFF" (hvit).
Step 15
for titler av ulike deler i vår side, vi kommer til å lage en egendefinert bånd grafisk.
start med å velge Avrundet rektangel Tool (U), endre avstanden til 14 piksler og skape en 235x30px rektangel. Deretter endrer fyllfargen "CCCCCC".
Deretter velger rektangel Tool (U) og mens du holder SHIFT, tegne en 28x28px kvadrat. Plassering denne plassen, slik at det er å peke på venstre side og er 12px fra toppen av vår avrundet rektangel.
Zoom inn til ca 400% og velger Eraser Tool (E). Sett Størrelse til 40px og modus å børste. Flytt viskelær til stillingen vist nedenfor og klikk for å slette (dette kan ta noen forsøk for å oppnå en ren og skarp bånd)
Velg både avrundet rektangel lag annet lag og velg Layer >.; . Merge Layers
På dette nylig fusjonerte laget, gjelder følgende lagstiler:
Deretter velger Ellipse Tool (U), opprette en sirkel med en 30px diameter og endre det farge til " 444444 "
Velg Layer >.; Raste > Lag. Så, ta tak i Marquee Tool (M) og tegne en markering rundt halvparten av sirkelen
Velg Rediger >.; Klar og flytte gjenværende halvsirkelen lag under våre bånd laget og posisjon som vist nedenfor.
Det siste trinnet for våre bånd er å legge til vår tekst i. Velg Horizontal Type (T) og legg til litt tekst med følgende egenskaper:
Font Familie: Helvetica Neue
Størrelse: 16 px
stil: Vanlig
Tracking: -25
Anti-aliasing: Sharp
Farge: #FFFFFF
For å hjelpe vår tekst skiller seg ut, gjelder lagstilen:
Trinn 16
for våre screenshots, vi kommer til å legge dem i stil, avrundet bokser. Grab Avrundet rektangel Tool (U), tegne en boks som er 150x100px i størrelse og endre det farge til "FFFFFF" (hvit)
Legg følgende lagstiler til vår boks.
Velg Layer > Duplicate > Lag ... og gjentas 3 ganger. Space dem ut om 30px fra hverandre
Nå, for å legge til i våre skjermbilder, velger du Fil >.; Sted for hvert skjermbilde og flytte /endre størrelse på hver importerte bilde for å passe inn i sin egen boks.
Trinn 17
For å bla mellom skjermbilder, kan legge litt til venstre og høyre navigasjonsikonene. Velg Ellipse Tool (U), lage en sirkel som er 30px i diameter og endre det er fyllfarge til "F8F9F8".
Velg Custom Shape Tool (U) og velge en pil-lignende form. Tegn en liten pil på innsiden av sirkelen og endre det farge til "CFCFCF". Når ferdig, gjelder følgende lag stil til det:
Velg både sirkelen og pilen lag og velg Layer > Duplisere lag ... Etter det, klikker du på Rediger > Transform > Vend vannrett og flytte disse duplisert lag til den andre siden av våre skjermbilder.
Trinn 18
For vår bunnen innholdsområdet la oss kopiere våre bånd tittelen vi opprettet i trinn 16, flytte den under våre skjermbilder og endre teksten.
Step 19
for vår funksjon liste, vi kommer til å lage et rutenett-stil layout til å organisere våre ulike funksjoner.
La oss begynne med å legge litt tekst for å beskrive vår funksjon. Velg Horizontal Type (T) og lage litt tekst med følgende egenskaper:
Font Familie: Helvetica Neue
Størrelse: 17 px
Stil: Vanlig
Tracking: -25
Anti-aliasing: Crisp
color: # 252525
Neste er å sette vår ikon. Jeg bruker ikoner fra "Project Icon Set" som du kan laste ned her. Velg Fil > Place ... velge et ikon deretter endre størrelsen på importert ikonet til 28%.
Velg Horizontal Type (T) og lage en tekstboks rundt symbolet. Legg til litt tekst og bruk mellomrom eller faner for å bryte teksten rundt symbolet. Bruk følgende skriftegenskaper:
Font Familie: Helvetica Neue
Størrelse: 12 px
Stil: Vanlig
Ledende: -22
Tracking: -10
Anti-aliasing: Crisp
color: # 363636
Trinn 20
Legg tittelen, ikon og tekst du nettopp har opprettet en gruppe, og kopiere det to ganger (kalt "Feature 1", "Feature 2", osv ...). Posisjonere disse dupliserte lag slik at de er 70 piksler fra hverandre og endre ikoner /tekst tilsvarende. Når du er ferdig, satte de 3 funksjonsgrupper inn i en ny gruppe kalt "Rad 1".
Til slutt, duplisere gruppen "Rad 1", flytte den ned 70 piksler og endre ikoner /tekst tilsvarende.
< p> Bruk grupper for å organisere hver funksjon og rad med funksjoner som gjør det enkelt å redigere senere.
Trinn 21
for vår bunntekst, vi kommer til å legge noen enkle tekst lag for opphavsrett og koblinger.
Velg Horizontal Type (T) og lage litt tekst. Plasser den 30px fra toppen av siden beholderen og peke på venstre guide. Angi følgende tegnegenskapene:
Font Familie: Helvetica Neue
Størrelse: 12 px
Stil: Vanlig
Tracking: 0
Anti-aliasing: Crisp
color: # 555555
Opprett en annen tekstboksen og legge inn noen linker. Plasser denne boksen 30px fra toppen av siden container samt og berøre høyre guide. Angi følgende tegnegenskapene:
Font Familie: Helvetica Neue
Størrelse: 12 px
Stil: Vanlig
Tracking: -25
Anti-aliasing: Crisp
color: # 333333
Konklusjon
Det er alt! Jeg håper du har hatt glede av denne opplæringen, og har funnet noen nyttige teknikker som du kan tilpasse /gjelde for din design.