Create en mørk, Clean Website Design i Adobe Photoshop
I denne opplæringen er vi i ferd med å lære å designe en mørk, ren nettsiden i Adobe Photoshop. Som vi gå gjennom denne opplæringen, vil vi jobbe med: enkle figurer (rektangler, linjer, piler, etc), lagstiler, mønstre, innførsel og avsnittsstiler, og mange andre Photoshop-design teknikker som du kan tilpasse til ditt nettsted grensesnittet utforming arbeidsflyt.
publiseres Tutorial
Hver noen uker, vi besøker noen av våre lesernes favoritt innlegg fra hele historien til området. Denne opplæringen ble første gang utgitt i desember 2010.
Om forfatteren
Julian Chaniolleau, også kjent som Devilcantburn, er en frilans grafisk og web designer. Han er også forfatter på Themeforest, med maler som 96Display eller Stereoline, kan du også finne flere av hans arbeid på devilcantburn.com
Denne utformingen er et godt eksempel på Julian unike stil. Mørk, men likevel sofistikert nok til å brukes til en bedrift området. Du kan sjekke ut mer av Julians design på sitt Themeforest profil, DevilCantBurn
La oss hoppe rett i
Trinn 1:.! Stille Document
Begynn med å lage et nytt dokument i Photoshop som er 1200px x 1600px. Vær sikker på at oppløsningen er satt til 72 piksler /tomme og din bakgrunn er satt til hvit. Vi trenger å låse opp bakgrunnslaget slik at vi kan legge til noen lagstiler, høyreklikk på bakgrunnen og velg "Layer fra Bakgrunn". Deretter kan du endre navnet på laget tilbake til bakgrunnen ..
Fyll bakgrunnen med fargen # 101010
Nå opprette følgende guider. (Meny > Vis > New guide ...) .:
120px vertikal
600px vertikal
1080px vertikal
Nå har du grensene og midten av grensesnittet område
Trinn 2: Organiser grupper ...
Organisasjonen er virkelig viktig for min egen arbeidsflyt - så det neste trinnet er å begynne å lage våre Layer grupper. Starter organisert er viktig for en hovedgrunn: de fleste store nettstedet prosjekter ender med hundrevis av lag, så hvis du ikke starter med organisasjonen i tankene, vil det være lett å gå seg vill hvis du ikke tar deg tid til å gruppere elementer inn i "mapper" og holde alt som heter riktig.
I Lag-panelet, klikk på ikonet for å opprette en ny mappe, dobbeltklikker du på navnet på mappen for å endre navnet. . Gjør det samme for alle mappene
Hovedlaget mapper som vi ønsker er:
Header
Slider
Hovedanmeldelser
Footer
Trinn 3: Opprett Header
Velg " header " mappen i Lag-panelet. Deretter velger du rektangel verktøyet fra Vector Shapes området på verktøylinjen:
Tegn et rektangel. Gi det liker " Top bar bg ". Gjør Ctrl + T eller Cmd + T (Mac) og sette proprieties å være 1200px bredt ved 10px høy:
Nå la oss legge til noen subtile styling; Dobbelklikk på den fargede miniatyr i lag-panelet for å sette farge til # 252525. Dobbeltklikk på lag for å sette FX-lag som dette:
Denne subtile "indre skygge" vil legge til en ramme effekt til bunns i dette rektangelet - dette er viktig å skille det fra resten av header design.
Trinn 4:. Opprett Meny
Opprett en ny mappe som heter "Top Menu" i HEADER gruppe
Tegn et nytt rektangel. Gi det liker " Top Menu bg ". Gjør Ctrl + T eller Apple + T og sette proprieties som " Top bar bg " men med 90px høyde og 10px i Y-aksen. Så dette rektangelet vil være like under " Top nar bg " lag i lagpanelet.
Opprett elementet menyen teksten som du trenger. Jeg bruker fonten, "Droid Serif", for å lage menyen, men du kan bruke noe som du ønsker. . Plasser den på 20px fra høyre ledelinje
Jeg satte 4 "mellomrom" (treffer mellomromstasten 4x) mellom hvert element og font-size er 18px
Trinn 5:. Plasser Logo
Opprett en ny mappe som heter "Top Logo" i HEADER gruppe over alle grupper. Velg den og gå til Meny> Filer> Import. I ressurser mappen jeg har tatt en prøve av logo heter "logo_zombie.psd". Velg det og plassere det på 130px av venstre og 5px av topp
Du kan legge til en ny FX stil på denne logoen som du trenger
Trinn 6:.. Opprett Slider
Velg SLIDER gruppen og skape et rektangel som trinn 3 og angi proprieties med 400px høyde og 100px i Y-aksen
Gi det noe sånt som ". Gradient " og dobbeltklikk på den fargede miniatyr i lag-panelet for å sette farge til # 77b400. Dobbeltklikk på lag for å sette FX-lag som dette:
Gradient svart (# 00000) med opacity på 100% til Svart med opactity på 0
Nå, bør du få en utforming som dette:
Denne strategien med å legge en "skygge gradient" i stedet for å bruke faste farger er viktig fordi det vil gi oss mulighet til å enkelt endre fargene senere ved å justere basis-rektangel farge
<. p> Deretter oppretter du en ny mappe som heter "slider_block". Lag et rektangel (med Vector Tools (U) som alltid) i denne gruppen som heter "Transparency"
Posisjons det med disse verdiene. Dobbeltklikk på laget i lagets panelet for å åpne FX-lagalternativer . og sette det slik:
Dupliser "Transparency" lag, fjerne FX-lagalternativer og den navnet "bildeområdet" .Still bakgrunnen opactity til 100% og endre størrelse på det med dette verdier for å skape multi lags effekt:
Trinn 7: Lag Slider Kontroll Elements
Opprett et nytt dokument 100px x 100px. Velg Custom Vector Shape (U) fra verktøy bar og klikk høyre på dokumentet for å åpne listen over tilpassede vektorfigurer. For å opprette pilen, vil jeg begynne med en standard pil, og så får vi tilpasse den:
Lag formen med om en 50 piksler bredde. Lagnavnet " Arrow slider ". Transform formen som du trenger ... med den hvite pilen verktøyet (A), kan du justere vektorbaner for å lage din egen pil ...
Sett en FX-lag på lag med disse innstillingene:
Fjern bakgrunn av dette dokumentet og lagre dokumentet som: ArrowSlider.psd i PSD mappe
Plasser denne pilen i " slider_block ". gruppe. For å gjøre det, Meny > Fil > Import ... Velg ArrowSlider.psd og plassere den i posisjonen du ønsker ved siden av glidebryteren.
Duplicate pilen lag (Ctrl + J eller Cmd + J) for å lage pil venstre og plassere det. Bruk Meny> Rediger> Transformer> Roter på horisontal akse å rotere pilen i riktig retning
Trinn 8:. Marker Slider
Skjul "slider_block" group.Create en ny blank lag , og bruk Circle markeringsverktøy (M) for å lage en sirkel om 200px. Fyll det med hvit farge.
Slipp ditt valg, og deretter bruke Filter> Gaussian Blur og sett den på 50 piksler.
Sett lag fusion på "overlay" og flytte den på toppen av slider.Duplicate dette laget 2 ganger og plassere lagene i bunnen av glidebryteren området på venstre og høyre ...
Trinn 9: Forbedre Slider
Dupliser "gradient" lag og endre navnet "mørk bar" . Redusere høyden til 20px og plasser den på bunnen ot "gradient" lag.
Endre fargen på laget til Black stedet for gradient farge og satt laget bakgrunnen opacity på 60% Dobbel-klikk å åpne FX-lagalternativer og lage en drop og innershadow som dette:
Flytt lag på 1px ned. Nå har du fått en fin markerte linjen mellom glideren og den sorte bakgrunnen
Trinn 10:. Gjør Slider Float
Åpne background.jpg fil fra ressurser mappen (fra de nedlastede filene! ) og gå til Meny> Rediger> Definer mønster .... Deretter lukker file.Now velge bakgrunnslaget, og dobbeltklikk på den for å åpne FX-lagalternativer og klikk på Patterns kategorien. Her velger du din nye bakgrunnen, nettopp opprettet.
Nå får valget av Transparency lag (Ctrl + klikk eller Cmd + klikk på laget). Lag et nytt lag som heter " Shadow " og plassere den under " Transparency " lag. Fyll den i svart og legge til en Gaussian Blur på. Meny > Filtre > Uklarheter > Gaussian Blur ... og gjøre det med 20px lengde. Nå forvandle det til å gjøre det som en drop ....
Igjen, bruk Meny > Filtre > Uklarheter > Gaussian Blur ... men nå med 5px length.Now forvandle den igjen for å endre størrelsen på det å matche åpenhet lag ....
Hold valgt " Shadow " lag og ta " Transparency " . lags utvalg (Ctrl + klikk eller Cmd + klikk på laget i lag-panelet)
Nå invertere utvalget Ctrl + i eller Cmd + i og klikk på ikonet for å opprette en opasitet maske på " Shadow " lag. Skyggen er nå skjult bak åpenhet området
Trinn 11:. Forbedre Logo
Rett før vi går videre til hoveddelen, har vi tenkt å forbedre logoen for å gjøre den mer dynamisk .
Opprett en ny tomt lag under logoen lag og gi den navnet "skygge logo". Få utvalget av logoen lag og fylle "skygge logo" lag i svart.
Legg til en Gaussian Blur på med 1,5px lengde. Forvandle det. Ctrl + T eller Cmd + T for å forvandle det, flytter du referer punktet helt til venstre og flytte righthandle til bunnen for 20px ...
Nå har du fått en fin dybde skyggeeffekt. Du kan også legge til mer effekt på logoen seg selv hvis du ønsker
Trinn 12: Definer Kolonner
Nå er vi kommer til å legge noen flere guider for å skape de 4 kolonner som resten av innholdet har blitt designet med ...
Lag følgende guider (Meny > Vis > New guide ...):
355px vertikal
375px vertikal
590px vertikal
610px vertikal
825px vertikal
845px vertikal
Vi har nå 4 kolonner med 215px hver og 20px mellom dem
Trinn 13:. Slagord Block
Importer geek_zombie.png fra ressurser mappen og plasser den på midten av den første kolonnen
. Lag en stor tekstlinje for slagordet med teksten du ønsker. Jeg brukte skriften "Droid Serif" på størrelsen på 30px og line-height på 42pt. Du kan justere typografi som du ønsker selv;)
Tegn et rektangel under slagordet med 7px av høyde
På den svarte firkanten lage FX-Layer alternativer som dette:
.
Du har nå en fin skråkant (trykket) bar.
Velg 3 lag (Zombie + Slagord + svart bar) og gjøre Ctrl + G eller Cmd + G for å gruppere dem. Endre navnet på gruppen "slagord". Legg merke til hvordan vi bor organisert gjennom hele prosessen
Trinn 14: Første kolonne Block
Ta Tekst-verktøyet og lage en tittel. Jeg bruker 30pt typen igjen - legg merke til hvordan dette er det samme som slagord, for å holde typografi lignende. Dette bidrar til å sikre en konsekvent, profesjonelt utseende over hele konstruksjonen.
Definer en sone av tekst på rundt 128px av tittel og sette noen små "filler" teksten inni den. Jeg bruker 13pt Arial, men du kan bruke hva du ønsker.
Dupliser svart bar vi har skapt for slagordet i trinnet før, og legg den under teksten på 20px fra bunnen av text.Resize det å gjøre det fylle den første kolonnen.
Lag en bildeområdet med Vector Shape Tool (U). 215 x 88px.Duplicate den, endre navn på det som " Tranparency_1col " og strekke det i høyden for å få en blokk med 215 x 108px.Press Ctrl + eller Cmd +, for å flytte lag ned i Layer panel
Velg ". Transparency " lag og kopiere FX-Layer stil å sette det på laget bare dupliseres (" Tranparency_1col ").
Nå kan du sette deg bilde over bildeområdet. Høyreklikk på bildet og velg " Opprett klipping maske ".
Trinn 15: Lag de andre kolonnene
Nå kan du kopiere den første kolonnen (laggruppe), og deretter flytte den til den andre kolonnen. Endre innholdet (bilde /tekst) som trengs
Gjør det samme for kolonnene 3 og 4 ...
Trinn 16:. Fotnoten
Gå til Meny > Bilde > Canvas størrelse og redigere størrelsen på lerretet som dette:
Tegn et rektangel. Gi det liker " Footer bg ". Gjør Ctrl + T eller Cmd + T (Mac) og sette proprieties til:
Dobbeltklikk på den fargede miniatyr i lag-panelet for å sette farge til # 101010. Dobbeltklikk på lag for å sette FX-lag som dette:
Velg og duplisere lagene " mørk bar " og " Gradient " . fra Slider gruppen
Gruppe lagene og plassere dem under " footer bg " i Lag-panelet. Flytt dem til bunnen av dokumentet.
Resize dem til å skape den stilen du ønsker. I mitt eksempel, jeg gjort Gradient lag 35px høy og "Dark bar" lag 8 piksler høye ...
Sett logoen nederst til høyre på 20px av guide rett.
Dupliser toppmenyelementer for å sette dem i bunnteksten over " footer bg " lag
Lag en opphavsrett linje i Arial, 11pt, svart farge
Dupliser ".. footer bg " og endre størrelse på det i høyden på 10px. Flytt den like over " footer bg ". Som skaper en fin skråkant effekt for bunnmenyen.
Ferdig! Lag dine egne versjoner!
Konklusjon
Takk for følge med! Jeg håper du er i stand til å bruke noen av triksene og teknikker i denne opplæringen i noen av dine egne prosjekter. Hvis du husker noe, håper jeg det er at du bor organisert er avgjørende for å skape et godt designet nettsted. Disse samme lag-settene kan brukes til å lage HTML /CSS rammeverk når du begynner koding. Takk igjen! Anmeldelser