Share
Denne opplæringen vil veilede deg gjennom prosessen og ideene bak utformingen av et profesjonelt nettsted med en funky flair i Photoshop. Opplæringen vil lese mye som en "velg din egen eventyr" roman i håp om at det vil oppmuntre kreativitet og unikhet i design med litt råd og instruksjon underveis. Eventyrtid!
En ting du vil legge merke til når du fortsetter gjennom denne opplæringen, er hvor enkelt dette nettstedet kan forvandles til en blogg om design, et programvareselskaps hjemmeside eller et open source-fellesskap. Alle modulene på høyre og venstre sidefelt kan byttes og flyttes med letthet, og innholdet er designet for å være fleksibelt.
Gjennom hele denne opplæringen vil du se stor vekt på designprinsippene og nyttige Photoshop-metoder for å forbedre arbeidsflyten og utformingen av nettsteder. Selv om dette nettstedet har sin egen stil, er hovedmålet med denne opplæringen ikke å replikere denne stilen nøyaktig, men håp er at du får et bedre perspektiv på webdesign i Photoshop som kan forbedre tilnærming og øke produksjonen din.
Ta en titt på bildet vi skal skape.
Hvis du ikke allerede er, hopp over til 960.gs og bli kjent med 960-nettverket og hvorfor det vil være så nyttig for denne opplæringen. Mens du er der, må du laste ned malen.
Når du har lastet ned filen, pakker du den ut og åpner "960_grid_12_col.psd" som du finner under 960_download> Maler> Photoshop. Når du åpner filen, blir det tydelig hvor raskt dette vil tillate deg å opprette og vedlikeholde struktur i webdesign. Ta spesiell oppmerksomhet på styrelinjene, de vil tillate deg å lage objekter som knytter seg perfekt til rutenettet.
Hvis du følger guider opp til linjalen, kan du tydelig se de nøyaktige pikselmålene på nettet - med 60px brede kolonner og 10px på hver side (opprette 20px mellom hver kolonne). Hvis du ikke ser linjalen eller ønsker å bli kvitt den, kan du bytte den med Command + R.
Guidene er nesten overveldende; Når du begynner å designe, vil de virkelig komme i veien. Du kan bytte dem ved å klikke på Vis> Tilbehør eller bare bruke snarveien Kommando + H.
Du trenger mer plass på lerretet ditt for denne opplæringen. Utvid lerretet (Command + Alt + C) til 1400px med 1340px. Du kan slette alt unntatt bakgrunnslaget. Dobbeltklikk på bakgrunnslaget ditt og trykk på OK for å låse opp det. Gi nytt navn til "BG."
Lagre (Command + S) denne filen som "my_web_tut01.psd" i sin egen mappe kalt "min webtut". Etter hvert trinn i denne opplæringen bør du trykke på Command + S og hvert trinn treffer Kommando + Shift + S og lagrer en Ny kopi "my_web_tut02.psd", "my_web_tut03.psd", osv. .. Lagring virker som en no brainer til mange designere, men jeg har funnet det fortsatt ikke stoppe mange fagfolk fra å slacking på dette.
OK, du har prepped lerretet, nå må du tegne i bakgrunnen og toppområdet. Dra på øverste linjal for å lage en ny guide; ta det ned til 120px. Dette vil være den nedre grensen til topptekstområdet. Ta med to guider til 130px og 140px. Nå er det samme bredde mellom mellomhodet og innholdet som vi har mellom kolonner. Det begynner å se ut som et riktig rutenett!
Bruk Rectangle Tool (U) til å tegne et svart rektangel over topptekstområdet. Dette forutsetter at du har standard svart sett som forgrunnsfarge, hvis ikke, kan du bare trykke på D for å tilbakestille den. Start rektangelet utenfor lerretet langs styret og avslutt det utover til den andre siden også. Fordelen med å utvide dette elementet er at du ikke vil se noen av effekten som brukes på perimeteren som du kanskje vil bruke på den nederste kanten av rektangelet, som et slag, indre glød, etc. Navn ditt rektangel "Header BG. "
Det er på tide å begynne å blokkere nettverket ditt. Denne utformingen består av tre innholdskolonner - venstre sidebjelke spenner over tre kolonner, midt- / hovedinnholdet spenner over syv kolonner og høyre sidebjelke spenner over to kolonner.
Mens det virker bra for toppteksten å sette inn retningslinjer, vil resten av designet bli en mer flytende prosess, så du vil ikke tegne horisontale guider mellom hver seksjon. Ikke fortvil! Du vil fortsatt kunne oppnå perfekt mellomrom ved å trykke Shift + Piltastene mens du har valgt Flyttverktøy (V). Hver gang du gjør det, blir laget valgt 10px.
Du vil skape avrundede hjørner for dette designet. Avrundede hjørner gjør at innholdet ditt er veldig synlig deles. Se tilbake til det endelige bildet; merker du hvordan på "Twitter Feed" -modulen er det mange bokser i en boks med avrundede hjørner? Nå vurderer om hjørnene var skarpe - "Twitter Feed" ville ikke føles som en enkelt modul så mye.
Du må også ta i betraktning at farger, gradienter og skrifttyper bidrar til å gjøre dette til en definert enhet, men de avrundede hjørnene hjelper definitivt. Vær også oppmerksom på at bare fordi avrundede hjørner virker for dette designet, er det tusenvis av vakre nettsteder som ikke bruker avrundede hjørner. Ta en titt på Psdtuts + - hvert hjørne er skarpt; Imidlertid brukes andre strategier som kontrast og slag til å holde layoutet klart. Ytterligere lesing finner du her og her
Nok design talk! Velg verktøyet avrundet hjørner og sett hjørneradiusen til 8px. Tegn en boks øverst i venstre og høyre kolonne; Gi deg selv plass til å legge til innhold senere.
Først oppretter du et tekstområde i midt / hovedinnholdsområdet og fyller det inn med en fengende en liner som i det endelige bildet. Bruk skrifttypen Rockwell eller en annen slabserif ved 40pt med 48pt Leading (Line Height). Rockwell kan lastes ned her.
Deretter legger du til noen dummy tekst nedenfor og sett i Verdana på 12pt med 20pt Leading. Legg også til et par underoverskrifter som er Verdana Bold på 17pt med 30pt Leading.
Nå som du har detaljer, la oss snakke typografi. En generell regel som du vil finne gjentatt gjennom webdesign fellesskapet er at et nettsted bare skal benytte to fonter. I dette oppsettet har jeg valgt å bruke skrifttypene Rockwell og Verdana. Verdana er en trygt skrifttype mens Rockwell ikke er det. På grunn av dette må alle forekomster av Rockwell være bilder når dette designet er konvertert til XHTML / CSS.
Dette betyr to ting for deg. Først, for å holde belastningstiden lav, bør du vurdere en minimal bruk av ikke-trygge skrifter. Det endelige bildet inneholder færre enn ti tilfeller av Rockwell, de fleste av dem sitter over toppen av noe grafisk element som en knapp som allerede vil være et bilde når det kodes. For det andre kan du legge til effekter som drop skygger og gradienter til teksten. Disse to grunnene kombinerer inkluderingen av Rockwell, som passer best til de tradisjonelt mer dekorerte elementene i et design som overskrifter, titler og knapper.
Det er en siste vurdering som kanskje eller ikke gjelder for ditt design, og det tar hensyn til fremtidig søkemotoroptimalisering (SEO) -arbeid. All tekst som er bildebasert - noen forekomster av Rockwell for dette webdesignet - blir ikke gjennomsøkt og analysert av Google-bots. Dette betyr at du må designe slik at det kommer til å være mange websikker fonter der søkeord kan hentes av Google.
Det neste punktet på typografi og webdesign generelt er konsistens, konsistens, konsistens! Hvis du bruker Rockwell for en knapp, bruk den for alle knapper! Hvis du lager noen koblinger rosa, gjør alle koblingene rosa! Å være konsekvent vil tillate at designen ser skarp og sammenhengende ut.
Til slutt, et ord om brukervennlighet og typografi. Din kopi trenger plass til å puste, gi den en anstendig linjehøyde, og du vil legge merke til en verden av forskjell. Nettstedet ilovetypography.com antyder at linjens høyde skal være minst 140% av skriftstørrelsen. Du bør også være oppmerksom på at et tekstområde større enn 600px er en belastning på øynene, men hvis du skal gå bredere, vil det være en god ide å øke linjens høyde proporsjonalt. Det er alltid mer å lære om typografi - her er en god start.
Svart og hvitt er kjedelig, tid for litt farge! Fargene på denne designen ble inspirert av Hash One Wordpress-temaet
Jeg kunne vise deg hvordan du lager en egendefinert swatch for å laste med nettstedets farger, men jeg bruker ikke dette selv. I stedet bruker du rektangulærverktøyet, kan du bare tegne et rutenett av store firkanter i kantene på lerretet ditt og fylle dem med fargene du skal bruke. Jeg finner denne metoden raskere og mer tilgjengelig.
Fargene som er valgt gir en god kontrast for å gi nettsiden litt dybde. Du er velkommen til å bruke hvilken som helst kombinasjon du ønsker, men vær så snill å vurdere kontrast, lesbarhet og harmonier når du velger farger. Hvis du har problemer med deg, kan du prøve å bruke Fargeskjema Designer.
Fargene til denne opplæringen er (fra venstre til høyre, topp til bunn):
Legg alle disse rektanglene til en mappe og navnet "SWATCHES." Ved å bruke alle caps for mappenavn, blir det visuelt lettere å finne mappelag når lagene begynner å bli forvirret. Nå vil det også være en god tid å starte mappene "HEADER," "LEFT SIDEBAR," "MAIN CONTENT," og "RIGHT SIDEBAR". En annen god praksis å komme inn er å fargelegge lagene dine for å forbedre arbeidsflyten din. Høyreklikk på øyeikonet ved siden av hvert lag for å velge en farge.
Gradienter kan virkelig forbedre designet ditt; Men hvis du ikke er forsiktig, kan gradienter virkelig deaktivere designen din. Her er mitt forslag: Bli gal med gradienter, bare gjør dem alle veldig subtile.
Dobbeltklikk på "Header BG" -laget og velg Gradient Overlay. Klikk på graden som kommer opp for å åpne Gradient Editor. Slett alle stikkordene unntatt de to første forgrunnen til bakgrunn og forgrunn til gjennomsiktig. Lag nå en gradient fra det mørkeste grå til mellomgrået og trykk på nytt for å legge det til forhåndsinnstillingene. Gjenta dette til du har åtte nye gradienter - fire mørker til mids og fire mids til darks. Klikk på Lagre for å lagre disse i en ny mappe som heter "Aktiver". Sett den så i rotmappen for dette prosjektet. Nå når du kommer tilbake til dette prosjektet eller vil du ha alle gradienter der.
For ditt "Headers BG" -lag, bruk midt-til-lys-gradienten fra de mørkegrå fargene.
For gradienten din på "BG" laget vil du ønsker å skape litt mer komplisert gradient. Det vil faktisk være to gradienter i "BG" gradienten. Når det kommer tid til å kode, blir de separate bildefiler, men for oss trenger vi bare å lage en kompleks gradient.
Legg merke til hvordan det er en liten del av graden som skal være den samme fargen? Dette vil være bakgrunnsfargen til HTML-filen din og vil tillate nettsiden å vokse, men gradienten øverst for å holde seg på toppen og gradienten nederst for å holde seg på bunnen.
Photoshop er et fantastisk program, men hvis jeg finner ut at du lager logoer i Photoshop, skal jeg rapportere deg til Adobe. Logoer bør opprettes i et vektorprogram - for denne opplæringen bruker vi Illustrator.
Åpne en ny fil i Illustrator og opprett din logo (Merk: I virkelige prosjekter bør du aldri starte webdesign før du har en logo). Mens logoen i dette eksemplet bruker Rockwell, er det ikke så mye å ha en tredje skrift for logoen din. Lagre logoen din i "Assets" -mappen der du legger gradientfilen.
Når du har denne logoen, må vi ta den tilbake til Photoshop for noen styling. Bare hent Illustrator og Photoshop ved siden av hverandre og dra brikkene av logoen over til Photoshop. Siden hvert stykke vil ha en unik styling, kan du trekke dem over individuelt i motsetning til som helhet når du begynner styling.
For å justere de separate stykkene, ta inn en versjon av hele logoen, senk gjennomsiktigheten og bruk som en veiledning for samsvarende. Slett den når du er ferdig. Skift-klikk alle lagene i logoen, og trykk på Kommando + G for å gruppere dem i en ny mappe. Gi nytt navn til denne mappen "LOGO" og legg den inn i mappen "HEADERS".
Hvert stykke vil automatisk forvandle seg til en smart gjenstand. Dette betyr at de fortsatt vil fungere som et vektorobjekt som i Illustrator - du kan bruke Transform Tool (Command + T) fritt uten å miste kvalitet.
Etter at du har dimensjonert og plassert din logo, må du stile den. Bruk gradienter som du opprettet før for å gi logoen litt dybde - bland fargene opp, men hold den mørkere fargen på gradienter på bunnen for begge ordene.
Deretter legger du til en dråpeskygge til en av brikkene. Still Blend-modusen til Multiply ved 100%. Kontroller at du har Bruk Global Light valgt og sett det til 120 grader, med 1px avstand, 0% spredning og 1px størrelse. Ved å aktivere Global Light vil du sette alle effekter med skygger til samme grad - husk konsistens, konsistens, konsistens!
Jeg har lest rundt folk som viser hvordan man kopierer og limer inn et lags stil, mens det er en god metode for lag som er svært langt fra hverandre. Her er noen raske måter å flytte og duplisere effekter på. Akkurat som når du vil multiplisere et lag på lerretet og i lagpaletten ved å holde nede Alt og dra en ny kopi av det laget - kan du duplisere effekter med samme metode.
Alt-dra på fx symbol i kildelaget til det nye laget, og du vil erstatte det nye laget med alle effektene av det første laget. Hvis du bare vil duplisere Drop Shadow skjønt, i stedet for fx symbol, deretter Alt-dra den individuelle effekten til et nytt lag, og du vil bare erstatte den ene effekten, eller legge den til hvis det nye laget ikke har det aktivert. Bruk denne metoden for å sikre at alle lagene i logoen har samme dropshadow.
Velg "Header BG" -laget. Åpne effektene og legg til i en 1px svart ramme med stillingen satt til Inside. Deretter gir du det et ytre glød som har blandemodus: Multiply, Opacity at 40%, Farge svart og Størrelse på 9px.
Gå tilbake til Illustrator og lag noen interessante og kreative figurer som vil bli brukt som lysbakgrunn for topptekstområdet. Farg formene hvite, dra dem over til Photoshop, sett blandemodus til skjerm og deres opasitet i varierende mengder fra 2-10%. Ta en titt på det endelige bildet, du vil merke at det er mange sirkler og sirkelsirkler brukt, disse ble alle opprettet i Photoshop. For de mer komplekse figurene, er Illustrator raskere, men for sirkler sparer du faktisk tid bare ved å lage dem i Photoshop.
Nå skal vi lage en sirkel med bare det hvite slaget som vises i Photoshop. Opprett en svart sirkel med Ellipseverktøyet, og åpne deretter effektene for laget og gi det et hvitt slag. Lukk effektene og sett deretter Blend-modus på skjermen, du vil se alt, men det hvite strekket forsvinner. Den største fordelen med dette er evnen til å endre bredden på streken ved å bare åpne effektene og redigere den.
Tilbring litt tid på å rote rundt med dette, eksperimentere med forskjellige opasiteter og komposisjoner - skape noen funky figurer som kan hjelpe deg med å individualisere dette designet. Ikke bekymre deg om noen av figurene dine er synlige under overskriften, vi tar vare på dette i neste trinn.
Velg alle figurene og legg dem inn i en mappe over "Header BG" -laget. Kommandoklikk på vektormasken (den grå boksen) av "Header BG" for å se hele toppteksten valgt på lerretet. Nå velger du mappen du nettopp har opprettet og klikker på den lille knappen nederst i lagvinduet kalt "Add Layer Mask"
Maskering er noe jeg egentlig ikke ser nok av i min profesjonelle praksis, det er veldig nyttig og rask, og det beste er at det er en ikke-destruktiv metode. Tenk på at du bare kunne ha flatt formene i ett lag og slettet området som stikker ut. Men da ville du endre en del av komposisjonen eller streken på en av kretsene - maskeringen gjør at du går tilbake og gjør endringer raskere.
Under overskriften vil du legge merke til noen grafikk som ligner opp og ned rullende åser. Ved å utnytte dine fargerfarger og spille med gjennomsiktigheten, kan du oppnå dette utseendet. Til slutt må disse bli tweaked til fliser horisontalt.
La oss se på disse og resten av de ikke-funksjonelle elementene i designet. Det er en anstendig mengde, vel, bare litt tilfeldig grafikk. Hvilket bidrag legger disse til designet? For det første er grafikk som dette en fin måte å styre følelsen og stemningen til et nettsted, en flott måte å hjelpe et merkevareformidle med.
Selv om jeg nesten ikke har kompetansen til å forklare merkevarebygging, vil jeg forsøke å gi deg en rask gjennomgang, slik at du kan sette alt i perspektiv. Et merke er alt om et selskap som en forbruker føler - følelsene, minner, lyder, farger, erfaringer, etc. Marty Neumeier, i sin bok The Brand Gap, forklarer veldig klart at "Et merke er ikke hva du sier det er. hva de sier det er. " Så hva har alt dette å gjøre med grafikken? Vel, mens du ikke kan konstruere et merke, kan du hjelpe det å vokse i kundens sinn ved å kontinuerlig gi visuals som er stemningsfulle for kjernen i bedriften din.
OK, så ta en titt på det endelige bildet, hva sier det til deg om dette firmaet? Mitt fokus var å få fargene og figurene til å oversette en følelse av moro og funkiness, men strukturen og strenge gridoppsettet gir en følelse av profesjonalitet og alvor. Er dette det nøyaktige merkevaren som hvert firma har som mål å bygge? Absolutt ikke, hvert selskap bør være unikt og hver nettside ekstruderer en differensiert aura.
Skjul alt, men "BG" -laget. Bakgrunnen til denne utformingen er innrammet av et stort avrundet rektangel. Dette gir litt mer struktur og dybde til designet. Siden du ikke vil gi hovedinnholdet sin egen boks som sidebjørene, er dette en god tilnærming til å vaske ut bakgrunnsgrafikkene og forbedre lesbarheten. Det hvite avrundede rektangel har en 8px radius, det samme som boksene - en annen konsistensdetalj. Du finner flere effekter detaljer i bildet nedenfor.
Bruk samme metode som med overskriften, ta med noen figurer fra Illustrator og flytte dem rundt for å lage lite grafikk. Som du fortsetter å designe, vil du sannsynligvis finne deg selv fidgeting rundt med dem for å finne en sammensetning som fungerer bra. Bland nyanser med mørke farger og gjennomsiktighet.
Du kan merke at ikonet fra logoen er brukt mye, en slags subliminal påminnelse. Jeg hadde en filmprofessor på college som lærte meg at et bilde, farge osv. Måtte gjentas minst tre ganger i en film for at en bruker skulle huske og ta mening fra den. Jeg prøver å bruke det prinsippet med designet mitt - logoet har blitt gjentatt mange ganger (smakfullt og i grunn) med håp om at brukeren blir kjent med selskapet og husker ikonet.
Navigasjonen i denne designen er sterkt påvirket av mitt nåværende favorittwebområde - aviary.com.
Det lille hjemmet grafisk og ordet Hjem er litt lysere og det er en lysere grå bakgrunn bak den - dette er å forbedre brukervennligheten. Tenk som brukeren! La dem enkelt vite hvilken side de er på. Vanlige måter å gjøre dette på er gjennom faner, farge, understreker, høydepunkter og ekstra grafikk. Tenk på disse alternativene og vær kreativ med din tilnærming.
For koblinger og knapper er en hover-tilstand en stor forbedring for brukervennligheten. Se tilbake til det siste bildet og se på noen av koblingene. Et godt gjennomtenkt design vil vurdere hva disse vil se ut og hvordan de skal fungere. Hvis du ikke kodes dine egne nettsteder, kan du bruke et lite bilde av en koblingsmarkør for å indikere for programmører hva som skjer. Skjulte funksjoner som en rullegardinmeny (bildet nedenfor) må vurderes og fullt utformet. Venter på å finne din vakre design er parret med noen heslig rullegardinmeny vil gjøre deg gal. Hvis du er designer, er det opp til deg å vurdere alle disse.
Linkmarkørbildet kan bli funnet som en PNG sammen med noen flere gratis designressurser her.
Har du lagt merke til det NY! skilt? Jeg brøt bare en av mine første regler! Vel, vi lager et lite unntak for piksel skrifttyper! Pixel skrifttyper har ingen anti-aliasing, så det gjør dem veldig skarpe. Denne sprøheten kan ofte være stygge for en vanlig skriftstørrelse, men pikselfonter fungerer fantastisk i små størrelser. Ta en titt på hvor ulovlig Verdana og Georgia er på 8pt vs pikselskrifter, en stor forskjell, ja?
Pixel skrifttyper er populære i Flash, de lastes raskere og opprettholder den skarpheten, men de fungerer også godt i webdesign! OK, så nå at du vet om glede av pikselfonter, må du bruke dem sparsomt. For applikasjoner som denne lille NY! badge det fungerer bra, men for det meste bør du ikke bruke dem til mange andre programmer - ingen vil lese mer enn noen få ord i en pikselfont. Skriften som brukes i dette eksemplet heter Uni 5063 og kan lastes ned gratis fra Miniml.
Undersøk nå de avrundede hjørnene i rullegardinmenyen. Den hvite bakgrunnen er faktisk konstruert av tre runde hjørne rektangler. Den tredje har blitt vendt innvendig ut med Direct Selection Tool for å lage et avrundet indre hjørne.
Vend sidebjørene dine hvite og lag guider som gir hver av dine sidebjelker en polstring på ti piksler. Legg til i all dummy-teksten du vil bruke og dupliser sidebjørene etter behov. For å utvide eller kontrahere dem vertikalt, bruk direktevalgverktøyet til å velge de nedre fire ankerpunktene og nudge dem ned eller opp med tastaturet. Det neste trinnet er å finjustere stilen til hele teksten.
All teksten er arrangert i et hierarki av betydning og fokus, og dette signaliseres gjennom styling av den teksten. Den største skriftstørrelsen og mørkeste fargen (les: høyeste kontrast) er reservert for hovedinnholdet overskriften. Underoverskriften er større og mørkere enn hovedlegemet og hoveddelen er større enn sidebarinnholdet, og så videre. Vær oppmerksom på at alle fargene er fra fargene - konsistens, konsistens, konsistens!
Nå som du har organisert alle sidebar-boksene, og teksten er farget på riktig måte, kan du starte styling av boksene. Gi hver inngang en veldig lys bakgrunnsgradient og bruk linjearbeidet til å tegne en horisontal linje øverst på graden. Disse vil visuelt skille hver inngang. Gi sidebjelken en lys dråpe skygge.
For bakgrunnen av tittelområdet på sidebjelksektioner, tegne et rektangel under de andre stylingene / figurene, og legg til et Gradient Overlay av pinks og en 1px-stroke fylt med en horisontalt reflektert gradient av rosa til hvitt. Deretter gi tittelbakgrunnslaget en lagmaske i form av sidebjelken.
Gjenta disse trinnene for alle sidebarene som designet ditt har. Hvis du er interessert i å lage nyhetsbrevet, legger du til plass for det, og vi vil dekke det i de neste par trinnene.
For å lage den lille grafikken nederst i hver sidebjelkeboks vil det bli mye raskere hvis du jobber med Illustrator bare litt mer. Illustrator er ofte satt opp for å være i fargemodus CMYK; Men siden du designer for skjermen, må fargemodusen endres til RGB. Bytt til Illustrator, og gå til Arkiv> Dokumentfargemodus> RGB-farge. Deretter må du tegne den ønskede bunnteksten.
Bytt nå tilbake til Photoshop, velg de tre mellomstorringene i mørkegrå, rosa og cyan - dra dem over til Illustrator. Bruk Eyedropper Tool (I) i Illustrator for å fargelegge grafikken som ønsket. Dra grafikken til Photoshop, størrelse og plass tilsvarende. Du kan også legge til noen effekter, jeg gikk med en lys Drop Shadow og en subtil Gradient Overlay (svart til hvitt, med en blandingsmodus for Multiply og Opacity på 10%)
Fordelen med denne prosedyren er å ha en smart gjenstand som allerede er farget. Hvis du skulle dra dette inn i Photoshop og forsøket på å farge de enkelte stykkene, ville det være en lengre prosess som ville kreve at du rasteriserer det smarte objektet og lager mer enn ett lag.
Jeg blir ikke så gal inn i ideene bak grafikken og merkevaren som før, men jeg vil berøre noen av forgrunnsgrafikkene på nettstedet. I det endelige bildet er det en rekke grafikk som ligner den i trinn 18, men de er litt mer komplekse. Når du har tegnet figurene på grafikken, åpner du effektene og legger til et Gradient Overlay.
Du kan se hvordan fargene er ordnet i gradienten for å gi utseendet til en skarp deling mellom lysere nyanser og mørkere nyanser. Husk at det finnes flere måter å oppnå dette på, inkludert bruk av hvite rektangler og lagsmasker.
Disse grafikkene er flotte for å legge inn og tilpasse ikoner. Som spørsmålet i hoveddelen av kroppen Visste du… Et hvilket som helst ikon eller symbol kan plasseres der. Eksemplene nedenfor bruker ikoner fra gratispakken Simplicio, og mange flere gratis ikonpakker finnes på Icon Pot.
Overraskende, for meg er en av de vanskeligste delene av webdesign å skape egendefinerte knapper. Disse knappene følger det som er kalt "Web 2.0 Design" av webdesign fellesskapet.
Først må vi undersøke noen av knappene på det endelige bildet. For konsistens er teksten på hver knapp Rockwell fet, bortsett fra innloggingsknappen på grunn av sin lille størrelse - Rockwell fungerer ikke bra i så små størrelser. I tillegg er all styling av teksten og bakgrunnsknappene de samme.
Ser neste ved den zoome inn-knappen du kan se noen av effektene tettere. Mange av effektene som brukes er svært vanlige for å skape den Web 2.0-stilen, spesielt en 1px slag rundt knappen, slippe skygger på både teksten og boksen, ikoner, noe som gir inntrykk av 3D og gradienter. Du kan se Følg oss-knappen bruker alle disse. For å opprette 3D-effekten ble en Inner Drop Shadow påført bakgrunnsboksen. Se nøye og du vil se at teksten har en veldig skarp dropshadow - dette skaper det samme inntrykket som om du skulle duplisere teksten. Farge den nederste kopien svart og flytte den ned og til den høyre piksel.
Ikke føler at det er riktig eller feil måte å opprette knapper på. Ta en titt på det som er ute på nettet, lek med noen av effektene og sett på noe du føler at begge ser ut som en knapp, og er en tiltalende kamp for webdesignet du jobber med.
Like viktig som det er å få webdesignet ditt til å følge nettet, kan det være å bryte rutenettet her og der, og det kan bidra til å gi designet ditt et tegn. Det primære stedet som rutenettet er ødelagt i dette webdesignet, er i overskriftsområdet nær logoen. Denne grafiske mashup letter spenningen på rutenettet og gir stedet en morsommere og differensiert følelse. Det skal bemerkes at utformingen og innholdet bryter rutenettet visuelt i dette området. Beskrivelsen av selskapet følger kolonnen, men bryter i raden, og grafikken er nesten tilfeldig når de plasseres. Den grafiske mashupen består av former, gradienter og drop shadows; du burde være veldig kjent med disse nå :)
Et annet sted rutenettet er ødelagt, er ned på nyhetsbrevet med et trendy lite båndpakke. Wrap gjør ikke mye for å bryte rutenettet visuelt, men det gir innholdet et lite ekstra rom for å presse margene av innholdet ut. Ønsket effekt av båndet var at det ville stjele litt fokus og gi siden litt mer stil. Brytingen av rutenettet er liten og subtil, men det hjelper virkelig å forbedre designet.
Jeg vil gjerne nevne en siste liten ting om designfunksjon. Under Siste artikler Du vil legge merke til flere bånd, en for hver artikkel. Jeg har designet disse med ideen om at når en bruker svinger over artikkelen, slipper antall kommentarer ut. Det vil ta litt AJAX fidgeting i utvikling, men den ønskede effekten kan berike opplevelsen av nettstedet mens du gir noen tilleggsinformasjon.
Dette designet vil enkelt konverteres til en bloggoppsett eller WordPress-tema, og en vanlig praksis i blogosfæren er å plassere annonser. Annonser generelt er ganske enkle å plassere og designe for. Når du designer, bør du bruke ekte annonser og ikke bare forlate tomme områder, spesielt når du presenterer for klienter. For et godt utvalg av bannere bruker jeg vanligvis noen av bannene i porteføljen til RightBanners, eller bare besøker et hvilket som helst antall nettsteder og blogger som har annonser som Psdtuts+.
Når du plasserer annonser, er den største bekymringen at den er over brettet, for det meste fordi markedsføring av mennesker og annonsører tror på det religiøst. Mens det er betydelig bevis på at den gjennomsnittlige brukeren er klar over den berømte rullefunksjonen, går det en stund før alle aksepterer det. Realistisk, hvis innholdet er engasjerende, vil brukere rulle for å se resten av siden. Fellen er vanligvis rundt 570-600 piksler ned på en 1024x768 skjerm.
Mens jeg håper du har lært noe fra denne opplæringen, vil jeg gjerne ta et øyeblikk til å snakke om ting jeg ikke liker om dette designet. Ingen nettside er perfekt, og det er mange faktorer som er viktige for personlig smak. I tillegg, siden dette nettstedet ble utformet uten en bestemt kort og ingen reell hensikt, mangler design et sterkt fokus.
Etter min mening er dette designet litt for opptatt og trangt. Mens jeg prøvde å virkelig gi typen pusterom, er polstring og marginer fortsatt veldig stramt. Noen ganger er dette et must hvis nettstedet ditt har mye informasjon som må vises, men mengden av grafiske elementer kan være litt for mye. Selv om jeg virkelig støtter bruk av grafikk og farge for å forbedre stemningen, følelsen og følelsene til et nettsted, må du være sikker på at innholdet ditt ikke går seg vill.
Jeg tror det vil være nok for nå, jeg er ivrig etter å se hva du kommer opp med etter å ha lest og følger denne opplæringen!
Accentsconagua