skabe en side retro web - design, layout i photoshop,,,,,,, i denne forelæsning, vi vil forklare, hvordan man skaber en ene side retro web - design, bruger adobe photoshop.mens de fleste af designet skabes i photoshop, vil vi også anvende tegner til at skabe forskellige former og elementer.lad os komme i gang!det var en lektion, samarbejde med ciursa ionut.,, tutor aktiver, følgende aktiver blev anvendt i produktionen af denne forelæsning.,, retro ikoner, tileables former, pakning, tileables linjer, pakning, muncie skrifttype, oswald skrifttype, åbne uden skrifttype, leckerlione skrifttype, 960 forsyningsnettet, i denne forelæsning, vil vi anvende de 960 forsyningsnettet.download det og få det arkiv fil.så gå til " photoshop " folder (indenfor " skabeloner ").der vil du finde alle. psd filer.denne web - design, vil vi bruge 12 kolonner net. efter du åbne. psd fil i photoshop, du vil se 12 røde streger.det er det, vi skal bruge.du kan gemme den røde streger ved at klikke på øjet ikon af “ 12 kol net ” lag.i løbet af denne lektion, jeg vil bede dig om at skabe former med visse dimensioner.åben den info panel (vindue > info), og når man skaber en form, du vil se de nøjagtige bredde og højde i panelet.,. psd fil indeholder nogle retningslinjer, som vil være meget nyttige.for at aktivere dem gå på > vise > vejledninger, eller anvende den genvej ctrl /cmd +.jeg plejer at gemme røde streger og aktivere vejledninger, når jeg har brug for dem.det vil hjælpe os, gælder tilpasningen design - princip, som siger, at ethvert element af konstruktionen skal visuelt forbundet med en anden, og intet skal placeres tilfældigt. nu, hvor vi dækkede mig ind for at anvende 960 forsyningsnettet, kan vi gå videre med at skabe den faktiske web layout.hvis du vil vide mere om 960 forsyningsnettet, du kan læse en mere omfattende vejledning.,, trin 1 - oprettelse af dokumentet og skabe baggrund, åbne " 960_grid_12_col. psd " fil i photoshop.vi har brug for mere plads til at arbejde med, så vi bliver nødt til at øge lærred størrelse.gå til image > lærred størrelse (ctrl /cmd (alat /mulighed + c).sæt den bredde, 1200px og højden til 1700px.så klik på den øverste midterste anker.pointen er, at billedet vil vokse fra.,, nu vil vi skabe et mønster, der skal anvendes på webstedet baggrund.skabe et nyt dokument (ctrl /cmd + n) med de dimensioner, 1px af 3px.skabe et nyt lag (ctrl /cmd + forskydning + n)., zoom ind og bruge det rektangulære markise værktøj (m) at skabe en 1px af 1px udvælgelse på toppen af deres dokument.udfyld denne udvælgelse med sorte med maling spanden værktøj (m). slå ctrl /cmd + d deseiect.gem " baggrund " lag og gå til edit > at definere mønster.nu kan du afslutte dette dokument.,, gå tilbage til dit web - design dokument og skjule " 12 /net " lag, men har det altid på toppen af lag - panelet.den måde du kan aktivere det, og se om de elementer af deres web - design er rettet til nettet. gå til lag > nye fylde lag > farve og farven på&#f2f1ed. navnet på denne lag " vigtigste baggrund ".vi vil anvende et støjfilter til dette lag, men vi ønsker ikke at rasterize.i stedet vil vi anvende en klog ting, så vi kan udgive filtrene senere, hvis det er nødvendigt.det er altid en god praksis at arbejde som ikke - destruktiv som muligt og holde alt redigerbar., klik på " vigtigste baggrund " lag og udvælge konvertere til intelligent objekt.så gå til at filtrere > støj > tilføje, støj og anvende de indstillinger fra billedet nedenfor.dobbeltklik på denne lag at åbne lag stil vindue og anvende mønster, du har skabt.det vil give os en diskret - struktur, som vi vil bruge hele design.,, trin 2 - skabe overskriften baggrund, skabe en ny gruppe (lag > nye > - gruppen) og navn det " header ".en anden gruppe i det og det " header bg "., udvælge rektangel værktøj (e) og skabe et rektangel med dimensioner 1200px af 150px og farve&#e9e5db.navnet på denne lag " header bg " og at sætte det øverst i deres dokument, klik på " header bg " lag og udvælge konvertere til intelligent objekt.gå til at filtrere > støj > tilføje, støj og anvende de indstillinger fra billedet nedenfor., skabe en ny lodret linje - ligesom du skabte den tidligere.dette mønster, der er fastsat i dokumentet størrelse, 3px af 1px.efter du redde mønster (edit > at definere mønster), gå tilbage til dit web - design, dokument, double-click på " header bg " lag på lag - vindue åbne og anvende det mønster, du skabte, er der ikke en masse kontrast mellem overskriften baggrund og den vigtigste baggrund så vi vil tilføje et par separatorer præget at definere hver sektion bedre., vælges den linje værktøj (e) og den vægt, 1px.har skiftet centrale og skabe en vandret linje på bunden af dit hoved med den farve&#bcb9b1.navnet på denne lag " 1px linje ".dobbelt det lag (ctrl /cmd + j), udvælger flytte værktøj (v) og slå ned på din pil nøgle til at flytte denne lag 1px tastatur.ændrer farven på den nye linje til&#f8f7f5.,, brug det rektangulære markise værktøj (m) at skabe en udvælgelse på bunden af din overskrift (1).så gå til lag > nye fylde lag > gradient og anvende de indstillinger fra følgende billede (2).navnet på denne lag " nederste gradient " og dets blanding tilstand for at bløde lys 20%.,, at kopiere gradient lag og flytte den nye på toppen af hovedet.navnet på denne lag " top gradient ".klik på sin virksomhed beskrevet til at redigere gradient og sæt kryds i den modsatte løsning.det vil give os en top til bund gradient.,, nu vil vi tilføje et nyt mønster under overskriften.brug den rektangel værktøj (u), for at skabe en 160px høje rektangel under overskriften (1).navnet på denne lag " - " og dets fyld til 0%, double click her niveau til at åbne lag stil vindue og anvende et mønster - overlay - virkning (2).- jeg er fra tileables linjer pakke.på det tidspunkt, hvor denne lag er en skarp nederste kant.vi ønsker, at kant skal være mere blød, så vi skal bruge en maske.gå til lag > lag maske > afslører alt.så vælg gradient værktøj (g) med en sort til gennemsigtig hældning.har skiftet centrale og trække en lodret hældning på bunden af denne lag for at skjule den nederste kant (3), vil vi skabe en gradient under overskriften.brug det rektangulære markise værktøj (m) at skabe en udvælgelse, som du kan se på billedet nedenfor (1).gå til lag > nye fylde lag > gradient og anvende de indstillinger fra følgende billede. (2), hedder det lag " indhold top gradient " og dets blanding tilstand for at bløde lys 50% (3), trin 3 - at skabe logoet for logoet vi skal bruge to skrifttyper: muncie og damion.vælg den type redskab (t) og skriv navnet på deres websted med skrifttypen muncie med farve͏e70 og størrelsen 80px.tilføje en skygge i lag med de indstillinger fra billedet nedenfor (1).dette vil skabe en diskret fremhæve, at teksten og gøre det skarpere. brug den linje, værktøj (u) med forgrund farveͅd6f at skabe to linjer på toppen af din tekst lag og to andre i bunden.navn disse lag " 1px linje " (2).tag et kig på følgende billede for reference. vælg alle 4 linje lag og kopiere dem ved at trække dem i ", skabe nye lag " knap fra bunden af lag - panelet.ændrer farven på de nye retningslinjer for hvidt og fastsætte deres uklarhed til 50%.brug af værktøj (v), til at flytte disse linjer 1px under mørkere områder (3).gruppe alle linje lag sammen (vælg dem og slå ctrl /cmd + g).navn gruppen " linjer ".,, anvende den type redskab (t) til at skrive de ord " retro ". midt i den nederste linjer.brug den skrifttype damion med størrelsen 21px og farve͏e70.anvende en skygge i lag med de indstillinger fra billedet nedenfor.,, nu vil vi tilføje envato logo i midten af de to linjer.første, downloade ", drevet af envato api - og quot;. psd fil og åbne det i photoshop.dobbeltklik på virksomhed beskrevet af " vektor smart objekt " og sag vil blive åbnet i adobe illustrator., udvælge leaf genstand og ændre sin gradient farver til͏d6f ogb574f. brug den direkte udvælgelse værktøj a) at udvælge de blade og kopiere /cmd (ctrl + c).gå tilbage til photoshop og pasta (ctrl /cmd + v) som klog objekt.gå til edit > fri omdanne (ctrl /cmd (t), har skiftet centrale og omfang dette lag ned.navnet på denne lag " envato logo " og det i midten af de to linjer.- drop shadow lag stil fra " retro " tekst lag og sæt det her.,, vi ønsker at skjule linjer under envato logo og " retro " tekst lag.vi kan gøre dette ved hjælp af en maske.klik på " linjer " gruppe gøre det aktive.brug det rektangulære markise værktøj (m) at oprette to valg, som du kan se på billedet nedenfor (note: har skiftet nøgle, efter du skabe en første udvælgelse, så du kan tilføje det andet). gå til lag > lag maske > skjule udvælgelse.- linjerne under envato logo og teksten lag skal være skjult.,, trin 4: at skabe sejlads bar bånd, navigation bar til web - design er et bånd, der skaber vi med figurer, kloge ting, støj - og lag styles.første, skabe en ny gruppe og navn det ", navigation og quot;.så skabe en gruppe indenfor de første og navn det " bånd "., anvende rektangel værktøj (u), for at skabe et rektangel med dimensioner 610px af 44px og farve&#d8cfba.navnet på denne lag " rektangel ", right-click på og udvælge konvertere til intelligent objekt.anvendes et støjfilter (filter > støj > der tilsættes støj) ved hjælp af indstillingerne fra billedet nedenfor.dobbelt klik på denne lag på lag - vindue åbne og anvende de indstillinger fra billedet nedenfor.- jeg er fra tileables former pakke.slagtilfælde farve, som jeg er&#b1aa99. brug pennen værktøj (p) at skabe form fra slutningen af det bånd.tag et kig på følgende billede i henvisning (1)., navn denne lag " left, x ", og flytte den under " rektangel " lag.udligning af denne form 10px ned fra rektangel øverste kant og 10px til højre fra rektangel er venstre kant (2).- klik på dette lag og udvælge konvertere til intelligent objekt.anvende et støjfilter med indstillinger fra billedet nedenfor.dobbeltklik på denne lag at åbne lag stil vindue og anvende de indstillinger fra følgende billede (3).slagtilfælde farve, som jeg er d9684.,, at kopiere " left, x " lag (ctrl /cmd + j) og gå til edit > omdanne > flip vandret.navn på de nye lag " rigtige ende ", og flytte den til højre for det rektangel.- så sæt den indre skygge vinkel i dette lag til 180 grader, brug pennen værktøj (p) med forgrund farvec6554 at skabe en trekant, der forbinder rektangel med udløb i form af båndet (1).i det billede, under det røde trekant, til at gøre den mere synlig., navn denne lag " venstre trekant ", right-click på og udvælge konvertere til intelligent objekt.anvendes et støjfilter med indstillinger fra billedet nedenfor. (2), overlappe denne lag (ctrl /cmd + j) og gå til edit > omdanne > flip vandret.navn på de nye lag " vinkel ", og flytte den til højre side af båndet.,, nu vil vi tilføje nogle skygger og fremhæver, at båndet.brug det rektangulære markise værktøj (m) at skabe en udvælgelse med dimensioner 10px af 44px i venstre side af rektangel (1).gå til lag > nye fylde lag > gradient og anvende de indstillinger fra billedet nedenfor.navnet på denne lag " venstre fremhæve " og dets blanding tilstand for at bløde lys 70%. (2), skabe en ny udvælgelse med dimensioner 5px af 44px (3).gå til lag > nye fylde lag > gradient og anvende en&#b5ae9d gennemsigtige hældning (4).navnet på denne lag " venstre skygge "., kopiere disse to lag og flytte dem til højre for det rektangel.så ændre gradient vinkel på disse to lag til 180 grader (5),.,, nu vil vi skabe en syet bånd virkning ved hjælp af de stiplede linjer.først skal vi skabe et nyt mønster.skabe et nyt dokument (ctrl /cmd + n) med de dimensioner, 10px af 1px., zoom ind og bruge det rektangulære markise værktøj (m) at skabe en udvælgelse af de dimensioner, 6px af 1px, som du kan se på billedet nedenfor.skabe et nyt lag, og fyld udvælgelse med sort. slå ctrl /cmd + d deseiect.gem " baggrund " lag og gå til edit > at definere mønster.gem dit mønster og så tæt på dette dokument,.,, gå tilbage til dit web - design dokument og skabe en ny gruppe i " bånd ". gruppe.navn en " de stiplede linjer "., bruge linjen værktøj (u), for at skabe en 1px horisontal linje øverst på båndet er rektangel (1).de udfylder denne lag til 0%.i så fald anvende den stiplede linje mønster, der tidligere (2), navnet på denne lag " 1px stiplede linje ", right-click på og udvælge konvertere til intelligent objekt.dobbeltklik på denne lag at åbne lag stil vindue og anvende en farve - overlay - virkning ved hjælp af farve&#b1aa99. (3), nu vil vi tilføje en lysere stiplede linje for at få det syet virkning ser mere skarp.to eksemplarer af denne lag (ctrl /cmd + j) og ændre dens farve til&#e4ddcd.brug af værktøj (v), til at flytte den stiplede linje 1px under den første (4), udvælger de to stiplede linje lag og kopiere dem.så kom de nye linjer i bunden af rektangel (5), trin 5 - at skabe bånd baggrund, nu er vi ved at skabe en baggrund for båndet, så det ligner det er viklet rundt om en mur., skabe en ny gruppe, hedder det " bånd bg " og læg det under " bånd ". gruppe.brug den rektangel værktøj (e) at skabe en sort rektangel under båndet.sørg for dette rektangel er placeret inden for de to bånd trekanter.navnet på denne lag " bånd bg " og dets blanding tilstand for at bløde lys 20%.,, brug det rektangulære markise værktøj (m) at skabe en udvælgelse i venstre side af båndet baggrund (1). gå til lag > nye fylde lag > gradient og anvendelse indstillingerne fra billedet nedenfor (2).den blanding tilstand af denne lag bløde lys 40% (3), bruge linjen værktøj (e) med den farve&#b0a793 for at skabe en 1px lodret linje over venstre kant af båndet baggrund.kopi af denne linje lag (ctrl /cmd + j), flyt den nye 1px til højre og ændre dens farve til&#dbd5c6 (4), tilføje samme stigning og linjer på højre side af båndet baggrund som godt.husk på, at du er nødt til at sætte gradient vinkel til 180 grader og slå to lag vandret linje. (5), tilsættes en maske til " bånd bg " - gruppen (lag > lag maske > afsløre alle).så vælg en lineær sort til gennemsigtig hældning (g) og maske ud af toppen og bunden inden for denne gruppe.i billedet nedenfor kan du se, hvordan min maske ligner (hvis du holder af alat /mulighed og klik på virksomhed beskrevet af den maske, du vil være i stand til at se det hele billedet).,, trin 6 - tilføje sejlads, nu vil vi tilføje sejlads menu poster og retro - ikoner næste til hver enkelt.vælg den type redskab (t) og skriver navn for deres navigation poster med skrifttypen oswald med størrelsen 16px og farvef7866.at angive det aktive side, ændre farven på det første punkt på dagsordenen for en mørkere brun (# 615c4f). lad dette sæt af retro ikonerne og åbne. ai fil i adobe tegner.udvælger hver ikon, at du ønsker at bruge kopi (ctrl /cmd + c).så gå til photoshop og pasta hver ikon (ctrl /cmd (v), som er en klog ting.use fri omdanne (ctrl /cmd + t) at ændre størrelsen af disse lag. anvende en farve - overlay - virkning på hver ikon med samme farve som dem, der anvendes til teksten lag.så anvende en drop shadow virkning på hele teksten og ikon lag med de indstillinger fra billedet nedenfor.,, trin 7 - at skabe en ", kontakt os " tegn, i stedet for at kontakte led i navigation bar, vil vi skabe et retro - kvittere for det.vi skal bryde nærhed bestemt princip, som siger, at forhold bør grupperes sammen og har tilsvarende visuelle karakteristika.kontakt forbindelse er en del af sejlads, men det har en anden form end andre navigations - produkter for at gøre det anderledes.husk på, at når du vil bryde en design - princippet skal: a) ved princippet og b) har en grund til at bryde det, skabe en ny gruppe og navn det " kontakt ".vælg afrundet rektangel værktøj (e), fastsatte radius til 4px og skabe en afrundet rektangel med dimensioner 130px af 180px og farve&#c7c1b3., navn denne lag ", grænse - og quot;, right-click på og udvælge konvertere til intelligent objekt.anvende et støjfilter ved hjælp af indstillingerne fra billedet nedenfor.dobbeltklik på denne lag at åbne lag stil vindue og anvende de indstillinger fra følgende billede.for slagtilfælde virkning, jeg brugte farve&#a9a396.- jeg er fra tileables linjer pakke.,, udvælge de afrundede rektangel værktøj (e), fastsatte radius til 2px og skabe en afrundet rektangel med dimensioner 122px af 72px og farve&#f3f0e8.flyt dette rektangel i midten af den foregående., hed det lag " kontakt bg ", right-click på og udvælge konvertere til intelligent objekt.anvende et støjfilter ved hjælp af indstillingerne fra billedet nedenfor.dobbeltklik på denne lag at åbne lag stil vindue og anvende de indstillinger fra følgende billede.for de indre skygge virkning, jeg brugte den farve&#a9a396 og for de indre glød, jeg brugte den farve&#f5f2e9.,, nu skal vi dele det skilt i to dele, en for hver tekst lag vil vi tilføje senere.vælg rektangel værktøj (e) og skabe et rektangel med dimensioner 120px af 32px og farve&#eae5d9.navnet på denne lag " top bg ", right-click på og udvælge konvertere til intelligent objekt.flyt dette rektangel i toppen af mindre afrundet rektangel.så right-click på dette lag og udvælge skabe udklip maske.tilføj et støjfilter i lag med de indstillinger fra billedet nedenfor.derefter tilsættes en dråbe skygge virkning ved hjælp af farve&#c3beb1 og indstillinger fra følgende billede.,, nu vil vi skabe en afrundet rektangel med et for slag.da photoshop, ikke giver de funktioner for at skabe stiplede linje, vi skal bruge illustrator., åbne et nyt dokument, tegner.vælg afrundet rektangel, værktøj og klik på deres dokument til at bringe de afrundede rektangel vindue.sæt 171px bredde, højde, 71px og radius til 2px.fjern udfylde i denne form og tilføje en 1pt sorte slagtilfælde.- slagtilfælde panel (vindue > apopleksi) og anvende de indstillinger fra følgende billede at skabe et knust slagtilfælde.,, udvælge afrundet rektangel kopi (ctrl /cmd + c).gå tilbage til din photoshop dokument og pasta, det er en smart objekt (ctrl /cmd (v)).navnet på denne lag " stiplede linje " og det i midten af " kontakt bg " lag.tilføje en farve - overlay - effekt til " stiplede linje " lag med farveξf82.,, vælge den type redskab (t) og skrive ordene ", få en gratis citerer " i den øvre del af tegn.jeg brugte den skrifttype leckerlione med størrelsen 14px og farveδf84.jeg valgte denne skrifttype, i stedet for damion (som vi brugte i logo), fordi det er mere læselig på denne størrelse, anvende den type redskab (t) at tilføje ordene ", kontakt os " i den nedre del af tegn.jeg brugte den skrifttype oswald med størrelsen 19px og farveδf84. anvende en drop shadow virkning på disse to tekst lag med de indstillinger fra billedet nedenfor.,, kopi af side ikoner fra retro ikoner sæt, du har downloadet og sæt det i photoshop som en klog ting.navnet på denne lag " hånd - ikon " og det i midten af to afsnit af tegn. dobbelt klik på den her til at åbne lag stil vindue og anvende de indstillinger fra følgende billede.for farve - overlay - virkning, jeg brugte den farve󬧟.,, at vi nu er nødt til at tilføje et reb hold skiltet.skabe en ny gruppe, hedder det " reb og quot, og flytte den på bunden af " kontakt ". gruppe.- så brug ellipse værktøj (u), for at skabe et søm.vælg den linje værktøj (e), der er den vægt, 1px og skabe to skrå retning, som du kan se på billedet nedenfor.brug af farverf7866 for alle disse former.,, trin 8 - at skabe " tjenesteydelser " område for " tjenesteydelser " område har vi brug for et hexagon form, som vi vil bruge som baggrund for de tre indhold kolonner.vi vil skabe denne form bruger adobe tegner.åbne et nyt dokument i illustrator og udvælge polygon værktøj.klik på dit billede at åbne polygon vindue, hvor vi kan få karakteristika i den form.sæt den radius til 70px og sider - 6.klik nu for at skabe den form.,, der fylder farve af den polygon, ate8e8e. derefter tilsættes et 20px slagtilfælde med samme farve.- slagtilfælde panel (vindue > apopleksi) og hjørnet rundt med.så right-click i denne form, gå til at omdanne > rotere, sæt vinklen på 90 grader og klik - fra mulighed bar over dit image, der er bredden af denne form for 140px og dens højde, 162px.,, brug udvælgelse værktøj (v) at udvælge de sekskantede form og kopiere den (ctrl /cmd + c).gå tilbage til din photoshop dokument og pasta, det er en smart objekt (ctrl /cmd (v)).gå til edit > fri omdanne (ctrl /cmd (t), har skiftet centrale og omfang dette lag, indtil dens bredde er 300px eller fire 960 grid - kolonne (du kan se de dimensioner, form, at deres omdanner i info - panelet).sæt udfylde denne lag til 0%.så double-click på den og anvende den ", dot - 2 " mønster fra tileables former pakke.navnet på denne lag " halftone mønster ".det lag i en gruppe (ctrl /cmd + g) og navn det " web - design ".så skabe en ny moderkoncern og navn det " tjenesteydelser ".,, klik på " halftone mønster " lag og udvælge konvertere til intelligent objekt.så anvende en farve - overlay - virkning for dette lag med farve&#a7c5bd.,, kopi igen hexogon form fra illustrator og sæt det i photoshop dokument som en klog ting.gå til edit > fri omdanne (ctrl /cmd + t) og den horisontale og vertikale plan til 175% fra mulighed bar over dit image. (1), hedder det lag ", grænse - og quot, og flytte den til midten af første hexagon form.for at bringe disse to lag ordentligt, være sikker på, at du har en klog leder aktiveret (betragtning > vise > klog leder).flyt den her i de første hexagon form, og du vil se nogle pink linjer, der viser, hvordan de to lag, tilpasses.tilføj et farve - overlay - effekt til ", grænse - og quot; lag med farve&#a7c5bd. (2), er vi nødt til at anvende et støjfilter til dette lag.men farven overlay virkning vil gå over støj filter.for at løse dette problem, vil vi nødt til at omdanne dette lag i en smart objekt.højreklik på ", grænse - og quot; lag og udvælge konvertere til intelligent objekt.så gå til at filtrere > støj > tilføje, støj og anvende de indstillinger fra billedet nedenfor. (3), double click her niveau til at åbne lag stil vindue og anvende de indstillinger fra følgende billede for ydre glans.den farve, som jeg erYb9ac (3), kopi hexogon form endnu en gang fra illustrator og sæt det i photoshop som en klog ting.gå til edit > fri omdanne (ctrl /cmd + t) og den horisontale og vertikale plan til 170%.navnet på denne lag " kolonne bg ", og flytte den til midten af de andre to hexagon former., tilføje en farve - overlay - virkning for dette lag med farve&#f5f2ea.højreklik på det og udvælge konvertere til intelligent objekt.anvendes et støjfilter ved hjælp af indstillingerne fra billedet nedenfor.dobbeltklik på denne lag at åbne lag stil vindue og anvende de indstillinger fra følgende billede.for slagtilfælde virkning bruge farveSa098.,, trin 9 - at tilføje " tjenesteydelser " område indhold, vælge den type redskab (t) og skrive det overordnede " web - design " anvendelse af skrifttype muncie med størrelsen 48px og farveb9d94.derefter tilsættes en hvid drop shadow virkning ved hjælp af indstillinger fra billedet nedenfor.,, anvende den type redskab (t) at skabe en bred (tekstboks 230px kan du se bredden af din tekst boks, som de skaber det i info - panelet).tilføje et punkt i teksten i denne kasse med skrifttypen åbne uden lys med farvec574f og størrelsen 15px. for at gøre teksten mere læselig, vi vil sætte den linje, højde, 1.6em. vores skriftstørrelsen er 15px.hvis vi mangedobler 15 med 1,6 - 24.det er en pixel værdi af linjen højde.gå til figur panel, og den fører til 24px.,, nu vil vi tilføje en " betragtning portefølje " knapper i denne kolonne.senere vil vi skabe " portefølje " område, og vi ønsker, at brugeren være i stand til at vælge en af de tjenesteydelser, der tilbydes, og få porteføljeenheder for denne tjeneste under dette område., udvælge afrundet rektangel værktøj (e) og skabe en afrundet rektangel med dimensioner 120px af 30px og farve&#a7c5bd. navnet på denne lag " knap ", right-click på og udvælge konvertere til intelligent objekt.gå til at filtrere > støj > tilføje, støj og anvende de indstillinger fra billedet nedenfor (1).så double-click i dette lag at åbne lag stil vindue og anvende de indstillinger fra følgende billede (1).vælg den type redskab (t) og skrive ordene " se portefølje " ved hjælp af skrifttype, oswald med størrelsen 17px og farve&#f9f9f9.denne tekst lag midt i din knap.derefter tilsættes en dråbe skygge virkning for dette lag med de indstillinger fra billedet nedenfor (2).den farve, som jeg erSa098., lægger disse to lag i en gruppe og navn det " knap ".,, bruge linjen værktøj (e) med den farve&#cbc5b7 at skabe to vandrette linjer under overskriften i denne kolonne.den øverste linje er 200px bred, og den anden er 240px bredt, og de har en 9px kløft mellem dem.navn disse lag " 1px linje "., overlapper de to linje lag og de nye 1px ned.ændrer farven på de nye retningslinjer for hvidt og fastsætte deres røgtæthed 40%. gruppe alle disse linje lag og navn gruppen " linjer ".brug det rektangulære markise værktøj (m) at oprette et udvalg på det område, hvor linier krydser med teksten.sørg for, at de " linjer " - koncernen er aktiv, og gå til lag > lag maske > skjule udvælgelse.,, skabe to kolonner for " tjenesteydelser " område, ligesom du skabte " web - design " kolonne.alle de indstillinger, er de samme, bortset fra de farver, som de kan få fra følgende billede.,, vi er færdige med " tjenesteydelser " område.her har vi anvendt tæt og hyppig designprincipper.vi gentog det i form af hver kolonne og skrifttyper tyder på, at de tre søjler er indbyrdes forbundne og har tilsvarende funktionaliteter og indhold., skrifttype valg, så langt vi brugte fem skrifttyper i denne konstruktion.vi kan udelukke manuskriptet skrifttyper, som blev kun anvendt én gang til forskellige formål og tale om de andre tre: muncie, oswald og åbne sans., jeg valgte den skrifttype muncie, fordi det er et smukt designet kondenseret skrifttype, der svarer til den stil, jeg ønskede at skabe.vi brugte denne skrifttype til logoet og " tjenesteydelser " område overskrifter.det er ikke nok med læselig skrifttype små størrelser (f.eks. navigation bar), så jeg tilføjede - blandingen.disse to fonte går godt sammen, fordi de deler en karakteristisk: de er både kondenseret typografiske skrifttyper.for tekstblokke, valgte jeg den åbne uden skrifttype, familie, fordi det er 10 forskellige måde at vælge imellem.lyset version af denne skrifttype, som vi vil bruge de mest, skaber en god sammenligning med andre skrifttyper.trin 10 -, skabe " portefølje " område, " portefølje " område vil være knyttet til tjenesteydelser.da vi er ved at skabe en ene side websted, har vi brug for funktionerne i udvælgelsen af en portefølje kategori og skaf en liste af porteføljen punkter fra denne kategori. vi skal bruge tre tjenester som kategorier.for at angive, hvilken kategori er udvalgt, vil vi anvende samme farve, som vi anvender til " tjenesteydelser " område.når en bruger klik på siger, " branding ", service, porteføljen afsnit under vil have en rød slagtilfælde, fremhæve farve og overordnede farve, vil også være rødt, og der vil være en rød bar, der forbinder " branding " kolonne med porteføljen kasse.disse tre visuelle indikatorer vil være tilstrækkeligt til, at brugeren hurtigt forstår, hvordan porteføljen afdeling arbejder. lad os begynde at udforme den " portefølje " område.skabe en ny gruppe og navn det " portefølje ".en anden gruppe i denne og navn det " portefølje bg "., udvælge rektangel værktøj (e) og skabe et rektangel med dimensioner 960px af 310px og farveYb9ac. navnet på denne lag " første grænse " og dens uklarhed til 20%.så vælg flytte værktøj (v) og flytte denne rektangel 60px under " tjenesteydelser " område.,, skabe en ny rektangel med dimensioner 950px af 300px og farve&#a7c5bd. navnet på denne lag " anden grænse " og det i midten af første rektangel.dobbeltklik på denne lag at åbne lag stil vindue og anvende de indstillinger fra følgende billede.den farve, som jeg, der anvendes til indre skygge og slagtilfælde virkninger erSa098.,, skabe en ny rektangel med dimensioner 940px af 290px og farve&#f5f2ea.navnet på denne lag " portefølje bg ".dobbeltklik på denne lag at åbne lag stil vindue og anvende de indstillinger fra følgende billede.slagtilfælde farve, som jeg er&#f9f8f5.,, " portefølje " område vil være dykkede ned i to kolonner.den venstre vil vise en liste over thumbnails.når en bruger km på en virksomhed beskrevet, højre kolonne, vil vise mere information om denne portefølje punkt. nu vil vi skabe baggrund for højre kolonne.vælg rektangel værktøj (e) og skabe et rektangel med dimensioner 640px af 290px og farve&#ece8df.navnet på denne lag " aktive punkt bg ", right-click på og udvælge konvertere til intelligent objekt., tilføje et støjfilter ved hjælp af indstillingerne fra billedet nedenfor.så double-click i dette lag at åbne lag stil vindue og anvende de indstillinger fra følgende billede.den indre glød farve, som jeg er d9180.,, skabe to lodrette linjer med vægt 1px over venstre kant af " aktiv portefølje bg " rektangel.for den mørke bruge farve&#c3b9ab og for den lette bruge farve&#f9f8f5., så vælg rektangel værktøj (e) og skabe et rektangel med dimensioner 4px af 80px, der forbinder bunden af " web - design " kolonne med " portefølje " område grænse.sæt den farve i dette lag&#a7c5bd og navn det " konnektor ".,, trin 11 - at tilføje den portefølje, skabe en ny gruppe og navn det " porteføljeenheder ".kopi af hexogon form fra illustrator og sæt det i photoshop som klog objekt.vi gentager de sekskantede form for at opretholde samme visuel stil i hele design. gå til edit > fri omdanne (ctrl /cmd + t) og den horisontale og vertikale plan til 50%.tilføje en farve - overlay - virkning for dette lag med farve&#f4eee7 og en 1px indenfor slagtilfælde virkning ved hjælp af farve&#c3b9ab. navnet på denne lag ", grænse - og quot;.dobbelt ", grænse - og quot; lag (ctrl /cmd (j), right-click på og udvælge klart lag stil.så gå til edit > fri omdanne (ctrl /cmd + t) og den horisontale og vertikale plan