Share
Du finner mange webdesign og utviklingsopplæringer ute på nettet? men svært få nøtter som tar deg fra start til slutt. Mange opplæringsprogrammer er kun for design, og andre er bare for koding. I dag starter vi en ny serie hvor vi skal designe og utvikle et komplett nettsted fra grunnen av; Vi tar deg fra den første wireframe til hele nettstedet design (inkludert 5 sider). Da kodes vi for design (i Nettuts selvfølgelig) og til slutt konverterer dette komplette XHTML-temaet til et fungerende WordPress-tema!
Vårt mål er å designe og utvikle et enkelt nettsteddesign med et moderne layout som bidrar til CMS-systemer som WordPress. Vi vil ikke bruke noen vilde og sprø stil effekter i vårt design (poenget her er å holde det enkelt), men vi skal nærme seg hele prosessen, fra begynnelse til slutt som en studie i layout og riktig bruk av marginer og polstring.
Vi bruker 960-nettverket fra start til slutt, så hvis du noen gang har lurt på hvordan det er å bruke systemet, er det nå en flott tid å lære! Vi skal gjøre noen avvik fra normen, men for det meste skal vi bruke 960gs i design og kodingsfaser.
Når dere er ferdig, er du velkommen til å tilpasse designet alt du vil ha med dine egne skrifter, farger, stiler og teksturer! Husk, dette er bare et utgangspunkt - du er velkommen til å gå som nøtter som du vil ha når det gjelder personligheten til din egen versjon av designen.
En kort kursoversikt. Vi kan bryte dette opp annerledes når vi treffer kodingsfasen, men dette bør gi deg en god ide om hvor vi er på vei med denne serien:
Ressurser brukt til dette prosjektet
Du kan bruke dine egne ressurser hvis du vil, men her er en fullstendig liste over bildene og ikonene som jeg har brukt i opplæringen:
Så, uten ytterligere forsinkelser, la oss starte på designfasen! Denne designfasen er delt i to deler. I dag legger vi ut wireframe ved hjelp av 960gs systemet, og vi vil designe hjemmesiden. I andre del (kommer neste uke) skal vi designe de andre støttesidene.
Det viktigste du vil holde styr på i dag er hvordan vi skal bruke to forskjellige variasjoner av 960gs (en 12-kolonne-oppsett og en 16-kolonne layout) sammen i samme fil. Jeg vil forklare mer om dette senere, men følg med på når vi bruker hver annen layout, da det vil spille en stor rolle i kodingsfasen senere!
Dagens fire underdeler er:
Når vi skal jobbe med 960 grid-system, gå videre og ta tak i 960-grid-systemet herfra (eller ta det fra 960.gs hvis den linken noensinne går ned).
I hovedmappen (det du nettopp har lastet ned fra http://960.gs), går du til "maler-> photoshop" og åpner "960_grid_16_col.psd" i Photoshop. Endre navn på denne filen til "index.psd" og lagre den i en ny mappe du velger, som vist i bildet A - 1a.
Nå som vi har 16-kolonne filoppsett, vil vi også importere guide-laget fra 12-kolonnefilen.
Åpne "960_grid_12_col.psd "i Photoshop (fra samme mappe har du åpnet filen" 960_grid_16_col.psd ". Låse opp" 12 Col Grid "-lag og -posisjon, og dra det til vår nyopprettede index.psd filen som vist på bildet A - 1b og A - 1c. Lås også laget og posisjonen til "grid_16_col".
Du kan spørre deg selv, "Hvorfor skal jeg bruke to forskjellige nettfiler"Da grid_16 ikke kan gi oss tre like kolonner, må vi også bruke grid_12. 960gs-systemet er faktisk bygget for å bli brukt på denne måten, slik at det ikke vil føre til konflikter nedover linjen. bruk disse to nettene i XHTML konverteringsfasen.
Velg "grid_12_col" og "grid_16_col" lagene, velg deretter "Juster toppkanter" og "Juster horisontale sentre" fra alternativpanelet som vist i bildet. A - 1d (mens du velger disse alternativene, må du sørge for at du også har aktivert Flytt verktøyet (V)). Og ditt endelige resultat skal se ut som bildet A - 1d.
Det er på tide å sette opp våre retningslinjer og linjaler for enkelt å plassere elementene våre. Gå til "Rediger-> Innstillinger-> Enheter og Linjaler" eller trykk "Ctrl + K" for å ringe Preferanser dialogboksen. Velg deretter "Enheter og Linjaler" -fanen. I ruten "Enheter og Linjaler" enheter underavsnitt, sett "piksler" for både "Linjaler" og "Type" -alternativene som vist i bildet A - 2a.
Velg nå "Guides, Grid & Slices" -fanen og i sin Nett underavsnitt, angi verdi "100" og enhet til "piksler" for "Gridline every" -alternativet. Og sett "10" for "Inndelinger" -feltet som vist på bildet A - 2b.
Trykk nå på "Ctrl + Alt + C" eller gå til "Image-> Canvas Size" for å ringe Lærretstørrelse dialogboksen og endre innstillinger som vist på bildet A - 3.
Etter hvert som vi har økt vår lerretshøyde, må vi nå velge og forstørre nettene våre i henhold til høyden på dokumentet.
Velg begge rutenett og trykk "Ctrl + T" eller gå til "Edit-> Free Transform" og dra deretter rutenettene som vist på bildet A - 3b. Lås nå begge gridlagene og skjul "grid_12_col-laget" som vist på bildet A - 3c.
Som standard har vi plassert guider av grid_16_col som vi er startet fra grid_16_col.psd fil. Vi har ikke guider for grid_12_col, men vi trenger egentlig ikke dem, da vi bare bruker grid_12_col i sjeldne tilfeller.
Du kan også sjekke dokumentets grids og guider ved å trykke "Ctrl +" (Vis-> Vis-> Grid) "og" Ctrl +; (Vis-> Vis-> Guider) "som vist i bildet A - 3d.
Vår dokumentbredde er 1020px; Når du bruker 960-nett systemet, skal vi bruke 940px for innholdsbredden. Vi kommer til å avvike litt fra 960-modellen ved å bruke en 20px venstre og høyre polstring (40px totalt) for innholdskolonnen. Så vår totale innholdsbredde skal være 980px. Velg bakgrunnslaget og trykk "Ctrl + Backspace" eller "Ctrl + F5" eller gå til "Edit-> Fill" for å ringe Fylle dialogboksen, velg deretter "Farge?" alternativet fra "Bruk". Og sett verdien til "e7e7e7" som vist på bildet A - 4a
Hvis du har problemer med å gjøre dette i eldre versjoner av Photoshop som CS4, må du først "rasterisere" Bakgrunn lag deretter bruk bakgrunnen ved hjelp av over trinn.
Velg nå "Avrundet rektangelverktøy" sett "Radius" til "10 px" i alternativer panel og sett "Forgrunn" -farge til "f1f1f1". Tegn et avrundet rektangel i målestørrelsen 980 x 150px. Navn dette laget header bg og plasser dette laget i en laggruppe og nevn den gruppen Overskrift. Og organiser lagpaletten din som vist i bildet A - 4b. Og hold alltid rutenett over alle lagene i lagpaletten.
For å opprette en gruppe, velg bare laget (e) du vil angi i en gruppe (hold nede Ctrl eller Shift-tasten) og trykk deretter "Ctrl + G" eller gå til "Layer-> Group Layers". Og for å endre et gruppenavn eller lagnavn, dobbeltklikk du på standardnavnet, og det blir en redigerbar tekstfelt som vist på bildet A - 4b.
Velg Konverter punktverktøyet fra verktøylinettens Pennverktøy gruppe. Deretter "Ctrl + Klikk" på header bg rektangel og klikk på de fire øvre hjørnene som vist på bildet A - 4c. Og slette veldig øvre to poeng ved hjelp av Slett ankerpunktsverktøy fra Pennverktøy gruppe som vist i bildet A - 4d.
Nå vår header bg rektangel skal ha en høyde på 140px da vi har slettet de to øvre punktene. Å velge Overskrift laggruppe og bakgrunnslag, velg deretter Juster toppkanter og Juster horisontale sentre fra alternativer palett som vist i bildet A - 4e.
Bruk en lagestil i header bg lag med innstillinger som vises i bildet A - 4f. Nudge dette laget 1px toppen for å skjule den øverste gløden.
Nå velger du igjen Avrundet rektangelverktøy og tegne innholdsregionen (måle 980 x 1400px). Navngi det bg og legg den inn i en laggruppe som heter innhold og bruk samme lag stiler som header bg. Tegn et annet rektangel (måle 980 x 570px) ring det bunntekst bg og legg den inn i en laggruppe som heter bunntekst og også bruke samme lag stiler. Slett nederste to punkter av bunntekst bg rektangel med samme metode for header bg. Hold 20px avstand mellom hver seksjon (for eksempel topptekst, innhold, bunntekst). Plasser alt som vist på bildet A - 4g.
Wire-innramming alt da legge til faktisk innhold ville spise opp vår verdifulle tid? Så vi skal gå rett til å legge til noe "ekte" innhold for denne mockupen i neste avsnitt.
Velg Linjeverktøy Deretter tegner du en linje med 1px vekt og 940px i lengde (trykk og hold "Shift" -tasten mens du tegner for perfekt linje). Plasser den som vist på bildet B - 1a. Navn dette laget hr, fyll opp bakgrunnen med farge cdcdcd og en lagestil som vist i bildet B - 1a.
Velg nå Rektangelverktøy og tegne et 200 x 24px rektangel, bruk lagestiler og legg det som vist på bildet B - 1b. Sett bakgrunnsfargen til 000000 deretter redusere fyllingsopaciteten til 10%.
Skriv inn litt hurtigkoblingstekst på venstre side av vår søkefelt. Velg Tekstverktøy fra Avsnitt ruten, og velg Høyreklikk tekst. Skriv deretter inn noen menyenavn og skill dem med en "|" (vertikal bjelke). Bruk bilde B - 1c som en retningslinje. Sett sin tekstfarge til Ababab. For søkefelt type etikett Søke med farge Ababab velg deretter Tilpasset formverktøy og fra Form menyvalg Søke form deretter tegne og plasser forstørrelsesformen som vist på bildet B - 1c. Sett forstørrelsesfarge til F1F1F1.
Jeg skal ikke veilede deg hvordan du lager denne logoen, da dette ikke er super viktig at du dupliserer det perfekt. Jeg håper du vil enkelt kunne lage din egen logo for å bruke. Legg den eksisterende logoen (eller din egen) som vist på bildet B - 2a.
Velg Tekstverktøy, Aktiver deretter Høyreklikk tekst fra AVSNITT ruten. Og skriv inn noen menyenavn ved hjelp av innstillingene som vist på bildet B - 2b.
Siden de fleste tastaturer ikke har «>>» -tasten, velger du først og kopier denne pilen (") og limer den inn i Photoshop og heter dette laget pil. Bruk samme farge som menyfargen og sett inn Horisontal skala til 150% og velg pil lag (hvis ikke allerede) trykk "Ctrl + T" og roter det så som vist på bildet B - 2c.
Tegn et avrundet rektangel med en radius på 4px med hvilken som helst måling. Sett deretter fyllfarge til d5d5d5, Bruk de viste lagstilene og skriv inn noen undermenynavn som vist på bildet B - 2d.
Tegn et rektangel som måler 940 x 338px, og bruk deretter lagestiler som vist på bildet C - 1a. Navn dette laget glidebryteren bdr. Sted glidebryteren bdr i innhold område som vist på bildet C - 1b.
Plasser og velg et bilde over glidebryteren bdr lag da Ctrl + klikk glidebryteren bdr lag for å få skyvebildeområdet (bilde C - 1c). Deretter går du til "Velg-> Endre-> Kontrakt" i Kontrakt dialogboksen sett 1px og trykk "Enter". Trykk nå "Shift + Ctrl + i" eller gå til "Select-> Inverse" til inverse utvalg og trykk "Delete" -tasten fra tastaturet. Nå skal vi ha en perfekt bildeskyter som i bildet C - 1d.
Velg Ellipseverktøy og tegne en sirkel som måler 16 x 16px. Bruk en lagestil som i bildet C - 1e og plasser dem som vist i bildet C - 1e. Grupper disse kretsene og navn deres laggruppe: radioer.
Først skal vi lage fire kolonne promo elementer. For å opprette fire kolonnegrupper, aktiver grid_16_col. Del de 16 kolonnene med fire, og du vil finne fire like bredde kolonner. Befolk kolonnene dine med innholdet som vist på bildet C - 2a. Sett deretter en linje med de samme innstillingene for Overskrift's hr posisjoner den i henhold til bildet C - 2a.
Når du lager flere linjeregler som HR og VR, er det vanligvis viktig at de har samme grunnleggende styling og farge.
Disse ikonene er fra opplæring9. Du kan laste dem ned herfra.
Dette er en tre kolonne promo-seksjon. For dette skjuler vi grid_16_col og unhide grid_12_col. Bruk hver fjerde kolonne som en enkelt kolonne for å plassere kampanjeposter. Først trekk et rektangel som måler 300 x 140 px og legg det som vist på bildet C - 2b. Legg nå et bilde på toppen av dette laget, og velg deretter og beskjær bildeområder (som er overtrukket fra det nedre rektangelområdet) som vi gjorde det for bildegjennomsnittet. Bruk nå lagestiler som vist i bildet C-2b.
La oss legge til litt tekst nå. Å velge Tekstverktøy og tegne en tekstblokk som vist på bildet C - 2c og skriv inn noen overskrift, skriv også litt kort beskrivelse og en linktekst som vist på bildet C - 2c.
Gjør nå en gruppe med disse lagene med navnet "promo". Deretter kopier og lim inn "promo" -gruppen to ganger, og så grupperer du endelig alle tre "promo" -gruppene med et navn promo-col-3 og plasser dem og lagene dine som vist i bildet C - 2d.
Å velge Rektangelverktøy tegne et rektangel med 940px i bredde og sett høyden etter behov. Fyll dette rektangelet med 000000 farge og redusere dens Fylle opacity til 5% og nev det testi bg.
Velg nå Tilpasset formverktøy fra Form menyen og velg Trekantform. Klikk på Vector mask miniatyrbilde av testi bg lag. Du bør ha et formvalg nå.
Aktiver Legg til i formområde (+) fra alternativer panel og trekk en trekant innvendig testi bg form. Deretter med Slett ankerpunkt verktøyet slett den ene siden av trekanten og legg den som vist på bildet C - 2e.
Deretter skal du bruke de viste lagformatene, plassere den og fylle den med litt tekst som vist på bildet C - 2f.
Velg Rektangelverktøy Tegn et rektangel som måler 940 x 40px og navnet på dette laget Bar. Sett dette rektangelet inn i en laggruppe og merk denne gruppen siste prosjekter. Sett rektangulens fyllfarge til FFFFFF, og sett dens Fylle opacity til 15% Legg deretter lagstiler på rektangelet som vist på bildet C - 2g og plasser og plasser noen bilder under det med innstillingene og posisjonen vist som i bildet C - 2 timer og de bildene størrelsen er 220 x 180px.
For bilder bruker du de samme teknikkene og lagformatene vi har brukt til promo-col-3 seksjoner. Fra nå av bruker du samme teknikk og stiler for å designe noen bilder for dette temaet i første del og andre del. Hvorfor? Fordi det vil hjelpe vårt design har en enhetlig, konsekvent stil ordningen. Fra nå av vil jeg bare referere til disse stilene og teknikkene ved å bruke "bruke bildestiler" i stedet for å gjenta alle disse trinnene.
I bunntekst laggruppe lag en laggruppe og navn den topp. Inne i denne gruppen plasserer innhold og formater dem som vist på bildet D - 1a. For den vertikale linjalen bruker du samme farge og lag stil av horisontal linjal hr. Endelig plasser lagene dine som vist i bildet D - 1b.
Last ned de sosiale ikonene fra wefunction og twitter bird icon fra webtreats.
Lag nå hovedinnholdet til bunnteksten. Befolk og plasser innholdet som vist på bildet D - 1c. Plasser lagene dine som vist i bildet D - 1d.
Velg Tilpasset formverktøy, fra Form menyvalg Triangel form og tegne en trekant som måler 10 x 10px. Fyll dette med farge cdcdcd og bruk et slag fra lagestil som vist i bildet D - 1e, og navnet på dette laget øverste pilen. Til slutt legg til litt tekst og plasser elementene som vist på bildet D - 1f.
Nå bør designen din bare se ut som vår demo:
Dette avsluttes den første delen av vår massive opplæring! Nå har vi opprettet det grunnleggende rammeverket for nettstedet og designet vår hjemmeside. I neste design sesjon (kommer neste uke), skal vi utforme støttesidene. Til slutt skal vi skille designet og gjøre det klart for XHTML, og til slutt WordPress-koding!
Accentsconagua