Oprette en Mørk, Ren Hjemmeside Design i Adobe Photoshop

I denne tutorial er vi ved at lære hvordan man designer en mørk, ren website i Adobe Photoshop. Som vi gå gennem denne tutorial, vi vil arbejde med: simple figurer (rektangler, linjer, pile, osv), layer styles, mønstre, import og afsnitsformater, og mange andre Photoshop designteknikker, du kan tilpasse til din hjemmeside interface design arbejdsgangen.

Om for Fatteren

Julian Chaniolleau, også kendt som Devilcantburn, er en freelance grafisk og web designer.  Han er også en forfatter på ThemeForest, med skabeloner som 96Display eller Stereoline, kan du også finde flere af hans arbejde på devilcantburn.com.

Dette design er et godt eksempel på Julians unikke stil: mørke, endnu sofistikeret nok til at blive brugt til en business site. Du kan tjekke ud flere af Julian's design på hans ThemeForest profil, DevilCantBurn.

Lad os dykke lige ind!

Trin 1: Oprettelse af Dokument

Begynd med at oprette et nyt dokument i Photoshop der er 1200px x 1600px. Sørg for, at din opløsning er indstillet til 72 pixels / tommer, og din baggrund er indstillet til hvid. Vi har brug at låse baggrundslaget, så vi kan tilføje nogle lagtyper, højreklikke på baggrunden og vælge "Lag fra baggrund". Du kan derefter omdøbe lag tilbage til baggrunden...

Udfylde baggrunden med farve #101010.

Opret nu følgende vejledninger (Menu> Vis> Ny vejledning ...):

• 120px lodret
• 600px lodret
• 1080px lodret

Nu har du grænserne og midten af ​​grænsefladens område.

Trin 2: Organisere Dine Grupper...

Organisationen er virkelig vigtigt for min egen arbejdsgang - så det næste skridt er at begynde at oprette vores Lag Grupper. At starte organiseret er vigtig af en hovedårsag: De fleste store webprojekter slutter med hundredvis af lag, så hvis du ikke starter med organisationen i tankerne, vil det være let at gå tabt, hvis du ikke tager tid til at gruppere elementer ind i ''mapper'' og holde alt navngivet korrekt.

Klik på ikonet for at oprette en ny mappe, skal du dobbeltklikke på navnet på mappen for at redigere navnet i panelet Lag. Gør det samme for alle mapper.

De vigtigste lag mapper som vi ønsker er:

• Header
• Skyderen
• Main
• Sidefod

Trin 3: Opret Overskriften

Vælg mappen "header" i panelet Lag. Vælg, derefter rektangelværktøjet fra værktøjslinjens Vector Shapes område:

Tegn et rektangel. Omdøbe det som "Top bar bg". Ctrl + T eller Cmd + T (Mac) og indstille egenskaber til at være 1200px bred af 10px høje:

Nu lad os tilføje nogle subtile styling; Dobbelt klik på den farvede miniaturebillede i lagpanelet til at angive farven til #252525. Dobbelt-klik på laget til at sætte FX-lag som dette:

Denne subtile "inner shadow" vil tilføje en kant effekt til bunden af denne rektangel - det er vigtigt at adskille det fra resten af header design.

Trin 4: Opret Menuen

Opret en ny mappe med navnet "Top Menu" i gruppen SIDEHOVED.

Tegne en ny rektangel. Omdøbe det som "Top Menu bg". Ctrl + T eller æble + T og angive egenskaber som "Top bar bg" men med 90px højde og 10px i Y aksen. Så dette rektangel vil være lige under den "Top nar bg" lag i panelet Lag.

Opret vare menutekst som du har brug for. Jeg bruger skrifttypen, "Droid Serif", for at skabe menuen, men du kan bruge noget som du gerne. Placer det på 20px fra højre guide line.

Jeg sætter 4 "rum" (hit mellemrumstasten 4 x) mellem hvert element og skriftstørrelsen er 18px.

Trin 5: Placere logoet

Opret en ny mappe med navnet "Top Logo" i gruppen SIDEHOVED over alle grupper. Vælg det og gå til Menuen > Filer > Import. I ressourcemappen har jeg medtaget en stikprøve af logo med navnet ''logo_zombie.psd''. Vælg det og placere det på 130px venstre og 5px af toppen.

Du kan tilføje en ny FX stil på dette logo, som du har brug for.

Trin 6: Opret Skyderen

Vælg gruppen SKYDEREN og opretter et rektangel som trin 3 og indstille egenskaber med 400px højde og 100px i Y aksen.

Omdøbe det noget lignende "Gradient", og dobbeltklik på den farvede miniaturebillede i lagpanelet til at angive farven til #77b400. Dobbelt-klik på laget til at sætte FX-lag som dette:

Gradient sort (#00000) med opacitet på 100% til sort med gennemsigtighed på 0

Nu skal du få et design som dette:

Denne strategi med at tilføje en "skygge gradient" i stedet for ved hjælp af faste farver er vigtigt, fordi det gør det muligt at nemt ændre farver senere ved at justere base-rektangel farve.

Næste, Skabe en ny omslag benævnt "slider_block". Oprette et rektangel (med Vektor Værktøj (U) som altid) i denne gruppe med navnet "Gennemsigtighed".

Placer det med disse værdier: Dobbelt-klik på lag i lags panel til at åbne FX-lag indstillinger. og indstille det sådan her:

Dubler laget "Gennemsigtighed", fjerne indstillingerne FX-lag og navngiv den "billedområde".
Indstille baggrunden gennemsigtighed til 100% og tilpas det med denne værdier for at oprette flere lag effekt:

Trin 7: Oprette Slider Control Elementer

Oprette et nyt dokument 100px x 100px. Vælg den brugerdefinerede vektorform (U) fra værktøjslinjen og klik - lige på dokumentet for at åbne listen over brugerdefinerede vektorformer. For at oprette pilen begynder jeg med en standardpileform, og så tilpasser vi den:

Oprette figur med omkring en 50px bredde. Navngiv laget ''Piletaster''. Transform formen, som du har brug for ... med det hvide pilværktøj (A), kan du justere vektorstierne for at lave din egen pil ...

Sæt et FX-lag på laget med disse indstillinger:

Fjern baggrunden for dette dokument og gem dokumentet som: ArrowSlider.psd i PSD-mappen.

Placer denne pil i gruppen "slider_block". For at gøre det, skal du vælge Menu> Fil> Import ...
Vælg ArrowSlider.psd og læg det på den ønskede position ved siden af ​​skyderen.

Dupliker pillaget (Ctrl + J eller Cmd + J) for at oprette venstre pil og placere det.
Brug Menu> Rediger> Transformér> Drej på den vandrette akse for at rotere pilen i den rigtige retning.

Trin 8: Fremhæve Skyderen

Skjule gruppen "slider_block".
Opret et nyt tomt lag, og brug værktøjet cirkel markering (M) til at oprette en cirkel om 200px.
Fyld den med hvid farve.

Slip dit valg, og brug derefter Filter> Gaussian Blur og sæt det på 50px.

Indstil lagfusion på 'overlay' og flyt det øverst på skyderen.
Duplikér dette lag 2 gange, og placer lagene nederst i skyderområdet til venstre og højre ...

Trin 9: Forbedre Skyderen

Dupliker 'gradient' laget og omdøbe det ''dark bar''. Reducer højden til 20px og placer den i bunden af ​​'gradient' laget.

Skift farve på laget til sort i stedet for gradientfarven og indstil lagets baggrundsopacitet på 60%.
Dobbeltklik for at åbne mulighederne for FX-lag og opret en dropshadow og indershadow som denne:

Flyt laget ved 1px nede.
Nu har du en flot markeret linje mellem skyderen og den sorte baggrund.

Trin 10: Gør skyderen flyde!

Åbn background.jpg-filen fra ressourcemappen (fra de downloadede filer) og gå til Menu> Rediger> Definer mønster .... Luk derefter filen.
Vælg nu baggrundslaget og dobbeltklik på det for at åbne mulighederne for FX-lag og klik på fanen Mønstre. Her vælger du din nye baggrund, lige oprettet.

Få nu markeringen af ​​gennemsigtighedslaget (Ctrl + klik eller Cmd + klik på laget).
Opret et nyt lag med navnet ''Shadow'' og læg det under ''Transparency'' -laget.
Fyld den i sort og tilføje en Gaussian Blur på.
Menu> Filtre> Blurs> Gaussian Blur ... og gøre det med 20px længde.
Nu forvandle det til at gøre det som en dropshadow ....

Brug igen, Menu> Filtre> Blurs> Gaussian Blur ... men nu med 5px længde.
Nu omforme det igen for at ændre størrelsen på det for at matche gennemsigtighedslaget ....

Hold markeret ''Skygge'' laget og tag valget ''Transparency'' (Ctrl + klik eller Cmd + klik på laget i lagpanelet).

Vend nu markeringen Ctrl + i eller Cmd + i og klik på ikonet for at oprette en opacitetsmaske på ''Shadow'' -laget. Skyggen er nu skjult bag gennemsigtighedsområdet.

Trin 11: Forbedre logoet

Lige før vi går videre til hoveddelen, vil vi forbedre logoet for at gøre det mere dynamisk.

Opret et nyt blankt lag under logolaget og navngiv det ''skygge logo''. Få udvalg af laget logo og udfylde laget "shadow logo" i sort.

Tilføje en Gaussian Blur på med 1, 5px længde.
Omdanne det. CTRL + T eller Cmd + T til at omdanne det, flytte referer punkt helt til venstre og flytte højre
håndtere til bunden for 20px...

Nu har du en god dybdeskyggeeffekt. Du kan også tilføje mere effekt på selve logoet, hvis du vil have det!

Trin 12: Definere kolonnerne

Nu skal vi tilføje yderligere vejledninger til at oprette de 4 kolonner, som resten af ​​indholdet er designet med ...

Opret følgende guider (Menu> Vis> Ny vejledning ...):

• 355px lodret
• 375px lodret
• 590px lodret
• 610px lodret
• 825px lodret
• 845px lodret

Vi har nu 4 kolonner på 215px hver og 20px mellem dem.

Trin 13: Slogan blok

Import af geek_zombie.png fra mappen ressourcer og Placer det i midten af den første kolonne.

Lav en stor tekstlinje til sloganet med den ønskede tekst. Jeg brugte skrifttypen ''Droid Serif'' i størrelsen 30px og linjens højde ved 42pt. Du kan justere typografi, som du ønsker om ;)

Tegn et rektangel under sloganet med 7px i højden.

På det sorte rektangel opretter du FX-Layer-indstillingerne som denne:

Du har nu en fin skråstreg (presset) bar.

Vælg de 3 lag (Zombie + Slogan + black bar) og lav Ctrl + G eller Cmd + G for at gruppere dem. Omdøbe gruppen "Slogan". Bemærk, hvordan vi holder op med at blive organiseret gennem hele processen!

Trin 14: Første Kolonne Blok

Tag tekstværktøjet og opret en titel. Jeg bruger igen 30pt-typen - bemærk hvordan dette er det samme som sloganet, for at hjælpe med at holde typografien ens. Dette hjælper med at sikre et konsistent og professionelt udseende på tværs af hele designet.

Definer en zone med tekst omkring 128 px af titlen, og læg lidt lille 'fyldstof' -tekst inde i den. Jeg bruger 13pt Arial, men du kan bruge hvad du vil have.

Duplikér den sorte bjælke, vi har oprettet til sloganet i trinet før, og læg det under teksten ved 20px i bunden af ​​teksten.
Ændre størrelsen på den for at få den til at fylde den første kolonne.

Opret et billedområde med Vector Shape-værktøjet (U). 215 x 88px.
Dupliker det, omdøb det som ''Tranparency_1col'' og stræk det i højden for at få en blok på 215 x 108px.
Tryk på Ctrl +, eller Cmd +, at ytte lag i panelet Lag.

Vælg laget "Gennemsigtighed" og kopiere typografien FX-lag for at sætte det på laget bare duplikeres ("Tranparency_1col").

Nu kan du sætte dig billede over billedet området. Højreklik på billedet og vælg "Opret udsnitsmaske".

Trin 15: Opret de Andre Kolonner

Du kan nu kopiere den første kolonne (laggruppe) og derefter flytte den til den anden kolonne. Skift indhold (billede / tekst) efter behov.

Gør det samme for kolonnerne 3 og 4 ...

Trin 16: Side Foden

Gå til menuen > billede > lærred størrelse og redigere størrelsen på lærredet som dette:

Tegn et rektangel. Omdøbe det som "Footer bg". Gøre Ctrl + T eller Cmd + T (Mac) og sæt egenskaber:

Dobbeltklik på den farvede miniaturebillede i lagpanelet til at angive farven til #101010. Dobbeltklik på laget til at sætte FX-lag som dette:

Vælg og duplikere lag "mørk bar" og "Gradient" fra gruppen skyderen.

Gruppere lagene og placere dem under den "sidefod bg" i panelet Lag.

Flyt dem til bunden af ​​dokumentet.

Ændre størrelsen på dem for at skabe den ønskede stil.
I mit eksempel lavede jeg Gradientlaget 35px højt og 'Dark bar' laget 8px højt ...

Sæt logoet nederst til højre ved 20px af guide højre.

Duplikere de øverste menupunkter for at sætte dem i sidefoden over den "sidefod bg" lag.

Oprette en ophavsret linje i Arial, 11pt, sort farve.

Duplikere ''footer bg'' og ændre størrelsen i højden ved 10px.
Flyt det lige over ''fodfodbg''. Det skaber en fin skrå effekt for bundmenuen.

Færdig! Opret dine egne tilpassede versioner!

Konklusion

Tak for at følge med! Jeg håber du kan bruge nogle af de tricks og teknikker i denne tutorial i nogle af dine egne projekter. Hvis du husker noget, håber jeg det er, at opholder sig organiseret er afgørende for at skabe et veldesignet websted. Disse samme lagsæt kan bruges til at oprette HTML / CSS-rammen, når du begynder kodning. Tak igen!