Share
I denne Photoshop-opplæringen skal vi lære å lage et web 2.0-layout. Når vi går gjennom opplæringen, håndterer vi så mange Photoshop-teknikker. Virker litt lang? Det er fordi det er veldig detaljert. Jeg forsikrer deg om at du vil finne lett å følge og få gjort, bare gi den en prøve!
For å holde alt justert vil vi bruke 960s Grid System (Få det herfra) når du har lastet ned, åpne filen "960_grid_24_col.psd".
Vi starter med å lage lag fra bakgrunnen, høyreklikk på laget "Bakgrunn", og velg deretter Lag fra bakgrunn. og kaller det "bg".
Siden vi bruker så mye guider, må vi se våre linjaler. For å gjøre det, gå til Vis> Linjaler.
Vi må sette nedre grenser for topptekstområdet, derfor trekker vi en ny horisontal guide etter 100px. gå til Vis> Ny guide, posisjon: 100.
La oss lage vår overskrift. Vi starter med å lage et utvalg på 1020x100px. klikk deretter Shift + Backspace for å fylle den (med hvilken som helst farge bare for nå).
Gi det en gradvis overleggelse i henhold til følgende bilde:
Nå ring dette laget: "header_bg".
Skriv nettstedets tittel med disse innstillingene:
Legg nå et Gradient Overlay til teksten din med følgende innstillinger:
For å justere nettstedet ditt med overskriftens bakgrunn Velg tittellaget og "header_bg" -laget, og klikk deretter på Juster vertikale sentre.
Skriv din navigasjonstekst med disse innstillingene:
Opprett et avrundet rektangel som vil representere en svevet link. den skal være omtrent 65x35px størrelse - 5px radius, (fyll den med hvilken som helst farge for nå).
Gi det et slag og gradvis overlegg i henhold til følgende bilde:
Før vi går videre til neste trinn, bare sørg for å holde lagene dine godt organisert. Slik ser min ut!
Det er på tide å lage det uthevede designområdet. Vi begynner med å sette våre nedre grenser ved å legge til en ny horisontal guide etter 430px.
Opprett et utvalg av 1020x430px som bakgrunn for det kjente designområdet. og fyll den med hvilken som helst farge.
Deretter gir du det et overlegen overlegg med følgende innstillinger:
La oss nå lage glasur effekten! Lag et utvalg på 1020x120px, fyll det med hvilken som helst farge.
Og legg deretter til et Gradient Overlay. bruk bildet nedenfor for referanse.
Nå reduserer dette lagets ugjennomtrengelighet til 40%
La oss legge til litt berøring! Med Single Row Marquee Tool opprettes et 1px-utvalg og juster det som følgende:
Sett forgrunnsfargen din til # acd86e og klikk deretter på Shift + Backspace for å fylle den. sørg for å bruke forgrunnsfarge som fyllingsalternativ.
Jeg garanterer at du får perfekte piksel detaljer
Vi er ferdige med å lage bakgrunnselementene. så sørg for å gi dem ideelle navn, organisere dem og gruppere dem sammen.
La oss være mer nøyaktige! dra to nye guider etter følgende bilde
Skriv noen innbydende ord med disse innstillingene:
Jeg har personlig skrevet: "Her er vårt helt nye arbeid. Oops Velkommen!" ;), men vi må understreke ordet "Velkommen!" på en eller annen måte. så i utgangspunktet vil vi gi det en gradvis overlegg. følg opp med bildet
Dra nå to nye horisontale guider i henhold til følgende bilde
Før vi sier farvel til dette trinnet, må du bare sørge for å organisere tekstlagene dine.
Begynn med å lage et utvalg på 250x150px (fyll det med hvilken som helst farge), dette blir vår bildeholder.
Ring dette laget "pic_holder" og prøv å justere det som bildet over.
Og gi det et slag
La oss legge til et bilde av et utvalgt design, for å gjøre det, gå til Arkiv> Plasser og velg et bilde. ring laget "bilde", og sørg for å sette det rett over laget "pic_holder".
Høyreklikk på "bilde" -laget og velg Opprett klipping maske.
For å lage vår skygge starter vi ved å duplisere de to lagene "bilde" og "bildeholder".
Mens du har de to dupliserte lagene valgt, går du til Edit> Free Transform, og justerer høyden til: -100.0%
Mens vi fortsatt velger de to dupliserte lagene, høyreklikker du på dem og velger Konverter til smart objekt; ring dette laget "skygge". og sørg for å plassere den på bunnen.
Velg "skygge" -lag, klikk deretter Legg til lagmaske (nederst på lagpanelet)
Velg Gradient Tool (G) og med en svart, hvit lineær gradient dra fra ned til toppen.
Du burde ha noe sånt!
Vi må legge til en beskrivelse av bildet vårt. så lager vi et utvalg på 240x25px, og fyller det med denne fargen: # 1a1919, Dette vil fungere som bakgrunnsbeskrivelsen.
Skriv litt beskrivelse med disse tegninnstillingene:
Pass på at dokumentet holdes ryddig!
Lag en annen kopi av det fremhevede designbildet og juster det til høyre.
Vi gjør senterbildet litt større, så gjør et utvalg på 340x200px, juster det som følger, og fyll det med hvilken som helst farge.
Vi vil også gi det et slag. Bruk følgende bilde til referanse
Og her er hva vi har!
Sørg for å organisere lagene dine og gruppere dem. Jeg har personlig opprettet tre separate grupper. her er hvordan de ser ut
La oss lage vår skyveknapp! Vi starter med å lage en ellipse på 50x50px ved hjelp av Elliptical Marquee Tool (M), og fylle den med hvilken som helst farge.
Gi nå noen lagstiler i henhold til følgende bilde
Med det tilpassede formverktøket (U) oppretter du en pil og gir den følgende lagstiler
Du burde ha noe sånt
Ikke glem å justere knappen i henhold til bildet nedenfor
Lag en annen kopi av pilen og juster den til høyre
La oss jobbe på innholdsområdet. Start med å lage et utvalg på 1020x815px
Klikk Shift + Backspace for å fylle utvalget ditt med denne fargen: # e8e8e8
Med Single Row Marquee Tool (M) oppretter du et 1px-utvalg, legg det som det følgende bildet, og fyll det med hvitt (#ffffff).
Nå har du perfekte piksel detaljer!
Vi må sette øvre grenser til innholdsområdet vårt. derfor skal vi dra en ny horisontal guide etter 50 px.
Last ned dette ikonet: Basic Set - Pixel Mixer og sted for dem som følgende.
Dra en ny horisontal guide nederst på ikonet, la 20px og dra en ny.
Skriv nå en overskrift med disse innstillingene:
Dra enda to guider i henhold til følgende bilde
Skriv litt tekst med disse innstillingene:
Dra flere tre guider i henhold til følgende bilde
Det er på tide å lage vår "Les mer" -knapp. Med det runde rektangelverktøyet (U) opprettes et rektangel med radius på 100x30px og 5px. og fyll den med hvilken som helst farge bare for nå.
Gi dette rektangel noen lagstiler. bruk bildet nedenfor for referanse.
Med Ellipse Tool (U) lag en ellipse på 15x15px og fyll den med denne fargen verdien: # 4d4d4d.
For å justere det riktig, velg dets lag og rektangellaget, klikk deretter Juster vertikale sentre mens begge lagene er valgt.
Skriv "+", fyll det med hvitt (#ffffff) og legg det slik
Skriv ordet "read more" med følgende tegninnstillinger:
Gi det en dråpe skygge. bruk bildet nedenfor for referanse
Hvis du vil opprette en vertikal skillelinje, oppretter du med Linjeverktøyet (U) to vertikale linjer ved siden av hver. og fyll dem med disse verdiene: #ffffff - # b3b3b3.
Juster linjen som følgende bilde
Ikke glem å organisere lagene dine. ta en titt på meg!
Lag tre kopier av det vi har opprettet i de to foregående trinnene. og har noe sånt!
La oss lage vår separator.
Dra en ny horisontal guide etter 50px
Med Elliptical Marquee Tool (M) oppretter du et utvalg som det nedenfor.
Sett forgrunnsfargen din til svart (# 000000) og klikk deretter Skift + Backspace for å fylle utvalget ditt. ring dette laget "separator_bg".
For å få det til å bli uklart, gå til Filter> Blur> Gaussian Blur - radius: 3px.
Mens du velger "separator_bg" -laget laget, lager du et utvalg som det under og deretter slett delete.
Klikk på Legg til lagmaskeikon. og sett gradientredigereren til svart, hvit, svart.
Med Gradient Tool (G) dra med en lineær gradient i henhold til følgende bilde.
Reduser lagets oppakthet til 50%
Med linjearbeidet (U) lager du to horisontale linjer på hverandre og legger dem rett over separatoren.
Fyll dem med # b3b3b3 - #ffffff og legg til samme lagmaske for dem.
Vi begynner å jobbe med vårt nedre innholdsområde, ved å dra en ny guide etter 50px.
Legg til en tittel med disse tegninnstillingene:
Dra to nye horisontale guider i henhold til følgende bilde.
Skriv litt tekst med disse tegninnstillingene:
Dra en ny guide etter 160px som en nedre kant for innholdsområdet.
Skriv en annen tittel og tekst ved hjelp av de samme tegninnstillingene vi har brukt i forrige trinn.
Skriv inn et sitatmerke på tastaturet ditt, med disse tegninnstillingene:
Og redusere lagets Opacity til 50%
Skriv et ord med vis eller sitat av deg med disse tegninnstillingene:
For å opprette en vertikal skillelinje, opprett to vertikale linjer ved siden av hverandre, og fyll dem med disse verdiene: #ffffff - # b3b3b3.
Sørg for å holde laget ditt organisert, Slik organiserte jeg dem.
Skriv en annen tittel som de til venstre (Prøv å skrive noe som representerer laget, for eksempel har jeg skrevet "Vårt lag").
Ved hjelp av rektangelverktøyet (U) opprettes et 90x90px rektangel, og fyll det med hvilken som helst farge. ring dette laget "photo1_holder"
Dette vil fungere som holder for et bilde av et lagmedlem. Gi det nå et slag. Bruk bildet nedenfor for referanse.
Legg et bilde av et medlem og ring laget "photo1". Pass på at laget "photo1" ligger rett over "photo1_holder" -laget. høyreklikk deretter på "photo1" -laget, og velg Lag klippemaske. Du bør komme opp med noe som nedenfor!
Skriv litt tekst om medlemmet ved hjelp av disse tegninnstillingene:
Vi lager de sosiale medier-ikonene oss selv! la oss starte med Twitter, skriv "t" brev med disse tegninnstillingene:
Gi det deretter et slag i henhold til bildet nedenfor.
La oss lage LinkedIn en! Skriv inn «i» -ord med disse tegninnstillingene:
Facebook !? Skriv "f" brev med disse tegninnstillingene:
Lag en annen kopi av medlemsbildet. Mens du velger fotolaget, går du til Lag> Nytt justeringslag> Svart og hvitt.
Pass på å sjekke "Bruk tidligere lag for å lage klipping maske"
Skriv inn samme tekst, sosiale medierbrev som vi har skrevet før du bruker de samme tegninnstillingene, men gi dem all denne fargevarianten: # 505150.
Så åpenbart vil medlemmet se grå ut når det ikke svever!
Lag to kopier og juster dem på denne måten
For å sikre at de er godt justerte, lag fire separate grupper hver av dem inneholder et medlems innhold, og klikk på Distribuer venstre kanter i kontrollpanelet mens de fire gruppene er valgt.
Jeg har organisert lagene mine, deg?
Før vi begynner å jobbe på området for sosiale medier, må vi sette noen grenser, derfor trekker vi to nye guider i henhold til følgende bilde!
Lag et utvalg på ca 940x70px og juster det som bildet nedenfor.
Fyll det med hvilken som helst farge, og gi den deretter en gradvis overlegg. bruk bildet nedenfor for referanse.
Lag et rektangel på 70x45px. bruk bildet nedenfor for å justere det og gi det noen lagstiler. ring dette laget "tw_bg"
Skjul laget "tw_bg" for å arbeide fritt.
Opprett et annet rektangel på 10x43px, og gå til Rediger> Transform Path> Skew. juster disse alternativene i kontrollpanelet:
Kall dette laget "effekt" og lag "tw_bg" lag igjen.
Kopier lag stil fra "tw_bg" lag og lim det inn i laget "effekt".
Skriv "t" brev med disse tegninnstillingene:
Gi også noen lagstiler i henhold til følgende bilde.
Gjenta trinn 20 for å opprette en annen separator eller til og med kopiere den. plasser det på denne måten:
Vi må kutte den høyre delen av rektangelet, eh !? for å gjøre det, velg "tw_bg" lag og klikk på Legg til lagmaske.
Gjør et valg over den høyre delen (som vi trenger å kutte) av rektangelet, sett forgrunnsfargen din til svart (# 000000) og klikk deretter Shift + Backspace for å fylle den.
Skriv litt tekst - som egentlig burde være en Tweet - med disse tegninnstillingene:
For å justere teksten godt, klikk på Juster vertikale sentre når du har valgt tekstlag og det grønne barlaget.
Gjenta trinn 27 for å lage noe som i bildet nedenfor. Lag også et rektangel, fyll det med # 334814 og reduser lagets Opacity til 40%.
Gi det store rektangel noen lagstiler i henhold til følgende bilde
Nå fyll det skjeve rektangelet med en mørkere farge på denne verdien: # 2a6788
Skriv "t" brev med disse tegninnstillingene:
Og gi det et slag. bruk bildet nedenfor for referanse
Pass på å organisere lagene dine og gruppere dem sammen.
Lag en annen kopi av Twitter-ikonet, endre Color Overlay (for det store rektangelet) til: # 0080ab, og fyll det skjeve rektangelet med denne fargen verdien: # 00526d.
Skriv ordet "in" med disse tegninnstillingene:
Opprett en tredje kopi av Twitter eller LinkedIn-ikonet, endre fargekartet (for stort rektangel) til: # 395796, og fyll det skjeve rektangelet med denne fargeværdien: # 263e6f.
Skriv "f" brev med disse tegninnstillingene:
Lag en siste kopi, endre Color Overlay (for stort rektangel) til: # e8e8e8, og fyll det skjeve rektangelet med denne fargen verdien: #cdcdcd.
Skriv ordet "fr" med disse tegninnstillingene:
Sett hver av ikonene i en egen gruppe, og mens du velger, klikker de fire på Distributér venstre kant .
Hold det gått! bare bunnteksten igjen. Lag et utvalg av 1020x460px og fyll det med hvilken som helst farge for nå.
Påfør et overføringsoverlegg til det. bruk bildet nedenfor for referanse.
Du bør ha en fin skygge!
med Single Row Marquee Tool (M) lag et 1px-utvalg og fyll det med hvitt (#ffffff).
Dra to nye horisontale guider i henhold til følgende bilde.
Skriv en tittel med disse tegninnstillingene:
Skriv en undertittel med disse tegninnstillingene:
Bruk linjearbeidet (U) til å lage to horisontale linjer over hverandre, og fyll dem med disse fargevennene: # 151515 - # 2f2f2f.
Juster den på denne måten.
Dra to nye horisontale guider i henhold til følgende bilde.
Med det runde rektangelverktøyet (U) opprett to rektangler med 210x25px - 5px radius, fyll dem med: # 141313 og gi dem en Inner Skygge.
Skriv litt tekst i de to rektanglene med disse tegninnstillingene:
Opprett et annet rektangel som de ovennevnte, men denne gangen vil høyden være: 110px. Skriv også litt tekst inni den med de samme tegninnstillingene ovenfor.
Lag en kopi av knappen vi har opprettet i trinn 17. og juster den som følgende bilde
Skriv en annen tittel som den til venstre.
Skriv litt tekst. bruk bildet nedenfor for referanse.
Lag to kopier av det du har gjort.
Fyll den riktige delen med en tredje tittel og litt tekst.
Nå må din bunntekst se slik ut.
Vi er nesten der! dra en ny horisontal guide etter 50px.
Lag to horisontale linjer oppå hverandre, og fyll dem med disse fargevurderingene: # 181818 - # 2f2f2f.
Skriv litt opphavsretts tekst med disse tegninnstillingene:
Med samme tegninnstillinger skriver du en undernavigasjon.
Pass på å organisere lagene dine og gruppere dem sammen. Slik ser min ut!
Der har vi det! Vi har opprettet et profesjonelt utseende på web 2.0. Som du kan se, er teknikkene som brukes her enkle. men de får gode resultater.
Jeg har virkelig forsøkt å forklare hver eneste sak forsiktig. Men hvis du har møtt noen problemer, vennligst ikke nøl med å be om hjelp, bare slipp en kommentar og jeg vil gjøre mitt beste for å hjelpe.
Accentsconagua