Share
Hva er nummer én ting du vil at porteføljesiden din skal gjøre? Skille seg ut! I dag skal Paul J Noble gå oss gjennom etableringen av sitt eget unikt designede porteføljeside. Han vil vise oss tips og triks i Adobe Photoshop, samt noen gode tilnærminger til å stå ut fra pakken med andre porteføljesider.
Tenk på din porteføljeside er din online talsperson til potensielle kunder. Hvis det gjøres riktig, bør det fortelle folk hva du gjør, vise frem ditt beste arbeid, og gi dem muligheten til å komme i kontakt med deg. Det er alle ganske åpenbare ting - så hva er forskjellen mellom en vanlig porteføljeside og en virkelig bemerkelsesverdig?
Nøkkelen til en effektiv porteføljeside har ikke bare store prosjekter - det gir et varig inntrykk på besøkende. Sikker på at dette kan bety at du har utrolige illustrasjoner hvis du er grafisk designer - men for webdesignere og utviklere betyr dette ofte at du må presse grensen til UI / UX og koding for å vise frem våre sterkeste poeng.
I denne opplæringen vil Paul J Noble vise oss hvordan han brukte noen enkle, men bemerkelsesverdig innovative tilnærminger til UI / UX på sitt eget nettsted for å skape et porteføljeside som strekker brukerens forventninger ved hjelp av interaktivitet og subtile lyseffekter.
La oss dykke inn!
Opprett et nytt dokument i Photoshop som er 1400 x 900. Det endelige, HTML-gjengitte nettstedet vil inneholde "flytende" (dvs. skalerbare) elementer, slik at vi må huske på at det endelige designet ikke vil være en fast størrelse.
Å lage en solid bakgrunn er en enkel måte å få ting på gang. For dette designet skal vi bruke en basefarge
Det er mørkt nok til å fremheve forgrunnsbilder, samtidig som det kompenserer ren svart som kan vises i foliobildene. Vi vil også bruke inkluderer litt blå for å lage en "kul" mørk farge som integreres med grensesnittelementene.
Velg Lag> Nytt fyll lag> Solid farge og tilordne fargen # 252a3b.
Når vi bruker et skalerbart layout, må vi definere minimum horisontal bredde. For de fleste kommersielle nettsteder er dette rundt 1000 piksler for å imøtekomme brukere med 1024x768 oppløsningsdisplayer. Men for dette nettstedet vil vi sikte på 1100 piksler som en minimumsbredde.
For det første må du kontrollere at guidenheter er satt til piksler. Dette kan settes ved å gå til Innstillinger> Enheter og veiledninger.
Deretter går du til Vis> Ny guide. Som vi skal legge inn innholdet vårt i sentrum og vi sikter mot en total minimumbredde på 1100 piksler, bør vi plassere vertikale guider ved 150px og 1250px.
Subtile diagonal striping vil bidra til å løfte designet ved å skille mellom forgrunnsporteføljen og strukturert bakgrunn.
For å oppnå dette vil vi bruke et mønsterfyllingslag. Men først må vi lage mønsteret.
Opprett et nytt dokument 12x12 piksler med gjennomsiktig bakgrunn og legg til et nytt fyllingslag med en svart fylling (# 000000).
Legg nå et nytt lag (Lag> Nytt> Lag). Bruk blyantverktøyet med en penselstørrelse på 1px, trekk tre linjer nøyaktig slik de vises i bildet nedenfor.
Slå av fyllingslaget og sett linjeskiktets opasitet til 6%. For å lagre dette som vårt mønster, velg Rediger> Definer mønster.
Gå tilbake til vårt originale lerret, opprett et nytt lag med tekstur ved å velge Lag> Nytt fyll lag> Mønster og velg det tidligere definerte mønsteret.
Nå som vi har opprettet vår base, kan vi slippe noen flate lag som inneholder de viktigste elementene på nettstedet
Først, vår navigasjon. Siden dette nettstedet skal utformes for å ikke ha vertikal rulling, kan vi plassere navigasjonen for å justere seg til bunnen av skjermen.
Opprett en ny gruppe i lagpaletten og merk denne gruppen 'Navigasjon'.
Deretter oppretter du et nytt lag ved hjelp av rektangelverktøyet (U). Med Info-vinduet åpent tegner du denne formen, slik at den er 1400x61 (hele bredden på dokumentvinduet og 61 piksler høy). Juster dette laget nederst i dokumentvinduet.
Bruk nå en gradient til laget ved å høyreklikke på formlaget i paletten Lag og velg Blending Options, og velg deretter Gradient Overlay (Alternativt velg Lag> Lagstil> Gradient Overlay).
I Graident Editor, klikk på den nederste fargevalgeren for å åpne Color Picker. For venstre farge (bunnen av formen) bruk # 2f313a. For riktig farge (toppform) bruk # 3c3f49.
Deretter oppretter du et nytt lag og lar deg markere dette. Bruk blyantverktøyet med en 1px børste og farge #ffffff, tegne en linje mens du holder skift over toppen av rektangelformet som tidligere ble opprettet. Sett så lagets opasitet til 6%.
Opprett et nytt tekstlag 20 piksler fra venstre side av dokumentet og juster teksten som skal være vertikalt sentrert på navigasjonsrektangellaget.
I dette eksemplet har fonten DIN Light blitt brukt på 14 px med en løs sporing på 200. For å skape et skifte mellom to deler av logotypen, brukes to farger. For den første delen #dddddd og den andre, mørkere delen # 737375.
Deretter legger du til en subtil dropshadow for å lage utseendet på teksten som er innspill til bakgrunnen. Velg Lag> Lagstil> Drop Shadow.
Fjern markeringen 'Bruk globalt lys', endre retningen til -45 grader, sett størrelse til 0px, avstand 1px og opacity 30%.
For de viktigste navigasjonsknappene vil vi bruke en avrundet rektangelform.
Opprett en ny gruppe kalt 'knapper'.
Opprett en ny avrundet rektangelform som er 279x31 og kompensere 20 px fra høyre side av dokumentvinduet og sentrert midt i navigasjonsrektangelet.
Høyreklikk laget i lagpaletten til og velg Blandingsalternativer. Kontroller Gradient Overlay og bruk verdiene # 292c33 til # 43464f. Klikk på OK, og velg deretter Bevel & Emboss.
For Bevel & Emboss setter størrelsen til 0px med en retning på 122 grader. Deretter setter du Opacity Highlight og Shadow til 10% for å skape en konsistent, subtil belysningseffekt.
Legg til tekstetiketter med de samme skriftinnstillingene som ble brukt for logotypen. Ettersom knappetikettene er inneholdt i et mindre vertikalt rom, bør vi redusere størrelsen til 12 px og stram sporingen til 100. Bruk de samme fargene som logotypen, men bruk lysere farge for den aktive siden etiketten.
For å skille mellom knappene og opprettholde det svakt opplyste utseendet på navigasjonen, bør vi tegne to linjer, hver 1px bredde. Den første skal være svart (# 000000) og den andre hvite (#FFFFFF). Still opaciteten for det hvite laget til 6% og det svarte laget til 12%. Dupliser disse lagene ved å Bytte-klikke hver og deretter høyreklikke på valget. Plasser de dupliserte lagene med konsistent avstand inne i navigasjonen.
Disse knappene har en annen funksjon enn resten av naven, så vi bruker en stil som antyder dette. La oss innføre disse knappene for å utfylle hovednavigasjonen.
For det første, opprett en ny gruppe kalt "sosial" og hekker denne gruppen i «navigasjon» foreldre gruppen.
Nå, ved hjelp av verktøyet avrundet rektangel med en radius på 4 px, og hold skift-tasten, opprett en kvadratisk aspektform på 25x25 px. Sentrere dette vertikalt i navigasjonen, og plasser formen 22 px til venstre for hovednavigeringsknappene.
Høyreklikk på formen som nettopp er opprettet, og velg Blending Options.
Legg til en dråpe skygge. For denne dropshadowen bruker vi hvit (#FFFFFF) og setter blandemodus til Lighten. Angi avstand til 1px, spred til 0% og størrelse til 0px. Dette vil skape en effekt av at den nederste kanten lyser og dermed knappen er innstilt.
Deretter sjekker du innvendig skygge mens du fortsatt er i vinduet Layer Style. Bruk svart (# 000000) med opasitet på 39%, avstand 1px og størrelse 4px.
Til slutt velger du Color Overlay og bruker # 353741. Dette vil flate utseendet på formen og legge til kontrast med bakgrunnen.
For sosiale medier-ikonene tar vi et eksisterende bilde og sporer kantene ved hjelp av pennverktøyet for å lage en bane (pass på at baner er valgt i menyen Alternativer for verktøy).
Etter at du har opprettet en bane til ikonet, bruker du sporvalgsverktøyet og høyreklikker banen du nettopp har opprettet (pass på at banen er valgt i paletten Paths). Velg Definer tilpasset form? Lagre form.
Vi kan nå bruke ikonet som et skalerbart vektorobjekt. Ved hjelp av pennverktøyet, endrer du Valg for å lage lag (øverste venstre element på Alternativ-feltet) og velg Tilpasset formverktøy, og velg deretter ikonet som nettopp er opprettet. Hold Shift-tasten, dra objektet slik at det passer inn i ikonflisen.
Still ikonets opacity til 20%.
Gjenta disse trinnene for eventuelle gjenværende sosiale medier-ikoner.
I dette eksemplet skal vi vise foliobilder som er 640x480 px.
Som vi vil vertikalt sentrere det kjente bildet i rommet over navigasjonen, må vi legge til flere guider. Velg Vis> Ny guide og legg til horisontale guider ved 180px og 660px. Dette vil plassere vårt viste bilde i midten av det vertikale feltet over navigasjonen.
Vi vil også trenge litt tekst til venstre for det kjente bildet, så vi legger til vertikale guider ved 400px og 350px for å gi margin for teksten og gi plass til navigering ved siden av bildet. Til slutt legg til vertikale guider ved 1040px og 1070px for å definere kanten på det viste bildet og marginen mellom det tilstøtende bildet.
Opprett en ny gruppe kalt 'Prosjekter'. Deretter tegner du et rektangel 640x480px med rektangulærverktøyet som retter seg mot øverste venstre hjørne av den vertikale styringen ved 400px og den øverste til den horisontale styringen ved 180px. Dette vil tjene som plassholder for vårt hovedbilde.
Høyreklikk på laget som nettopp er opprettet, og velg Rasterize Layer.
Nå, holder du Alt-tasten, klikker du og drar laget for å lage et duplikat. Flytt dette laget til høyre for laget med 30px margin for å justere med guiden ved 1070px og bruke samme grunnlinje.
Lag to flere duplikater og juster disse til bunnen av hver med 30px margin mellom hver.
Deretter fyller du på hver av disse figurene med fargen # 252a3a ved hjelp av Paint Bucket-verktøyet.
Opprett en ny gruppe kalt 'Vignette' under 'Navigasjon' gruppen og over 'Prosjekter' gruppen.
Opprett et nytt lag og bruk Paint Bucket-verktøyet for å fylle laget med forgrunnsfargen # 0f1219.
Bruk Ellipse-verktøyet til å tegne et omriss som krysser i hjørnene til hovedbildeguider.
Nå, for å skape en vignetteeffekt, må vi kutte ut denne delen mens du fjærer kanten av kuttet. For å oppnå dette bruker vi Velg> Endre> Feather. Feather valget med 60px og deretter kutte lagvalget (Ctrl-x / Command-x).
Som vi skal vise frem arbeid, må vi legge inn noen skjermbilder på plassholdere. Gå tilbake til "Prosjekter" -gruppen og lim inn en skjermdump mens hovedplassholderen er valgt. Dette vil sette inn laget over plassholderen. Høyreklikk deretter laget og velg Opprett klipping maske.
Lim inn tre andre skjermbilder på de andre plassholdere.
Reduser opaciteten for alle skjermbilder bortsett fra det sentrert skjermbildet til 20%.
For å annotere hvert prosjekt bruker vi tre tekstlag. Opprett en ny gruppe over "vignette" -gruppen for å huse disse lagene.
For det første, overskriften, bruker vi en lys skrift. I dette eksemplet har jeg brukt DIN Light, men en annen lignende skrifttype kan også fungere fint. Bruk tekstverktøyet til å tegne en tekstboks i guiden til venstre for hovedbildet og 40px under den øverste guiden. Angi fargen til #FFFFFF, sporing til -25 for en strammere brevavstand og bruk en skriftstørrelse på 28px.
Vi legger også til en linje for prosjektkategori og dato. Still størrelsen til 14px, sporing til 100, tvinge deksler og bruk farge # 338966 for å aksentere denne linjen.
Deretter bruker vi for systemteksten en systemfont som Lucida Grande eller Lucida Sans Unicode ved 12px med en farge på # 8C8F95 og linjehøyde på 18px.
For å navigere i vår folio-side tillater vi mus eller tastaturkontroll. En intuitiv plassering for navigasjonsretningsknapper er i henhold til funksjonen. For eksempel går høyre pilknapp til høyre for hovedbildet.
For knappene bruker vi gjennomsiktige figurer som kan skifte åpenhet på svinger eller klikk hendelser. Opprett en ny gruppe kalt "Knapper" som ligger over "Vignette" -gruppen.
Deretter oppretter du et nytt dokument med dimensjonene 37x37px. Bruk pennverktøyet til å tegne en chevronform som nedenfor. Gjenta prosessen i trinn 8 ved å bruke Path Selection Tool, høyreklikk på formen og velg Definer tilpasset form. Lagre formen.
Hvis du går tilbake til vårt hovedlakk, bruker du verktøyet Tilpasset form til å sette inn den tidligere opprettede formen.
Deretter velger du Rediger> Transform> Vend horisontal. Dette peker pilen til høyre. Klone denne formen og bruk Edit> Transform> Roter 90 grader med klokken for å lage den nedadgående pekingsformen.
Plasser hver av disse figurene i midten av deres respektive retningsside. Tillat 15px-margin, slik at knappene kan overlappe tilstøtende bilder og redusere opaciteten til 12%.
For å la brukeren få vite hvor de er i porteføljen som helhet, vil vi abstrahere rutenettdesignet og bruke linjer med forskjellig høyde til å representere kolonner av bilder og en indikator for å etablere den nåværende visningsposisjonen.
Opprett en ny gruppe kalt 'Orientering' og plasser denne gruppen over 'Vignette'-gruppen.
Ved hjelp av blyantverktøyet, velg Square børste sett fra flytmenyen. Deretter tegner du en linje med fargen #FFFFFF og en tykkelse på 5px slik at den stemmer overens med den langt venstre grenseveiledningen og 60px høy.
Klon dette laget og plasser denne 2px til høyre. Gjenta dette for opptil 12 linjer.
Still opaciteten for alle lagene til 12%. Og enkel måte å gjøre dette på er å sette opasiteten til det første laget, deretter høyreklikk på laget og velg Kopier lagsstil. Velg deretter alle resterende lag og velg Lim inn lagstil.
Stagger disse lagene ved å bruke kommandoen Rediger> Gratis omforming for å forkorte / øke hver linje.
Endelig lager et nytt lag og bruk blyanten igjen for å tegne en markør på første linjen. Dette er vår posisjon indikator.
Ofte vil tastaturkontroll tilby en intuitiv navigasjonsopplevelse. Vi må imidlertid tillate brukeren å vite at tastaturet kan styre navigasjonen. For å oppnå dette vil vi opprette tastaturpileikonene.
Opprett en ny gruppe kalt 'Tastatur' og plasser dette over 'Vignette'-gruppen.
Bruk Rectangle Shape-verktøyet til å tegne et firkant (hold Shift) 20x20px med en farge # 262a34. Høyreklikk på laget i paletten Lag og velg Blandingsalternativer. Kontroller Stroke og legg en 1px slag på utsiden med fargen # 32343f.
Deretter bruker du pennverktøyet (sørg for at stilen er satt til Standard i alternativlinjen) og med farge #fff tegne en pil med et litt kvadratisk punkt. Juster om nødvendig med Direct Selection-verktøyet. Sett opacitet til 20%
I lagpaletten velger skift de to lagene som nettopp er opprettet. Høyreklikk og velg Kopier lag. Deretter roterer du dupliserte lagene til riktig orientering ved hjelp av menyen Rediger> Transform. Gjenta dette trinnet for å lage alle fire ikonene.
Ok! Nå er vi ferdige med designdelen av prosjektet? som betyr at alt vi trenger å gjøre er å kode det ved å bruke noen grunnleggende HTML / CSS, jQuery-hurtigtaster, og noen få ekstra jQuery-triks. Hvis noen ønsker å se hvordan Paul kodet dette designet, gi oss beskjed i kommentarene slik at vi kan ordne det!
Accentsconagua