Create en ensides Retro Web Design Layout i Photoshop

I denne opplæringen vil vi forklare hvordan du oppretter en en-side retro web design ved hjelp av Adobe Photoshop. Mens det meste av design er laget i Photoshop, vil vi også bruke Illustrator til å lage ulike former og elementer. La oss komme i gang!

Denne opplæringen var et samarbeid med Ciursa Ionut.

Instruksjons Eiendeler

Følgende eiendeler ble brukt under produksjonen av denne opplæringen.

Retro Ikoner

Tileables Shapes Pack
< li> Tileables Lines Pack

Muncie font

Oswald font

Åpne Sans font

LeckerliOne font

960 Grid System

I denne opplæringen vil vi bruke 960 Grid System. Last den ned og pakk ut arkivet. Deretter går du til " Photoshop " mappe (inne " maler "). Der vil du finne alle PSD-filer. For denne web design vil vi bruke 12 kolonner nettet.

Når du har åpnet .psd fil i Photoshop, vil du se 12 røde søyler. Det er nettet som vi skal bruke. Du kan skjule røde streker ved å klikke på øyet ikonet for “ 12 Col Grid ” lag.

I denne opplæringen vil jeg be deg om å lage figurer med visse dimensjoner. Åpne infopanelet (Vindu > Info) og når du oppretter en form, vil du se den nøyaktige bredde og høyde i dette panelet.

PSD filen inneholder noen guider samt som vil være svært nyttig. For å aktivere dem gå til Vis > Show > Guider, eller bruke hurtigtasten Ctrl /Cmd +;. Jeg pleier å skjule røde streker og aktivere guider når jeg trenger dem.

Rutenettet vil hjelpe oss gjelder justeringen design prinsipp, som sier at hvert element i design skal være visuelt forbundet med en annen, og ingenting bør plasseres tilfeldig.

Nå som vi dekket grunnleggende om å bruke 960 Grid System, kan vi gå videre til å lage selve web layout. Hvis du ønsker å finne ut mer om den 960 Grid System kan du lese en mer omfattende guide.

Trinn 1 - Sette opp dokumentet og skape bakgrunnen

Åpne " 960_grid_12_col .psd " fil i Photoshop. Vi trenger mer plass til å jobbe med, så vi er nødt til å øke lerretet størrelse. Gå til Image > Canvas Size (Ctrl /Cmd + Alt /Tilvalg + C). Sett bredden til 1200px og høyden til 1700px. Klikk deretter på øvre middelankerpunkt. Det er det punkt av bildet, vil ekspandere fra.

Nå vil vi skape et mønster som kommer til å bli brukt på nettstedet bakgrunnen. Opprett et nytt dokument (Ctrl /Cmd + N) med dimensjonene 1px av 3px. Deretter oppretter du en ny layer (Ctrl /Cmd + Shift + N).

Zoom inn og bruke Rectangular Marquee Tool (M) for å lage en 1px ved 1px utvalg på toppen av dokumentet. Fyll dette valget med svart bruker Paint Bucket Tool (M).

Hit Ctrl /Cmd + D for å fjerne markeringen. Hide " Bakgrunn " lag og gå til Edit > Definer Mønster. Nå kan du lukke dette dokumentet

Gå tilbake til webdesign dokument og skjule ". 12 Col Grid " lag, men alltid holde den på toppen av Lag-panelet. . På denne måten kan du aktivere den og se om elementene i webdesign er justert til rutenettet

Gå til Layer > New Fill Layer > Solid Color og sette farge til # f2f1ed. Navn dette laget " Hoved bakgrunn ". Vi vil bruke et støyfilter til dette laget, men vi ønsker ikke å rastrere den. I stedet vil vi bruke en smart objekt, så vi kan redigere filtrene senere hvis nødvendig. Det er alltid en god praksis å fungere som ikke-destruktive som mulig og holde alt redigerbar

Høyreklikk på ". Hoved bakgrunn " lag og velg Konverter til smart objekt. Deretter går du til Filter > Noise > Legg Støy og bruke innstillingene fra bildet under. Dobbeltklikk på dette laget å åpne Lagstil vinduet og bruke det mønsteret du opprettet. Dette vil gi oss en subtil papp tekstur som vi vil bruke gjennom hele design on
Trinn 2 - Opprette header bakgrunn

Opprett en ny gruppe. (Lag > New > Group) og name it " Header ". Lag en annen gruppe inni den og gi den navnet " Header bg ".

Velg rektangel Tool (U) og lage et rektangel med dimensjonene 1200px 150 piksler og fargen # e9e5db. Navn dette laget " header bg " . og plassere den på toppen av dokumentet

Høyreklikk på " header bg " lag og velg Konverter til smart objekt. Gå til Filter > Noise > Legg Støy og bruke innstillingene fra bildet under.

Opprett en ny vertikal linje mønster akkurat som du laget den forrige. For dette mønsteret satt dokumentstørrelsen til 3px av 1px. Når du har lagret mønsteret (Edit > Define Pattern), gå tilbake til din web design dokument, dobbeltklikker du på " header bg " lag for å åpne Lagstil vinduet og bruke det mønsteret du opprettet.

Det er ikke mye kontrast mellom header bakgrunn og hoved bakgrunnen, så vi vil legge noen separatorer og graderinger å definere hver del bedre .

Velg Line Tool (U) og sette Vekt til 1px. Hold nede Skift-tasten og lage en horisontal linje nederst på overskriften din med fargen # bcb9b1. Navn dette laget " 1px linje ".

Duplicate dette laget (Ctrl /Cmd + J), velg Move Tool (V) og traff pil ned på tastaturet for å flytte dette laget 1px ned. Endre fargen på den nye linjen til # f8f7f5.

Bruk Rectangular Marquee Tool (M) for å opprette et utvalg på bunnen av header din (1). Så gå til Layer > New Fill Layer > Gradient og bruke innstillingene fra følgende bilde (2). Navn dette laget " bunnen gradient " og sette Blend Mode til Soft Light 20%.

Dupliser gradient lag og flytte den nye på toppen av spissen. Navn dette laget " topp gradient ". Klikk på miniatyrbildet for å redigere gradient og huke av Reverse alternativet. Dette vil gi oss en topp-til-bunn gradient.

Nå vil vi legge til et nytt mønster under overskriften. Bruk rektangel Tool (U) for å lage en 160px høyt rektangel under header (1). Navn dette laget " mønster " og sette Fill til 0%.

Dobbeltklikk på dette laget å åpne Lagstil vinduet og bruke et mønster Overlay effekt (2). Mønsteret som jeg brukte er fra Tileables Lines Pack.

I øyeblikket er dette laget har en skarp nedre kant. Vi ønsker at kanten til å være mer myk, så vil vi bruke en maske. Gå til Layer > Lagmaske > Reveal All. Deretter velger du Gradient Tool (G) med en svart-to-transparent gradient. Hold nede Skift-tasten og dra en vertikal gradient i bunnen av dette laget for å maskere ut den nederste kanten (3).

Vi vil skape et mer gradient under overskriften. Bruk Rectangular Marquee Tool (M) for å opprette et utvalg som du ser på bildet nedenfor (1). Gå til Layer > New Fill Layer > Gradient og bruke innstillingene fra følgende bilde (2)

Navn dette laget ". Innhold toppen gradient " og sette Blend Mode til Soft Light 50% (3)

Trinn 3 - Lage logoen

For logoen vi kommer til å bruke to fonter:. Muncie og Damion. Velg Type Tool (T) og skriv inn navnet på nettstedet ditt ved hjelp av skrift Muncie med fargen # 847e70 og størrelsen 80px. Legg en skygge til dette laget ved hjelp av innstillingene fra bildet nedenfor (1). Dette vil skape en subtil høydepunkt i teksten og at det ser skarpere.

Bruk linje Tool (U) med forgrunnsfargen # 837d6f å lage to linjer på toppen av tekstlaget og to andre på bunn. Nevne disse lagene " 1px linje " (2). Ta en titt på følgende bilde for referanse

Velg alle 4 linjer lag og kopiere dem ved å dra dem over ". Opprett nytt lag " knappen fra bunnen av Lag-panelet. Endre fargen på nye linjer til hvit og satt sin opacity til 50%. Bruk Move Tool (V) for å flytte disse linjene 1px under mørkere (3).

Gruppe alle linje lag sammen (velg dem og trykke Ctrl /Cmd + G). Navn gruppen " linjer ".

Bruk Type Tool (T) for å skrive ordet " Retro " i midten av bunnlinjer. Bruke skriften Damion med størrelsen 21px og farge # 847e70. Påfør en skygge til dette laget ved hjelp av innstillingene fra bildet under.

Nå vil vi legge til Envato logo i midten av de to øverste linjene. Først, last ned " Powered By Envato API " .psd Fil og åpne det i Photoshop. Dobbeltklikk på miniatyrbildet av " Vector smart objekt " og filen vil bli åpnet i Adobe Illustrator.

Velg blad objekt og endre graderingsfarger til # 847d6f og # 5b574f. Bruk Direct Selection Tool (A) for å velge blad og kopier den (Ctrl /Cmd + C). Gå tilbake til Photoshop og lim den inn (Ctrl /Cmd + V) som smart objekt.

Gå til Rediger > Free Transform (Ctrl /Cmd + T), holder du nede Skift-tasten og skalere dette laget ned. Navn dette laget " Envato logo " og flytte den i midten av de to øverste linjene. Kopier Drop Shadow lagstilen fra " Retro " tekstlag og lim den inn på denne ene

Vi ønsker å skjule linjene under den Envato logo og ". Retro " tekstlag. Vi kan gjøre dette ved hjelp av en maske. Klikk på " linjer " gruppe for å gjøre det aktivt. Bruk Rectangular Marquee Tool (M) for å opprette to valg, som du ser i bildet under (merk: Hold nede Shift-tasten når du har opprettet det første valget, slik at du kan legge til den andre).

Gå til Layer > Lagmaske > Skjule Utvalg. Nå linjene under den Envato logo og teksten lag bør være skjult

Trinn 4:. Opprette navigasjonsfeltet bånd

Navigeringslinjen for denne web design kommer til å bli et bånd som vi vil skape ved å bruke former, smarte objekter, støyfiltre og lagstiler. Først oppretter en ny gruppe og gi den navnet " Navigation ". Deretter oppretter du en annen gruppe inne den første, og den navnet " bånd ".

Bruk rektangel Tool (U) for å lage et rektangel med dimensjonene 610px ved 44px og fargen # d8cfba. Navn dette laget " rektangel ", høyreklikk på den og velg Konverter til smart objekt. Påfør deretter en Noise filter (Filter > Noise > Legg til støy) ved hjelp av innstillingene fra bildet under.

Dobbeltklikk på dette laget å åpne Lagstil vinduet og bruke innstillingene fra bildet under. Mønsteret som jeg brukte er fra Tileables Shapes Pack. Strek farge som jeg brukte er # b1aa99.

Bruk Pen Tool (P) for å lage figuren fra enden av båndet. Ta en titt på følgende bilde for referanse (1).

Navn dette laget " venstre ende " og flytte den under " rektangel " lag. Oppveie denne formen 10px ned fra rektangel øverste kanten og 10px til høyre fra rektangelet er venstre kant (2).

Høyreklikk på dette laget og velg Konverter til smart objekt. Påfør et støyfilter med innstillingene fra bildet under. Dobbeltklikk på dette laget å åpne Lagstil vinduet og bruke innstillingene fra følgende bilde (3). Strek farge som jeg brukte er # 9d9684

Dupliser ". Venstre ende " lag (Ctrl /Cmd + J) og gå til Rediger > Transform > Vend vannrett. Navngi det nye laget " riktig ende " og flytte den til høyre side av rektangelet. Deretter stiller Indre skygge vinkel på dette laget til 180 grader.

Bruk Pen Tool (P) med forgrunnsfargen # 6c6554 å lage en trekant som forbinder rektangel med endelsen form av båndet (1) . På bildet under jeg laget denne trekanten rødt for å gjøre den mer synlig.

Navn dette laget " venstre trekant ", høyreklikk på den og velg Konverter til smart objekt. Påfør deretter en støyfilter med innstillingene fra bildet nedenfor (2)

Duplicate dette laget (Ctrl /Cmd + J) og gå til Rediger >.; Transform > Vend vannrett. Navngi det nye laget " rettvinklet trekant " og flytte den til høyre side av båndet.

Nå vil vi legge til noen skygger og høylys til båndet. Bruk Rectangular Marquee Tool (M) for å opprette et utvalg med dimensjonene 10px av 44px over venstre side av rektangelet (1).

Gå til Layer > New Fill Layer > Gradient og bruke innstillingene fra bildet under. Navn dette laget " venstre høydepunkt " og sette Blend Mode til Soft Light 70% (2).

Opprett et nytt utvalg med dimensjonene 5PX av 44px (3). Gå til Layer > New Fill Layer > Gradient og bruke en # b5ae9d-til-transparente gradient (4). Navn dette laget " venstre skygge ".

Duplicate disse to lagene og flytte dem til høyre side av rektangelet. Deretter endrer gradient vinkel på disse to lagene til 180 grader (5).

Nå vil vi lage en sydd bånd effekt ved hjelp av stiplede linjer. Først må vi lage et nytt mønster. Opprett et nytt dokument (Ctrl /Cmd + N) med dimensjonene 10px av 1px.

Zoom inn og bruke Rectangular Marquee Tool (M) for å opprette et utvalg med dimensjonene 6PX av 1px, som du ser i bildet nedenfor. Lag et nytt lag og fylle markeringen med svart.

Hit Ctrl /Cmd + D for å fjerne markeringen. Hide " Bakgrunn " lag og gå til Edit > Definer Mønster. . Lagre mønster og deretter lukke dette dokumentet

Gå tilbake til webdesign dokumentet og opprette en ny gruppe inne i " bånd " gruppe. Nevne dette en " stiplede linjer ".

Bruk linje Tool (U) for å lage en 1px horisontal linje på toppen av båndet er rektangel (1). Sett Fill av dette laget til 0%. Da gjelder den stiplede linjen mønster som du opprettet tidligere (2)

Navn dette laget ". 1px stiplet linje ", høyreklikk på den og velg Konverter til smart objekt. Dobbeltklikk på dette laget å åpne Lagstil vinduet og bruke en Color Overlay effekt ved bruk av farge # b1aa99 (3).

Nå vil vi legge til en lysere stiplet linje for å gjøre Stitched effekten ser mer skarp. Kopiere denne layer (Ctrl /Cmd + J) og endre farge til # e4ddcd. Bruk Move Tool (V) for å flytte denne stiplede linjen 1px under den første (4).

Velg de to stiplede linjer lag og kopiere dem. Deretter flytter de nye linjene i bunnen av rektangelet (5)

Trinn 5 -. Opprette båndet bakgrunnen

Nå har vi tenkt å lage en bakgrunn for båndet slik at den ser ut som det er pakket rundt en vegg

Opprett en ny gruppe, navn det ". bånd bg " og legg den under " bånd " gruppe. Bruk rektangel Tool (U) for å lage en svart firkant under båndet. Sørg for at dette rektangelet er plassert i de to bånd trekanter. Navn dette laget " bånd bg " og sette Blend Mode til Soft Light 20%.

Bruk Rectangular Marquee Tool (M) for å opprette et utvalg over venstre side av båndet bakgrunnen (1).

Gå til Layer > New Fill Layer > Gradient og bruke innstillingene fra bildet nedenfor (2). Sett blandingen modus for dette laget til Soft Light 40% (3).

Bruk linje Tool (U) med fargen # b0a793 å skape en 1px vertikal linje over den venstre kanten av båndet bakgrunnen. Kopiere denne linjen lag (Ctrl /Cmd + J), flytt den nye 1px til høyre og endre farge til # dbd5c6 (4).

Legg samme gradient og linjer til høyre side av båndet bakgrunn også. Husk at du må sette graderingen vinkelen til 180 grader og snu de to linje lag horisontalt (5)

Legg til en maske i ". Bånd bg " gruppe (Layer > lagmaske > Reveal All). Deretter velger en lineær svart-til-transparente gradient (G), og maskere ut de øvre og de nedre områder av denne gruppen. På bildet under kan du se hvordan min maske ser ut (hvis du holder nede Alt /Tilvalg og klikk på miniatyrbildet av masken, vil du være i stand til å se den over hele bildet).

Trinn 6 - Legge navigasjons elementer

Nå vil vi legge til elementer navigasjonsmenyen og noen retro ikoner ved siden av hver enkelt. Velg Type Tool (T) og skriv navnet for navigering elementer ved hjelp av skrift Oswald med størrelsen 16px og farge # 7f7866. For å indikere den aktive siden, endre fargen på det første elementet i en mørkere brun (# 615c4f).

Last ned dette settet med retro ikoner og åpne AI-filen i Adobe Illustrator. Velg hvert ikon du vil bruke og kopiere den (Ctrl /Cmd + C). Så gå til Photoshop og lim hvert ikon (Ctrl /Cmd + V) som et smart objekt. Bruk Free Transform (Ctrl /Cmd + T) for å endre størrelsen på disse lagene.

Bruk en Color Overlay effekt til hvert ikon med samme farge som du brukte for tekstlag. Påfør deretter en Drop Shadow effekt på alle tekst- og ikon lag ved hjelp av innstillingene fra bildet nedenfor

Trinn 7 - Lage en ". Kontakt oss " signere

I stedet for å legge til koblingen kontakt i navigasjonsfeltet, vil vi lage en retro tegn for det. Vi kommer til å bryte nærhet design prinsipp, som sier at relaterte elementer bør grupperes tett sammen og har lignende visuelle kjennetegn. Kontakten koblingen er en del av navigasjon, men det vil ha en annen stil enn de andre navigasjons elementer for å gjøre det skiller seg ut. Husk at når du ønsker å bryte en designprinsipp må du: a) kjenner prinsippet og b) har en grunn til å bryte det

Opprett en ny gruppe og gi den navnet " Kontakt ".. Velg Avrundet rektangel Tool (U), sett Radius å 4px og skape et avrundet rektangel med dimensjonene 130px ved 180px og fargen # c7c1b3.

Navn dette laget " border ", høyreklikk på den og velg Konverter til smart objekt. Påfør et støyfilter bruke innstillingene fra bildet under. Dobbeltklikk på dette laget å åpne Lagstil vinduet og bruke innstillingene fra følgende bilde. For Strek effekten jeg brukt fargen # a9a396. Mønsteret som jeg brukte er fra Tileables Lines Pack.

Velg Avrundet rektangel Tool (U), sett Radius å 2PX og skape et avrundet rektangel med dimensjonene 122px ved 72px og fargen # f3f0e8. Flytt denne rektangel i midten av det forrige

Navn dette laget ". Kontakt bg ", høyreklikk på den og velg Konverter til smart objekt. Påfør et støyfilter bruke innstillingene fra bildet under. Dobbeltklikk på dette laget å åpne Lagstil vinduet og bruke innstillingene fra følgende bilde. For Indre skygge effekt jeg brukte farge # a9a396 og for den indre glød effekt Jeg brukte farge # f5f2e9.

Nå vil vi dele skiltet i to deler, en for hver tekstlag vi vil legge til senere. Velg rektangelverktøyet (U) og lage et rektangel med dimensjonene 120px ved 32px og fargen # eae5d9. Navn dette laget " topp bg ", høyreklikk på den og velg Konverter til smart objekt. Flytt denne rektangel på toppen av de mindre avrundet rektangel. Deretter høyreklikker du på dette laget, og velg Create Clipping Mask.

Legg til et støyfilter til dette laget ved hjelp av innstillingene fra bildet under. Deretter legger en skygge effekt ved bruk av farge # c3beb1 og innstillingene fra følgende bilde.

Nå vil vi skape et avrundet rektangel med en stiplet strek. Siden Photoshop ikke tilbyr funksjonalitet for å lage stiplede linjen ennå, vi kommer til å bruke Illustrator.

Åpne et nytt dokument i Illustrator. Velg Avrundet rektangel Tool og klikk på dokumentet for å få opp Avrundet rektangel vinduet.

Sett bredden til 171px, til høyden til 71px og Radius 2PX. Fjern påfyllings av denne formen og legg en 1pt svart strek. Åpne Strek-panelet (Vindu > Stroke). Og bruke innstillingene fra følgende bilde for å skape en stiplet strek

Velg avrundet rektangel og kopier den (Ctrl /Cmd + C). Gå tilbake til Photoshop-dokument og lime det som et smart objekt (Ctrl /Cmd + V). Navn dette laget " stiplet linje " og flytte den i midten av " kontakt bg " lag. Legg en Color Overlay effekt på " stiplet linje " lag med fargen # 958f82

Velg Type Tool (T) og skrive ordene ". få et gratis tilbud " i den øvre delen av skiltet. Jeg brukte skriften LeckerliOne med størrelsen 14px og farge # 948f84. Jeg valgte denne fonten i stedet for Damion (som vi brukte i logoen) fordi det er mer leselig i denne størrelsen

Bruk tekstverktøyet (T) for å legge ordene ". Kontakt oss " i den nedre delen av skiltet. Jeg brukte skriften Oswald med størrelsen 19px og farge # 948f84.

Bruk en Drop Shadow effekt til disse to tekst lag ved hjelp av innstillingene fra bildet under.

Kopier en av hånden ikoner fra retro ikoner sette deg ned og lime den inn i Photoshop som et smart objekt. Navn dette laget " hånd ikonet " og flytte den i midten av de to delene av skiltet.

Dobbeltklikk på dette laget å åpne Lagstil vinduet og bruke innstillingene fra følgende bilde. For Color Overlay effekten jeg brukt fargen # 969183.

Nå må vi legge et tau å holde skiltet. Opprett en ny gruppe, name it " tau " og flytte den i bunnen av " Kontakt " gruppe. Deretter bruker Ellipse Tool (U) for å lage en spiker. Velg Line Tool (U), sett Vekt til 1px og opprette to skrå linjer, som du ser i bildet nedenfor. Bruk farge # 7f7866 for alle disse formene

Trinn 8 - Opprette ". Services " Området

For " tjenester " området vi vil trenge en sekskant form som vi vil bruke som bakgrunn for de tre innholds kolonner. Vi vil skape denne formen ved hjelp av Adobe Illustrator.

Åpne et nytt dokument i Illustrator og velg Polygon Tool. Klikk på bildet for å åpne Polygon vinduet, hvor vi kan sette egenskapene til formen. Sett Radius til 70px og sidene til 6. Klikk på OK for å lage figuren.

Sett Fyll fargen på polygon til # 8E8E8E. Deretter legger en 20px Stroke bruker samme farge. Åpne Strek-panelet (Vindu > Stroke) og sett Corner til Rund Delta. Deretter høyreklikker du på denne formen, gå til Transform > Roter, angi vinkel til 90 grader, og klikk OK.

Fra alternativ bildet ditt angi bredden av denne formen for 140px og høyden til 162px.

Bruk Selection Tool ( V) for å velge sekskantformen og kopier den (Ctrl /Cmd + C). Gå tilbake til Photoshop-dokument og lime det som et smart objekt (Ctrl /Cmd + V). Gå til Rediger > Free Transform (Ctrl /Cmd + T), holder du nede Skift-tasten og skalere dette laget opp til bredden er 300px, eller fire 960 grid kolonner (du kan se dimensjonene i form at trans i infopanelet).

Sett Fill av dette laget til 0%. Deretter dobbeltklikker du på den og bruke " Dot Grid 2 " mønster fra Tileables Shapes Pack. Navn dette laget " halvtonemønster ". Legg dette laget inne i en gruppe (Ctrl /Cmd + G) og gi den navnet " Web Design ". Deretter oppretter du en ny forelder gruppe og gi den navnet " tjenester ".

Høyreklikk på " halvtonemønster " lag og velg Konverter til smart objekt. Påfør deretter en Color Overlay effekt til dette laget med fargen # a7c5bd.

Kopier igjen sekskantformen fra Illustrator og lime den inn i Photoshop-dokumentet som et smart objekt. Gå til Rediger > Free Transform (Ctrl /Cmd + T) og sette den horisontale og vertikale skala til 175% fra valglinjen over ditt bilde (1)

Navn dette laget ". Border " og flytte den til midten av første sekskantformen. For å justere disse to lagene på riktig måte, må du sørge for at du har Smart Guides aktivert (View > Show > Smart Guides). Flytt dette laget i løpet av den første sekskant form og du vil se noen rosa linjer som viser hvordan de to lagene er justert.

Legg til en Color Overlay effekt på " border " lag med farge # a7c5bd (2).

Vi må bruke et støyfilter til dette laget. Imidlertid vil Color Overlay effekten gå over støyfilter. For å løse dette problemet vil vi trenger å konvertere dette laget til et smart objekt. Høyreklikk på " border " lag og velg Konverter til smart objekt. Deretter går du til Filter > Noise > Legg Støy og bruke innstillingene fra bildet under (3).

Dobbeltklikk på dette laget å åpne Lagstil vinduet og bruke innstillingene fra følgende bilde for Ytre glød. Fargen som jeg brukte er # 89b9ac (3).

Kopier seks forme en gang fra Illustrator og lime den inn i Photoshop som et smart objekt. Gå til Rediger > Free Transform (Ctrl /Cmd + T) og sette den horisontale og vertikale skala til 170%. Navn dette laget " kolonnen bg " og flytte den til sentrum av de to andre sekskant figurer.

Legg til en Color Overlay effekt til dette laget med fargen # f5f2ea. Høyreklikk på den og velg Konverter til smart objekt. Påfør deretter en støyfilter bruke innstillingene fra bildet under. Dobbeltklikk på dette laget å åpne Lagstil vinduet og bruke innstillingene fra følgende bilde. For Strek effekt bruke farge # 83a098

Trinn 9 - Legge til ". Services " Området innhold

Velg Type Tool (T) og skrive overskriften " Web Design " ved hjelp av skrift Muncie med størrelsen 48px og farge # 7b9d94. Deretter legger en hvit Drop Shadow effekt ved hjelp av innstillingene fra bildet under.

Bruk Type Tool (T) for å lage en tekstboks 230px bred (du kan se bredden på tekstboksen som du lager den i infopanelet). Legg til et tekstavsnitt i denne boksen med skriften Åpne Sans Light med fargen # 5c574f og størrelsen 15px.

For å gjøre teksten mer leselig vi vil sette linjehøyden til 1.6em. Vår skriftstørrelsen er 15px. Hvis vi multipliserer 15 med 1,6 får vi 24. Det er pikselverdien av linjen høyde. Gå til Tegn-panelet og sett fører til 24px

Nå vil vi legge til en ". Vis Portfolio " knapp for denne kolonnen. Senere vil vi lage " portefølje " området, og vi vil at brukeren skal kunne velge en av de tjenester som tilbys og få portefølje elementer for at tjenesten rett under dette området.

Velg Avrundet rektangel Tool (U) og lage et avrundet rektangel med dimensjoner 120px ved 30px og fargen # a7c5bd. Navn dette laget " knappen ", høyreklikk på den og velg Konverter til smart objekt.

Gå til Filter > Noise > Legg Støy og bruke innstillingene fra bildet nedenfor (1). Deretter dobbeltklikker du på dette laget å åpne Lagstil vinduet og bruke innstillingene fra følgende bilde (1).

Velg Type Tool (T) og skrive ordene " Se Portfolio " ved hjelp av skrift Oswald med størrelsen 17px og farge # f9f9f9. Sett denne tekstlag i midten av knappen. Deretter legger en skygge effekt til dette laget ved hjelp av innstillingene fra bildet nedenfor (2). Fargen som jeg brukte er # 83a098.

Legg disse to lagene i en gruppe og gi den navnet " knappen ".

Bruk linje Tool (U) med fargen # cbc5b7 å lage to horisontale linjer under overskriften i denne kolonnen . Den øverste linjen er 200px bred, er den andre en 240px bred, og de har en 9px gap mellom dem. Nevne disse lagene " 1px linje ".

Duplicate de to linje lag og flytte de nye 1px ned. Endre fargen på nye linjer til hvit og satt sin opacity til 40%

Gruppe alle disse linje lag og navngi gruppen ". Linjer ". Bruk rektangulær markeringsverktøyet (M) for å skape et utvalg over området hvor linjene krysser hverandre med teksten. Forsikre deg om at " linjer " Gruppen er aktiv og gå til Layer > Lagmaske > Skjule Utvalg

Lag to kolonner for ". Services " området akkurat som du opprettet " Web Design " søyle. Alle innstillingene er de samme, med unntak av farger, som du kan få fra følgende bilde

Vi er ferdig ". Services " område. Her har vi brukt nærhets og repetisjon designprinsipper. Vi gjentok formen på hver kolonne og skriftene som tyder på at de tre kolonnene er beslektet og har lignende funksjonalitet og innhold.

Font valg

Så langt har vi brukt fem skrifttyper i dette designet. Vi kan utelukke script fonter, som ble brukt bare en gang for ulike formål og snakke om de andre tre. Muncie, Oswald og Open Sans

Jeg valgte font Muncie fordi det er et vakkert designet kondensert skrifttype som passer stilen jeg ønsket å skape. Vi brukte denne skriften for logo og " tjenester " området overskrifter. Denne skriften er ikke leselig nok i små størrelser (f.eks for navigasjonslinjen), så jeg lagt Oswald til mix. Disse to skriftene går godt sammen fordi de deler en karakteristisk: de er begge kondenserte skriftsnitt.

For de tekstblokker Jeg valgte Åpne Sans font familie fordi det kommer i 10 forskjellige stiler å velge mellom. The Light-versjonen av denne skriften, som vi vil bruke mest, skaper en fin kontrast med de andre skriftene som brukes.

Trinn 10 - Opprette " Portfolio " Området

" Portfolio " Området vil være knyttet til tjenester området. Siden vi skaper en en-side nettsted, må vi funksjonaliteten til å velge en portefølje kategori og få en liste over portefølje elementer fra den kategorien.

Vi kommer til å bruke de tre tjenestene som kategorier. For å indikere hvilken kategori er valgt, vil vi bruke de samme fargene som vi bruker for " tjenester " område.

Når en bruker klikker på si, " Branding " service, porteføljen seksjonen under vil ha en rød strek, vil høydepunktet farge og overskrift fargen også være rød og det vil være en rød bar forbinder " Branding " kolonne med porteføljen boksen. Disse tre visuelle indikatorer vil være nok for brukeren å raskt forstå hvordan porteføljen Seksjonen arbeider

La oss begynne å designe den ". Portfolio " område. Opprett en ny gruppe og gi den navnet " Portfolio ". Lag en annen gruppe inne dette og kaller det " portefølje bg ".

Velg rektangel Tool (U) og lage et rektangel med dimensjonene 960 x 310px og fargen # 89b9ac. Navn dette laget " første grensen " og sette opacity til 20%. Deretter velger du Move Tool (V) og flytte denne rektangel 60px under " tjenester " området.

Opprett en ny rektangel med dimensjonene 950px ved 300px og fargen # a7c5bd. Navn dette laget " andre grense " og bevege det i midten av den første rektangelet. Dobbeltklikk på dette laget å åpne Lagstil vinduet og bruke innstillingene fra følgende bilde. Fargen som jeg brukte for Indre skygge og Stroke effekter er # 83a098.

Opprett en ny rektangel med dimensjonene 940px ved 290px og fargen # f5f2ea. Navn dette laget " portefølje bg ". Dobbeltklikk på dette laget å åpne Lagstil vinduet og bruke innstillingene fra følgende bilde. Strek farge som jeg brukte er # f9f8f5

". Portfolio " Området vil bli kastet inn i to kolonner. Den venstre vil vise en liste med miniatyrbilder. Når en bruker klikker på et miniatyrbilde, vil den høyre kolonnen viser mer informasjon om det portefølje elementet.

Nå vil vi skape bakgrunnen for høyre kolonne. Velg rektangelverktøyet (U) og lage et rektangel med dimensjonene 640px ved 290px og fargen # ece8df. Navn dette laget " aktive elementet bg ", høyreklikk på den og velg Convert to Smart Object

Legg til et støyfilter bruke innstillingene fra bildet under.. Deretter dobbeltklikker du på dette laget å åpne Lagstil vinduet og bruke innstillingene fra følgende bilde. The Inner Glow farge som jeg brukte er # 9d9180

Lag to vertikale linjer med vekten 1px over venstre kant av ". Aktiv portefølje bg " rektangel. For mørket man bruke farge # c3b9ab og for lyset man bruke farge # f9f8f5.

Velg deretter rektangel Tool (U) og lage et rektangel med dimensjonene 4px av 80px som kobler bunnen av " Web Design " kolonne med " Portfolio " Området grensen. Deretter går du til Edit > lag. lag. Gå til Rediger > lag. Noise > Lagmaske > Reveal All.