skabe en professionel web 2.0 layout,,,,,,, i photoshop tutorielle skal vi lære at skabe et web 2.0 opstilling, som vi gennemgår den pædagogiske vi vil beskæftige sig med så mange photoshop teknikker.det virker lidt længe?det er, fordi det er meget detaljerede.jeg kan forsikre dem om, er let at følge med i og få gjort, bare prøv det!,,,, trin 1, at holde alt på linje, vi skal bruge 'elforsyningsnet (får det fra her), når downloadede åbne filen "960_grid_24_col. psd." starter vi med at skabe lag fra baggrund, right-click på lag "baggrund", så vælg lag fra baggrund.og kalder det "bg".,, trin 2, som vi vil anvende retningslinjer, så vi er nødt til at se på vores ledere.for at gøre det på> herskere.,, trin 3, vi har brug for at fastsætte lavere grænser for header område, vi tager en ny horisontal vejledning efter 100px.gå på> ny vejledning, holdning: 100.,, trin 4, lad os skabe vores mission.vi begynder med at skabe en udvælgelse af 1020x100px.så klik forskydning + backspace til at fylde det med farve, bare for nu,.,, giv det en gradient - overlay - efter følgende billede:,, nu kalder det lag: "header_bg".,, løntrin 5, skriv din hjemmeside afsnit med disse indstillinger:,,, skrifttype familie: rockwell (få det her fra), skriftstørrelse: 30px, skrifttype vægt: regelmæssige, anti - aliasing om: glat, farve: gør ikke noget, for vi skal give det en gradient - overlay -, nu tilføje en gradient - overlay til deres tekst med følgende indstillinger:,, at tilpasse din hjemmeside afsnit med overskriften baggrund vælger din titel lag og "header_bg" lag, så klik på tilpasse vertikale centre.,, trin 6, skriv din navigation tekst med disse indstillinger:,,, skrifttype familie: arial, skriftstørrelsen,: 20px, skrifttype vægt: regelmæssige, myre.i-aliasing om: glat, farve:&#ffffff, skabe en afrundet rektangel, der repræsenterer en svævede link.det bør være 65x35px størrelse - 5px radius, fyld den med farve til nu).,, giver det et slagtilfælde og gradient - overlay - efter følgende billede:,, før vi går videre til det næste skridt, sørg for at holde din lag velorganiseret, her er hvordan mit udseende.trin 7,,, det er tid til at skabe var design område.vi begynder med vores nedre grænser ved at tilføje en ny horisontal vejledning efter 430px.,, skabe en udvælgelse af 1020x430px som baggrund for var design område.og fyld den med en farve, så giv det en gradient - overlay - med følgende indstillinger:,, lad os skabe glasur virkning.skabe en udvælgelse af 1020x120px, fyld den med en farve, og tilføje en gradient overlap.use billedet nedenfor for reference.,, reducere det lag uklarhed til 40%, trin 8, lad os tilføje nogle rører!med én række markise værktøj, skabe en 1px udvælgelse og tilpasse det følgende:,, sæt dine forgrundsviden farve til&#acd86e så klik på skift + backspace til at fylde det. husk at bruge forgrundsviden farve som en plombe mulighed.,, garanterer jeg, at du har perfekt pixel detaljer, vi er færdige med at skabe baggrund elementer.så sørg for at give dem ideelle navne, organisere dem, og gruppen sammen.,, trin 9, lad os være mere nøjagtige.trække to nye retningslinjer i overensstemmelse med følgende billede, skrive nogle imødekommende ord med disse indstillinger:,,, skrifttype familie: rockwell, skriftstørrelsen,: 40px, skrifttype vægt: regelmæssige, anti - aliasing om: skarp, farve:&#f4f4f4, har jeg personligt skrevet: "her er vores nye arbejde.- velkommen! ";), men vi er nødt til at understrege ordet "velkommen".på en eller anden måde.så vi giver det en gradient overlap.følg op med det billede, som nu trække to nye horisontale retningslinjer i overensstemmelse med følgende billede, før vi siger farvel til det skridt, sørg for at organisere deres tekst lag.,, trin 10 starter ved at oprette et udvalg af 250x150px (fyld den med en anden farve), vil det være vores image indehaver.,, kalder det lag "pic_holder" og prøv at tilpasse det image over. og giver det et slagtilfælde, lad os tilføje et billede af en var design, at gøre det til fil> sted og vælge et billede.ring til sin lag "pic -", og sørg for at sætte det lige over lag 'pic_holder "., klik på" pic - "lag og vælge at skabe det maske.,, trin 11, til at skabe vores skyggeordfører, starter vi med at overlappe de to lag" - "og" pic_holder. ", og under de to overlappende lag udvalgte, gå til at redigere> frit ændre og tilpasse højde: - 100, 0%, mens vi stadig er udvælgelsen af de to overlappende lag right-click på dem og vælge konvertere til intelligent objekt, kalder det lag" skyggen ".og sørg for at placere det i bunden.,, udvælge "skygge" lag, så klik på tilføje lag maske (på bunden af lag - panelet), vælge den gradient værktøj (g) og med en sort, hvid lineær gradient trække nede fra og op.,, du skal have noget som dette!,, trin 12, er vi nødt til at tilføje en beskrivelse til vores image.så vil vi skabe en udvælgelse af 240x25px, og fyld den med denne farve værdi:
a1919, vil dette arbejde som beskrivelsen baggrund.,, skrive en beskrivelse af disse karakter indstillinger:,,, skrifttype familie: arial, skriftstørrelsen,: 15px, skrifttype vægt: regelmæssige, anti - aliasing om: ingen, farve:Raa48,, sørg for at holde din dokument glatte.,, trin 13, en kopi af det var design image og tilpasse den til højre, vil vi gøre centret billede lidt større, så foretage en udvælgelse af 340x200px, tilpasse det følgende, og fyld den med en anden farve, vil vi også give det et slagtilfælde.der anvendes følgende billede som reference, og her er, hvad vi har!,, sørg for at organisere deres lag og til gruppe.personligt har jeg skabt tre separate grupper.her er, hvordan de ser ud, og punkt 14, lad os skabe en glidende knap!vi starter med at skabe en ellipse af 50x50px ved hjælp af elliptiske markise værktøj (m) og fylde den med farve,.,, giv den nogle lag stile efter følgende billede med skik form værktøj (u), skabe en pil og give det følgende lag styles, skulle du have noget sådan, glem ikke at bringe din knap efter følgende billede, en kopi af den pil og tilpasse den til højre, gå 15, lad os arbejde på det område.start ved at oprette et udvalg af 1020x815px, så klik forskydning + backspace at fylde deres udvælgelse med denne farve:&#e8e8e8, med en enkelt række markise værktøj (m) skabe et 1px udvælgelse sted det følgende billede, og fyld den med hvide (# ffffff).,, nu har du perfekt pixel - detaljer!, trin 16, er vi nødt til at indføre øvre grænser for vores område.derfor skal vi trække en ny horisontal vejledning efter 50px., downloade denne ikon: grundlæggende - pixel mixer og sted for dem om følgende.,, trække et nyt horisontalt styre på bunden af ikon, lad 20px tager en ny. nu skriver nogle under pos. med disse indstillinger:,,, skrifttype familie: rockwell, skriftstørrelsen,: 29px, skrifttype vægt: regelmæssige, anti - aliasing om skarpe, farve:,:Qaa48, træk endnu to guider efter følgende billede, skrive en tekst med disse indstillinger:,,, skrifttype familie: arial, skriftstørrelsen,: 15px, skrifttype vægt: regelmæssige, anti - aliasing om: ingen, farve:f3235,, trække mere tre retningslinjer i overensstemmelse med følgende billede, skridt 17, det er tid til at skabe vores "læse" knappen.med afrundede rektangel værktøj (e) skabe et rektangel med 100x30px og 5px radius.og fyld den med farve, bare for nu.,, giver dette rektangel nogle lag styles.use billedet nedenfor for reference., med ellipse værktøj (u), skabe en ellipse af 15x15px og fylder den med denne farve værdi:d4d4d. for at tilpasse det korrekt udvælge sine lag og rektangel er lag så klik tilpasse vertikale centre under begge lag udvalgte.,, type "+", - det med hvide (# ffffff), og det er sådan, skrive ordet "læse" med følgende karakter indstillinger:,,, skrifttype familie: tahoma (får det fra her), skriftstørrelse: 12px, skrifttype vægt: regelmæssige, anti - aliasing om: ingen., farve:&#ffffff, giver det en dråbe skygge.use billedet nedenfor i forelæggelseskendelsen, gå 18, til at skabe en vertikal adskillelse, med det værktøj (e) skabe to lodrette linjer ved hver.- og fylde dem med disse værdier:&#ffffff -&#b3b3b3.tilpasse din linje som følgende billede, glem ikke at organisere deres lag.se på mig!,, skridt 19, tre kopier af det, vi har skabt i de foregående to trin.og sådan noget.,, gå 20, lad os skabe vores separator., trække en ny horisontal vejledning efter 50px, med elliptiske markise værktøj (m) skabe et udvalg, som den nedenfor.,, sæt dine forgrundsviden farve sort (# 000000), så klik forskydning + backspace at fylde dit valg.kald det lag "separator_bg.", for at gøre det er sløret, så at filtrere> sløre> gaussisk tåge - radius: 3px.,, mens udvælgelsen af "separator_bg" lag udvalgte, skabe et udvalg, som den under ramte derefter slette.,, klik på tilføje lag maske ikon.og sæt din gradient redaktør for sorte, hvide, sorte, med gradient værktøj (g) træk med en lineær gradient i henhold til følgende billede.,, reducere lag uklarhed til 50%, med det værktøj (e) skabe to vandrette linjer oven på hinanden og placere dem lige over separator., fylde dem med&#b3b3b3 -&#ffffff, og der tilsættes samme lag maske til dem. gå 21, kan vi begynde at arbejde på vores lavere område, ved at en ny vejledning efter 50px.,, tilføjes et afsnit med disse karakter indstillinger:,,, skrifttype familie: rockwell,,, skriftstørrelsen,: 30px, skrifttype vægt: regelmæssige, anti - aliasing om: glat, farve:Qaa48, trække to nye horisontale retningslinjer i overensstemmelse med følgende billede.,, skrive en tekst med disse karakter indstillinger:,,, skrifttype familie,: Arial,,Font size,: 14px,,Font weight,: Regular,,Anti-aliasing setting,: None,,Color,: #505150, ,Drag a new guide after 160px as a lower border for the content area., ,Step 22,Write another title and text using the same character settings we've used in the previous step., ,Type a quotation mark on your keyboard, with these character settings:, ,,Font Family,: Arial,,Font size,: 200px,,Font weight,: Regular,,Anti-aliasing setting,: Smooth,,Color,: #505150, ,And reduce its layer's Opacity to 50%, ,Write a word of wise or quote of yours with these character settings:, ,,Font Family,: Arial,,Font size,: 14px,,Font weight,: Italic,,Anti-aliasing setting,: Smooth,,Color,: #81aa48, , ,Step 23,In order to create a vertical separating line, create to lodrette linjer ved siden af hinanden, og fylde dem med disse værdier:&#ffffff -&#b3b3b3.,, husk at holde din lag organiseret, her er hvordan jeg organiserede dem. gå 24, skrive endnu en titel som dem til venstre (prøve at skrive noget, der repræsenterer det hold, til f.eks. har jeg skrevet "vores hold"). ved hjælp af rektanglets værktøj (e) skabe et 90x90px rektangel, og fyld den med en anden farve.kald det lag "photo1_holder", det vil virke som en indehaver af et billede af et medlem af holdet.giv det et slagtilfælde.use billedet nedenfor for reference.,, et billede af et medlem og dets lag "foto 1".sørg for, at lag "foto 1" er lige over "photo1_holder" lag.så right-click "foto 1" lag og vælge at skabe det maske.du må komme op med noget under!,, gå 25, skrive en tekst, om medlemsstaterne ved hjælp af disse karakter indstillinger:,,, skrifttype familie: arial, skriftstørrelsen,: 14px, skrifttype vægt: regelmæssige, anti - aliasing om: glat, farve:ba344, vil vi skabe sociale medier ikoner os!lad os starte med twitter, type "t" brev med disse karakter indstillinger:,,, skrifttype familie: pico sort (får det fra her), skriftstørrelse: 30px, skrifttype vægt: regelmæssige, anti - aliasing om: glat, farve:fcfff, så giv det et slagtilfælde i henhold til følgende billede.,,, lad os skabe linkedin!- "" - ordet med disse karakter indstillinger:,,, skrifttype familie: myriad pro (får det fra her), skriftstørrelse: 30px, skrifttype vægt: dristig, anti - aliasing om: glat, farve:Qac, facebook.? - "f" brev med disse karakter indstillinger:,,, skrifttype familie: klavika (får det fra her), skriftstørrelse: 30px, skrifttype vægt: dristig, anti - aliasing om: glat, farve:񠨔,,, gå 26, skabe en kopi af den pågældende billede.mens udvælgelsen af det lag, gå til lag> nye tilpasning lag> black &white, sørg for at tjekke "brug tidligere lag for at skabe det maske", type, samme tekst, sociale medier breve, vi har skrevet, før de anvender den samme karakter miljøer, men giver dem denne farve værdi:񻔾.,, så medlemsstaterne vil se grå, når det ikke er svævede., to kopier og tilpasse dem på denne måde, og sørge for, at de er godt tilpasset, fire separate grupper, hver af dem indeholder et medlems indhold, og klik på fordele tilbage kanter i kontrol bar under de fire udvalgte grupper.,, jeg har arrangeret min lag, er du?27, skridt, før vi begynder at arbejde på de sociale medier forbindelser område, er vi nødt til at sætte grænser, det er derfor, vi tager to nye retningslinjer i overensstemmelse med følgende billede!, skabe en udvælgelse af om 940x70px og tilpasse det billedet nedenfor.,, fyld den med en farve, og så giver jeg en gradient overlap.use billedet nedenfor for reference.,, skabe et rektangel med 70x45px.use billedet nedenfor for at tilpasse det og give det en lag, styles.kald det lag "tw_bg" gem lag "tw_bg" at arbejde frit., skabe en rektangel med 10x43px, og at redigere> omdanne vej> skævhed.tilpasning af disse muligheder i kontrol bar:,,, x, y,:: 40px, 1253px, v: - 39, kalder det lag "virkninger" og "tw_bg" lag synlig igen.,, kopi lag stil fra "tw_bg" lag og sæt det ind i lag "kraft".,, skrive "t" brev med disse karakter indstillinger:,,, skrifttype familie: pico sort, skriftstørrelse: 35px, skrifttype vægt: regelmæssige, anti - aliasing om: glat, farve: ikke meget, for vi skal tilføje en gradient - overlay -, giver også det er nogle lag stile efter følgende billede.,, skridt 28, gentages trin 20 at oprette endnu en separator eller kopiere det.så det på denne måde:,, vi skal skære lige del af rektangel, hva '!? til at vælge "tw_bg" lag og klik på tilføje lag maske., foretage en udvælgelse i højre side (, at vi er nødt til at skære) for det rektangel, sæt dine forgrundsviden farve sort (# 000000), så klik forskydning + backspace til at fylde det.,, skridt 29, skrive en tekst - som faktisk bør være en tweet - med disse karakter indstillinger:,,, skrifttype familie: arial, skriftstørrelsen,: 15px, skrifttype vægt: regelmæssige, anti - aliasing om: glat, farve:𶐎, for at bringe teksten, mens under teksten lag, og grøn bar lag udvalgte, klik på tilpasse vertikale centre.,, gå 30, gentages trin 27 til at skabe noget, som på billedet nedenfor.også skabe et rektangel, fyld den med񑯞 og reducere dens lag uklarhed til 40%, giver den store rektangel nogle lag stile efter følgende billede, fyld den skæve rektangel med en mørkere farve af denne værdi:a6788, skrive "t" brev med disse karakter indstillinger:,,, skrifttype familie: pico sort, skriftstørrelse: 35px, skrifttype vægt: regelmæssige, anti - aliasing om: glat, farve:fcfff, og giver det et slagtilfælde.use billedet nedenfor i forelæggelseskendelsen, sørg for at organisere deres lag og gruppe dem sammen.,, skridt 31, en kopi af twitter ikon, ændre farve - overlay - (for stort rektangel):Pab, og fyld den skæve rektangel med denne farve værdi:Ȏd, skrive den. ordet "i" med disse karakter indstillinger:,,, skrifttype familie: myriad pro, skriftstørrelsen,: 35px, skrifttype vægt: dristig, anti - aliasing om: glat, farve: hvid (# ffffff), oprettelse af en tredje kopi af twitter eller linkedin ikon, ændring farven overlay (for stort rektangel):񠨔, og fyld den skæve rektangel med denne farve værdi:će6f.,, skrive "f" brev med disse karakter indstillinger:,,, skrifttype familie: klavika, skriftstørrelsen,: 35px, skrifttype vægt: dristig, anti - aliasing om: glat, farve: hvid (# ffffff), en sidste kopi, ændre farve - overlay - (for stort rektangel):&#e8e8e8, og fyld den skæve rektangel med denne farve værdi:&#cdcdcd.,, skrive ordet "br" med disse karakter indstillinger:,,, skrifttype familie: frutiger sort (får det fra her, skriftstørrelse: 35px, skrifttype vægt: dristig, anti - aliasing om: glat, farve: f:Od2 - r:&#ff3093, sætte hver af ikoner i en separat gruppe, og mens udvælgelse de fire af dem klik på fordele tilbage kanter.,, trin 32, holde det i gang!kun en meter til venstre.skabe en udvælgelse af 1020x460px og fylder den med farve, for nu, anvende en gradient - overlay til det.use billedet nedenfor for reference.,, du skal have en god skygge!, med én række markise værktøj (m) skabe et 1px udvælgelses - og fylde den med hvide (# ffffff).,, skridt 33, trække to nye horisontale retningslinjer i overensstemmelse med følgende billede.,, skriv et afsnit med disse karakter indstillinger:,,, skrifttype familie: rockwell, skriftstørrelsen, - 30px, skrifttype vægt: regelmæssige, anti - aliasing om: skarp, farve:ea547, skrive en undertitel med disse karakter indstillinger:,,, skrifttype familie: arial, skriftstørrelsen,: 15px, skrifttype vægt: regelmæssige, anti - aliasing fastsætter: ingen, farve:&#d3d3d3, ved hjælp af linjen værktøj (e) skabe to vandrette linjer oven på hinanden, - - og fylde dem med disse farve værdier:𤿛 -f2f2f.,, bringe det på denne måde, skridt 34, trække to nye horisontale retningslinjer i overensstemmelse med følgende billede., med afrundede deresvinkel værktøj (u), skaber to områder af 210x25px - 5px radius, fylde dem med:𢠁 og give dem en indre skygge.,, skrive en tekst i de to områder med forskellige karakter indstillinger:,,, skrifttype familie: arial, skriftstørrelsen,: 15px, skrifttype vægt: regelmæssige, anti - aliasing om: ingen, farve:ea547, skabe et rektangel, ligesom dem over, men denne gang sin højde skal være: 110px.også skrive en tekst i det med samme karakter indstillinger ovenfor. lav en kopi af de knap, vi har skabt i skridt, 17.og tilpasse det følgende billede, skridt 35, skrive endnu en titel som den til venstre.,, skrive en tekst.use billedet nedenfor for reference.,, to kopier af, hvad du har gjort.,, trin 36, fyld den rigtige del med et tredje afsnit og en tekst, og nu din fod skal se sådan her.,, skridt 37, vi er der næsten!få en ny horisontal vejledning efter 50px.,, skabe to vandrette linjer oven på hinanden, - - og fylde dem med disse farve værdier:𬘺 -f2f2f., skrive nogle ophavsret tekst med disse karakter indstillinger:,,, skrifttype familie: arial, skriftstørrelsen, 15px, skrifttype vægt:,: regelmæssige, anti - aliasing om: ingen, farve: hvid (# ffffff) -Raa48, med samme karakter, der skriver under sejlads.,, sørg for at organisere deres lag og gruppe dem sammen.her er hvordan jeg ser ud.,, konklusioner, der har vi det!vi har skabt en professionel leder web 2.0 layout.som du kan se de teknikker, der anvendes her, er enkelt.men de får pæne resultater.,, jeg har forsøgt at forklare alting nøje.men hvis du har mødt nogen problemer, så tøv ikke med at bede om hjælp, bare smid en kommentar, og jeg vil gøre mit bedste for at hjælpe.