Create en profesjonell Web 2.0 Layout
I denne Photoshop opplæringen vi kommer til å lære hvordan å lage en web 2.0 oppsett, som vi går gjennom opplæringen vi skal forholde seg til så mange Photoshop teknikker . Synes slags lenge? det er fordi det er svært detaljert. Jeg forsikrer du finner lett å følge, og for å få gjort, bare gi det et forsøk!
Trinn 1
For å holde alt på linje vi kommer til å bruke 960s Grid System (Få det herfra) en gang lastet ned åpner opp filen "960_grid_24_col.psd" .We'll begynne med å lage lag fra bakgrunn, høyreklikk på laget "bakgrunn", velg Layer From bakgrunn. og kaller det "bg".
Trinn 2
Som vi skal bruke guider så mye, må vi vise våre linjaler. For å gjøre det gå til Vis> Linjaler.
Trinn 3
Vi må sette lavere grenser for overskriftsområdet, derfor vil vi dra en ny horisontal guide etter 100px. gå til Vis> New Guide, plassering: 100.
Trinn 4
La oss lage vår header. Vi vil begynne med å lage et utvalg av 1020x100px. Klikk deretter Shift + Backspace for å fylle den (med hvilken som helst farge bare for nå)
Gi det en Gradient Overlay henhold til følgende bilde:.
Nå kaller dette laget. "header_bg"
Trinn 5
Skriv ditt nettsted tittel med disse innstillingene:
Font Family
: Rockwell (få det fra her)
Skriftstørrelse
: 30px
Font vekt
: Regular
Anti-aliasing innstilling
: Glatt
Color
: Vil ikke saken, årsaken vi skal gi det en Gradient Overlay
nå kan du legge en Gradient Overlay til teksten med følgende innstillinger:
Hvis du vil justere ditt nettsted tittel med overskriften bakgrunnen; Velg tittelen lag og "header_bg" lag klikk deretter på Juster vertikale sentre
Trinn 6
Skriv navigasjons tekst med disse innstillingene:.
Skriftstørrelse
: 20px
Font vekt
: Regular
Anti- aliasing innstilling
: Glatt
Color
: # ffffff
Opprett en avrundet rektangel som vil representere en svevde link. . Det bør være om 65x35px størrelse - 5px radius, (fyll den med hvilken som helst farge for nå)
Gi det en Stroke og Gradient Overlay henhold til følgende bilde:
Før vi går til neste skritt, bare sørg for å holde lagene godt organisert, Her er hvordan min ser ut!
trinn 7
det er på tide å lage omtalt design området. Vi vil begynne med å sette våre lavere grenser ved å legge til en ny horisontal guide etter 430px.
Opprett et utvalg av 1020x430px som bakgrunn for de utvalgte design-området. og fyll den med hvilken som helst farge
Så gi det en Gradient Overlay med følgende innstillinger.
La oss nå lage glasur effekt! opprette et utvalg av 1020x120px, fyll den med hvilken som helst farge.
Og deretter legge til en Gradient Overlay. bruke bildet nedenfor for referanse.
Nå redusere dette laget opacity til 40%
Trinn 8
La oss legge noen innslag! Takket være Single Row Marquee Tool skaper en 1px utvalg og juster den slik ut:
Sett forgrunnsfargen til # acd86e klikk deretter på Shift + Backspace for å fylle den; sørg for å bruke forgrunnsfarge som en fylling alternativ.
Jeg garanterer at du får perfekt pixel detaljer
Vi er ferdig med å lage bakgrunnselementer. så sørg for å gi dem ideelle navn, organisere dem, og gruppere dem sammen.
Trinn 9
La oss være mer nøyaktig! drar to nye guider i henhold til følgende bilde
Skriv noen innbydende ord med disse innstillingene:
Font Family
: Rockwell
Skriftstørrelse
: 40px
Font vekt
: Regular
Anti-aliasing innstilling product:: Sharp
Color
: # f4f4f4
jeg personlig har skrevet: ".! Her er vår helt nye arbeider Oops Velkommen";) Men vi må understreke ordet "Velkommen!" i en eller annen måte. så i utgangspunktet vil vi gi det en Gradient Overlay. følge opp med bildet
Nå drar to nye horisontale føringer i henhold til følgende bilde
Før vi si farvel til dette trinnet, bare sørg for å rydde i tekst lag.
Trinn 10
start med å lage et utvalg av 250x150px (fyll den med hvilken som helst farge), vil dette være vårt bilde holder.
Ring dette laget "pic_holder" og prøve å justere det som bildet ovenfor.
og gi den en Stroke
La oss legge til et bilde av en utvalgt design, for å gjøre det gå til File> Place og velg et bilde. kalle sitt lag "pic", og sørg for å sette den rett over laget "pic_holder".
Høyreklikk på "pic" lag og velg Opprett klipping maske.
Trinn 11
for å lage vår skygge, vil vi starte med å duplisere de to lagene "pic" og "pic_holder".
Selv har de to dupliserte lag valgt, gå til Edit> Free Transform, og juster høyden til: -100,0%
Mens vi fortsatt velge de to dupliserte lag høyreklikke på dem og velge Konverter til smart objekt; kaller dette laget "skygge". og sørg for å plassere den på bunnen.
Velg "skygge" lag klikk deretter på Legg til lagmaske (nederst i Lag-panelet)
Velg Gradient Tool (G) og med en svart, hvit lineær gradient dra fra ned til toppen.
Du bør ha noe sånt som dette!
Trinn 12
Vi må legge til en beskrivelse til vårt bilde. så vi vil lage et utvalg av 240x25px, og fyll den med denne fargen verdi: # 1a1919, vil dette fungere som beskrivelse bakgrunn
Skriv noen beskrivelse med disse karakter innstillinger.
< li> Font Family
: Arial
Skriftstørrelse
: 15px
Font vekt
: Regular
Anti-aliasing innstilling
: Ingen
Color product::! # 82aa48
Sørg for å holde dokumentet ryddig
Trinn 13
Lag en annen kopi av kjennetegnet design bildet og justere den til høyre.
Vi vil gjøre sentrum bildet litt større, så gjør et utvalg av 340x200px, justere det som den følgende, og fyll den med hvilken som helst farge.
Vi vil også gi den et slag. bruker følgende bilde for referanse
Og her er hva vi har!
Sørg for å organisere lag og å gruppere dem. Jeg personlig har opprettet tre separate grupper. her er hvordan de ser
Trinn 14
La oss lage vår skyveknapp! Vi vil begynne med å lage en Ellipse av 50x50px bruker Elliptical Marquee Tool (M), og fylle den med hvilken som helst farge.
Nå gir den enkelte lagstiler henhold til følgende bilde
Med Custom Shape Tool (U) lage en pil og gi den følgende lagstiler
Du bør ha noe sånt som dette
ikke glem å justere din knapp i henhold til følgende bilde
lage en ny kopi av pilen og justere den til høyre
Trinn 15
La oss arbeide på innholdsområdet. begynne med å lage et utvalg av 1020x815px
Klikk Shift + Backspace for å fylle valget med denne fargen: # e8e8e8
Med Single Row Marquee Tool (M) opprette en 1px utvalg, legg den ut følgende bilde, og fylle den med hvit (# ffffff).
nå du har Perfect pixel detaljer!
Trinn 16
Vi må sette øvre grenser til innholdet vårt område. Derfor kommer vi til å dra en ny horisontal guide etter 50px.Download denne ikonsett: Basic Set - Pixel Mixer og sted for dem som følgende.
Dra en ny horisontal guide på bunnen av ikonet, la 20px deretter drar en ny one.Now skrive noen overskrift med disse innstillingene:
Font Family
: Rockwell
Skriftstørrelse
: 29px
Font vekt
: Regular
Anti-aliasing innstilling
: Sharp
Color
: # 81aa48
dra enda en to guider i henhold til følgende bilde
Skriv litt tekst med disse innstillingene :
Font Family
: Arial
Skriftstørrelse
: 15px
Font vekt
: Regelmessig
Anti-aliasing innstilling
: Ingen
Farge
: # 2f3235
Dra flere tre guider i henhold til følgende bilde
Trinn 17
det er på tide å lage vår "les mer" -knappen. Med Avrundet rektangel Tool (U) skape et rektangel av 100x30px og 5px radius. og fyll den med hvilken som helst farge bare for nå.
Gi dette rektangelet noen lagstiler. bruke bildet nedenfor for referanse
Med Ellipse Tool (U) skape en ellipse av 15x15px og fylle det med denne fargen verdi. # 4d4d4d.To justere det riktig å velge sin lag og rektangelet er laget klikk deretter Juster vertikale sentre mens du har begge lag valgt.
Skriv inn "+", fyll den med hvit (# ffffff) og plassere det slik
Skriv ordet "les mer" med følgende tekst innstillinger :
Font Family
: Tahoma (få det fra her)
Skriftstørrelse
: 12px
Font vekt
: Regular
Anti-aliasing innstilling
: Ingen
Color
: # ffffff
Gi det en skygge. bruke bildet nedenfor for referanse
Trinn 18
For å lage en vertikal skillelinjen, med linjen Tool (U) lage to vertikale linjer ved siden av hverandre. og fylle dem med disse verdiene: # ffffff - # b3b3b3
Juster linjen som følgende bilde
Ikke glem å organisere lagene.. ta en titt på mine!
Trinn 19
Lag tre kopier av det vi har skapt i de to foregående trinn. og har noe sånt som dette!
Trinn 20
La oss lage vår separator.Drag en ny horisontal guide etter 50 piksler
Med Elliptical Marquee Tool (M) opprette et utvalg som den nedenfor.
Sett forgrunnsfargen til svart (# 000000) og klikk deretter på Shift + Backspace for å fylle ditt valg. . Kaller dette laget "separator_bg"
For å gjøre det ser uskarpt, går du til Filter> Blur> Gaussian Blur - radius. 3px
Mens du velger "separator_bg" laget valgt, oppretter et utvalg som den nedenfor og trykk delete.
Klikk på Legg til lagmaske ikonet. og sette gradient editor til svart, hvitt, svart.
Med Gradient Tool (G) dra med en lineær gradient i henhold til følgende bilde.
Reduser lag Opacity til 50%
med line Tool (U) oppretter to horisontale linjer på toppen av hverandre og plassere dem rett over separator.Fill dem med # b3b3b3 - #ffffff og legge til samme lag maske til dem
<. h2> Trinn 21
Vi vil begynne å jobbe på vår lavere innhold område, ved å dra en ny guide etter 50 piksler
Legg til en tittel med disse karakter innstillinger.
< li> Font Family
: Rockwell
Skriftstørrelse
: 30px
Font vekt
: Regular
Anti-aliasing innstilling
: Glatt
Color product::. # 81aa48
Dra to nye horisontale føringer i henhold til følgende bilde
Skriv litt tekst med disse karakter innstillinger:
Font Family
: Arial
Skriftstørrelse
: 14px
Font vekt
: Regular
Anti-aliasing innstilling
: Ingen
Color
: # 505150
Dra en ny guide etter 160 piksler som en nedre grense for innholdsområdet.
Trinn 22
Skriv en tittel og tekst ved hjelp av de samme tegn innstillingene vi har brukt i . forrige trinn
Skriv inn anførselstegn på tastaturet, med disse karakter innstillinger:
Font Family
: Arial
Skriftstørrelse
: 200px
Font vekt
: Regular
Anti-aliasing innstilling
: Glatt
Color
: # 505150
Og redusere lagets Opacity til 50%
Skriv et ord av klokt eller sitat av deg med disse karakter innstillinger:
Font Family
: Arial
Skriftstørrelse
: 14px
Font vekt
: Kursiv
< li> Anti-aliasing innstilling
: Glatt
Color
: # 81aa48
Step 23
for å opprette en lodd skillelinjen, lage to vertikale linjer ved siden av hverandre, og fylle dem med disse verdiene. #ffffff - # b3b3b3
Sørg for å holde lag organisert, her er hvordan jeg organiserte dem Skriv enda en tittel som de på venstre (Prøv å skrive noe som representerer laget, for eksempel jeg har skrevet "Vår team"). Bruk rektangel Tool (U) opprette en 90x90px rektangel, og fyll den med hvilken som helst farge. kaller dette laget "photo1_holder" Dette vil fungere som en holder for et bilde av et team medlem. Nå gir det en Stroke. Bruk bildet under for mer informasjon. Plasser et bilde av et medlem og kaller sitt lag "photo1". Sørg for at lag "photo1" er rett over "photo1_holder" lag. høyreklikk på "photo1" lag og velg Opprett klipping maske. Du bør komme opp med noe sånt under Skriv litt tekst om medlemmet, ved hjelp av disse karakter innstillinger: Vi vil opprette sosiale medier ikoner oss selv! la oss starte med Twitter, Type "t" brev med disse karakter innstillinger: Så gi det en Stroke henhold til følgende bilde La oss skape Linkedin ett! Type "i" ord med disse karakter innstillinger: Facebook !? Type "f" brev med disse karakter innstillinger: Opprett en annen kopi av medlem bildet. mens du velger bilder laget, gå til Layer> New Adjustment Layer> Black &White.Make Husk å sjekke "Bruk Forrige Layer å lage Clipping Mask" Skriv inn den samme teksten, sosiale medier brevene vi har skrevet før ved hjelp av de samme tegn innstillinger, men gi dem all denne fargeverdi.! # 505150 Så åpenbart medlemmet vil se grå når den ikke ligget Lag to kopier og justere dem på denne måten for å sikre at de er godt justert, lage fire separate grupper hver og en av dem inneholder et medlem innhold, og klikk på Fordel venstre kant i kontrollinjen mens du har de fire gruppene valgt. jeg har organisert mine lag, du? Før vi begynner å arbeide på sosiale medier linker området, må vi sette noen grenser, det er derfor vi drar to nye guider i henhold til følgende bilde! Lag et utvalg av om 940x70px og justere det som bildet nedenfor. Fyll den med hvilken som helst farge, og deretter gi det en Gradient Overlay. bruke bildet nedenfor for referanse. Lag et rektangel av 70x45px. bruke bildet nedenfor for å justere den og gi den enkelte lagstiler. kaller dette laget "tw_bg" Skjul lag "tw_bg" til å arbeide fritt. Lag en firkant av 10x43px, og gå til Edit> Transform Sti> Skew. justere disse alternativene i kontrollinjen: Ring dette laget "effekt" og gjøre "tw_bg" lag synlig igjen Kopier lag stil fra "tw_bg" lag og lim den inn i lag "effect" Skriv "t" brev med disse karakter innstillinger. også gi den enkelte lagstiler henhold til følgende bilde Gjenta trinn 20 for å opprette en separator eller kopiere den. deretter plassere det på denne måten: Vi må kutte den høyre delen av rektangelet, eh !? å gjøre det velger du "tw_bg" lag, og klikk på Legg til lag mask.Make et utvalg over den høyre delen (som vi må kutte) av rektangelet, sett forgrunnsfargen til svart (# 000000) og klikk deretter på Shift + Backspace for å fylle det Skriv litt tekst - som faktisk bør være en tweet - med disse karakter innstillinger. For å justere teksten godt, samtidig som de har tekstlaget og den grønne linjen laget valgt, klikk på juster vertikale sentre . Gjenta trinn 27 for å skape noe som på bildet nedenfor. Også opprette et rektangel, fyll den med # 334814 og redusere lag Opacity til 40%. Gi det store rektangelet noen lagstiler henhold til følgende bilde Nå fyller den skjeve rektangel med en mørkere farge på denne verdien: # 2a6788 Skriv "t" brev med disse karakter innstillinger: Og gi den en Stroke. bruke bildet nedenfor for referanse Sørg for å organisere lag og gruppere dem sammen. Lag en annen kopi av Twitter-ikonet, endrer farge Overlay ( for den store firkant): # 0080ab, og fylle skjevt rektangel med denne fargen verdi. # 00526d Skriv ordet "in" med disse karakter innstillinger: Opprett en tredje kopi av Twitter eller Linkedin ikon, endring Color Overlay (for stor firkant): # 395796, og fylle skjevt rektangel med denne fargen verdi. # 263e6f Skriv "f" brev med disse karakter innstillinger: Lag siste kopien, endrer farge Overlay ( for den store firkant): # e8e8e8, og fylle skjevt rektangel med denne fargeverdi. #cdcdcd Skriv ordet "fr" med disse karakter innstillinger: Sett hver av ikonene i en egen gruppe, og mens utvalget i fire av dem klikker på Fordel venstre kant. Hold det goin '! bare bunnteksten igjen. Lag et utvalg av 1020x460px og fyll den med hvilken som helst farge for nå. Bruk en Gradient Overlay til det. bruke bildet nedenfor for referanse. Du bør ha en fin skygge! Takket være Single Row Marquee Tool (M) skaper en 1px utvalg og fyll den med hvit (# ffffff). < . br> Dra to nye horisontale føringer i henhold til følgende bilde Skriv en tittel med disse karakter innstillinger: Skriv en sub-tittel med disse karakter innstillinger: Ved hjelp av line Tool (U) oppretter to horisontale linjer på toppen av hverandre, og fylle dem med disse fargeverdier:. # 151515 - # 2f2f2f Juster det på denne måten Dra to nye horisontale føringer i henhold til. følgende bilde med Avrundet rektangel Tool (U) lage to rektangler av 210x25px - 5px radius, fylle dem med.:. # 141313 og gi dem en Indre skygge Skriv litt tekst inni to rektangler med disse karakter innstillinger: Lag en firkant som de ovennevnte, men denne gangen sin høyde vil være: 110px. Også skrive noen tekst i det med de samme tegn innstillinger above.Make en kopi av knappen har vi laget i trinn 17. og justere det som følgende bilde Skriv annen tittelen som den på venstre side. Skriv litt tekst. bruke bildet nedenfor for referanse. Lag to kopier av det du har gjort. Fyll høyre del med en tredje tittel og tekst. nå footer bør se slik ut. Vi er nesten der! drar en ny horisontal guide etter 50 piksler Lag to horisontale linjer på toppen av hverandre, og fylle dem med disse fargeverdier:.. # 181818 - # 2f2f2f Skriv noen opphavsrett tekst med disse tegn innstillinger: Med de samme tegn innstillinger skrive et sub-navigasjon. Sørg for å organisere lag og gruppere dem sammen. Her er hvordan min ser ut! Det har vi det! Vi har opprettet et profesjonelt utseende web 2.0 layout. Som du kan se de teknikkene som brukes her er enkle. men de får fine resultater. Jeg har forsøkt å forklare hver eneste ting nøye. Men hvis du har møtt noen problemer ikke nøl med å spørre om hjelp, bare send en kommentar og jeg skal gjøre mitt beste for å hjelpe.
Trinn 24
Trinn 25
Font Family
: Arial
Skriftstørrelse
: 14px
Font vekt
: Regular
Anti-aliasing innstilling
: Glatt
Color
: # 7ba344
Font Family
: Pico-Black (få det fra her)
Skriftstørrelse
: 30px
Font vekt
: Regular
Anti-aliasing innstilling
: Glatt
Color product::. # 2fcfff
Font Family
: Myriad Pro (få det fra her)
Skriftstørrelse
: 30px
Font vekt
: Fet
Anti-aliasing innstilling
: Glatt
Color
: # 0081ac
Font Family
: Klavika (få det fra her)
Skriftstørrelse
: 30px
Font vekt
: Fet
Anti-aliasing innstilling
: Glatt
Color
: # 395796
Trinn 26
Trinn 27
X
: 40px
Y
: 1253px
V
. -39
Font Family
: Pico-Black
Skriftstørrelse
: 35px
Font vekt
: Regular
Anti-aliasing innstilling
: Glatt
Color
. Vil ikke saken årsaken vi skal legge en Gradient Overlay
Trinn 28
Trinn 29
Font Slektstre : Arial
Skriftstørrelse
: 15px
Font vekt
: Regular
Anti-aliasing innstilling
: Glatt
Color
: # 222222
trinn 30
Font Family
: Pico-Black
Skriftstørrelse
: 35px
Font vekt
: Regular
Anti-aliasing innstilling
: Glatt
Color
: # 2fcfff
Trinn 31
< b> Font Family
: Myriad Pro
Skriftstørrelse
: 35px
Font vekt
: Fet
Anti-aliasing innstilling
: Glatt
Color
: hvit (# ffffff)
< li> Font Family
: Klavika
Skriftstørrelse
: 35px
Font vekt
: Fet
Anti-aliasing innstilling
: Glatt
Color
: hvit (# ffffff)
< b> Font Family
: Frutiger svart (få det herfra
Skriftstørrelse
: 35px
Font vekt
: Fet
Anti-aliasing innstilling
: Glatt
Color
: f: # 0079d2 - r: # ff3093
Trinn 32
Step 33
Skrift Slektstre: Rockwell
Skriftstørrelse
: 30px
Font vekt
: Regular
Anti- aliasing innstilling product:: Sharp
Color
: # 7ea547
Font Family
: Arial
Skriftstørrelse
: 15px
Font vekt
: Regular
< b> Anti-aliasing innstilling
: Ingen
Color
: # d3d3d3
Step 34
Font Family
: Arial
Skriftstørrelse
: 15px
Font vekt
: Regular
Anti-aliasing innstilling
: Ingen
Color
: # 7ea547
Trinn 35
Trinn 36
Trinn 37
Font Family
: Arial
Skriftstørrelse
: 15px
Font vekt
: Regular
Anti-aliasing innstilling
: Ingen
Color
: hvit (# ffffff) - # 82aa48
Konklusjon