Opprett et nytt dokument i Photoshop som ’! s 1 400 x 900. Den endelige, HTML gjengis nettstedet vil inneholde " væske ’ (dvs. skalerbar) elementer slik at vi ’. ll trenger å huske på at den endelige utformingen vil ikke være en fast størrelse

Opprette en solid bakgrunn er en enkel måte å få ting i gang. For denne utformingen vi ’ re kommer til å bruke en base farge som ’ s mørkt nok til å fremheve forgrunnen bilder mens også å utligne helt svart som kan vises i Folio bildene. Vi ’ ll også bruke inkludere noen blå å skape en " kult ’ mørk farge som vil integreres med grensesnittet elementer.

Velg Layer> New Fill Layer> Solid Color og tildele farge # 252a3b.

Som vi ’ re ved hjelp av en skalerbar layout, må vi definere minimums horisontal bredde. For de fleste kommersielle nettsteder dette er rundt 1000 piksler for å imøtekomme brukere med 1024x768 oppløsning skjermer. Men for dette området vi ’. Ll satse på 1100 piksler som en minimumsbredde

Først, sørg for at styreenhetene er satt til piksler. Denne kan settes ved å gå til Innstillinger> Enheter og hjelpelinjer.

Deretter går du til Vis> New Guide. Som vi ’ re kommer til å sette innholdet vårt i sentrum, og vi ’. Re sikte på en total minimum bredde på 1100 piksler, bør vi plassere vertikale føringer på 150px og 1250px

Subtle diagonal striping vil bidra til å løfte design ved å skape et skille mellom forgrunn porteføljeposter og teksturert bakgrunn.

For å oppnå dette vil vi bruke et mønster fill lag. Men først må vi lage mønsteret.

Opprett et nytt dokument 12x12 piksler med en gjennomsiktig bakgrunn og legge til en ny fylleslag med en svart fill (# 000000).

Nå legger en nytt lag (Layer> New> Layer). Bruke blyant verktøyet med en pensel størrelse på 1px, tegne tre linjer nøyaktig slik de vises i bildet nedenfor.

Slå av fylleslag og sette linjene lag opacity til 6%. For å lagre dette som vårt mønster velg Rediger> Define Pattern.

Gå tilbake til vår opprinnelige lerret, opprette et nytt lag med teksturen ved å velge Layer> New Fill Layer> Mønster og velg den tidligere definerte mønsteret. Anmeldelser

Nå som vi ’ ve opprettet vår base kan vi slippe noen flate lag som utgjør de viktigste elementene av nettstedet

Først vår navigasjon. Ettersom dette området vil være designet for å ikke ha noen vertikal rulling kan vi plassere navigasjons å justere til bunnen av skjermen.

Opprett en ny gruppe i lagpaletten og merke denne gruppen " Navigation ’.

Deretter oppretter et nytt lag med rektangelverktøyet (U). Med Info-vinduet åpent, tegne denne formen så det ’ s 1400x61 (den fulle bredden i dokumentvinduet og 61 piksler høy). Justere dette laget nederst i dokumentvinduet.

Nå gjelder en gradient til laget ved å høyreklikke på formlag i lagpaletten og velge Blending Options deretter sjekke Gradient Overlay (alternativt velge Layer> Lagstil> Gradient Overlay).

I graident Editor, klikker du på bunnen fargevelger for å åpne fargevelgeren. For venstre farge (bunnen av formen) bruke # 2f313a. For riktig farge (toppen av form) bruke # 3c3f49

Deretter oppretter du en ny layer og lable dette ". Høydepunkt ’. Bruke blyantverktøyet med en 1px pensel og farge #ffffff, tegne en linje mens du holder shift over toppen av rektangelet formen laget tidligere. Deretter sette dette laget ’ s. Opacity til 6%

Opprett et nytt tekstlag 20 piksler fra venstre side av dokumentet og justere teksten til være vertikalt sentrert på navigasjons rektangel laget.

I dette eksemplet fonten DIN Lys har blitt brukt på 14px med en løs sporing av 200. Å opprette et skifte mellom to deler av logoen type to farger er brukt. For den første delen #dddddd og andre, mørkere del # 737375.

Deretter legger en subtil skygge for å skape inntrykk av teksten blir innsatt til bakgrunnen. Velg Layer> Layer Stil> Drop Shadow

Opphev ".. Bruk globalt Light ’, endre retningen til -45 grader, satt størrelse til 0px, avstand 1px og opacity 30%

For de viktigste navigeringsknappene vi vil bruke en avrundet rektangel form.

Opprett en ny gruppe kalt " knapper ’.

Opprett en ny Avrundet rektangel Shape som ’ s 279x31 og utlignet 20 px fra høyre side av dokumentvinduet og vertikalt sentrert i navigasjon rektangel.

Høyreklikk på laget i lagpaletten til og velg Blending Options. Sjekk Gradient Overlay og bruke verdiene # 292c33 til # 43464f. Klikk på OK og deretter sjekke Bevel &Relieff.

For Bevel &Relieff angi størrelsen til 0px med retning 122 grader. Deretter setter høylys og skygge opacity til 10% for å skape en konsistent, subtil belysning effekt.

Legg til tekstetiketter ved hjelp av de samme innstillingene skrift som ble søkt om logoen type. Som knappeetikettene finnes i en mindre vertikal plass vi bør redusere størrelsen til 12 px og stram sporing til 100. Bruk de samme fargene som logo typen gjelder likevel lysere farge for den aktive siden etiketten.

For å skille knappene samtidig opprettholde den sakte opplyst utseendet på navigasjons vi bør trekke to linjer, hver 1px bredde. Den første skal være svart (# 000000) og den andre hvit (#FFFFFF). Still opasitet for det hvite lag til 6%, og det sorte lag til 12%. Kopiere disse lagene ved Shift-klikke hver, og deretter høyreklikke på valg. Plasser dupliserte lag med jevn avstand inne i navigasjon.

Disse knappene har en annen funksjon fra resten av nav så vi ’ ll bruke en stil som antyder dette. La ’ s innfelt disse knappene for å utfylle hovednavigasjon.

For det første, opprette en ny gruppe kalt " sosial ’ og hekker denne gruppen i " navigasjon ’ ordnede gruppen.

Nå bruker Avrundet rektangel verktøyet med en radius på fire px og holde shift-tasten, skape en firkantet aspekt form av 25x25 px. Vertikalt sentrere dette i navigasjon og plasser formen 22 px til venstre for hovednavigasjonsknappene.

Høyreklikk formen nettopp opprettet, og velg Blending Options.

Legg til en skygge. For denne skygge vi ’ ll bruke hvit (#FFFFFF) og sett Blend Mode til lysere. Set avstand til 1px, spre seg til 0% og størrelse til 0px. Dette vil skape en effekt av den nederste kant blir tent og dermed knappen er innsatt.

Neste, mens de fortsatt i Lagstil vinduet, sjekk indre skygge. Bruk svart (# 000000) med opacity på 39%, avstand 1px og størrelse 4px.

Til slutt velger du Color Overlay og bruke # 353741. Dette vil flate utseendet av formen og tilsett kontrast med bakgrunnen.

For de sosiale medier ikoner vi ’ ll ta et eksisterende bilde og spore kantene bruke pennen til å lage en sti (sørg Paths er å velge i verktøyalternativmenyen).

Etter at du ’ ve opprettet en bane av ikonet, bruker Sti Selection Tool og høyreklikk banen du nettopp opprettet (sørg for at banen er valgt i banepaletten). Velg Definer Custom Shape ... Redd Shape.

Vi kan nå bruke ikonet som en skalerbar vektorobjekt. Bruke pennverktøyet, endre alternativer for å formlag (øverst til venstre element på alternativlinjen) og velge Custom Shape Tool, og velg deretter ikonet nettopp opprettet. Holde nede Shift-tasten, flytt objektet slik at det passer inn i ikonet flis.

Sett ikonet opacity til 20%.

Gjenta disse trinnene for eventuelle gjenværende sosiale medier ikoner

I dette eksempelet vi ’. re kommer til å være vise folio bilder som er 640x480 px

Som vi ’. d liker å vertikalt sentrere utvalgt bilde i rommet over navigasjon, må vi legge noen flere guider. Velg Vis> Guide Ny og Legg horisontale guider på 180px og 660px. Dette vil posisjonere vår på bildet i midten av vertikal plass over navigasjons

’. Re også kommer til å trenge litt tekst til venstre for utvalgt bilde så vi ’ ll legge vertikale føringer på 400px og 350 piksler å gi margin for teksten og gi plass for navigasjon ved siden av bildet. Til slutt legger vertikale føringer på 1040px og 1070px å definere kanten av bildet som vises, og marginen mellom tilstøtende bildet.

Opprett en ny gruppe kalt " Projects ’. Deretter bruker rektangelverktøyet, tegne et rektangel 640x480px som justerer til øverst til venstre på den vertikale guide på 400px og toppen til horisontal guide på 180px. Dette vil tjene som plassholder for våre hovedbildet.

Høyreklikk laget nettopp opprettet, og velg Rastrer Layer.

Nå holder Alt-tasten, klikk og dra laget for å lage et duplikat. Flytt dette laget til høyre for lag med 30px margin å justere med guide på 1070px og bruker samme baseline.

Lag to flere duplikater og justere disse til bunnen av hver med 30px margin mellom hver.

Deretter bruker Paint Bucket verktøyet, fyll hver av disse figurer med farge # 252a3a.

Opprett en ny gruppe kalt ‘ Vignette ’ under " Navigation ’ gruppe og over " Projects ’ gruppe.

Lag et nytt lag og bruke Paint Bucket verktøy for å fylle laget med forgrunnsfargen # 0f1219.

Bruke Ellipse verktøy, tegne en skisse som skjærer i hjørnene av hovedbildet guider

Nå, for å lage en vignett effekt, vi ’. ll trenger å kutte ut denne delen mens uttoning kanten av kuttet. For å oppnå dette har vi ’ ll bruke Select> Modify> Feather. Fjær utvalget ved 60px og deretter kutte utvelgerlaget (Ctrl-x /Kommando-x)

Som vi ’. SkaI å være et utstillingsvindu arbeidet vi ’ ll trenger å plassere noen skjermbilder på plassholdere. Gå tilbake " Projects ’ gruppe og lime inn en screenshot mens hovedplassholder er valgt. Dette vil sette laget over plassholderen. Deretter høyreklikker du på layer og velg Create Clipping Mask.

Lim tre skjermbilder på de andre plassene.

Reduser opacity for alle skjermbilder bortsett sentrert skjermbilde til 20%.

For å kommentere hvert prosjekt vi ’ ll bruke tre tekstlag. Opprett en ny gruppe over " vignette ’ gruppe for å huse disse lagene.

For første, overskriften, vi ’ ll bruke en lys skrift. I dette eksempelet I ’ ve brukes DIN Lys imidlertid en annen lignende skriftsnitt kan også fungere fint. Bruke tekstverktøyet tegne en tekstboks innenfor føringene til venstre for hovedbildet og 40px under toppen guide. Sett farge til #FFFFFF, sporing til -25 for en strammere bokstavavstand og bruke skriftstørrelse 28px.

’ ll også legge til en linje for prosjektet kategori og dato. Angi størrelsen til 14px, sporing til 100, kraft caps og bruke fargen # 338966 til aksent denne linjen

Så, for brødteksten, vi ’. Ll bruke et system font som Lucida Grande eller Lucida Sans Unicode på 12px med en farge av # 8C8F95 og linjehøyde 18px

Hvis du vil navigere vår folio stedet vi ’. mus eller tastatur kontroll vil tillate. En intuitiv plassering for navigasjon retningsknappene er i henhold til deres funksjon. For eksempel vil høyre piltast går du til høyre i hovedbildet.

For de knappene vi ’ ll bruke gjennomskinnelige former som kan skifte opacity på hover eller klikk hendelser. Opprett en ny gruppe kalt " Knapper og rsquo; som ’ s over " Vignette ’ gruppe.

Deretter oppretter et nytt dokument med dimensjoner 37x37px. Ved hjelp av pennen, tegne en chevron form som under. Gjenta prosessen i trinn 8, bruker Sti Selection Tool, høyreklikk formen og velge Define Custom Shape. Lagre formen.

Gå tilbake til vår viktigste lerret, bruker Custom Shape verktøyet for å sette inn den tidligere opprettede form.

Deretter velger du Rediger> Transformer> Vend horisontalt. Dette vil peke på pilen til høyre. Klone denne formen og bruke Edit> Transform> Roter 90 grader med klokken for å skape den peker nedover form.

Posisjons hver av disse figurene i sentrum av deres respektive retnings side. Tillat 15px margin så knappene kan overlappe de tilstøtende bilder og redusere opacity til 12%.

For å la brukeren vet hvor de er i porteføljen som helhet vi ’ ll abstrakt rutenettet design og bruke linjer av ulik høyde for å representere kolonner av bilder og en indikator for å etablere den nåværende visningsstilling.

Opprett en ny gruppe kalt " Orientering ’ og plassere denne gruppen over " Vignette ’ gruppe.

Ved hjelp av blyantverktøyet, velger Square børste sett fra fly-out menyen. Så, med fargen #FFFFFF og en tykkelse på 5px, tegne en linje for å justere med helt til venstre grensen guide og 60px høy.

Clone dette laget og posisjon denne 2px til høyre. Gjenta dette for opp til 12 linjer.

Sett opacity for alle lag til 12%. Og enkel måte å gjøre dette på er å sette opacity for det første laget, så høyreklikk på laget og velg Copy Layer stil. Velg deretter alle gjenværende lag og velg Paste Layer stil.

Vakler disse lagene ved hjelp av Rediger> Free Transform kommandoen for å forkorte /høyne hver linje.

Til slutt, opprette et nytt lag og bruke blyant på nytt for å tegne en markør på den første linjen. Dette er vår posisjon indikator.

Ofte tastaturkontroll vil tilby en intuitiv navigasjonsopplevelse. Men vi må tillate brukeren å vite at tastaturet kan kontrollere navigering. For å oppnå dette har vi ’ ll opprette tastatur pilikoner.

Opprett en ny gruppe kalt " Keyboard ’ og plassere denne over " Vignette ’ gruppe.

Bruke rektangel Shape verktøyet, tegne en firkant (hold Shift) 20x20px med farge # 262a34. Høyreklikk på laget i lagpaletten og velg Blending Options. Sjekk Stroke og bruke en 1px slag på utsiden med fargen # 32343f.

Deretter bruker pennen (sikre stilen er satt som standard i Option bar) og med farge #fff tegne en pil med en litt firkantet punkt. Juster om nødvendig med segmentmarkøren. Sette opacity til 20%

I lagpaletten, skift velge de to lagene nettopp opprettet. Høyreklikk og velg Duplicate lag. Deretter bruker Edit> Transform menyvalget rotere dupliserte lagene til riktig retning. Gjenta dette trinnet for å lage alle fire ikoner.

Alright! Nå er vi ferdig med utformingen del av prosjektet ... noe som betyr at alt vi trenger å gjøre er å kode det ved hjelp av noen grunnleggende HTML /CSS, jQuery Hurtigtaster, og et par ekstra jQuery triks. Hvis noen ønsker å se hvordan Paul kodet dette design, gi oss beskjed i kommentarfeltet, slik at vi kan ordne det! Anmeldelser