Design en stilig Tidslinje Portfolio Page Ved hjelp av Photoshop
Dette innlegget er en del av en serie som heter designe og bygge et Responsive Tidslinje Portfolio Page.Building den Responsive Tidslinje Portfolio Side
I denne opplæringen jeg vil være å bruke Photoshop CS6 for å lage en enkel, ren og tre-kolonne portefølje side, med en trending tidslinje. I løpet av denne prosessen vil vi se på å lage egendefinerte rutenett med retningslinjer, styling typografi, og leke med farger og kontrast for å oppnå estetikk vi ønsker. Det ferdige PSD filen vil være klar til å overlate til en utvikler for koding opp
Instruksjons Eiendeler
For å kunne følge med dere trenger følgende (fritt tilgjengelig) eiendeler.:
Raindrops bilder fra Unsplash
NYC skyline bilder fra Unsplash
Notebook PSD mal fra Dribbble
Gratis Vector ikoner fra Chapps
< li> Lato font fra Font Squirrel
Avatar fra Bruker Inter Faces
Dribbble ikonet fra Iconfinder
Twitter-ikonet fra Iconfinder
Facebook-ikonet fra Iconfinder
Google+ ikonet fra Iconfinder
få dokumentet Klar
Trinn 1
Begynn med å lage et nytt dokument (Fil > New ... ) med de innstillingene som er vist nedenfor.
Kontroller at oppløsningen er satt til 72 piksler /tomme
Trinn 2
La oss sette noen guider så vår layout har nok plass og ser balansert. Gå til View > Guide New ... og angi følgende retningslinjer: vertikale på 20px, 50 piksler, 115px, 230px, 550px, 570px, 875 x og 1180px, og horisontal på 60px
. Tips: Du kan også bruke GuideGuide Photoshop plugin for å gjøre denne prosessen enda raskere.
Trinn 3
Vi kommer til å holde våre dokumenter velorganisert helt fra begynnelsen, så la oss lage tre lag grupper navngitte Venstre Sidebar, beskrivelser og arbeid. Stikker til denne Photoshop etikette vil holde ting organisert og lett å navigere eller redigere. For å opprette grupper gå til lag > New > Group ... og gi hver enkelt en tittel som nevnt. For rask etablering av en gruppe bare klikke på ikonet.
Prosjektering Venstre Sidebar området
panelet til venstre vil tjene som et område for en brukerprofil, avatar, sosiale lenker og primærnavigasjonen. La oss bygge det!
Trinn 1
Velg rektangelverktøyet (T), endre forgrunnsfargen til # 11171c og tegne et 230x1320px rektangel inne venstre sidebar gruppen. Den skal plasseres på venstre side av dokumentet mellom kanten av dokumentet og den fjerde loddsnor.
Trinn 2
Opprett en ny gruppe over tidligere opprettet rektangel form og gi den navnet profil Pic. Etter det, plukke Ellipse Tool (U), og holde nede Shift-knappen, tegne en 100x100px sirkel og plassere den rett under første horisontale retningslinje. Det bør være sentrert med den tredje vertikale retningslinjen også.
Trinn 3
Nå leder over til uifaces.com og hente en av avatarer tilgjengelige. Alternativt kan du bare finne ditt eget bilde og lime det over nylig opprettet sirkel form. Etter det, hold nede Alt-tasten og musen over miniatyrbildet av fotografiet lag til du ser en liten pil ned. Når du ser det, slipper du knappen og det vil skape en Clipping Mask, innbinding bildet ditt til en sirkulær form. Juster det slik du ønsker, ved hjelp av Move Tool (V).
Trinn 4
Nå minimere Profile Pic gruppen ved å klikke på den lille pilen ved siden av gruppen tittelen. Etter det, endre forgrunnsfargen til #FFFFFF og plukke den Horisontal Type Tool (T). Velg Lato (Regular) font, satt størrelsen til 16 punkter og skrive navnet på vår portefølje eier. I mitt tilfelle er det helt fiktive Chris Johnson. Plasser den 25px under profilbildet og sørg for at den er sentrert med den tredje vertikale retningslinje.
Trinn 5
Nå trenger vi en kort beskrivelse for vår portefølje slik at besøkende umiddelbart få en følelse av hva alt handler om. Vi bruker det samme verktøyet; alt vi trenger å gjøre er å redusere skriftstørrelsen til 14 pkt og skrive en kort par linjer om porteføljen eieren. For å gjøre det ser organisert og balansert sted det 20px lavere slik at den har noen plass til å puste.
Trinn 6
Good. La oss nå plassere noen sosiale medier ikoner som gjør det enkelt å koble til porteføljen eieren. Opprett en ny gruppe med følgende tittel: Social Media. Etter det, for å gå over til Iconfinder laste Dribbble, Twitter, Facebook og Google+ ikoner som PNG. Dra dem til Photoshop-dokumentet og plassere dem i sosiale medier gruppen. Nå høyreklikker Dribbble ikonet, velg Blending Options .. og legger til alternativet Color Overlay. I stedet for standard rød, sett farge til hvit.
Trinn 7
Alle andre ikoner skal være hvit også, så la oss bruke samme lag stil til resten av ikonene. Bare høyreklikk på Dribbble ikonet lag og velg Copy Layer Style. Etter det, hold nede CMD-tasten og velg Twitter, Facebook og Google+ lag. Igjen høyreklikk en av dem og velg Lim Layer Style. Til slutt, justere ikoner slik at det er en 10px gap på hver side, og gruppen er plassert 20px under beskrivelsen teksten.
Trinn 8
La oss endre forgrunnsfargen til hvit #FFFFFF, deretter plukke line Tool (U), satt vekt på 1PX og holde nede Shift-tasten, tegne en horisontal linje fra venstre dokumentet kanten til fjerde loddsnor. Flytt den 50 piksler fra ikonene.
Trinn 9
For å gjøre linjen mer visuelt subtile, la oss redusere linjen lagets Opacity til 10%.
Trinn 10
La oss nå konsentrere oss om vår navigasjon, så oppretter en ny gruppe kalt navigasjon og legg den over den mørke rektangelet laget. Etter det, velge et dokument ikon fra Free Vector ikoner fra Chapps ikonsett og dra det til din portefølje dokumentet. Hit CMD + T for å endre størrelsen på ikonet for å 13x16px. Etter det, dobbeltklikker du på lagnavnet og endre navnet til Arbeid ikonet. Med det gjort, dobbeltklikker et lag miniatyr og endre fargen til # d35136. Plasser ikonet 40px under den subtile linjen og 20px fra venstre kant, så det passer med den første vertikale retningslinje.
Step 11
Nå for noen navigasjonselementer. Plukk Horisontal Type Tool (T), velger Lato (Fet) font, satt størrelsen til 14 pkt og skrive følgende: ARBEID. Plasser som foran den andre horisontalt retningslinje og sørg for at den er på linje vertikalt med Work-ikonet.
Trinn
Endre forgrunnsfargen 12 til # 424a51 og ved hjelp av den samme teksten verktøyet, skrive ned noen kategorier å gå under arbeid, hver og en starter på en ny linje. Kontroller at linjehøyde er satt til 24 pkt så våre kategorier er lett lesbar. Plasser kategoriene lag 20px under tidligere tekstlag.
Trinn 13
Vi trenger å indikere den aktive tilstanden til link. For den aktive kategorien bruke hvit #FFFFFF, klikker du bare på teksten mens Horisontal Type Tool (T) er valgt, markerer den første kategorien og endre farge.
Trinn 14
Nå plukker en bruker ikon fra tidligere brukte ikonsett og endre størrelsen til 16x16px bruker CMD + T. Klikk to ganger på ikonet lag miniatyrbilde og endre fargen til # 27b599, endre navn på lag til Bruker ikonet slik at det er enklere å administrere våre lag. Plasser den 30px under den siste kategorien for å gi den litt negative rommet som vil fungere som en separator.
Trinn 15
Endre forgrunnsfargen til grønn # 27b599 som brukes for brukerikonet og velg Horisontal Type Tool (T). Velg Lato (Fet) font, angi størrelsen til 14 pkt og skrive om. Plasser denne etiketten rett etter at brukeren ikonet, som du gjorde for avsnittet ovenfor. Deretter endrer forgrunnsfargen til # 424a51 og skriv noen kobling titler for "om" -delen
Trinn 16
La oss nå lage den siste delen på vår navigasjon.; Kontakt. Plukk postikonet fra Free Vector ikoner fra Chapps og endre størrelsen til 16x13px, etter at endre farge til # 088ecc og plassere det konsekvent som ikonene før, 30px under den siste teksten laget av Info-delen. Etter å ha kommet inn i KONTAKT tekst, endre forgrunnsfargen til # 424a51 og skrive ned noen kobling titler for seksjonen.
Prosjektering Beskrivelser området
Skiftende ett kvartal over til høyre, la oss nå komme i gang med våre portefølje varer beskrivelser.
Trinn 1
Vi vil minimere tiden brukes for navigering og venstre sidebar grupper ved å klikke på de små pilene ved siden av gruppenavnene. Utvid Beskrivelser gruppen, endre forgrunnsfargen til # f7f7f7 og velg rektangelverktøyet (T). Etter det, tegne en vertikal rektangel form mellom kanten av Venstre Sidebar og den femte vertikale retningslinje. Dette rektangelet skal være 320x1320px.
Trinn 2
Nå endre forgrunnsfargen til # e7e7e8 og plukke Line Tool (U). Sett Vekt til 1PX og holde nede Shift-tasten, tegne en loddrett linje fra topp til bunn i femte vertikale retningslinje. Dette bør skape en bedre visuell skille mellom Beskrivelser gruppen delen bakgrunn og hoved bakgrunnen. Hit CMD +; å skjule /vise retningslinjer. Til slutt, endre navn på linjen laget til V-linjen så det er fornuftig senere.
Trinn 3
Vi kommer til å trekke en annen vertikal linje, så endringer på vekt til 3px og tegne en annen linje over dette dokumentet (holde nede Skift-tasten for å opprettholde perfekt vertikalitet). Klikk to ganger på lagnavnet for å endre navnet til Tidslinjen. Etter det, flytte linjen 24px rett fra venstre sidebar kanten og 30px ned fra toppen av dokumentet.
Trinn 4
Endre forgrunnsfargen til vår tidligere brukt rød # d35136 og plukke Ellipse Tool (U). Etter det, holder du nede Skift-tasten og tegne en 11x11px sirkel. Plasser den 20px til høyre fra kanten av venstre sidebar området og 20px ned fra toppen av dokumentet. Vår lille sirkelen bør være pent plassert på toppen av den nylig opprettet linje.
Trinn 5
Nå høyreklikker du nylig opprettet sirkelen lag og velg Blending Options .... Klikk på Stroke. Sett Størrelse til 3px, posisjon i Outside og farge til # f7f7f7. Dette background-color slag vil skape effekten av vår sirkel flytende ved siden av en linje.
Trinn 6
Endre forgrunnsfargen til # 11171c og plukke den Horisontal Type Tool (T). Som ususal, velger Lato (Fet) font, angi størrelsen til 14 pkt og angi en dato for arbeidet f.eks "7 nov 2013». Deretter bruker Move Tool (V), flytte datoen lag 20px til høyre for den røde sirkelen og 20px ned fra toppen av dokumentet.
Du bør nå, har lagt merke til et mønster i vår avstand. Det er viktig å være konsekvent og bruke rytmisk avstand for ulike elementer, slik at design ser balansert.
Trinn 7
Endre forgrunnsfargen til # 5e5e5e så det er litt lettere enn da dato. Dette skaper en visuell hierarki, noe som gjør leser mye enklere. Bruk samme Horisontal Type Tool (T), Lato skrift, men denne gangen endre skrift vekt Regelmessig og skriv noen linjer for en kort arbeidsbeskrivelse. Deretter gjør en linjeskift ved å trykke på Enter-knappen to ganger, og gå inn i klienten og koder for arbeidet f.eks:
Klient: Despreneur
Tags: Web Design
Highlight "klient" og "tags" og angi skrift vekt på Fet, slik at de vil være forskjellig fra beskrivelsen og vil bli oppfattet som linker. Til slutt, sørge for at linjehøyde er satt til 18 pt slik at våre linjer har nok plass til å puste.
Trinn 8
Hvis du vil duplisere funksjonene vi nettopp har gjort, velger du den røde sirkelen, dato og beskrivelse lag. Deretter slo CMD + J, eller høyreklikk og velg Duplicate Layers ..., treffer OK etterpå. Flytt dupliserte innholdet et par hundre piksler under den opprinnelige. Vi vil justere plasseringen av dette senere, da det vil være avhengig av arbeidet bildehøyden vi vil plassere ved siden av den.
Prosjektering Work Area
Den siste vertikale delen av vår layout er for portefølje stykker selv. La oss bygge det!
Trinn 1
Vi begynner (som vanlig) ved å minimere tiden brukes Beskrivelser gruppen og åpne opp arbeidsgruppen. Plukk rektangel Tool (U) og tegne en 610x400px størrelse rektangel mellom sjette og åttende vertikale føringer (farge spiller ingen rolle denne gangen, bare sørg for at det er synlig). Plasser den 20px under toppen av dokumentet slik det har 20px plass rundt.
Trinn 2
Nå plukke et bilde av arbeidet ditt, vil jeg bruke den bærbare PSD mal skjermbilde jeg utformet tidligere. Dra den til dokumentvinduet Photoshop, og sørg for at den er plassert over den tidligere opprettede rektangel formlag. Holde nede ALT-tasten, musen over navnet skjermbildet lag til du ser en liten pil ned. Når du ser det, slipper de nøkkelen og det vil skape en Clipping Mask så bildet vil kun være synlig innenfor området av rektangelet. Til slutt traff CMD + T og endre størrelsen på bildet slik du ønsker den skal være.
Hold nede Skift-tasten når du endrer størrelsen å holde proporsjonene.
Trinn 3
Velg rektangel form lag, kopiere den, og flytte den 20px under det første bildet. Legg et annet bilde av arbeidet som vi gjorde med en før. For det andre arbeidet eksempelet jeg har brukt Raindrops bilder fra unsplash.com. Etter det, opprette en tredje stykke arbeid og plassere den 20px under den andre. For det tredje arbeidet bildet jeg har brukt NYC Skyline bilder, igjen danner unsplash.com.
Trinn 4
Vi må nå gå tilbake og sørge for at alt er foret opp riktig. Åpne opp Beskrivelser gruppen igjen og finne den røde sirkelen, dato og beskrivelse lag. Velg dem alle holder CMD-tasten og flytte dem ned før de justeres med toppen av andre portefølje bildet. Kopiere disse lagene ved å klikke CMD + J, eller høyreklikke lagene og velge Duplicate Lag .... Etter det, plassere dem ved siden av den tredje arbeids bildet og justere med toppen av det bildet.
Trinn 5
Awesome. Vi er nær slutten. Minimer Beskrivelser gruppen og åpne opp Arbeidsgruppe igjen. Etter det, plukker oppdateringsikonet fra ikonsett og dra det til din portefølje dokumentet. Hit CMD + T og endre størrelsen til 20x20px. Klikk to ganger på ikonet lag miniatyrbilde og endre fargen til # a0a2a4. Til slutt plasserer den 20px under arbeidet bilde.
Trinn 6
Siste trinn! La oss skape et dynamisk element som vil dukke opp når vår hjemmeside er rullet ned og serveren laster opp mer arbeid. Plukk Horisontal Type Tool (T), velg 14 pkt størrelse Lato (Fet) skrifttype og skriv inn teksten Loading .... Plasser den ved siden av oppdateringsikonet og flytte den 10px til høyre. Etter det velger begge lag, ikon og tekst og plassere dem i sentrum av den vertikale retningslinje for arbeidet bildet.
Du er ferdig!
Så der har du det . Vi gikk gjennom etablering av en portefølje nettside layout, fra bunnen av, i en organisert og effektiv måte. Filen vi bygget er klar til å overlate til en utvikler som kan trekke den fra hverandre, finne alle elementene som trengs, og bygge for leseren.
Jeg håper du har lært noe nytt ved å følge denne opplæringen. Hvis du har spørsmål, eller har problemer ikke nøl med å pinge meg i kommentarfeltet eller via Twitter.