skaber en struktur med photoshop tekstureret web layout,,,,,,, denne lektion er et samarbejde med en meget god ven ciursa ionut.denne web - design, tutor vil vi skabe en portefølje web indretning med stof mønstre.du vil blive truffet ved udformningen af logoet bruger adobe illustrator, skabe) for " tjenesteydelser " område, og hvordan til at anvende struktur til opstilling i en diskret måde, der vil øge kvaliteten af det endelige resultat.lad os komme i gang!,,,,,,, tutor aktiver, følgende aktiver blev anvendt i produktionen af denne forelæsning.,, 960 forsyningsnettet, stof mønstre, diskret grunge børster, oswald skrifttype, twitter fugle, indførelse i denne forelæsning, vil vi anvende de 960 forsyningsnettet.download det og få det arkiv fil.så åbn den “ 960_grid_12_col. psd ” fil i photoshop., 12 røde piller, som du ser, er det, at vi kommer til at bruge.du kan gemme den røde streger ved at klikke på øjet ikon af “ 12 kol net ” lag.denne psd fil indeholder nogle retningslinjer, som vil være meget nyttig.for at aktivere dem gå på > vise > vejledninger, eller anvende den genvej kommando /ctrl +.jeg plejer at gemme røde streger og aktivere vejledninger, når jeg skal bruge dem. også klog leder er meget nyttige ved udformningen af net opstillingsskemaer.aktiver /deaktiver dem, som vil se > vise > klog leder.de vil hjælpe dig bringe hvert lag afhængigt af situationen for andre lag. under denne forelæsning, du vil blive bedt om at du skaber former med visse dimensioner.når man laver en form, du vil se de nøjagtige bredde og højde i info - panel (vindue > info).nu, hvor vi dækkede mig ind for at anvende 960 forsyningsnettet, kan vi gå videre med at skabe den faktiske web layout.lad &rsquo er i gang!,, trin 1: oprettelse af dokumentet, åbne " 960_grid_12_col. psd " fil i photoshop.så gå til image > lærred størrelse og den bredde, 1200px og højden til 2400px.det vil give os plads nok til at arbejde med.,,,, trin 2: at skabe overskriften vores web layout, skabe en ny gruppe og navn det " header ".vælg rektangel værktøj (e) og skabe et rektangel med dimensioner 1200px af 520px og farveɓe61.navnet på denne lag " header bg ", 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.dette vil skabe en lækker diskret tekstur.,,, downloade denne pakke stof mønstre og åbne. pat fil i photoshop.så double-click på " header bg " lag på lag - vindue åbne og tilføje et mønster - overlay - virkning med indstillinger fra billedet nedenfor og et mønster fra den pakke, jeg downloadede.,,,, trin 3: at skabe sejlads baggrund, udvælge rektangel værktøj (e) og skabe et rektangel på toppen af deres dokument med en højde 120px og farve�.navnet på denne lag " navigation bg ".de udfylder denne lag på 20%, double-click på det og bruge de indstillinger fra billedet nedenfor for indre skygge.,,, nu vil vi tilføje en cirkel til " navigation bg " lag for at gøre plads til logoet på et senere tidspunkt.vælg den ellipse værktøj (e) og klik på " der tilsættes til at forme areal (+) " knap fra mulighed bar over dit image. klik på vektoren maske af " navigation bg " lag til det aktive.så bruger den ellipse, værktøj, har skiftet centrale og skabe en cirkel midt i navigation bar med en radius på 140px.tag et kig på følgende billede for reference.,,,, trin 4: at skabe en stiplede linje mønster, skaber et nyt dokument (kommando /ctrl + n) med de dimensioner, 3px af 1px.- så meget, som du kan.så vælg rektangulære markise værktøj (m) og skabe et kvadrat, udvælgelse, som kan ses i det følgende billede.skabe et nyt lag, og fyld udvælgelse med hvide.gem " baggrund " lag ved at klikke på sit øje ikon.så slå kommando /ctrl + d deseiect.gem dit mønster, som skal edit > at definere mønster.giv dit mønster, et navn og klik -, gå tilbage til dit web layout dokument.vælg den linje værktøj (e) og den vægt, 1px.så har skiftet centrale og skabe en vandret linje på bunden af din navigation bar. sæt udfylde dette lag på 0% og uigennemsigtighed, til 20%.dobbeltklik på denne lag at åbne lag stil vindue og tilføje det mønster, du skabte tidligere. nu er vi nødt til at slette den stiplede linje, der går over cirklen.brug det rektangulære markise værktøj (m) at udvælge det område.så gå til lag > lag maske > skjule udvælgelse.,, løntrin 5: forøgelse af stigninger i header baggrund, brug det rektangulære markise værktøj (m) at skabe en udvælgelse, som du kan se på billedet nedenfor (1).så gå til lag > nye fylde lag > gradient og anvende de indstillinger fra følgende billede. (2), klik på masken i dette lag til det aktive.så vælg en sort blød børste, (b) og male det over det område, hvor den gradient dækker navigation bar cirkel (3).sæt den uklarhed i dette lag til 3% (4).,, nu vil vi tilføje en radial gradient på bunden af header baggrund.har kommandoen /ctrl centrale og klik på virksomhed beskrevet af " header bg " lag til at lade en udvælgelse af det.så gå til lag > nye fylde lag > gradient og anvende de indstillinger fra billedet nedenfor (1).med gradient fylde vindue stadig er åbnet, klik på dit billede og trække ned.den blanding tilstand af denne lag bløde lys 40%.,, trin 6: forøgelse af diskret grunge børster til header baggrund, downloade denne pakke af børster og åbne dem i photoshop.skabe en ny gruppe og navn det " børster ".skabe et udvalg af " header bg " lag (har kommandoen /ctrl centrale og klik på sin virksomhed beskrevet).sørg for, at de " børster " lag er aktive og gå til lag > lag maske > viser udvælgelse.nu er alt vi satte i denne gruppe kun vil være synlig over hovedet., skabe et nyt lag i denne gruppe.sæt den forgrund farve hvid.vælg den børste, værktøj, (b) og bruge nogle af de børster du downloadede at tilføje en diskret grunge virkning til hovedet.skabe et nyt lag for hver børste dig anvendelse og tilpasse opacitet af hvert lag.- så sæt blandingen tilstand af " børster ". gruppe til at bløde lys.tag et kig på følgende billede som reference.,, trin 7, vælges den linje værktøj (u), har skiftet centrale og skabe en vandret linje med vægt 1px og farve얅a. navnet på denne lag " 1px linje ", og læg det på bunden af header område.dobbelt det lag (kommando /ctrl + j), udvælger flytte værktøj (v) og slå op pil nøgle på din tastatur til at flytte den til en pixel.ændrer farven af denne linje tile9496.,, trin 8: etablering af logoet, til at skabe det logo, vil vi bruge begge adobe photoshop og tegner.først, vil vi skabe den tekst og en cirkel med for slag i illustrator, og så vil vi færdiggøre logo med photoshop. fyr op i adobe illustrator og skabe et nyt dokument.vælg den type redskab (t) og skrive " mit blad ".sætte hvert ord i en særskilt objekt.den skriftstørrelse, at jeg er kaldt akzidenz grotesk kondenseret medium kursiv.,, udvælge to tekst objekter ved hjælp af udvælgelsen værktøj (v) og gå imod > udvide.det vil gøre teksten lag ændres, så vi kan ændre ophæng.,, udvælge ord " min ", og træk den ned for at forbinde de nederste del af brev " y " med den øverste del af brev " f ".,, den direkte udvælgelse værktøj a) at udvælge de anker punkt fra bunden af " y " brev, som du kan se på billedet nedenfor.så slog det backspace nøgle til at slette dem. brug pennen værktøj (p) at rekonstruere den nederste del af brev " y " og forbinde det til " f " brev.sørg for, at du tæt på vejen.tag et kig på følgende billede som reference.og nu er vi nødt til at skabe en cirkel med en hvid for slagtilfælde.vælg den ellipse værktøj (l), har skiftet centrale og skabe en cirkel uden fyld og en 1pt hvide slagtilfælde.så gå til slagtilfælde panel (vindue > apopleksi) og anvende de indstillinger fra følgende billede., ændre farve af teksten til hvide.jeg har tilføjet et gråt rektangel under alle genstande med henblik på at se teksten og den cirkel.,, at logoet i adobe photoshop, gå tilbage til photoshop, skabe en ny gruppe og navn det " logo ".så vælg ellipse værktøj (e) og skabe en cirkel med dimensioner 125px af 125px og farvee3134., hed det lag " cirkel ", double-click på det åbne lag stil vindue og tilføje en mønster - overlay - effekt ved brug af følgende indstillinger.læder - mønster, at jeg er fra den pakke, jeg downloadede i begyndelsen af denne forelæsning.,, skriv teksten af genstande fra illustrator, gå tilbage til photoshop og sætter dem som en klog ting.use fri omdanne (kommando /ctrl + t) at ændre størrelsen af det lag, og put det i midten af den mørke cirkel.tilføje en farve - overlay - virkning for dette lag med farve&#f4f4f4.,, kopi bristede cirkel illustrator og sæt det i photoshop som klog objekt.use fri omdanne (kommando /ctrl + t) at ændre størrelsen af det lag, og put det i midten af mørke cirkel.navnet på denne lag " knust cirkel " og dets røgtæthed 60%.,, at kopiere " knust cirkel " lag (kommando /ctrl + j).use fri omdanne (kommando /ctrl + t) at ændre størrelsen af det lag, indtil den når den buede ende under logo.navnet på denne lag " nederste grænse "., brug det rektangulære markise værktøj (m) at udvælge den øvre del af cirklen, som du kan se på billedet nedenfor.så gå til lag > lag maske > skjule udvælgelse.dette vil give en prikket snoede linie under logo, ligesom vi vil.,, trin 9: forøgelse af sejlads, skabe en ny gruppe og navn det ", navigation og quot;.vælg den type redskab (t) og skriver navn for deres navigation menu poster med skrifttypen oswald, og farven hvid.spred dine navigation poster på lige fod i venstre og højre side af logo, at stil for aktive menupunkt, udvælge de afrundede rektangel værktøj (e) og radius til 4px.så skabe en afrundet rektangel under en af vores navigation poster med højden 32px og farven sort. sæt udfylde dette lag på 25%, double-click på det åbne vindue lag stil og bruge de indstillinger fra følgende billede.,, trin 10: at skabe " var " område, skaber en ny gruppe, og det var &" quot;.vælg den type redskab (t) og skriv navnet på dit projekt med skrifttypen oswald med størrelsen 22pt og farven hvid.læg den her i venstre side af layout og på 50px under sejlads bar.,, vælges den linje værktøj (e) og skabe en vandret linje med bredde 300px.de udfylder denne lag på 0% og uigennemsigtighed, til 50%.dobbeltklik på dette lag og tilføje den stiplede linje mønster, der tidligere i denne forelæsning, anvende den type redskab (t) at tilføje en blok af teksten under vandret.use skrifttypen helvetica med farven hvid og størrelsen 13pt.gå til figur panel (vindue > karakter, og den førende (afstanden mellem linjerne af typen) til 24 pt, for at gøre teksten mere læselig.,, at skabe en " læs mere " knap, skabe en ny gruppe og navn det " knap ".vælg rektangel værktøj (e) og radius til 4px.så skabe en afrundet rektangel under blok af tekst med størrelsen 110px af 30px og farve ca2a6.navnet på denne lag " knap ".dobbelt " knap " lag (kommando /ctrl + j) og flytte denne nye lag under den oprindelige.vælg flytte værktøj (v) og slå ned på dit tastatur, når pil til at flytte denne lag en pixel.sæt den uklarhed i lag med 50%.dobbelt det foregående lag (kommando /ctrl + j) og ændre dens farve til픹b. denne lag en pixel ned og dens uklarhed med 100%, nu skal du have tre " knap " lag.dobbeltklik på toppen, der åbner lag stil vindue og anvende de indstillinger fra billedet nedenfor.den farve, der brugte jeg for slagtilfælde virkning er픹b.,, har kommandoen /ctrl centrale og vælge de to " knap " lag fra bunden.højreklik på en af dem og vælge konvertere til intelligent objekt.dobbelt klik på denne lag på lag - vindue åbne og anvende de indstillinger fra følgende billede af gradient overlap.dette vil tilføje en diskret 3d virkning på knappen.,, har kommandoen /ctrl + skift nøgler og klik på virksomhed beskrevet af " knap " smart objekt, og så på vektoren maske af " knap " lag.dette vil skabe en udvælgelse af hele den knap.skabe et nyt lag, og fyld udvælgelse med hvide.slå kommando /ctrl + d deseiect., klik på dette 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.den blanding tilstand i dette lag sig 25%. og nu vælge den type redskab (t) og skrive " læs mere " på din knap med skrifttypen oswald med størrelsen 15pt og farven hvid.dobbeltklik på denne lag at åbne lag stil vindue og anvende de indstillinger fra følgende billede for drop shadow.,, trin 11: at tilføje et billede, slider, skabe en ny gruppe og navn det ", image slider ".vælg rektangel værktøj (e) og skabe et rektangel med dimensioner 620px af 300px.navnet på denne lag " image_holder ", double-click på det åbne vindue og lag stil brugt fastsættelse af følgende billede for ydre glans., åbne et billede i photoshop, at du vil have, at du findes i dette område, og få det ind i dit spind layout dokument ved hjælp af flytte værktøj (v).navnet på denne lag ", image ", og sætte det i " image_holder " lag.så klik på det og udvælge skabe udklip maske.nu er dit billede kun vil være synlig i området af " image_holder " lag.,, skabe image skyder pile, vælge den skik form værktøj (u), right-click på dit billede og vælge en af pilen former.så skabe en pil i højre side af dit billede slider med farve&#e2e6e8., hed det lag " lige pil ", double-click på det åbne vindue lag stil og bruge de indstillinger fra følgende billede.højreklik på dette lag og udvælge konvertere til intelligent objekt.så sæt den uklarhed, til 40%., gentage dette lag (kommando /ctrl + j) og den nye " venstre pil ".så gå til edit > omdanne > flip vandret.flyt pilen i venstre side af nettet layout.tag et kig på følgende billede som reference.,, skabe sejlads kugler til det image, slider, skabe en ny gruppe og navn det " navigation kugler ".vælg den ellipse værktøj (u), har skiftet centrale og skabe en cirkel med dimensioner 10px af 10px og farved5357.navnet på denne lag " navigation kugle "., overlappe denne lag (kommando /ctrl + j), et par gange, og lade dem som du kan se på billedet nedenfor., udvælge ellipse værktøj (e) igen og skabe en mindre cirkel midt i en navigations - kugle for at angive det aktive image.for denne cirkel brug af farve ca2a4.,, trin 12: at skabe " tjenesteydelser " område, skabe en ny gruppe og navn det " tjenesteydelser ".vælg rektangel værktøj (e) og skabe et rektangel med højden 450px og farve&#fafafa., navn denne lag " tjenesteydelser bg ", right-click på og udvælge konvertere til intelligent objekt.så gå tilbage til at filtrere > støj > tilføje, støj og anvende de indstillinger fra følgende billede. dobbelt klik på den her til at åbne lag stil vindue og anvende de indstillinger fra følgende billede for indre og ydre skygge glød.,, vælges den linje værktøj (e) og trække en horisontal linje på bunden af " tjenesteydelser " område ved hjælp af farven&#d2d2d2.navnet på denne lag " 1px linje "., gentage dette lag (kommando /ctrl + j) og ændre farven på den nye linje til hvide.så gå i lag 1px.,, trin 13: forøgelse af indholdet af " tjenesteydelser " område, vælge den type redskab (t) og skrive ordet " tjenesteydelser " med den størrelse og farve 38ptb656a. læg det lag, der er i den venstre del af web - layout og på 40px under " var " område.,, skabe en ny gruppe og navn det " web - design ".en anden gruppe i denne og navn det ") ".vi vil udarbejde en 3d - værelse med nogle) over et billede., udvælge rektangel værktøj (e) og skabe et rektangel med dimensioner 300px af 100px og farveb444a. navnet på denne lag ", grænse - og quot;, right-click på og udvælge konvertere til intelligent objekt.gå hen til filter > støj > tilføje, støj og anvende de indstillinger fra billedet nedenfor.så double-click i dette lag at åbne lag stil vindue og anvende de indstillinger fra følgende billede af gradient overlap.og nu skal jeg vise dig, hvordan at skabe 3d - værelse.første, udvælge rektangel værktøj (e) og skabe et gråt rektangel med dimensioner 286px af 86px og læg det i midten af ", grænse - og quot; rektangel.dette er en midlertidig lag, der vil hjælpe os med at skabe en væggene.,, udvælge rektangel værktøj (e) og skabe et rektangel med højden 22px og farveƲf57.sørge for, at det ikke går over lag gråt rektangel.navnet på denne lag " ordet ", double-click på det åbne vindue lag stil og bruge de indstillinger fra følgende billede.,, skabe en ny rektangel med dimensioner 240px af 64px og farveb4851.navnet på denne lag " hovedvæggen " og holdning, som du ser billedet nedenfor.ti tilføje en gradient - overlay - virkning for dette lag., ved hjælp af den direkte udvælgelse værktøj (a), udvælger de øverste højre hjørne af " ordet " lag og flytte den til venstre.så vælg den øverste venstre hjørne og flytte den til højre.tag et kig på følgende billede som reference.,, skabe et rektangel i venstre side af 3d plads med farve騔b. brug den direkte udvælgelse værktøj (a) til at flytte den nederste højre hjørne af dette rektangel, som du kan se på billedet nedenfor.dobbeltklik på denne lag at åbne lag stil vindue og anvende de indstillinger fra følgende billede.dobbelt det lag (kommando /ctrl + j) og flytte den til højre.så skifte vinkel af gradient - overlay til 0.,, skabe en ny rektangel i toppen af 3d plads ved hjælp af farveǹe67.navnet på denne lag " loft " og de direkte valg værktøj a) at tilpasse de nederste hjørne, som du gjorde for " ordet " lag.dobbeltklik på denne lag at åbne lag stil vindue og anvende de indstillinger fra følgende billede.,, nu kan du slette gråt rektangel tilføje i begyndelsen af dette skridt.kan du se, hvordan mit &under kontingent; 3d plads " gruppe ser ud.,, klik på " 3d plads " - gruppen og udvælge konvertere til intelligent objekt.så gå tilbage til at filtrere > støj > tilføje, støj og anvende de indstillinger fra følgende billede. dobbelt klik på den her til at åbne lag stil vindue og anvende de indstillinger fra billedet nedenfor, punkt 14: at skabe), skabe en ny gruppe og navn det " top - ".så vælg ellipse værktøj (e) og skabe en hvid cirkel, som du kan se på billedet nedenfor.højreklik på dette lag og udvælge konvertere til intelligent objekt.så gå til at filtrere > sløret > radialt slør og anvende de indstillinger fra billedet nedenfor.navnet på denne lag " lys 1 "., skabe en ny cirkel, større end det foregående.navnet på denne lag " redestilleret 2 " og omdanne det til en smart objekt.så anvende en radialt slør filter med samme miljøer, gentage processen endnu en gang med en større cirkel.navnet på denne lag " redestilleret 3 ".tag et kig på følgende billede for reference. gruppe tre " light " lag sammen og sæt opaciteten af hver enkelt som følger:,, " lys 1 " - 70% " redestilleret 2 " - 50% " lys - 3 " - bløde lys på 40%, overlapper gruppen to gange og arrangere din projektører som du ser billedet nedenfor. hold ned kommando /ctrl + skift nøgler og klik på virksomhed beskrevet af hver " light " lag at vælge dem.så gå til lag > nye tilpasning lag > hue & mætning og anvende de indstillinger fra følgende billede.det vil sige en lille blå farve til lyset. nogle af de lys kan gå over grænsen i 3d plads.for at afhjælpe dette, har kommandoen /ctrl centrale og klik på virksomhed beskrevet af " 3d plads " lag.så klik på " top lys " gruppe gøre det aktive og gå til lag > lag maske > viser udvælgelse.,, skabe en ny gruppe og navn det " gulve ".- så brug ellipse værktøj (e) at skabe tre ellipses som du ser billedet nedenfor.omregning af hvert lag en klog ting.derefter tilsættes en gauss - tåge filter og et støjfilter for hvert lag.sæt den uklarhed af disse lag til 40%.så kan du tilføje en image i midten af 3d plads, der repræsenterer det design, du tilføjet.jeg brugte webdesign tuts + logo.,, trin 15, udvælge rektangel værktøj (e) og skabe en hvide rektangel med dimensioner 300px af 210px under projektørerne område.navnet på denne lag " indhold bg ", double-click på det åbne vindue lag stil og bruge de indstillinger fra følgende billede for ydre glans.,, udvælge pen værktøj (p) og skabe en trekant form ved hjælp af farve&#d1d6da, som du kan se på billedet nedenfor.du kan sætte de retningslinjer for at hjælpe dig med at skabe denne form., navn denne lag " top trekant ", double-click på det åbne vindue lag stil og bruge de indstillinger fra følgende billede.den farve, der brugte jeg for slagtilfælde virkning er&#c5cace.,, vælge den type redskab (t), og der tilsættes indholdet af denne tjeneste.for den overordnede brug skrifttype oswald med størrelsen 20pt og farve˫d82. for blok af tekst skrifttypen helvetica regular brug med størrelsen 13pt og farvef6c74.også, der fører af denne tekst lag 24pt fra karakter panel., skabe en ny sort stiplede linje - ligesom du skabte den hvide i begyndelsen af denne forelæsning.- så brug linje værktøj (u), for at få en vandret linje mellem overskriften og blok af teksten.de udfylder denne lag på 0% og anvende det mønster, du skabte, kopiere " læs mere " knap fra " var " område (right-click om sin gruppe og udvælge to grupper).så kom den nye knap under den del af teksten fra " tjenesteydelser " område.tag et kig på følgende billede som reference., trin 16, at kopiere " web - design ". gruppe to gange og arrangere nye kolonner, som du kan se på billedet nedenfor.så udskift overskrifter, og de billeder, der er i fokus.,, skridt 17: at skabe " portefølje " område, skabe en ny gruppe under " tjenesteydelser " - gruppen og navn det " portefølje ".så vælg rektangel værktøj (e) og skabe et rektangel med højden 590px og farve&#f1f1f1 under " tjenesteydelser " område., hed det lag " portefølje bg ", 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 følgende billede.så double-click i dette lag at åbne lag stil vindue og anvendelse af stoffet stofvirkninger, du har downloadet.,, vælge den type redskab (t) og skrive " portefølje " i den øverste venstre hjørne af dette område.jeg brugte den skrifttype oswald med størrelsen 38pt og farveb656a.,, gå 18: at tilføje den portefølje, skabe en ny gruppe og navn det " billeder ".så vælg rektangel værktøj (e) og skabe et rektangel med dimensioner 180px af 140px.navnet på denne lag " image_holder "., gentage dette lag (kommando /ctrl + j) og den nye rektangel til højre på 10px afstand fra den første.fortsætte med at gentage dette lag, indtil du skabe et net, som man ser på billedet nedenfor.,, åbne nogle billeder, som du ønsker at demonstrere i " portefølje " område.drag hvert billede over " image_holder " lag, right-click på lag af billeder og udvælge skabe udklip maske.dette vil sætte et billede indeni hver rektangel. i billedet nedenfor er der to kolonner, hvor jeg ikke tilføjer nogen billeder.vi vil bruge det område for at tilføje en detaljeret mappe på dagsordenen.,, skridt 19: tilføjelse af en detaljeret mappe post, skabe en ny gruppe og navn det " aktive projekt ".vælg rektangel værktøj (e) og skabe et rektangel i to kolonner, der er ingen billeder ved hjælp af farvenɓe61., udvælge rektangel værktøj igen og skabe et billede indehaver af dimensioner 330px af 160px.åbn et billede, som de vil se på dette område og sætte det i " image_holder " lag.højreklik på ", image " lag og udvælge skabe udklip maske., vælge den type redskab (t), og der tilsættes nogle indhold på dette område.for den overordnede brug skrifttype oswald med størrelsen 22pt og farven hvid.for gruppen af tekst skrifttypen helvetica regular brug med størrelsen 13pt og farve&#fafafa.,, endnu en af de tidligere " læs mere " knapper og sætte det under blok af tekst fra " aktive projekt " område., skabe en ny gruppe og navn " tæt på knap ".vælg rektangel værktøj (u), har skiftet centrale og skabe et kvadrat med dimensioner 20px af 20px og farveǤc4f. dette rektangel i øverste højre hjørne af " aktive projekt " område., vælges den linje værktøj (e) og skabe to diagonale linjer til form en " x " form.her er nøglen til at trække en linje, skift til 45 °.,, gå 20: at skabe " blog " område, skabe en ny gruppe og navn det " blog ".vælg rektangel værktøj (e) og skabe et rektangel med højden 340px under " portefølje " område ved hjælp af farven&#fafafa., klik på dette 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., vælges den linje værktøj (e) og skabe en vandret linje i toppen af et rektangel med farve&#d2d2d2.gentage dette lag (kommando /ctrl + j) og den nye linje, en pixel.ændrer farven af denne linje til white.,, gå 21: forøgelse af blog, vælge den type redskab (t) og skrive " blog " i den øverste venstre hjørne af dette område med skrifttypen oswald med størrelsen 38pt og farveb656a., skabe en ny gruppe og navn " efter
".vælg rektangel værktøj (e) og skabe et billede indehaver af dimensioner 180px af 140px.åbn et billede, som de vil se på dette område, og træk den over " image_holder " lag.højreklik på ", image " lag og udvælge skabe udklip maske for at gøre den synlig over området for " image_holder " lag, vælge den type redskab (t), og der tilsættes nogle indhold ved billedet.for den overordnede brug skrifttype oswald med størrelsen 22pt og farve˫d82.for gruppen af tekst skrifttypen helvetica regular brug med størrelsen 13pt og farvef6c74.også, der fører i dette punkt til 24pt.derefter tilsættes et " læs mere " knap under den blok af tekst. dobbelt " efter
" - gruppen og flytte den nye, til højre.du kan ændre det billede, og indholdet i denne nye postede.,, skridt 22: at skabe " fod " område, skabe en ny gruppe og navn det " fod ".at kopiere " header bg " lag (kommando /ctrl + j) fra " header " - gruppen og flytte den på bunden af layout, under " blog " område.navnet på denne lag " fod bg ".,, har kommandoen /ctrl centrale og klik på virksomhed beskrevet af " fod bg " lag at vælge det.så gå til lag > nye fylde lag > gradient og anvende de indstillinger fra billedet nedenfor.mens gradient fylde vindue stadig er åbnet, klik på dit billede og flytte den stigning, som du kan se i det følgende billede., der er blandingen tilstand i dette lag til bløde lys 40%.,, vælges den linje værktøj (e) og skabe en vandret linje på toppen af din " fod " område ved hjælp af farven얅a. navnet på denne lag " 1px linje "., gentage dette lag (kommando /ctrl + j) og flytte en pixel.så ændrer farven af denne linje tile9496.,, gå 23: at skabe " om " område, nu vil vi dele fod i tre søjler: " om ", " twitter " og " kontakt "., skabe en den nye gruppe, navn og det " om ".vælg den type redskab (t) og skrive " om mig og quot; øverst i første kolonne.læg en afstand af 40px mellem den øverste kant af " fod " område, og denne tekst - lag, udvælge linje værktøj (e) og skabe en vandret linje under overskriften.de udfylder denne lag på 0% og uigennemsigtighed, til 50%.så gælder for denne lag hvide stiplede linje mønster, som du har skabt i denne forelæsning., anvende den type redskab (t) at tilføje en blok af teksten under den stiplede linje med skrifttypen helvetica regular og farve&#fafafa.sæt den førende på dette punkt 24pt fra karakter panel.derefter tilsættes et " læs mere " knap under den blok af tekst.,, skridt 24: at skabe ", følg mig " område, skabe en ny gruppe og opkalde det efter mig &" quot;.derefter tilsættes en overskrift og et par tweets på dette område.anvende samme stiplede linje at adskille tekstblokke, tilføje en " læs mere " knap under tweets.vælg den type redskab (t) og ændre teksten i ", følg mig "., downloade det sæt af twitter fugle og flytte nogle af dem i dit spind layout dokument under ", følg mig " område.tilføj et drop shadow virkning på disse fugl lag med de indstillinger fra billedet nedenfor.,, gå 25: at skabe " kontakt " område, skabe en ny gruppe og navn det " kontakt ".derefter tilsættes en overskrift på dette område, og den stiplede linje under. bruge rektangel værktøj (u), for at skabe kontakt form, som de kan se i det følgende billede.fylde hver rektangel med farve&#eff0f0.derefter tilsættes en indre glød og et slagtilfælde virkning for hvert rektangel lag.den farve, der brugte jeg for slagtilfælde lag stil erd5254., vælge den type redskab (t) og skrive i hvert rektangel, hvad det repræsenterer (navn, om e - mail - meddelelse)., tilføje en " læs mere " knap knap under kontakt form og ændre teksten læses " sende ".,, gå 26: at tilføje " ophavsret " område, skabe en ny gruppe og navn det " ophavsret ".så vælg rektangel værktøj (e) og skabe et sort rektangel, som du kan se på billedet nedenfor.navnet på denne lag " ophavsret bg " og dets blandingen tilstand til over 20%, vælge den linje værktøj (e) og skabe en vandret linje øverst på rektangel, du skabte tidligere.de udfylder denne lag på 0% og uigennemsigtighed, til 35%.i så fald anvende den stiplede linje mønster, som du har skabt i denne forelæsning, vælge den type redskab (t), og der tilsættes en ophavsret udtalelse midt i den mørke rektangel.use skrifttypen helvetica regular med størrelsen 12pt og farve&#b1b5b7.,, endelige resultat, er vi færdige.nedenfor kan du se det endelige resultat af denne forelæsning.klik på det billede, at se en fuldvoksen version., jeg håber du nyder denne forelæsning, og du har lært nogle nye ting for udformningen af web - grænseflader.lad bemærkninger eller spørgsmål, som de har i bemærkningerne nedenfor.