Design og utvikle en komplett nettside (A Tuts + Mini Series, Pt 1)
Dette innlegget er en del av en serie som heter Iconify: En komplett Website.Design og utvikle En komplett nettside (A Tuts + Mini Series, Pt 2)

du vil finne massevis av web design og utvikling tutorials ut på nettet ... men svært få tuts som tar deg fra start til slutt. Masse tutorials er bare for design, og andre er bare for koding. I dag starter vi en ny serie der vi skal designe og utvikle en komplett nettside fra bunnen av; Vi tar deg fra første trådramme til full site design (inkludert 5 sider). Da vil vi være koding av design (i Nettuts selvfølgelig) og til slutt konvertere denne komplette XHTML tema til en fungerende WordPress tema!

Prosjekt Mål!

Vårt mål er å designe og utvikle en enkel site design med en moderne utforming som er bidrar til CMS systemer som WordPress. Vi vil ikke bruke noen ville og gale stil effekter i vår design (poenget her er å holde det enkelt), men vi kommer til å nærme seg hele prosessen, fra start til slutt, som en studie i layout og riktig bruk av marginer og padding.

Vi skal bruke 960 bæresystem fra start til slutt, så hvis du noen gang lurt på hvordan det er å bruke systemet, er nå et godt tidspunkt å lære! Vi skal gjøre noen avvik fra normen, men for det meste vil vi være å bruke 960gs i design og koding faser.

Når dere /gals er ferdig, er du velkommen til å tilpasse utformingen alt du vil med dine egne fonter, farger, stiler og teksturer! Husk, dette er bare en start ut poeng - du er velkommen til å gå så nøtter som du vil når det kommer til personligheten din egen versjon av designen

En kort Course Outline.. Vi kan bryte opp dette på en annen måte når vi treffer koding fase, men dette burde gi deg en god ide om hvor vi er på vei med denne serien:

prosjekteringsfasen

Session 1: Legging av grunn og designe hjemmeside

sesjon 2: Designing Support Pages (Tilgjengelig Neste uke)

koding fasen

sesjon 3: Kutting og xhtml Coding ( tilgjengelig snart)

sesjon 4: Konverter til en Wordpress Theme (snart tilgjengelig)

ressursene som brukes til dette prosjektet

du kan bruke dine egne ressurser hvis du ' d liker, men her er den fullstendige listen over bilder og ikoner som jeg har brukt i opplæringen:

bilder - Lil Rhody Dan, Flickr

merry christmas (foto) - fra PSDTUTS flickr gruppe

sosiale Ikoner - wefunction

Twitter Bird - webtreats

Bruk disse verdiene for tekst farger-head farge: 0f5193; Tekstfarge: 7c7c7c; Link farge: eaa000

La oss komme i gang: Dag En av designfasen

Så, uten videre forsinkelser, la oss starte på designfasen! Denne utformingen fase er delt i to deler. I dag vil vi legge ut trådramme med 960gs system, og vi vil utforme hjemmesiden. I andre del (kommer neste uke), vil vi designe de andre støttesider.

Det viktigste du ønsker å holde styr på i dag er hvordan vi skal bruke to forskjellige varianter av 960gs ( en 12-kolonne layout og en 16-kolonne layout) sammen i samme fil. Jeg skal forklare mer om dette senere, men holde styr på når vi bruker hver annen layout som det vil spille en stor rolle i kodingen fase senere

Dagens fire under deler er:


del A Legging ut nettstedet Rammeverk

del B Designing Header

del C Prosjektering hovedinnholdet området

Part D Designing bunn~~POS=TRUNC


del A: Legging ut nettstedet Rammeverk

Trinn A1: Opprette et nytt dokument med 960gs

Som vi kommer til å jobbe med 960 grid system, gå videre og ta tak i 960 grid system herfra (eller ta det fra 960.gs hvis som lenker stadig går ned).

Inne i hovedmappen (det du nettopp har lastet ned fra http://960.gs), gå til "templates-> photoshop" og åpne "960_grid_16_col.psd" i Photoshop. Gi denne filen til «index.psd" og lagre den i en ny mappe som du selv velger, som vist på bilde A -. 1a

Nå som vi har 16-kolonne fil oppsett, ønsker vi også å importere guiden-laget fra 12-kolonne-fil.

Åpne "960_grid_12_col.psd" i Photoshop (fra den samme mappen du har åpnet "960_grid_16_col.psd" filen. nå låse opp "12 Col Grid" lag og posisjon, og dra det til vår nyopprettede index.psd fil som vist på bilde A - 1b og A -. 1c låse også lag og posisjon "grid_16_col"

Du kan spørre deg selv,. " Hvorfor skal jeg bruke to forskjellige grid filer
"? som grid_16 ikke kan gi oss tre like store kolonner, må vi bruke grid_12 også. den 960gs systemet er faktisk bygget for å brukes på denne måten, så det vil ikke skape noen konflikter ned linjen. Vi vil også bruke disse to tavler i XHTML konvertering fase.

Velg "grid_12_col" og "grid_16_col" lag, velg deretter "Juster øvre kant" og "Justere horisontale sentre" fra alternativpanelet som vist på bilde A - 1d (mens du velger disse alternativene, må du også har aktivert Move Tool (V)). Og det endelige resultatet skal se ut bilde A - 1d

Trinn A2: Innstilling Guides, linjaler og enheter

Det er på tide å sette opp våre retningslinjer og herskere det enkelt å plassere våre elementer.. Gå til "Rediger-> Innstillinger-> Enheter & linjaler" eller trykk "Ctrl + K" for å ringe til Innstillinger dialogboksen. Velg deretter "Units & linjaler" tab. I "Units & linjaler" i ruten Units ledd, fastsatt "piksler" for både "linjaler" og "type" alternativer som vist på bilde A - 2a

Velg nå "Guides, Grid &. Slices "-fanen og i sin Grid ledd, sett verdien" 100 "og enhet til" piksler "på" Uten kraftlinjer hver "alternativet. Og sett "10" for "Underinndeling" felt som vist på bilde A - 2b

Trinn A3:. (Re) Dimensjonering Document

Nå trykker "Ctrl + Alt + C" eller gå til "bilde-> Canvas Size" å ringe Canvas Size dialogboksen og endre innstillinger som vist på bilde A - 3.

som vi har økt vår lerret høyde, nå må vi velge og forstørre våre nett i henhold til høyden av vår dokumentet.

Velg både rutenett laget og trykk "Ctrl + T" eller gå til «Rediger-> Free Transform" deretter drar de nett som vist på bilde A - 3b. Nå låse både grid lag og skjule "grid_12_col lag" som vist på bilde A - 3c.

Som standard har vi posisjonert guidene grid_16_col som vi startet fra grid_16_col.psd fil. Vi har guider for grid_12_col, men vi egentlig ikke trenger dem som vi vil bare bruke grid_12_col i sjeldne tilfeller.

Du kan også sjekke dokumentets rutenett og hjelpelinjer ved å trykke "Ctrl + '(Vis -> Show-> Grid) "og" Ctrl +, (Vis-> Show-> Guides) "henholdsvis som vist på bilde A - 3d

Trinn A4: Lage The Rammeverk

. dokumentbredden er 1020px; Ved bruk av 960 bæresystem, skal vi bruke 940px for innholdet vårt bredde. Vi kommer til å avvike bare litt fra 960-modellen ved hjelp av en 20px venstre og høyre padding (40px total) for innholdet kolonnen. Så vår totale bredden på innholdet skal være 980px. Velg bakgrunnslaget og trykke "Ctrl + Backspace" eller "Ctrl + F5" eller gå til "Rediger-> Fill" å ringe Fyll dialogboksen, og velg deretter "Color ..." fra "bruk". Og sette verdien til "e7e7e7" som vist på bilde A - 4a

Hvis du har problemer med å gjøre dette i eldre versjoner av Photoshop som CS4, første "Raste" bakgrunnslaget deretter bruker bakgrunnen ved hjelp av ovennevnte trinn.

velg nå "Avrundet rektangel Tool" set "Radius" til "10 px» i Valg-panelet og sett "Forgrunn" farge til "F1F1F1". Tegn et avrundet rektangel i artboard måle størrelse 980 x 150px den. Navn dette laget header bg og plassere dette laget inne i en laggruppe og navn som gruppen Header. Og organisere lag paletten som vist på bilde A - 4b. Og alltid holde grid lagene over alle lagene i laget paletten.

Hvis du vil opprette en gruppe, velger du bare laget (e) du ønsker å sette i en gruppe (holde nede Ctrl eller Shift-tasten) og deretter trykke "Ctrl + G" eller gå til "lag-> Gruppe Lag". Og for å endre et gruppenavn eller lagnavn bare å dobbeltklikke på sin standardnavnet så det vil bli et redigerbart tekstfeltet som vist på bilde A -. 4b

Velg punktkonverteringsverktøyet fra verktøypaletten er Pen Tool gruppe. Deretter "Ctrl + Klikk" overskriften bg rektangel og klikk på de fire øverste hjørnene som vist i bilde A - 4c. Og slett veldig over to punkter ved å bruke Delete Anchor Point Tool fra Pen Tool gruppe som vist på bilde A -. 4d

Nå er vår header bg rektangel bør ha en høyde på 140 px som vi har slettet de to øverste punktene. Velg header laggruppe og bakgrunnslaget velg deretter Juster toppkantene og Juster horisontale sentre fra Alternativer paletten som vist på bilde A -. 4e

Et lag stil i overskriften bg lag med innstillinger som vises i bilde A - 4f . Nudge dette laget 1px topp å skjule toppen glød.

Nå igjen velger Avrundet rektangel Tool og trekke innhold region (som måler 980 x 1400px). Name it bg og plassere den i et lag gruppe som heter innhold og bruke de samme lagstiler som header bg. Tegn en firkant (som måler 980 x 570px) kaller det bunntekst bg og plassere den i et lag gruppe som heter bunntekst og også bruke de samme lagstiler. Slett to nederste interessante footer bg rektangel med samme metode for header bg. Hold 20px avstand mellom hver seksjon (f.eks header, innhold, bunntekst). Plasser alt som vist på bilde A -. 4g

Wire-framing alt deretter legge faktiske innholdet ville spise opp vår dyrebare tid ... Så vi kommer til å gå rett til å legge noen "ekte" innhold for denne mockup i neste avsnitt

Part B:. Designing den Header

Trinn B1: Fyller den øverste delen av Header

Velg linje~~POS=TRUNC deretter tegne en linje med 1px vekt og 940px i lengden (trykk og hold "Shift" -tasten nede mens du tegner for perfekt linje). Plasser den som vist på bilde B - 1a. Navn dette laget hr, fylle sin bakgrunn med farge cdcdcd og et lag stil som vist på bilde B -. 1a

Velg nå rektangelverktøyet og trekke en 200 x 24px rektangel, gjelder lagstiler og plasser den som vist i bilde B - 1b. Sett sin bakgrunnsfarge til 000000 deretter redusere fill opacity til 10%.

Skriv inn noen hurtigkobling tekst på venstre side av vår søkefeltet. Velg tekstverktøyet fra Avsnitt-panelet, og velg Høyre justere teksten. Deretter skriver noen menynavn og skille dem med en "|" (Loddrett strek). Bruk bilde B - 1c som en retningslinje. Sett teksten farge til Ababab. For søkefeltet typeskiltet Søk med farge Ababab velg Custom Shape Tool og fra Shape-menyen velger du Søk formen deretter tegne og plassere forstørrelses form som vist på bilde B - 1c. Sett forstørrelses farge til F1F1F1

Trinn B2. Innstilling Logo og Opprette Navigation Meny |

Jeg kommer ikke til å veilede deg hvordan du kan lage denne logoen som dette er ikke super viktig at du dupliserer det perfekt; Jeg håper du vil være i stand til å enkelt lage din egen logo til bruk. Plasser den eksisterende logoen (eller din egen) som vist på bilde B -. 2a

Velg tekstverktøyet, og deretter aktivere Høyre justere teksten fra nr ruten. Og skriv noen menynavn ved hjelp av innstillingene som vist på bilde B - 2b

span> Trinn B3. Opprette Sub-Meny |

Siden de fleste tastaturer ikke har ">>" -tasten , velger du først og kopiere denne pilen (») så lim den inn i Photoshop og navn dette laget pil. Bruk samme farge som på menyen farge og satt horisontalt skalere til 150% og velger pilen laget (hvis det ikke allerede) trykke "Ctrl + T" roter det som vist på bilde B -. 2c

Tegn et avrundet rektangel med radius på 4 piksler med en måling. Deretter setter sin fyllfarge til d5d5d5, gjelder de viste lagstiler og skriv noen undermeny navn som vist på bilde B - 2d

Del C:. Designing hovedinnholdet Section

Trinn C1: Prosjektering bilde~~POS=TRUNC Slider

Tegn et rektangel som måler 940 x 338px, og deretter bruke lagstiler som vist på bilde C - 1a. Navn dette laget slider bdr. Plasser glidebryteren BDR i innholdsområdet som vist på bilde C -. 1b

Monter, og velg et bilde over slideren BDR lag deretter Ctrl + Klikk slider BDR lag for å få glideren bildeområdet (bilde C - 1c). Deretter går du til "Velg-> Modify-> Contract" i Kontrakten dialogboksen sett 1px og trykk "Enter". Nå trykker "Shift + Ctrl + I" eller gå til "Velg-> Inverse" for å snu valg og trykk "Delete" -tasten på tastaturet. Nå skal vi ha et perfekt bilde skyveknapp som i bilde C -. 1d

Velg Ellipse Tool og tegne en sirkel som måler 16 x 16px. Påfør et lag stil som i bilde C - 1e og plasser dem som vist på bilde C - 1e. Gruppe disse sirkler og navnet deres laggruppe: radioer

Trinn C2. Opprette promosjoner & Testimonial Box

Først skal vi lage fire kolonne promo elementer. For å opprette fire kolonner gruppe, aktiverer grid_16_col. Fordel de 16 kolonner med fire, og du vil finne fire like bredde kolonner. Fylle kolonnene med innholdet som vist på bilde C - 2a. Deretter plasserer en linje med de samme innstillingene for header HR stilling det i henhold til bilde C -. 2a

Når du oppretter flere linje regler som timer og VRS, er det vanligvis viktig at de har den samme grunnleggende styling og farge .

Disse ikonene er fra tutorial9. Du kan laste dem ned herfra

Trinn C3. Opprette Second Promo

Dette er en tre-kolonne promo delen. For dette, vil vi skjule grid_16_col og visning grid_12_col. Bruker hver fjerde kolonnen som en enkelt kolonne for å plassere reklamen eks. Først tegne et rektangel som måler 300 x 140 px og plasser den som vist på bilde C - 2b. Nå plasserer et bilde på toppen av dette laget deretter velge og beskjære bildeområder (som er overtrukket fra nedre rektangel område) som vi gjorde det for bildeskyveknapp delen. Nå gjelder lagstiler som vist på bilde C- 2b.

La oss legge til litt tekst nå. Velg Text Tool og tegne en tekstblokk som vist på bilde C - 2c og skriv noen overskrift også skrive litt kort beskrivelse og en kobling tekst som vist på bilde C -. 2c

Nå gjør en gruppe med disse lagene med navnet "promo". Deretter kopiere og lime inn "promo" gruppe to ganger, og så til slutt gruppere alle tre "promo" grupper med navn promo-col-3 og plassere dem og lagene som vist på bilde C -. 2d

Trinn C4: Lage The Testimonial Box

Velg rektangelverktøyet tegne et rektangel med 940px i bredde og satt sin høyde i henhold til dine behov. Fyll denne rektangel med 000 000 farger og redusere Fyll opacity til 5% og gi den navnet testi bg.

Nå velger Custom Shape Tool fra Shape-menyen og velg Trekant Shape. Klikk på Vector maske miniatyr av testi bg laget. Du bør ha en form utvalg nå.

Aktiver Legg til forme området (+) på Alternativer-panelet og tegne en trekant inne testi bg form. Deretter med Slett Anchor Point verktøyet slette en side av trekanten og plasser den som vist på bilde C - 2e.

Deretter gjelder de viste lagstiler, plassere den, og fylle den med litt tekst som vist på bilde C - 2f

Trinn C5. Opprette nytt prosjekt Elementer

Velg rektangelverktøyet tegne et rektangel som måler 940 x 40px og nevne dette laget bar. Sett denne rektangel inni et lag gruppe og merke denne gruppen siste prosjekter. Set rektangel fyllfarge til FFFFFF, og sette Fyll opacity til 15% da gjelde lagstiler til rektangelet som vist på bilde C - 2g og posisjon og plassere noen bilder under den med innstillinger og posisjon vises som i bilde C - 2h og de bildene størrelsen er 220 x 180px.

for bilder, bruker de samme teknikkene og lagstiler vi har brukt for promo-col-3 seksjoner. Fra nå av bruke denne samme teknikken og stiler for å designe noen bilder for dette temaet i første del og andre del. Hvorfor? Fordi det vil hjelpe vår design har en enhetlig, konsekvent stil ordningen. Fra nå av vil jeg bare henvise til dette stiler og teknikker bruker " gjelder image stiler " i stedet for å gjenta alle disse trinnene

Del D:. Designing bunnteksten

Trinn D1: Opprette Twitter § Sosial- og ikoner

I bunnsjiktet gruppen skape et lag gruppe og name it toppen. Inne i denne gruppen sted innholdet og formatere dem som vist på bilde D - 1a. For den vertikale linjalen bruke samme farge og lag stil av horisontal linjal hr. Til slutt plasserer lag som vist på bilde D -. 1b

Last ned de sosiale ikoner fra wefunction og twitter fugl ikonet fra webtreats

Nå opprette bunnteksten hovedinnholdet.. Befolke og plasser innholdet som vist på bilde D - 1c. Plasser lagene som vist på bilde D -. 1d

Klikk for bildet i full størrelse

Velg Custom Shape Tool, fra Shape-menyen velger du Triangle form og tegne en trekant som måler 10 x 10px. Fyll denne med farge cdcdcd og påfør et strøk fra lag stil som vist på bilde D - 1e, og nevne dette laget toppen pil. Til slutt legger litt tekst og plassere elementene som vist på bilde D - 1f

Nå design bør se omtrent som vår demo.

Slutt på dag 1

Dette avslutter den første delen av vår massive tutorial! Nå har vi lykkes sette opp grunnleggende rammen for området og designet vår hjemmeside. I neste utformingen sesjon (kommer neste uke), kommer vi til å designe supportsidene. Til slutt kommer vi til å skjære design og få den klar for XHTML, og til slutt WordPress koding!