Create en Illustrasjons Single Page Web Design Med Photoshop
Hei alle sammen! Dette er min første tutorial på denne awesome nye nettstedet til tuts + familien. Denne gangen jeg har for deg en svært detaljert tutorial på å lage en enkelt side illustrer webdesign fra grunnen av med Photoshop. Du vil lære å bygge et oppsett for en enkelt side webdesign, lage illustrerende bakgrunn med en bestemt stil, designe en flytende navigasjonsfeltet, som arbeider med tekst har CSS3 i tankene, og mer ... klar til å begynne?
et par levende eksempler
i det siste har det vært noen stor "vertikalt rulle" nettsteder dukker opp rundt på nettet. Før dykking i, la oss sjekke noen av dem ut for å se hva den endelige effekten vil se ut. Disse vil bidra til å sette resten av opplæringen i sammenheng:
TheGreatBeardedReef.comPojeta.czOrmanClark.comDannyBlackman.comDreamerlines.lv
Før Komme i gang
Denne opplæringen krever noen grunnleggende kunnskap om Photoshop Verktøy, jeg vil hoppe over noen grunnleggende forklaringer som hvordan å lage en lagmaske, hvordan du legger til en guide, eller hvordan du legger til et tekstlag.
Min design er basert på flere eksempler over hele nettet av en veldig trendy stil, en vertikal panorama vektor landskapet som bakgrunn og rene tekst områder som er viktig informasjon. Tenk deg dette området som en enkelt side design som en portefølje nettsiden til en kreativ designer eller illustratør.
Vi vil ikke gå inn i koding del av dette prosjektet fordi vi skal fokusere på de ulike illustrasjon og layout teknikker, men det er basert på den populære jQuery.ScrollTo plugin, som du kan sjekke ut for tips av koding denne type design
La oss få det i gang, eiendeler for denne opplæringen er:.
Stjerne Børster av jen-ni
BonvenoCF Skrift av Mer Barry Schwartz Fonts
Social Network Ikon Pack av Komodo Media
Trinn 1: Komme startet
Først må vi sette opp arbeidsdokument, jeg basere dette oppsettet på 12 kolonner 960 Grid System som du kan laste ned gratis, ellers bare lage et dokument 960 x med og gjøre trekke noen Guides til venstre og høyre grenser.
Som en vanlig praksis på webdesign arbeider vi trenger å øke dette området for å se hvordan det ser ut på høyere oppløsninger, men vi trenger å sette opp en standard størrelse for høyden også, denne høyden bør være minimal synlig området (den synlige delen) siden vi utformer en enkelt side layout. Gå til Image > Canvas størrelse og angi bredden til 1420px og Høyde til 750px
Trinn 2 -. Avgrense §§
Deretter bruker en tidsmessig grafisk å dele dokumentet i seksjoner, med rektangelverktøyet tegne en rektangel fra topp til bunn (750px høyde). Deretter øke størrelse på lerret mye (du kan bruke Crop Tool her)
Trinn 3 -. Avgrense §§
Tegn en guide på bunnen av rektangel og kopiere den, og deretter sammenlignes kopiene oversiden med det første rektangelet undersiden og legge til en guide på bunnen av den andre rektangel, gjenta denne prosessen så mange ganger som deler har du på bordet, i dette tilfelle vi trenger 4: Home, Om oss, Portfolio og kontakt oss. Deretter bruker beskjæringsverktøyet slette ekstra lerret. Du bør ha et lerret på rundt 3000 piksler høyde med 4 seksjoner, hver og en av 750px. Slett de veiledende rektangler og gå videre
Trinn 4 -. Sky Bakgrunn
Bruke rektangelverktøyet tegne et rektangel fra toppen til bunnen av den tredje delen. deretter legge til en Gradient Overlay Layer stil ved hjelp av følgende farger: #FFFFFF # 6E98C8 # 2A3256 og # 0C0E1A, sett Angle til 90 ° (det er veldig viktig siden dette gradient bakgrunn vil bli skiver skal gjentas på x-aksen) og trykk OK .
Trinn 5 - Grass Bakgrunn
Tegn et rektangel på den fjerde delen av dokumentet, og deretter legge et lag stil > Gradient Overlay bruke disse fargene: # 486302 # 64A500 og # BEDC40. I tillegg til det forrige trinnet, sett Angle til 90 °
Illustrasjoner: The Rocket
Trinn 6 - Rocket Body
Nå skal vi begynne å designe de ekstra grafiske elementer. av bakgrunnen. Det første elementet vi trenger å trekke er en plass rakett, som skal plasseres på den delen av en av utformingen. For dette skape et nytt dokument (400px bredde og 600px høyde) og lagre det med et beskrivende navn som " rakett ", legge en mørk blå bakgrunn # 181C35
Deretter saksøker Pen Tool, tegne en hvit. fylt form som ligner på bildet under, deretter kopiere det og gå til Rediger > Transform > Vend horisontalt og plassere kopien nøyaktig ved siden av den opprinnelige, velger begge lag og flette dem ved å trykke Kommando /Ctrl + E. Dette blir Rocket Body
Nå kan du legge et lag Stil >.; Gradient Overlay til " Rocket kroppen " laget ved hjelp av følgende farger: # 0B85DB, # 014C83, # 2396EF, # 004B82 og # 1477B8, sett Angle til 0 ° og trykk OK. Endelig rastrere gradient ved sammenslåing av " Rocket kroppen " lag med en ny blank layer
Trinn 7 -. Stripes
Lag tre gule ellipser ved hjelp av Ellipse Tool og plassere dem som viser bildet nedenfor. Rastrere dem (Høyreklikk på laget miniatyr og velg Rastrer). Deretter holder du Kommando /Ctrl-tasten og klikker over en ellipse miniatyr på Lag-panelet for å velge lagets form og ved hjelp av markørene flytte valg noen piksler ovenfor, og trykk på slettetasten, vil denne prosessen skape en fin buet stripe automatisk. gjenta handlingene med de andre ellipser
Trinn 8 -. Flere striper
Dupliser hver stripe og plassere det noen piksler over den opprinnelige. Da Velg alle stripene og flette dem på et lag som heter " Stripes ". Deretter kommandoen /Ctrl på " Rocket Body " å velge Rocket form, så gå til Velg > Endre > Utvid og satt 2 piksler, deretter invertere utvalget ved å trykke Kommando /Ctrl + Shift + I. Neste på Layers Panel, klikk på " Stripes " . Lag og slette utvalg
Trinn 9 - Stripe stil
Velg den " Stripes " lag og legge et lag Stil > Gradient Overlay ved hjelp av følgende farger: # EFAC00, # BD8401, # C39700, # FFCF2C, # C39700, # BD8401 og # EFAC00 Vinkel 0 °. . Og en subtil svart Drop Shadow (Størrelse: 2 piksler)
Trinn 10 - Rocket Tips
Velg den " Rocket Body " lag, deretter bruke Elliptical Marquee Tool velge tuppen av raketten som viser bildet nedenfor, kopiere utvalget og lime det over rakett lag og under stripene, navngi det nye laget " Tip ". Kopier Stripes 'Layer stil og lim stil til " Tip ".
Trinn 11 - Rocket Vindu
Bruke Ellipse Tool tegne en ellipse på venstre side av raketten name it " Vindu ", deretter legge et lag stil > . Gradient Overlay ved hjelp av følgende farger: # 777777, # E8E8E8, #ADADAD, #FEFEFE, # C8C8C8 og vinkel: 0 °
Deretter kopiere " Vindu " lag og gjøre det litt mindre, plassere kopien rett over originalen. Siden ellipse er en vektormaske, endre fargen på bakgrunnen til: # 00CCFF og dobbeltklikk på Gradient Overlay Layer Style, i dialogboksen endre Blending Mode til Screen. Endelig Legg en subtil Indre skygge til " Vindu Kopier " lag, og hvis du ønsker å en Drop Shadow til " Vindu " lag
Trinn 12 -. Rocket Base
La oss legge rakettbase, først sette alle Rocket relaterte lag (kropp, tips, striper og vindus) og flette dem. Bruke Pen Tool trekke tre figurer etter eksempel på bildet nedenfor, tho av dem over den nye " Body " lag og ett under. Bruk denne fyllfarge for formene: # FBCC28
Trinn 13 - Volum til basen
Legg tre nye figurer som viser volumet til rakettbasen.. Følg bildet under, og bruke denne fill color: # AB8204.
Trinn 14
Påfør en Gradient Overlay Lagstil til pidestaller, bruke følgende farger: # FACB2, # FFF393, # FFD952 og # D4A500, angi vinkelen til 90 °, prøv å få så em ting som bildet nedenfor
Trinn 15 -. Endelig detaljer
Slå sammen alle lag (jeg alltid igjen en kopi av de vektorlag i en kopi bare i tilfelle). Lag en ellipse over rakett fylt med denne fargen: # DFF8FF, så gå til Filter > Blur > Gaussian Blur og sett Radius til 23 eller 24 piksler, navngi laget " Light ". Kommando /Ctrl - Klikk over Rocket Body lag å velge sin form, Kommando /Ctrl + Shift + I for å invertere utvalget og slette utvalg fra " Light " lag. Endelig endre Blending Mode til Soft Light
Trinn 16 -. Plasser rocket på scenen
Slå sammen alle Rocket lag og kopiere dem. Lim Rocket på høyre side av seksjonen en av våre hoveddokument.
Trinn 17 - Rocket brann
du kan gjøre dette trinnet enten på raketten dokumentet eller i den viktigste. Lag to ellipser ved hjelp av Ellipse Tool ett mindre enn den andre som viser bildet nedenfor, kan du bruke følgende farger: # FF8A02, # FFC801. Slå sammen begge lagene inn i et nytt lag som heter " Fire ". Deretter plasserer den rett bak " Rocket " lag. Deretter gjelder en 9 piksler Gaussian blur og bruke Free Transform Controls forvrenge brannen litt slik at det er smalere
Stjerner Bakgrunn
Trinn 18 -. Opprette en egendefinert Brush Preset
åpne Stars Børster fra forhåndsinnstillingene, og deretter åpne Brush Presets Panel (F5).
Under Brush Tip Shape velger 50 piksler stjerne og endre størrelse til 25px, kontrollere avstanden boksen og sett verdien til 300%.
Under Spredning sett Scatter til 1000% Control: Pen Pressure (i tilfelle du har en tegnebrett) Count: 1 og grev Jitter. 100%
På Color Dynamics, sett forgrunn /bakgrunn Jitter til 100%
til slutt, sett forgrunnsfargen til:. # E1F5FF og bakgrunnsfargen til #FFFFFF, og male på et nytt lag like over " Sky " lag. Du kan redusere tettheten av " Stars " lag for å gjøre dem litt mindre intens
Hot Air Balloon
Trinn 19 -. Opprette grunnformene
Den andre tilleggs illustrasjon av vår design vil meg en fin varm luftballong. Opprett et nytt dokument som heter " Balloon " 400px x 600px og fyll den med en blå # 476492 bakgrunnslag. Deretter, ved hjelp av Pen Tool lage flere figurer som tusenfryd er kronbladene for å bygge ballongen form.
Step 20 - Balloon rens kurv
Bruke Peen Tool tegne en form som ligner som det første skjermbilde av bildet under, deretter bruke rektangelverktøyet trekke to diagonale barer ved siden av den og en tverrliggeren. Med Pen Tool tegne en veldig enkel kurv og med Ellipse Tool gi det litt dybde
Trinn 21 -. Coloring ballongen
Nå, endre bakgrunnsfargen av ballongen lag til # FFE305 # D00000 og # 0162A7. Velg deretter den midtre delen og legg på et lag Stil > Gradient Overlay bruker en reflektert Sort - Hvit gradient. Endre Gradient Blending Mode til Overlay og leke med vinkelen slik at den ser litt kul. Da gjelder en Indre skygge stil, med de verdiene som er vist på bildet under, det viktige er tettheten, bør det være rundt 50%. Kopier lag stil og bruke den til alle de andre figurene, i tilfelle skyggen ser ikke bra etter bruker den, dobbeltklikk på Gradient Overlay effekt og klikk og dra over skyggen for å flytte den.
. trinn 22 - Coloring kurven
Endre fargen på kurven relaterte lag til brun: # 874E21 og lim det forrige trinnet er lag stil. For den interne ellipse bruke en mørkere farge: # 291700. Og det er det! slå sammen alle lagene og bruke Dodge /Burn verktøy for å legge noen skygger og lys
Trinn 23 -. Plasser ballonger
Kopier ballongen og lime inn to eksemplarer på den andre delen av vår dokument, en større enn den andre. Velg mindre ballongen og bruke Lasso Tool gjøre et utvalg av selve ballongen. Deretter trykker du Kommando + U for å justere Hue metningsverdier og endre dem som du vil. Pluss at du kan legge til noen dybdeskarpheten ved å tåkelegge andre ballongen litt
Clouds
Trinn 24 -. Tegn skyene
Fremover med bakgrunnen utformingen er det på tide å legge til noen skyer på vår himmel. Opprett et nytt dokument som heter " Clouds " enhver størrelse du ønsker, og fyll den med samme bakgrunnsfarge enn " ballong " fil: # 486493. Deretter bruke Pen Tool trekke noen hvite skyer som viser bildet nedenfor
Trinn 25 - Skyer Styles
Bruk på skyene lag et lag stil >.; Gradient Overlay bruke disse fargene: # D1D7E7 - #FFFFFF Vinkel: 0 grader, og en indre glød color: # BBD5D6 Blend Mode: Normal, avhenger av størrelsen på størrelsen på skyene, jeg bruker 6PX Vi har nettopp avsluttet himmelen, husker ikke sette viktige elementer ved siden av grensen og holde alle lagene organisert. Vi er på halvveien, er det en god tid for å få en kopp kaffe! La oss legge på fjellet, denne gang jeg '' jobbe rett på hoveddokument, ved hjelp av Pen Tool tegne et fjell-lignende form som vist på bildet nedenfor. Deretter gjelder en Layer Stil > Gradient Overlay ved hjelp av følgende farger: # 557200 - # 88B707 og sette Angle som passer bedre for deg, i dette tilfellet 99 grader. Deretter kopiere fjellet, legg det bak det første fjellet og gjøre det litt stort større og endre fargene på sin Gradient Overlay til: # 415800 - # 8AB00B for å gjøre det litt mørkere. Lag et nytt lag over det store fjellet og gi den navnet " Shadows " ved hjelp av en stor myk børste og dette color: # 527300 male noen skygger. Deretter Kommando /Ctrl-klikk på fjellet lag for å skape et valg rundt det, og trykk deretter på Kommando /Ctrl + Shift + I for å invertere utvalget og slette utvalg fra " Shadows " lag. Gjenta prosessen å skape et lag som heter " Lys " ved hjelp av en lys grønn Brush for å legge til noen lys til fjells Bruke Pen Tool, trekke trestamme og noen grener. Så på et nytt lag tegne en stilisert form med bladene. På stammen lag legge en Gradient Overlay Lagstil bruke disse fargene: # 574E00, # 957800 vinkelen avhenger mye på formen. For bladene bruke følgende farger for Gradient Overlay: # 577E01, # 8DDA00. Deretter legge til flere blader på små busker foran grenene. Lag flere forskjellige former, og hvis du vil legge til litt uskarpt mørk ellipsen på undersiden av hvert tre. Rastrere hvert tre og gå videre Plasser trærne over fjellene og over det grønne feltet på §§ 3 og 4 av våre hoveddokument, gjør trærne nederst i bildet større enn han seg ved siden av fjellet for å lage en dybdeskarphet illusjon, foruten dimme de minste trærne litt. til slutt bruker Dodge /Burn Tools på den største trær for å øke intensiteten av skyggene på dette punktet du har fått en fin illustrer bakgrunn design. Legg alle bakgrunns relatert lagene inn i en mappe som heter " Bakgrunn ". La oss legge til side tittel, ved hjelp av tekstverktøyet legge to tekstlag, på den første typen " Web design " og på den andre: " Tutsplus " (Selvfølgelig kan du erstatte disse ordene med svært eier). Deretter på Tegn-panelet satt Skriftsnitt til Futura Book (du kan bruke en hvilken som helst annen) For første linjen angi størrelsen til 42pt, Utligning: 0PT, merker All Caps alternativet og angi forgrunnsfarge til White #FFFFFF. For den andre linjen jeg bruker Futura Bok også, størrelse 18 pt og 1250pt av Utligning, sett forgrunnsfargen til # FFD001 og markere All Caps alternativet samt Bruke linje~~POS=TRUNC, tegne en blå linje (# 9AA4D9), legge til en hvit Ytre glød effekt og rastrere linjen (slå det sammen med et svart lag over eller under det), deretter bruke en lagmaske > Skjul alle og fylle masken med en svart /hvitt reflektert gradient. Sørg tittelen er i nærheten av andre guide fra venstre, noe som betyr 10 piksler til høyre for 960 venstre kant Bruke rektangelverktøyet tegne en smal hvit rektangel øverst til høyre vinkelen på § 1 setter Fyll verdien til 25%, og deretter legge en 1pixel hvit Stroke, Opacity: 50%. Rastrere laget ved å slå sammen det whit et svart lag over eller under, legge til en lagmaske > Skjul alle ... og fylle det whit en reflektert Black /White Gradient, prøv å få noe sånt nederst på bildet nedenfor CSS3 tillate oss å legge ned skrifter på vår nettside, er det noen gratis skrift kataloger som gir gratis skrifttyper klar til bruk på vår design, vil vi ta hånd av den vakre skrifttype som heter: " Bonveno ". Skriv inn navigasjonskoblinger ved hjelp Bonveno, Mål: 12pt, All Caps og forgrunn: Hvit. Velg koblingen Hjem og merke den med gul # FFCF00. Legg en lærerik tekst: " Gå til " bruker bonveno, størrelse 8 piksler og grå forgrunnen For å få en bedre bakgrunn, duplisere ". Nav " lag, og flytte kopien et par piksler nederst til venstre. Til slutt, endre hver lagets Opacity til 50%. Sett alle navigeringsrelaterte lag på en mappe som heter " Navigation ". For å gi mer vekt til navnet på nettstedet, velger du den store ord og bruke en subtil Gradient Overlay (# C5C5C5 - #FFFFFF) og en liten Drop Shadow (Avstand og størrelse 2 px), Bruk den lille Drop Shadow til den andre linjen så vel La oss legge velkomstteksten, vil vi begynne å legge tittelen. Siden titlene bør være ren tekst, bruke Bonveno skrift og gul forgrunnen (# FFCF00). Påfør Skygge vist på forrige trinn. Ikke nøl med å bruke flere guider for å markere ups innholdet, i dette tilfellet Jeg oppretter guider 10 px over og under velkommen tittelen for å hjelpe meg å legge avsnittet teksten og bakgrunnen bruk rektangelverktøyet til å tegne en boks som bakgrunn for velkomstteksten, kan du bruke denne fargen # 0E1122 for boksen og ned sin Fill til 25%. I tillegg legger en 1px Stroke bruker denne fargen # 4E6575 Rastrer boksen (slå det sammen med et tomt lag), og deretter bruke en lagmaske og fylle det med en sort - hvit Gradient. Du kan bruke en stor myk pensel og male over lagmaske for å skjule noen områder for å gjøre det visne ser mykere. Til slutt, akkurat som med navigasjons dårlig, duplisere boksen bakgrunnen og flytte den noen få piksler nederst til venstre for å skape en stil som ligner på det som vises nederst i bildet nedenfor bruk tekstverktøyet, tegne en boks med Avsnitt tekst og fylle det med Lipsum tekst, bruk " Lucida Sans - Regelmessig " som skrifttype, størrelse 11px, Ledende: 19pt, og forgrunnsfarge: Hvit. endelig, ettersom CSS3 tillate oss å legge denne typen detaljer 2 piksler Svart Drop Shadow til tekstavsnitt Bruk de samme instruksjonene som vises på trinnene 40 og 41 for å skape en bakgrunn, men mindre av denne tiden. Åpne Social Network Ikoner fra eiendelene og lim følgende ikoner: RSS, Twitter og Facebook, gjerne legge ikonene du foretrekker. Til slutt, ved hjelp av " Bonveno " skriftsnitt skrive ordet " Nettverk " som en tittel og bruk " Helvetica " (Arial fungerer fint i tillegg) for å legge til noen hvite antall abonnenter, følgere og Likes På dette punktet har vi § 1 som er den faktiske velkommen side (eller hjemmeside) ferdig. Det er en god tid til å gjennomgå alt er i riktig posisjon, prøv å holde balansen med hvite tempo f.eks mellomrommet mellom venstre kant og velkommen teksten og høyre kant med nettverks ikonene er de samme. Arbeide med white space (som selvfølgelig ikke er bokstavelig " hvite ") er virkelig komplisert, avviser impuls med å fylle ut hver lille plass med et bilde eller et ikon, ofte en bred og klar bakgrunn er mer oppsiktsvekkende enn en promille av skinnende elementer. ved siden av at alle lagene er organisert, nederst i bildet nedenfor er et mapper struktur som jeg har gjort. En av de mer viktige mapper her er " Nav ", Jeg planlegger å lage en flytende navigasjon ved hjelp av Javascript, men for mock up formål vil vi måtte kopiere den et par ganger for å se hvordan den andre " sider " eller deler ser For denne delen, i utgangspunktet gjenta prosessen av trinnene 39-42, men plasserer lagene på på høyre side av den andre delen endre tittelen til " Om oss ". På dette punktet jeg planla å legge en tabbed ruten funksjonen, men endre faner posisjoner til bunnen, ved hjelp av " Bonveno " skrift skrive kategoriene under om oss ledd. bruke denne forgrunnsfargen for kategoriene: # C3DFFF og hvit for den valgte kategorien. Til slutt, ved hjelp av Polygon Tool tegne en Himmelblå # D5E5F2 trekant for å markere valget Bare for å se hvordan det ser kopiere forrige avsnitt er ". Nav " mappe, men markere ordet " Om oss " på navigasjonslenkene. Sikre alt innholdet er mellom seksjonens marginer og organisere lagene i mapper Gjenta de forrige trinnene instruksjoner for å lage en boks av innhold, men i stedet for å bruke gult for tittelen bruk blå: # 336A91 og bruk følgende farge for boksen bakgrunn: # 7FA5D2 og en hvit strek Layer Style. For denne delen vil vi utforme en veldig enkel portefølje galleri, ved hjelp av rektangelverktøyet trekke noen lyseblå firkantene på venstre side av den nylig opprettet boks med innhold. og et stort rektangel på venstre side. Legg til hver boks en Layer Stil > Stroke, 1px hvitt. Bruke rektangelverktøyet tegne små firkanter nederst til høyre på den store plassen som vil være som miniatyrbilder for å kontrollere en slags overgangseffekt, og deretter legge til noen dummy teksten over hver firkant for å skildre hvilket innhold skal plasseres der. Du kan faktisk bruke eksempler på bilder hvis du ønsker å Etter den samme prosessen enn Step 43, legge til et par linker for sosiale medier portefølje, som Flickr eller Linkedin . Bruk " Bonveno " skriftsnitt for tittelen og denne fargen. # 034D8A Dupliser " Nav " mappen igjen og merke ordet " Portfolio ". Sikre at alt er inne grensene for seksjonen tre og organisere lag Vi er nesten ferdig, nå la oss legge en beholder for kontaktskjemaet. I dette tilfellet rektangelet skal være grønn # 67A802 og Stroke lysere grønn # B8D942. Tittelen på seksjonen skal være " Kontakt oss " og jeg bruker en hvit forgrunnen for å øke kontrasten med bakgrunnen. Fade boksen litt og duplisere å skape de to linjene virkning fra tidligere innholdsbokser Til slutt bruker hvite forgrunnen og en mindre størrelse på ". Bonveno " skrift skrive kontaktskjemaet etiketter. Påfør Drop Shadow vi bruker for titlene på disse etikettene samt Bruke Avrundet rektangel Tool (5px radius), trekke følgende former som vil bli de faktiske inngangs områder av vårt kontaktskjema. Da gjelder det Indre skygge, Color Overlay (# 4B6800) og Stroke (# A8D02F) Layer Styles vist nedenfor Ved hjelp ". Bonveno " skrift skriver noen dummy ord inne i tekstbokser, jeg bruker denne fargen som en forgrunn: # AFD437. Nedenfor inngangs boksene kan du legge litt telefonkontakt linjen også (gjerne endre informasjonen som du vil) Til slutt, la oss legge til kontakten knappen, bruker Avrundet rektangel (5px Radius) tegne en knapp. bruke en Skygge, en Gradient Overlay (# B17F02 - # FFD101) og en Stroke stil (# FFDB04) For Button teksten jeg bruker " Futura Black " skrifttype, men gjerne bruke en annen font. Da gjelder en Indre skygge, en Color Overlay (# 564100) og en Stroke (# F0C401) til tekstlaget. Du bør ha noe lignende i bunnen av bildet nedenfor Etter å duplisere en ny forekomst av navigasjonsmenyen, fremhever ordet ". Kontakt " denne gangen. Endelig sikre alt innholdet på kontaktsiden er inne grensene for den fjerde delen av design og organisere lagene. Og det er det! Håper du likte denne tut, nå er det din tur til å prøve din egen illustrer enkelt side web design!
Trinn 26 -. Flere clouds
< p> Legg til flere skyer ved siden av horisonten på § 3 i hoveddokumentet, endre fargene litt, for den indre glød bruke #FFFFFF og for Gradient Overlay: # DBE1F1 - #FFFFFF. Du burde få noe som bildet nedenfor
Trinn 27 -. Tid for å ta en pause
Fjell
Trinn 28
Trinn 29 - Lys og skygger
Trees
Trinn 30 -. Tegn trærne
Trinn 31 -. Plasser trær på bakgrunnen
Trinn 32 -. Avslutte bakgrunn
Sidetittel (Logo)
Trinn 33 - Page Title
Trinn 34 -. Page tittel detaljer
Navigasjon Bar &
Trinn 35 -. Navigasjon bakgrunn
Trinn 36 -. Navigation Links
Trinn 37 - Nav Bar Detaljer
Trinn 38 - Legge til effekter ved Tittel
Velkommen Tekst
<. h2> Trinn 39 - Legg tittelen
Trinn 40. - Velkommen Box bakgrunn
Trinn 41 -. Stil tekstens bakgrunn
Trinn 42 -. Tilsett velkommen tekst
Trinn 43 -. Social Media Links
Trinn 44 -. Gjennomgang velkommen side
Om oss
Trinn 45 -. Om oss delen
Trinn 46 - Duplicate navigasjonsfeltet
Portefølje
Trinn 47 -. Portfolio §
Trinn 48 - Portefølje Objekt Plassholdere
Trinn 49 -. Social Portfolio
Trinn 50 - Revidere everithing er på plass
Kontakt oss
Trinn 51 -. Kontakt Bakgrunn og etiketter
Trinn 52 -. Tegn inndataboksene
Trinn 53 - Legg den inn tekst
Trinn 54 -. Kontakt Button
Trinn 55 -. Kontakt knappetekst
Trinn 56 - Revidere Kontakt Seksjon
Konklusjon
.