Create En Wickedly Cool horisontalt orientert webdesign

Er du i humør for noe annet? Jeg vil veilede deg i prosessen med å lage design av Stuff - horisontal orientert blogg og portefølje. Kontroller at du besøker Stuff nettutgaven for å se det endelige resultatet!

Trinn 1 Opprett et nytt dokument i Photoshop

Gjør det 1 300 x 800 px. All den plassen er egentlig ikke nødvendig, men det er godt å føle panorama karakter av design, mens vi jobber.

Trinn 2 Opprette Bakgrunnen

Opprett en ny fylleslag med ensfarget # bfc6cd

Legge til støy i bakgrunnen

Convert nye laget til en "smart objekt" (høyreklikk> Convert to Smart Filter) og bruke filteret> Legg til støy (du kan justere den senere om nødvendig takket være smarte filtre funksjonen). Lås lag. For å holde prosjektet rent og organisert, kan du slette lag maske og gjøre det standardbakgrunnslaget (valgfritt).

Trinn 3 Opprette The Big "Stuff" Arrow

Opprett en ny pil forme bruke "form verktøyet" forhåndsinnstilling. Deretter bruker markøren justere formen slik at den ser fin (flytte punktene rundt som det passer deg).

Velg Free transform verktøyet, flytte pilen 310px fra toppen, så grip og flytt den horisontale linjalen til skape ny guide. Smekk den til midten av pilen. Fra nå vil det representere den største horisontale aksen av nettstedet

Legg 4 stiler til pilen (ved å dobbeltklikke på laget). Skygge, indre skygge, ytre glød og gradient overlay (fra #cbcbcb til . #ffffff)

Legg til et nytt tekstlag over pilen lag

Legg stiler på teksten. indre skygge, gradient overlay og hjerneslag. For en bedre dybdevirkning, få slag synlig bare på den nedre halvdelen av teksten ved hjelp av en "gradient" slag med alfa innstillingene for den øverste halvdelen satt til "0" opacity.

Ytre og indre skygger gi pilen mer 3D utseende, men for å gjøre det enda bedre, la oss lage en enkel skinnende lys effekt. Opprett et nytt rektangel og bruke punktkonverteringsverktøyet endre sin form til å lage en liten avrunding. Vi vil maskere dette over Arrow lag for å skape en skinnende effekt.

Sett dette laget fyll til 0% og legge gradient overlay stil med subtile forsvinnende hvitt.

For å unngå lett lag gå utover pilen: ctrl + klikk på pilen lag for å gjøre et utvalg legge lagmaske til lett lag

Trinn 4 Legge bakgrunnsbelysning

For å fokusere seernes oppmerksomhet til logoen, gjør et lys å skille seg pilen ut av bakgrunnen. Du kan bruke en primitiv metode som er:

Opprett ny layer (ctrl + shift + N)

Velg gradient verktøyet

Reset (D) og revers ( X) farger

Velg white-to-full åpenhet radial gradient

Mens du holder shift dra en linje skaper gradient
< li> Gjør graderingen lag opacity 80% (8)

Trinn 5 Lag innholds Holder Mal

Lag en hvit 240px bredde rektangel (høyden bør være litt høyere enn dokument)

Duplicate den (ctrl + d) og endre fargen -. det vil representere et bilde i blogginnlegget, etter
Transform den (ctrl + t) - sett størrelse til 216 x 130px, og flytte sitt senter til sideaksen, etter
Legg vertikale føringer for å markere grenser for fremtiden innhold

Trinn 6 Legg Text

Over bilde oppretter ny tekstboks og fylle den med bloggen tittelen. Bruk en kondensert font som League Gothic (gratis på League of Moveable Type). Under bildet, opprette en ny tekstboks for det generelle innholdet.

Trinn 7 Styling innholds Holder

Lag en markering for innholdet og opprette en ny maske laget for det store rektangelet. Endre masketetthet til 80%

Trinn 8 Legge Meta Tekst
Legg meta info teksten over stolpen. Jeg har brukt 12px Georgia kursiv, 17px linjehøyden. Husk å gjøre bruk av guider for å holde tekster på én linje

Trinn 9 Opprette "Les mer" knapp

Hva å "les mer" tekst nedenfor innlegget

Ett lag under den, skape ny rektangel for å være en lese mer knapp.

Legg til gradient og strekstiler til det. Tips: Pass på stoke inne, for å ha perfekt skarpe hjørner av knappen

Legg til en subtil gradient til tekst lag for

Trinn 10 Opprette et innlegg Badge

Hvis du vil lage. merket bruke en annen rektangel, legge til tekst (jeg har brukt Arial), og vri begge lagene sammen 45 grader.

Legg masken til rektangel lag for å skjule unødvendige hjørner

... og legge 2 små rektangler som en illusjon av merket går under bildet.

Legg til en subtil skygge til merket. Tips: for skygge blanding modus bruker Normal i stedet for standard Multiply, så det vil ta effekt selv om du bruker merket som gjennomsiktig PNG-fil

Trinn 11 Meny

Opprett et nytt tekstlag . I stedet for svart farge (som kan føles unaturlig på lyse bakgrunner), bruke mørk grå for å oppnå mer naturlig utseende

. Tips: For å lage horisontale linjer i stedet for å bruke linjen verktøyet skaper ikke anti-alias tekst ved hjelp av understreking glyph " _ "Det vil alltid være pixel-skarpe og mellomrom mellom linjene vil være lett å kontrollere takket være line-height parameter. Bruk samme line-height som i menytekster og lage så mange linjer som menyelementer, minus én. Gjøre linjene lenger da trengs.

Sett dette laget fyll til ca 15% og legge en hvit skygge.

Legg masken til linjer laget og male med glatt børste på den for å oppnå forsvinnende kanter.

Trinn 12 Lag søkeskjemaet

Lag rektangel med avrundede hjørner (3px) for et søk innspill.

Legg indre skygge til boksen og gjøre lagets fyllet til 70%

Over det legge søketekst og lage tilpassede form som en sender pilen. Legg indre skygge til boksen og gjøre lagets fyllet til 70%

Trinn 13 hvor du skal få Social Media Logos

Som vektor bilder anbefales for dette formålet jeg foreslå å finne trengs logoer i www. brandsoftheworld.com service. I de fleste tilfeller er det den raskeste måten. Åpne logo i Illustrator, kopiere skisserer og lime inn i Photoshop som former. Du kan også bruke Buddy Ikoner fra Orman Clark.

Sett lagets fill til 0% og legge stiler (skygge, indre skygge og farge overlay) for å oppnå 3D-utseende. For å få logoen i aktiv (lysere) state, endre farge og intensitet av Color Overlay stil.

Kopier denne stilen, og kopiere til andre logoer (høyreklikk på lag /Copy Layer stil) Anmeldelser
Trinn 14 Opprette kommentarfeltet

Hvis du vil legge kommentarboksen, skape ytterligere avrundet hjørner rektangel om 520px bred og legge Drop Shadow stil.

Velg den større delen og legg masken til dette laget.

Dupliser laget og snu det er maske. Gjør det nye laget er fill 25%.

I overgangs innstillinger sjekk "lagmaske skjul Effects" alternativet, for å unngå inkonsistens i skyggen linje av begge lag.

Opprett svart vertikal linje på Grensen mellom disse boksene, gjør det fyller også 25% og legge 1px hvit skygge rettet riktig.

Legg noen eksempler avatar og tekster ved hjelp av tidligere brukte farger.

Trinn 15 Opprette piler for en portefølje Slider

Opprett sirkel form og lim lagstiler fra logoen pilen. Skjær pil fra sirkelen ved hjelp av Custom form og skjæremodus

Under denne knappen lag opprette en sirkel -. Samme størrelse eller mindre, og lim den gradient stil fra logo. Tips:. Hvis noen lag har mange stiler, og du vil kopiere bare én, kan du dra stil mens alt presset og slippe den til et annet lag

Legg lys (på samme måte som ovenfor til logoen pilen ).

Hvis du ønsker å gjøre noen små forbedringer, som ingen vil legge merke til, opprette separate lys for knapp og bue-formet hull, og flytte den andre litt ned. Og hvis du allerede har to separate lys, kan du enkelt (uten ekstra maskering) gjør denne lampen lyser sterkere for å være bedre synlig på svært lyse knappen.

Velg alle knappe lag og skape Smart objekt av dem.

Duplicate layer, flytte og flip horisontalt. Nå hvis du redigerer et pilen (dobbeltklikk smart layer) begge vil endre seg.

Det er det!

Alle andre elementer kan gjøres ved å kopiere, lime inn og endre størrelse på eksisterende elementer som vi har designet

. Tips: League Gothic font og andre kule freeware fonter med webdesigner vennlige lisenser kan bli funnet på www.fontsquirrel.com

Vil du opprette HTML eller WordPress versjon av Stuff?

OK, så du har PSD mer eller mindre klar, og ønsker å gå videre. Som Stuff trenger litt annen tilnærming til innhold, på grunn av sin horisontal karakter, er det virkelig vanskelig å kode den riktig. Jeg vet ikke mange horisontale nettsteder som klarte å unngå vanlige feil (f.eks ikke fungerer musehjulet). Vennligst legg igjen en kommentar hvis du ønsker å vite de beste måtene å koding dette designet, og vi får se om vi ikke kan ta opplæringen på kurset!

Uansett, hvis du ønsker å spare tid og få alt på sølvfat, kan du laste ned HTML mal eller WordPress versjon av Stuff for noen få dollar. Takk!