Design en Professional, Clean alle blogger Theme i Adobe Photoshop
I denne opplæringen vil du lære hvordan enkle og rett frem design teknikker kan lage et rent samfunn blogg tema i Adobe Photoshop . Noen teknikker som omtales i denne opplæringen omfatter bruk av riktig avstand, typografi, farger og visuell hierarki - noen viktige verktøy i en vellykket designer verktøykasse. La oss komme i gang!
Om Design
I dag skal vi se på design for Alex Pascals "Revolution Magazine" tema for WordPress. Den fullt kodet versjon er tilgjengelig på Themeforest som en WordPress blogg tema.
Revolution Magazine er ren, moderne, premium WordPress magasinet, som også fungerer som et fellesskap blogg, personlig blogg, eller hva du skal bruke den til. Hvis du har vært på jakt etter den gnist for å tenne din ren gamle bloggen til et populært magasin, har du funnet den.
Det hele starter med design skjønt, og Alex kommer til å lede oss gjennom hvordan han nærmet designfasen av dette prosjektet. Så dette er bare et design tutorial, vil han ikke gå inn i temaet-koding, men husk at du kan sjekke ut den revolusjonen tema på Themeforest å se et levende eksempel. Det finnes også en haug med flotte WordPress Theme koding tuts over på Nettuts (som denne). Vi håper du liker det - la oss grave i
Trinn 1
Gå til Fil> Ny> deretter sette høyden til ca 2000px, bredden til 1400px, og oppløsningen til 72 dpi
Vi må også sørge for at våre linjaler og veiledninger blir sett. Så, vil vi gå til Vis> Tillegg /linjaler /Snap (slik at våre objekter knipse i tråd med våre guider).
Vi trenger nå å sette opp noen raske ledelinjer for å bruke senere i utformingen . Gå til Vis> New Guide ...> Kontroller "Vertical" og skriv inn følgende verdier, trykke på "OK" etter hver enkelt å sette det inn. Vi vil veilede linjer på 220px, 250px, 380px, 420px, 830px, 860px, 880px, 1155px, og 1180px.
Nå skal fylle vår bakgrunn med en solid farge. Velg laget "Bakgrunn", høyreklikk på den og velg "Layer fra bakgrunnen" og gi den et navn. Nå bruker Rectangular Marquee Tool (M), opprette et utvalg over hele lerretet og fylle markeringen med # d0d0d0.
Trinn 2
Vi vil nå lage en header bakgrunn. Lag et nytt lag, og kaller det "header", så grip din Rectangular Marquee Tool (M) og foreta et valg på toppen av lerretet spenner 175px høy og fullt over lerretet og fyll den med hvilken som helst farge. Dobbeltklikk på laget du nettopp har laget og klikk på "Gradient Overlay"> eksisterende gradient bilde> deretter satt lengst til høyre farge til # 383838. Plasser venstre fargen på ca 60% og endre fargen til # 2D2D2D.
Nå gå videre og duplisere "header" lag og flytte den direkte under den første spissen. Dobbelklikk på laget igjen og gå til "Gradient Overlay"> eksisterende gradient bilde> deretter satt lengst til høyre farge til # e0e0e0. Plasser venstre fargen på ca 50% og endre fargen til # d0d0d0.
Nå klikk på "Inner Shadow" og endre fargen til #EEEEEE, tettheten til 100%, avstand til 1px, choke til 100 % og størrelse til 0px. Endre vinkelen til 90 grader og fjern "Global Lighting" som vi skal bruke forskjellige lys vinkler hele temaet.
Nå som vi har bakgrunnen klar til å gå, la oss lage en logo vår side for! Lag et nytt lag, om 40px fra toppen og ligned opp med den første ledelinje, ved å bruke Horisontal Type Tool (T), skriver du inn navnet på nettstedet ditt på ønsket skrift (demo bildene vise Helvetica Neue LT Std men vanlig Helvetica eller Arial fungerer helt fint). Fortsett for å endre Layer Styles som vist i eksempelet nedenfor.
Dette er hva din header skal se ut så langt.
Trinn 3
Et nettsted er ingenting uten navigasjon, og en god en på det! La oss nå lage et navigasjonsfelt som harmonerer med vår eksisterende header bakgrunn.
Navigasjon
Lag et nytt lag, og kaller det "Vertical Gradient" og ta tak i Rectangular Marquee Tool (M) og gjøre en 960 x 40px utvalg 115px fra toppen av lerretet, slik at ca 20px under valget for bakgrunnen og fyll den med hvilken som helst farge. Du kan deretter legge til Layer Styles som vises i bildet under til laget du nettopp har laget.
Nå duplisere laget du nettopp har laget og endre navnet til "Horizontal Gradient". Endre Layer Styles henhold til bildet under.
Til slutt opprette en 960 x 1px linje i et nytt lag kalt "Darklight" rett ovenfor de to foregående lag og fyll den med # 1d1d1d. Navigasjons skal nå se litt ut som på bildet under.
La oss nå prøve å lage en egendefinert "hjem" link-knapp som vil skille seg ut fra resten av lenkene i navigeringen. Lag et nytt lag, og foreta et valg med Avrundet rektangel Tool (U) om 50 piksler ved 60px vertikalt, fylt med # 444444, og fyll den avrundede kanter slik utvalget er bare avrundet på toppen.
Last ned dette hjemme ikon, åpne det i Photoshop, og importere den til ditt eksisterende lerret. Endre størrelsen til ca 18px av 17px og fyll den med # 999999. Sentrere det i forrige laget du har gjort, og nå har en stilfull kobling deg!
Neste vi skal legge til navigasjon elementer i vår navigasjon! Grip Horizontal Type Tool (T), angi følgende stiler under, og skriv inn et menyelement. I vårt eksempel er det første elementet "Dokumentasjon" med en beskrivelse av "tema støtte og guide". Legg til så mange elementer som du ønsker, og etterlater en padding av 20px mellom hvert menyvalg.
Social Media Icons
For neste trinn, vi kommer til å trenge sosiale medier ikoner. Vi begynner ved å laste ned dette settet med sosiale medier ikoner, ved KomodoMedia, og deretter plassere fire ikoner og desaturating dem (Shift + Ctrl + U) som på bildet nedenfor.
Gratulerer! Overskriften på nettstedet vårt er nå komplett! La oss fortsette på kroppen av nettstedet.
Trinn 4
Nå som hele header er gjort, har vi tenkt å holde det gående på kroppen av nettstedet vårt.
Hoved Body
For det første, vi kommer til å dele kroppen i to halvdeler - en for hoveddelen innhold og den andre for sidepanelet. Lag et nytt layer, kall det "hoveddelen" og gjøre et valg med Rectangular Marquee Tool (M) 640px bred og like høy som du ønsker (minst 1000px eller så), som starter rett under overskriften bakgrunnen. Fyll dette valget med #ffffff. Nå opprette et nytt lag, kaller det "sidebar" og gjøre et utvalg 320px bredt på høyre side av den "hoveddelen" lag og gjøre det så høyt som hoveddelen. Fyll den med # e6e6e6.
Deretter vil vi gi sidebar en svak indre skygge på venstre side for å skape en "innrykket" illusjon. Tilsett Layer Styles nedenfor til "sidebar" lag.
Featured Slider
Lag et nytt lag og bruke rektangel Marquee Tool (M), gjør en 960 x 360px valg høyre på toppen av kroppen vår, rett under navigasjon og fyll den med # e6e6e6. Lag et nytt lag, og etterlot seg en 25px margin på alle kanter, inni forrige valg, gjør en 910px ved 312px utvalg og fylle det med #ffffff. I Layer Styles, legge en 1px #dddddd indre strøk på dette laget.
For neste trinn, vi trenger en eksempelbilde å bruke som en plassholder. Et bilde av noe vil fungere så bare finne noe som er 580px ved 300px og legg den i et nytt lag, passer det 5PX vekk fra hver side av beholderen vi nettopp har gjort.
Lag et nytt lag og kall det "tab_hover". Grab rektangel Marquee Tool (M) og gjøre en 320px ved 41px utvalg direkte til høyre på bildet, i øverste høyre hjørne av den hvite glidebryteren container. Fyll den med hvilken som helst farge. Bruke det mangekantede lassoverktøyet, klikker 20px igjen av rektangelet, nøyaktig halvveis i vertikalt og hold Ctrl mens du drar diagonalt opp og rett før du møter rektangelet øverste venstre hjørne. Fremdeles holder Ctrl, drar ned til du møter nederst i venstre hjørne, og til slutt, gå tilbake til utgangsposisjonen. Fyll dette valget med hvilken som helst farge.
Fortsett å legge til stiler som vises i bildet under til "tab_hover" lag.
Nå gjør en 320px ved 92px utvalg med rektangel Marquee Tool (M ) rett under kategorien, legg den i et nytt lag som heter "tab_space" og bruke de nødvendige Layer Styles beskrevet i bildet.
Nå la oss gjenta trinnene for å lage resten av kategoriene, etter litt forskjellige stiler for å skille den "aktive" state fra resten av kategoriene.
Til slutt må vi komme opp med noe som ligner på dette, og klar til å gå!
Trinn 5
Puh! Vi er nesten der! Med den vanskeligste delen ut av veien, la oss fortsette på kroppen av nettstedet vårt. I dette trinnet, vil vi diskutere viktige teknikker for eksempel avstand.
La oss begynne vår "Siste innlegg" -delen med et innlegg. La oss lage en grense ved å gjøre en 615px ved 210px utvalg med rektangel Marquee Tool (M), fylle den med hvilken som helst farge i et nytt lag som heter "grensen" og deretter legge en gradient beskrevet i bildet nedenfor. Så snart vi er ferdig med det, setter du inn en 610px ved 200px bilde, forlater 5px padding i rammen. Bildet er ikke viktig, så nok en gang, du kan bruke hva du ønsker som plassholder!
Riktig avstand er viktig i et vellykket design. Vårt samfunn blogg tema demostrates sin styrke i total konsistens og avstand ved å ha kongruente marginer hele innlegget elementer for å hjelpe leserens øye lett strømme ned på siden. La oss ta en titt på hvordan våre innlegg vil se ut, med hjelp av noen retningslinjer!
Den neste delen er relativt forklarende. Bruke Horizontal Type Tool (T), skriver ut en overskrift, metainformasjon, og utdrag for plassholdere (du kan bruke teksten som brukes i demoen bildet for å spare tid) henviser til det forrige bildet for orddeling og justering hjelp. Se i bildet under for tekststiler nødvendig. Når hele teksten er lagt til, ta tak i Avrundet rektangel Tool (U) og gjøre noen raske knapper (ca. 120px ved 32px), justere dem med venstre side av stolpen og legge stilene som vises i bildet nedenfor. Du skal nå ha en attraktiv innlegg som du kan kopiere over og over til du er fornøyd!
Trinn 6
Nesten like viktig del som noen i et fellesskap blogg tema, sidepanelet! For demonstrative formål, vil vi bare lage noen generiske widgets - åpenbart at det ville være umulig å dekke en tilpasset design for hver widget der ute, men de fleste av disse vil tillate at de kreative til å flyte å skape mer
! For denne delen, må vi laste ned gratis Icon Pack fra Graphic River og importere RSS 48x48px og Twitter 48x48px ikoner i vårt prosjekt. Posisjon disse ikonene 20px vekk fra venstre side av sidepanelet og sørge for at de er på linje vertikalt med det første innlegget til venstre.
Grab Horizontal Type Tool (T) og skriv inn et tilfeldig tall for abonnentene og tilhengerne bruker Georgia font, og ordene "abonnenter" og "tilhengere" i Arial som beskrevet i bildet nedenfor.
Hva med en enkel annonse widget? Ja visst! Grab Rectangular Marquee Tool (M) og gjøre en 280px ved 410px utvalg, fyll den med vanlig hvit, og gi det en indre strøk av 1px #dddddd. Hente et par eksempelannonser fra Theme Forest og slippe dem inn i den nye beholderen, slik 9-10px polstring mellom hver (avhengig av om det er mellom grensen eller mellom hver annonse).
Til slutt skriver du opp en rask Tekst Widget med Horizontal Type Tool (T) ved hjelp av stiler som tilbys i bildet nedenfor.
Grab Rectangular Marquee Tool (M) og gjøre en 280px ved 225px container. Fyll den med #eeeeee og gi den en indre strøk av 1px #dbdbdb. Nytt lag, lage en fane om 84px av 37px i øvre venstre hjørne av beholderen, forlater 4px padding på hver side, deretter i samme lag opprette en annen 270px ved 180px utvalg og fylle den med hvit, og skaper et rektangel med en liten firkant stikker ut i venstre. Gi det en indre strøk av 1px # e0e0e0. Fullbyrde de andre 2 faner, slik 4px padding på hver side til alle tider. Fyll ut teksten med Arial 12px Fet. Lag en 3px av 3px bullet fylt med #bbbbbb og lage så mange elementer som du ønsker.
Det er det for sidepanelet, la oss gå ut på resten av området!
Trinn 7
Nå er vi sakte innpakning opp dette nettstedet med ... du gjettet det, bunnteksten! La oss forberede vår footer ved å skape en rask bakgrunn for det. Grab rektangel Marquee Tool (M) og lage en 960 x 510px valg i et nytt lag, rett under hoveddelen bakgrunnen. Fyll dette valget med # 2d2d2d. Dette vil fungere som vår footer med 4 kolonner i den. Rett under denne blokken av farge, foreta et valg 960 x 60px og fyll den med # 1d1d1d og legg den i et nytt lag. Dette vil fungere som "copyright" delen av bunntekst og en enkel, men effektiv måte å markere slutten på siden.
I vårt område, vil vi ha 4 til og med søyler i bunnteksten, hver 200px bred med en 25px margin mellom hver enkelt. For å holde ting uniform, vil vi også la 25px på toppen av vår bunntekst, etter som vi vil ha overskriftene i hver kolonne. Gå videre og ta tak i Horizontal Type Tool (T) og begynner å skrive ut overskrifter for hver kolonne, ved hjelp av stiler beskrevet i bildet nedenfor. Leaving 20px under overskriftene, skriver ut et kort avsnitt eller en liste over elementer adskilt med en enkel "en piksel på, én piksel off" prikkete skillelinjen.
Konklusjon
Gratulerer, du har bare utformet en ren, community blogg tema i Adobe Photoshop. Forhåpentligvis har du lært noen tips og triks om hvordan å designe visse aspekter av ren organiserte områder og er i stand til å bruke disse ferdighetene i prosjekter av dine egne i fremtiden!
Siden dette er bare et design tutorial, jeg haven 't gått inn i tema-koding i det hele tatt, men du kan sjekke ut den revolusjonen tema på Themeforest å se et levende eksempel.
Lykke til og takk for lesing! :)