skabe en vejledende samlet side web - design med photoshop,,,,,,, hej allesammen!det er min første forelæsning om denne fantastiske nye websted i tuts + familie.denne gang har jeg fået dig en meget detaljeret forelæsning om at skabe en enkelt side illustrative webdesign forfra med photoshop.du vil lære at bygge en skitse til en enkelt side webdesign, skabe illustrative baggrund med en særlig stil, udformning af en flydende navigation bar, der arbejder med tekst under css3 i tankerne, og mere til.klar til at begynde?,,,, nogle levende eksempler, vi har for nylig set et par store "vertikalt nedad" steder dukker op på nettet.før afgang, lad os tjekke et par af dem for at se, hvad den endelige virkning, skal se ud.disse vil hjælpe resten af tutor i forbindelse thegreatbeardedreef.com pojeta.cz:,,,,,,,, ormanclark.com, dannyblackman.com, dreamerlines.lv, før begyndt, denne forelæsning kræver en grundlæggende viden om photoshop værktøj, jeg springer over nogle grundlæggende oplysninger om, hvordan man skaber et lag maske, hvordan at tilføje en vejledning, eller - at tilføje en tekst lag.mit design er baseret på en række eksempler i hele nettet af en meget trendy stil, en vertikal panoramisk vektor landskab som baggrund og ren tekst områder med vigtige oplysninger.forestil dem, at dette sted som en enkelt side design som en portefølje websted for den kreative designer eller en illustrator. vi vil ikke gå til kodning del af dette projekt, fordi vi skal fokusere på de forskellige illustration og layout - teknikker, men er baseret på folkelig jquery.scrollto stik af, som du kan se på lossepladser i kodning af denne type konstruktion. lad os få det i gang, aktiver, for denne lektion:,, star børster, jen ni, bonvenocf skrifttype med mere barry schwartz skrifttyper, sociale netværk - pack af komodo medier, trin 1: begyndt, først skal vi oprette det dokument, jeg er at basere denne opstilling på 12 kolonner 960 forsyningsnettet, du kan downloade gratis, ellers blot vil skabe et dokument, 960px med og dr.- nogle retningslinjer for venstre og højre grænser.som en almindelig praksis i webdesign arbejder, er vi nødt til at øge dette område for at se, hvordan det ser ud om videregående beslutninger, men vi er nødt til at oprette en standard størrelse for den højde, som denne højde skal være minimal synlige område (over folden), da vi skal udforme en enkelt side layout.gå til image > lærred størrelse og den bredde, 1420px og højden til 750px.,, trin 2 - afgrænse sektioner, anvende en tidsmæssig grafisk at opdele dokument i afsnit, ved hjælp af rektangel redskab tegne et rektangel fra top til bund (750px højde).så øge lærred størrelse mange, du kan bruge den afgrøde, værktøj), trin 3 - afgrænse sektioner, udarbejde en vejledning i bunden af rektangel og gentage det, så passer det eksemplar er deroppe med de første rektangel er nederst side og tilføje en guide på bunden af den anden rektangel, gentager denne proces så mange gange, som afsnit har du på layout, i dette tilfælde har vi brug for 4: hjemme, om os, portefølje, og at kontakte os.så, ved hjælp af afgrøden værktøj fjerne ekstra lærred.du skulle have et lærred til ca. 3000px højde med 4 dele, hver og en af 750px.det vejledende rektangler og bevæge os fremad.,, trin 4 - sky baggrund, idet den rektangel redskab tegne et rektangel fra top til bund i tredje afsnit.derefter tilsættes en gradient - overlay - lag stil med følgende farver:&#ffffffe98c8a3256 og�c0e1a, sæt vinklen på 90 ° (det er meget vigtigt, da denne gradient baggrund vil blive skåret gentages på x - aksen) og ramt okay.,, trin 5 - græs baggrund, tegne et rektangel med den fjerde del af dokumentet, så tilføje endnu et lag stil > gradient - overlay - ved hjælp af disse farver:񶮞@a500 og&#bedc40.såvel som de foregående trin, sæt vinklen på 90 °.,, illustrationer: raketten, trin 6 - raket, nu vil vi begynde at udarbejde yderligere grafiske elementer i baggrunden.det første element, vi skal drage, er en raket, der anbringes på et afsnit af designet.dette skaber et nyt dokument (400px bredde og 600px højde) og redde det med en beskrivende betegnelse som " raket ", tilføje en mørkeblå baggrundµc35. dernæst sagsøger pen værktøj, tegne et hvidt fyldt form svarende til billedet nedenfor, så gentage det og gå til edit &bt og omdanne > flip horisontale og den næste til at kopiere originalen, udtage begge lag og samle dem ved presning kommando og kontrol + e. dette vil være den raket krop. nu tilføje et lag stil > gradient overlay til " raket organ " lag ved anvendelse af følgende farver:�b85db,c83,ड़ef,b82 ogׅb8, sæt vinklen på 0 ° og ramte godt.endelig rasterize gradient ved at sammenlægge de " raket organ " lag med en ny blank lag.,, trin 7 - striber, skabe tre gule ellipses ved hjælp af den ellipse, værktøj og placere dem som viser billedet nedenfor.rasterize dem (højre klik på lag miniature og udvælge rasterize).så, hold kommando /ctrl centrale og klik på en ellipse miniature på lag - panel til automatisk at udvælge lag er form og anvendelse af cursors flytte udvælgelse en pixel ovenfor, så slå det slette nøgle, denne proces vil skabe et pænt buede stribe.gentag aktioner med andre ellipses.,, trin 8 - flere striber, dobbelt hver stribe, og det er en pixel over den oprindelige.så vælg alle striber og samle dem i en lag, der hedder " striber ".så kommando /ctrl på " raket organ ", at udvælge den raket form, så vælg > ændre > udvide og 2 pixels, så vend udvælgelse af presserende kommando /ctrl + forskydning + i den næste på lag - panelet klik på " striber " lag og slette udvælgelse.,, trin 9 - stribe stil, udvælge og quot; striber " lag og tilføje et lag stil > gradient - overlay - ved anvendelse af følgende farver:&#efac00,&#bd8401,&#c39700,&#ffcf2c,&#c39700,&#bd8401 og&#efac00 vinkel 0 °.og en lille sort drop shadow (størrelse: 2px).,, trin 10 - raket tip, udvælge og quot; raket organ " lag, derefter ved hjælp af elliptiske markise redskab udvælge spidsen af raketten som viser billedet nedenfor, kopi udvælgelse og sæt det over raket lag og under striber navn på den nye lag " tip ".kopi striberne "lag stil og pasta stil til " tip ".,, trin 11 - raket vindue, idet den ellipse redskab trækkes en ellipse på venstre side af raketten navn det " gennemskinneligt " derefter tilføjes et lag stil > gradient - overlay - ved hjælp af følgende farver:򽸱,&#e8e8e8,&#adadad,&#fefefe,&#c8c8c8 og vinkel: 0 °., så gentager " gennemskinneligt " lag og gør det lidt mindre sted en kopi på originalen.da den ellipse, er en vektor maske, ændre farven på den baggrund:�ccff og double click på gradient - overlay - lag stil om dialog ændre sin blanding tilstand til skærmen.til sidst tilføje en diskret indre skygge til " gennemskinneligt kopi " lag, og hvis du vil en dråbe skygge til " gennemskinneligt " lag.,, trin 12 - missil basen, så lad os tilføje den raket base, først satte alle raket - relaterede lag (organ, drikkepenge, stripes og vindue) og lægge dem sammen.anvendelse af pennen redskab drage tre former, f.eks. billedet nedenfor, ise af dem over de nye " krop " lag og en under.brug det fylde farve for former:&#fbcc28.,, trin 13 - bind til basen, tilføjer tre nye former, som skildrer volumen til raket base.følg billedet nedenfor, og bruge denne fylde farve:&#ab8204.,, punkt 14, anvende en gradient - overlay - lag stil til piedestaler, anvendes følgende farver:&#facb2,&#fff393,&#ffd952 og&#d4a500, sæt vinklen på 90 °, forsøge at få så dem ting som billedet nedenfor.,, trin 15 - endelige oplysninger, fusionere alle lag (jeg har altid lagt en kopi af vektoren lag i en kopi i tilfælde af).skabe en ellipse over raketten fyldt med denne farve:&#dff8ff, så gå til at filtrere > sløret > gaussisk slør og radius til 23 eller 24 pixels, navn på lag " light ".kommando /ctrl - klik på raketten er lig lag at vælge formen, kommando /ctrl + forskydning + jeg at vende udvælgelses - og slette udvælgelse fra " light " lag.endelig ændre sin blanding tilstand for at bløde lys., trin 16 - raketten på scenen, fusionere alle raket lag og kopiere dem.pasta raketten på højre side af afsnit 1 i vores vigtigste dokument.,, skridt 17 - raketangreb, du kan gøre det enten på den raket dokument eller i det primære.skabe to ellipses ved hjælp af ellipse værktøj, en mindre end de andre, som viser billedet nedenfor, anvendes følgende farver:&#ff8a02,&#ffc801.fusionere begge lag i et nyt lag, der hedder " brand ".så det bare bag " raket " lag.så anvende en 9 pixels gauss - tåge og ved hjælp af de frie omdanne kontrol fordreje ilden lidt at det snævrere.,, stjerner baggrund skridt 18 - skabe en skik børste nulstillet, åbne stjernerne børster fra stationer, så åbn den børste stationer panel (f5).i henhold til børste tip form udvælge 50px stjerne og ændre dens størrelse 25px, tjek spacing afkrydsningsfelt og værdien til 300%.i henhold til spredning, der spredes med 1000% kontrol: pen tryk (i tilfælde af, at du har en grafik tablet) tæller: 1 og tælle jitterbug: 100%. den farve dynamik, forgrundsviden /baggrund jitterbug 100%. endelig fastsat forgrundsviden, farve:&#e1f5ff og baggrund farve til&#ffffff og et nyt lag maling på lige over " sky " lag.du kan reducere forureningen af " stars " lag for at gøre dem lidt mindre intens.,, varmluftsballon skridt 19 - at skabe de grundlæggende former, den anden yderligere illustration af vores design vil mig en dejlig varm luft ballon.oprette et nyt dokument, der hedder " ballon " 400px x 600px og fylder den med en blå񴕌 baggrund lag.derefter pennen værktøj, skabe flere former som daisy er blade til at bygge den ballon form.,, gå 20 - ballon er kurv med lem værktøj, udarbejde en form svarende som den første skærmbillede af billedet nedenfor, derefter ved hjælp af rektangel redskab drage to diagonal stænger til det næste og bare.med pennen redskab drage en meget enkel kurv og med den ellipse, værktøj, give det lidt nærmere.,, gå 21 - farver den ballon, nu, ændre baggrunden farve af ballonen lag&#ffe305&#d00000 og¢a7.så vælg den midterste del og anvende et lag stil > gradient - overlay - ved hjælp af en sort - hvid stigning afspejles.ændre gradient blanding tilstand til overlay - og lege med den vinkel, så det ser lidt bump.så anvende en indre skygge stil, ved hjælp af de værdier, som er angivet på billedet nedenfor, det vigtige er den uklarhed, der skal være ca. 50%.en kopi af det lag stil og anvende det til alle de andre former, hvis skyggen ser ikke godt ud, efter at anvende det, double click på gradient - overlay - virkning og klik og trække over skygge til at flytte det.,, skridt 22 - farver kurven., ændre farve i kurven med lag på brown:ͪe21 og pasta de foregående trin er lag - stil.for de indre ellipse, anvende en mørkere farve:񇍴.og det er det!fusionere alle lag og bruge dodge /brænde værktøjer for at tilføje en skygge og lys.,, gå 23 - sted, balloner, kopi ballonen og pasta to kopier på den anden del af vores dokument, en større end den anden.udvælge de mindre ballon, og ved hjælp af lasso værktøj, foretage en udvælgelse af de faktiske ballon.- så tryk på command + u at tilpasse hue mætning værdier og ændre dem, som du vil.plus, du kan tilføje nogle dybdefotografering gennem udviskning anden ballon lidt.,, skyer, skridt i 24 - tegne skyerne bevæger sig fremad med den baggrund, design, det er tid til at tilføje nogle skyer på himlen.oprette et nyt dokument, der hedder " skyer " enhver størrelse, du vil have, og fyld den med samme baggrund farve end " ballon " fil:񶱝.derefter pennen redskab at drage nogle hvide skyer, som viser billedet nedenfor.,, gå 25 - skyer styles, anvendelse på skyerne lag, et lag stil > gradient - overlay - ved hjælp af disse farver:&#d1d7e7 -&#ffffff vinkel: 0 grader, og en indre glød farve:&#bbd5d6 blanding tilstand: normal. størrelse afhænger af størrelsen af deres skyer, jeg bruger 6px. tilføje nogle skyer på afsnit 2 i vores vigtigste dokument, bag de balloner,, hvis du ønsker at tilføje nogle dybe landskabet udviske et fjernt skyer lidt.,, gå 26 - flere skyer, tilføje flere skyer i horisonten i afsnit 3 i hoveddokumentet, ændre de farver, en lille smule, for den indre glød anvendelse&#ffffff og for gradient - overlay -:&#dbe1f1 -&#ffffff.du bør få noget, der ligner billedet nedenfor.,, skridt 27. - tid til at tage en pause, vi er lige blevet færdig med at himlen, husker du ikke sætte vigtige elementer ved grænsen og holde alle lag af organiseret.vi er på vej, det er et godt tidspunkt at få en kop kaffe.,, bjerge, skridt 28, lad os tilføje bjergene, denne gang er jeg arbejde på det vigtigste dokument, anvendelse af pennen redskab tegne et bjerg som form som vist på billedet nedenfor.anvendes et lag stil > gradient - overlay - ved anvendelse af følgende farver:򈂐 -Xb707 og fastsætte den vinkel, som bedre passer til dig, i dette tilfælde 99 grader.så gentage det bjerg, læg det bag den første bjerg og gøre det lidt for meget større og ændre farver af gradient - overlay til:񥠸 -ab00b at gøre det lidt mørkere.,, skridt 29 - lys og skygger, skabe et nyt lag over det store bjerg - og navn det " skygger " anvendelse af en stor blød børste, og denne farve:򀯄 mal nogle skygger.så kommando /ctrl - klik på bjerget lag for at skabe et udvalg omkring det, så tryk ctrl + forskydning + kommando /jeg at vende udvælgelses - og slette udvælgelse fra " skygger " lag.gentag processen at skabe et lag, der hedder " lys " anvendelse af en lysegrøn farvede børste tilføje nogle lys til bjergene.,, træer, gå 30 - drage de træer, anvendelse af pennen værktøj, henlede træ og nogle grene.så på et nyt lag, trækker en stiliseret form med bladene.i bagagerummet lag tilføjer en gradient - overlay - lag stil med disse farver:Ⱦe00,󩵨 vinkel, afhænger meget af deres form.for de blade, anvende følgende farver for gradienten overlay:Ɂe01,dda00.så tilføje flere blade på små buske foran filialer., skabe flere forskellige former, og hvis du vil tilføje lidt sløret sort ellipse, på grundlag af hvert træ.rasterize hvert træ og bevæge os fremad.,, skridt 31 - sted træerne på den baggrund sted træerne i bjergene og i det grønne område på de i afsnit 3 og 4 af vores vigtigste dokument, træer på bunden af det billede, større end han dem ved siden af bjergene for at skabe en dybde af område en illusion, og sløre den mindste træer lidt. endelig anvendelse den dodge /brænde redskaber på den største træer for at øge intensiteten af skyggerne.,, trin 32 - afslutter den baggrund, på dette punkt, du har en god illustration baggrund design.alle lag i en folder, der hedder baggrund vedrørende " baggrund ".,, side titel (logo) skridt, 33 - side titel, lad os tilføje side afsnit, ved hjælp af den type redskab tilføje to tekst lag på den første type " web - design " og på den anden: " tutsplus " naturligvis kan man erstatte disse ord med din meget ejer).så karakter panel, der skrifttypen til futura bog (du kan bruge andre) i første linje, der er den størrelse, 42pt, kerning: 0pt, markere alle virksomheder mulighed og forgrund farve hvid&#ffffff.i anden linje, jeg bruger futura bog - størrelse 18pt og 1250pt af kerning, forgrundsviden farve til&#ffd001 og markere alle virksomheder mulighed for.,, skridt 34 - side afsnit oplysninger ved hjælp af linjen værktøj, udarbejde en blå linje (# 9aa4d9), og der tilsættes et hvidt ydre glød virkning og rasterize linje (sammen med en sort lag over eller under det), og anvende en lag maske > gemme og udfylde de maske med en sort /hvid afspejlet hældning.- sikre, at afsnit er tæt på den anden vejledning fra venstrefløjen, som betyder, at 10 pixels til højre for 960 forlod grænse., -, navigations - bar, skridt 35 - navigation baggrund, idet den rektangel redskab drage en snæver hvide rektangel i øverste højre vinkel i afsnit 1, der fylder værdi til 25%. derefter tilsættes et 1pixel hvide slagtilfælde, uklarhed: 50%.rasterize laget, ved at sammenlægge den whit en sort lag over eller under, tilføje endnu et lag maske > gemme alt...og fyld den med en sort /hvid afspejlede gradient, prøv at få noget som bunden af billedet nedenfor.,, trin 36 - navigation forbindelser, css3 giver os mulighed for at integrere skrifttyper på vores websted, der er gratis skrifttype, fortegnelser, der giver gratis skriftsnit klar til brug på vores design, vil vi tage hånd om det flot skrifttype, der hedder: " bonveno &; quot;.type sejlads forbindelser med bonveno, størrelse: 12pt, hætter og forgrundsviden: hvid.vælg den indre sammenhæng, og fremhæve det med gult&#ffcf00.tilføje en oplysende tekst: ". hop til " anvendelse af bonveno, størrelse 8px og grå forgrund,.,, skridt 37 - nav bar detaljer, for at få en bedre baggrund, at kopiere " nav " lag, og flytte den kopi, et par pixels nederst til venstre.endelig ændrer sig hvert lag er uklarhed til 50%.læg alle navigationsrelaterede lag på en folder, der hedder ", navigation og quot;.,, skridt 38 - tilføje virkninger på den titel, for at lægge mere vægt på stedet navn, udvælge de store ord og anvende en diskret gradient - overlay - (# c5c5c5 -&#ffffff) og en lille dråbe skygge (afstand og størrelse 2 px), anvende den lille dråbe skygge på den anden linje.,, velkommen tekst, skridt 39 - tilføje afsnit, lad os tilføje velkommen tekst, vil vi begynde at tilføje den titel.efter afsnit bør være enkel tekst, anvendelse bonveno skrifttype og gule forgrundsviden (# ffcf00).anvende drop shadow vist på det foregående trin.tøv ikke med at bruge forskellige retningslinjer for mark - ups deres indhold, i dette tilfælde jeg skaber guider 10 px over og under velkommen titel for at hjælpe mig med at tilføje afsnit tekst og dens baggrund.,, gå 40 - velkommen rubrik baggrund, idet den rektangel værktøj til at tegne en rubrik, som baggrund for den velkomst, tekst, brug denne farve�e1122 for kassen og dets fylde op til 25%.desuden tilføje en 1px slagtilfælde anvendelse af denne farvee6575. skridt - 41 - stil teksten baggrund, rasterize kassen (fusionerer med en blank lag), anvendes et lag maske og fylder den med en sort - hvid - hældning.du kan bruge en stor blød børste og maling i lag - maske til at gemme nogle områder for at gøre det og se blødere.endelig, ligesom med navigation dårligt, dobbelt kassen baggrund og flytte et par pixels nederst til venstre for at skabe en stil, svarer til den, der er vist nederst i billedet nedenfor.,, skridt 42 - tilføje velkommen tekst ved hjælp af den type redskab, udarbejde en kasse med punkt tekst og fylder den med lipsum tekst, anvendelse og quot; lucida sans - regelmæssige " som skrifttype ansigt, størrelse 11px fører: 19pt, forgrundsviden farve: hvid.endelig er det, eftersom css3 giver os mulighed for at tilføje den slags detaljer at tilføje et 2px sorte drop shadow til punkt tekst.,, gå 43 - sociale medier forbindelser, anvende de samme instrukser vist på de skridt, 40 og 41 for at skabe en baggrund, men mindre denne gang.åben det sociale net ikoner fra aktiver og pasta følgende symboler: rss, twitter og facebook, føle sig fri til at tilføje ikoner deres præference.endelig bruger " bonveno " skrifttype skrive ordet " net " som titel og bruge " helvetica " (arial fungerer godt - at tilføje nogle hvide antal abonnenter, tilhængere og kan lide.,, skridt 44 - revision velkommen side på dette punkt. vi har afsnit 1, som er den faktiske velkommen side (eller hjemmeside) færdig.det er et godt tidspunkt at gennemgå alt, er en ordentlig holdning, prøv at holde balance med de hvide tempo, f.eks. rummet mellem venstre grænse og bifalder teksten og ret grænse med netværket ikoner er den samme.arbejde med hvidt rum, der naturligvis ikke er bogstaveligt talt " hvide ") er kompliceret, afviser den impuls for at udfylde hver lille rum med et billede eller et ikon, der ofte er en lang og klar baggrund er mere end tusind af skinnende fangst elementer. ved siden af sikre, at alle de lag er organiseret, på bunden af billedet nedenfor er mapper struktur, som jeg gjorde.et af de mere vigtige mapper her er " nav " jeg er planer om at skabe en flydende navigation ved hjælp af javascript, men for mock - up - formål, vi bliver nødt til at gentage det et par gange, til at se, hvordan andre " sider ", eller afsnit ser.,, om os, gå 45 - om os, for i dette afsnit, i bund og grund gentager processen med de skridt, 39 - 42, men de lag på den rigtige side i andet afsnit ændres titlen til " om os ".på dette punkt har jeg planlagt at tilføje en tabbed pane ting, men ændrer de tekniske vurderingsorganer holdninger til bunds med " bonveno " skrifttype skriver de tekniske vurderingsorganer under om os, stk.brug denne forgrundsviden farve for øje:&#c3dfff og hvidt for de udvalgte regning.endelig ved hjælp af den polygon redskab drage en blå himmel&#d5e5f2 trekant ved udvælgelsen, skridt 46 - dobbelt navigation bar, bare for at se, hvordan det ser ud, overlapper det foregående afsnit er " nav " mappe, men understrege ordet " om os " om sejlads forbindelser.sikre, at alle indholdet er mellem sektionens margener og organisere lag i mapper.,, portefølje, skridt 47 - portefølje afsnit, gentag det foregående trin "vejledning for at skabe en kasse af indhold, men i stedet for at bruge gul til afsnit anvende blå:Őa91 og anvende følgende farve for rubrik baggrund:fa5d2 og en hvid slagtilfælde lag stil.,, skridt 48 - porteføljeenheder placeholders i dette afsnit vil vi udforme en meget enkel portefølje galleri, ved hjælp af rektangel redskab at drage nogle lys, blå mærker på venstre side af nyligt oprettet rubrik indhold.og et stort rektangel på venstre side.tilføje, at hver rubrik et lag stil > apopleksi, 1px og hvid.ved hjælp af rektangel redskab tegnede små pladser på bunden af den store plads, der vil være thumbnails til kontrol af en slags overgang virkning, så lidt uvirksom tekst over hver square til at angive, hvilket indhold skal være placeret der.du kan bruge prøve billeder, hvis du vil.,, skridt 49 - sociale portefølje, efter den samme proces end skridt 43 tilføje et par links til de sociale medier, som flickr - eller linkedin.use " bonveno " skrift til titlen, og denne farve:"d8a.,, gå 50 - revidere everithing er på plads, at kopiere " nav " mappe igen og understrege ordet " portefølje ".alt er i sikre grænser for sektion 3 og organisere deres lag.,, kontakt os skridt 51 - kontakt baggrund og etiketter, vi er næsten færdige, så lad os tilføje en beholder til kontakt form.i dette tilfælde rektangel skal være grøntCa802 og slagtilfælde lighter grønne&#b8d942.titlen på afsnit bør være ", kontakt os ", og jeg bruger en hvid forgrundsviden til forøgelse af kontrast til baggrunden.og boksen lidt og to til at skabe de dobbelte linje virkning fra det tidligere indhold kasser. endelig ved hjælp af hvide forgrundsviden og en mindre størrelse af " bonveno " skrifttype skriver kontakt form etiketter.anvende drop shadow, vi benytter til titler på disse mærker samt.,, skridt 52 - henlede input kasser med afrundede rektangel værktøj (5px radius), drage følgende former, som vil være den faktiske input områder af vores kontakt form.i så fald anvende den indre skygge, farve - overlay - (# 4b6800) og slagtilfælde (# a8d02f) lag styles vist nedenfor.,, skridt 53 - tilføje input tekst ved hjælp af " bonveno " skrifttype - nogle dumme ord i input kasser, jeg bruger den her farve som forgrundsviden:&#afd437.under de input, kasser, som du kan tilføje nogle telefon køreledning såvel (føle sig fri til at ændre de oplysninger, som de ønsker).,, skridt 54 - kontakt knap, endelig, lad os tilføje kontakt knap med afrundede rektangel (5px radius) tegne en knap.anvende en drop shadow, en gradient - overlay - (# b17f02 -&#ffd101) og et slagtilfælde stil (# ffdb04).,, skridt 55 - kontakt knap tekst, fordi den knap er tekst, jeg bruger " futura black " skrifttype, men det er gratis at benytte enhver anden skrifttype.så anvende en indre skygge, en farve - overlay - (# 564100) og et slagtilfælde (# f0c401) teksten lag.du skal have noget lignende på bunden af billedet nedenfor.,, skridt 56 - revidere kontakt punkt, efter at duplikere et nyt tilfælde af sejlads menu, idet ordet " kontakt " denne gang.endelig sikre hele indholdet i kontakt side er indenfor rammerne af den fjerde del af design og organisere deres lag.,, konklusioner, og det er det!jeg håber, du kan lide denne tut, nu er det din tur til at smage din egen illustrative side web - design.,.,