How å skape en unik Fargerik Sideoppsett
Denne opplæringen vil lede deg gjennom prosessen med å utforme et profesjonelt nettsted med en funky fargerik stil. Opplæringen har noen flotte farger, effekter og lag stiler som du kan bruke om og om igjen for fremtidige prosjekter. La oss komme i gang!
Final Bilde Forhåndsvisning
Ta en titt på bildet vi skal opprette.
Tutorial Detaljer
Program
: Adobe Photoshop CS3
Vanskelighetsgrad:
Intermediate
< b> Beregnet Fullføringstidspunkt:
60-120 minutter
Trinn 1
Opprett et nytt dokument 1200 piksler x 1160 piksler med hvit bakgrunn. Når du har opprettet dokumentet skulle setup to guider som vil hjelpe til å holde oppsettet 850 piksler bred. For å lage guidene vi trenger å gå til Vis > . Guide ny, i boksen som dukker åpen velger vertikal og skriv 175 piksler
Gå til Vis > Guide New gang bare denne gangen skriv 1025px, igjen sørge for at guiden er satt til vertikal.
Du skal nå ha to guider på hver side av lerretet både 175 piksler fra kantene av dokumentet. Plassen i mellom guidene bør være 850px bred. Alt vi lager fra nå av vil bli opprettet i løpet av guidene.
Trinn 2
Skulle nå kommer til å fylle vår bakgrunn og vår bakgrunn skulle bruke en radial gradient. Sett forgrunnsfargen til hvit (# ffffff) og bakgrunnsfarge til lys grå (# e1e1e1). Velg gradient verktøyet med en radial gradient.
Trinn 3
Påfør gradient til "bakgrunn" lag. Ved søknad gradienten start fra toppen-midten av lerretet og dra halvveis ned, bør dette gi oss en fin størrelse effekt. Hvis du holder nede Shift-tasten mens du flytter gradient ned vil det låse gradient linje vertikalt.
Trinn 4
Velg tekstverktøyet, og deretter i øverste venstre hjørne mot venstre anvisning Legg til din nettside tittelen med fargen rosa (# ff008a). Ved siden av ditt nettsted tittelen også legge til din nettside fengende slagord.
Trinn 5
På samme nivå som nettstedet tittel, men mot høyre guide, lage to rektangler ved siden av hverandre ved hjelp av den rektangulære markeringsverktøyet. Den første rektangelet skal være et søkefelt, så det må være ganske lang, sekunder rektangelet skal være en send-knappen, så bør være ganske liten.
Trinn 6
legg nå disse lagstiler til søkefeltet rektangelet.
Trinn 7
Når du har lagt dine søkefelt lagstiler legge disse lagstiler til knappen rektangelet.
Trinn 8
til slutt velger du tekstverktøyet og legg til litt tekst i søkefeltet og søkeknappen. Oppsettet så langt skal se ut omtrent som bildet under.
Trinn 9
Velg avrundet rektangel verktøy, en gang valgt øverst på skjermen under Photoshop verktøylinjen du vil se noen alternativer . Innenfor disse alternativene endre type til bane og Radius til 15px.
Trinn 10
Fra venstre guiden dra ut rektangel, høyden på rektangelet skal være omtrent 215px og avslutte løpet på høyre guide. Når du har dratt ut rektangelet høyreklikk inni den og gå til Make Selection.
Trinn 11
Selv om utvalget er aktiv, velg Gradient verktøyet med en radial gradient, angi forgrunnsfargen til en virkelig lys grå (#fefefe) og bakgrunnsfargen til en litt mørkere grå (# e1e1e1). Starter fra toppen-midten av utvalget, drar gradienten forbi bunnen av utvalget.
Trinn 12
Når du har lagt din radial gradient legge disse lagstiler.
Trinn 13
Kommando-klikk rektangelet laget du nettopp opprettet, gjør dette vil laste rektangelet utvalg. Når du har lastet utvalget kontrakten utvalget ved 15px ved å bruke Select > Endre > Kontrakten.
Trinn 14
Lag et nytt lag over den store rektangelet deretter fylle den med hvilken som helst farge. Når fylt, Opphev valget ved å trykke Kommando + D.
Trinn 15
Legg disse lagstiler til din nye mindre rektangel laget.
Trinn 16
Var nå kommer til å lage en bokeh effekt for våre mindre indre rektangel. Opprett et nytt dokument 600 piksler x 600 piksler med en gjennomsiktig bakgrunn. Velg Elliptical Marquee verktøyet og lage en stor sirkel inne lerretet.
Trinn 17
Når du har opprettet sirkelen vi trenger å justere sirkler utseende litt. . Legg disse lagstiler til sirkelen
Nå gå til Rediger > Definer Brush Preset og lagre den nye penselen.
Trinn 18
Leder tilbake over til layout og velg Paint Brush verktøyet fra penselen menyen, og deretter sette pensel størrelse til 50 piksler.
Trinn 19
Ta opp børsten alternativene skjermen med F5-tasten og deretter legge til følgende penselalternativer.
Trinn 20
børste skal nå være klar å bruke, opprette et nytt lag over din multi-farget indre rektangel. Bruke farge hvit (# ffffff), og med børsten drar ut enkelte kretser, prøve og holde sirkler innenfor den indre rektangel. Du trenger bare noen til å begynne med så vi skal bygge opp sirkler over 3 lag. Når du har børstet ut enkelte kretser dimme dem ved hjelp av Guassian Blur Filter > Blur > Gaussian Blur.
Trinn 21
Lag et nytt lag over den første sirkelen laget. Med den tilpassede pensel begynne å børste flere sirkler fylle ut noen av de tomme mellomrom. Når du er ferdig med å stille inn Opacity til 50%, og deretter legge en ytre glød ved hjelp av Photoshop standardinnstillinger.
Trinn 22
Til slutt skape et lag over den siste sirkelen er laget. Med den tilpassede børste en gang mer børste ut noen flere sirkler. Når du er ferdig, setter laget Opacity til 75%, og deretter legge en ytre glød ved hjelp av Photoshops standardinnstillingene.
Trinn 23
Nå som bokeh-effekten er fullført, velger du tekstverktøyet og legg til litt tekst over rektangelet. Skriften som brukes for dummy overskriften er Helvetica Neue LT pro, den korte avsnitt under er satt i Verdana. Avslutt dette trinnet ved å legge en elegant ikonet til venstre for dummy innhold. Ikonet som brukes er fra et ikonsett designet av "Navdeep Raj" for Smashing Magazine.
Trinn 24
Vi overvåker nå kommer til å lage en enkel navigering. Velg Avrundet rektangel verktøyet og endre avstanden til 10px. Rektangelet skal være ca 54px i høyde og være strekke seg helt mot venstre og høyre guider.
Trinn 25
Høyreklikk inne i rektangelet banen med pennverktøyet og gå til Fill Path. Når du har fylt banen legge disse lagstiler.
Trinn 26
På navigasjons legge noen eksempler på linker. I mellom hver prøve lenke lage en liten punktet bruker Elliptical Marquee verktøyet. Fyll punkter med fargen rosa (# ff008a).
Trinn 27
Nå navigasjons er fullført kan flytte inn på innholdsbokser. Velg avrundet rektangel verktøyet, la radius satt til 10px. Dra ut en firkant om 335px i bredde og 196px i høyden. Fyll rektangelet med en farge for tiden, og flytt den mot venstre guiden.
Trinn 28
Legg disse lagstiler til innholdsboksen.
Trinn 29
Vi overvåker nå kommer til å gjøre det riktige foldet del av innholdet boksen. Velg det mangekantede lassoverktøyet og gjøre en trekantet markering rundt øverst i høyre hjørne.
Trinn 30
Når du har gjort valget, Cut (Command + X) og lim (Command + V) hjørnet til et nytt lag. Velg hjørnet lag roter det 180 grader (Rediger > Transform > Roter 180).
Hjørnet ville ha mistet alle sine lagstiler når vi klippe det, så vi må søke på nytt dem. Du kan gjøre dette raskt ved å høyreklikke på innholdsboksen lag og kommer til å kopiere Layer Styles. Høyreklikk på hjørnet lag og gå til Lim Layer Styles. Til slutt plasserer hjørnet slik at toppen rett kant er over den rette kanten av innholdet boksen.
Trinn 31
Fyll inn din innhold boks med noen dummy innhold. Legg et ikon på venstre med en fin fet overskrift og dummy avsnitt under. Ikonene som brukes er fra et ikonsett designet av "Navdeep Raj" for Smashing Magazine.
Step 32
Duplicate alle innholdskasseelementene, og deretter opprette to flere bokser. Nå plasserer dem under hverandre.
Trinn 33
På høyre side av layout, inline med den første innholdsboksen, legge en lang dummy overskrift ved hjelp av innstillingene nedenfor.
< h3> Trinn 34
Under den lange overskriften legge litt mer dummy tekst, kanskje et bilde eller to, og en enkel usortert liste bare for å gi oppsettet litt liv. Color dummy teksten i en mørk grå farge (# 8a8a8a). Bildet i midten bruker de samme lagstiler som våre innholdsbokser og ble opprettet på samme måte som vår kjennetegnet området.
Trinn 35
For bunnteksten vi kommer til å re- bruke vår navigasjon. Gå til lagpaletten og høyreklikk "navigasjon" lag. Velg Duplicate Layer, og dra dupliserte laget til toppen av bunken.
Mens "bunntekst" lag er valgt, holder du nede Skift-tasten på tastaturet, og trykk deretter på pil ned-tasten til bunn delene sin plass på bunnen av oppsettet. Gjøre det på denne måten i stedet for å bruke musen vil holde bunnteksten på linje med alt annet som vi har laget så langt. Avslutt bunnteksten med bunntekst.
Konklusjon
Det siste bildet er under og ha det gøy å lage mer website design ved hjelp av disse teknikkene, og å spille med disse typer funky oppsett og stiler.