Create en Comic Book Themed Web Design, Photoshop til HTML + CSS (del 1)
Oppdatert med Coding Tut! Denne gangen har jeg fått for deg en morsom tutorial for alle. I del 1 vil vi skape en svært original design for alle comicbook fans der ute. Vi vil skape denne bloggen layout fra grunnen av med flere triks i Photoshop for å gjøre det ser kjempebra. Så i del 2 vil vi lære å skjære den, kode den, og få den klar til å bli omgjort til en blogg CMS tema. Er du klar?
koding fasen er tilgjengelig
koding fasen av opplæringen (del 2) er nå tilgjengelig over på vår søsterside, Nettuts! Når du er ferdig med dette designfasen, ta turen til Nettuts å skjære og kode det i HTML /CSS. Takk for alle tilbakemeldinger og forespørsler for oppfølgingen alle!
Før Komme i gang
La oss få det i gang! For å øke hastigheten på lesing vil jeg unngå noen av de mest grunnleggende forklaringer (som hvordan å lage en lagmaske eller hvordan du redigerer handlers eller Beziers av en vektor form). Du vil trenge noen grunnleggende kunnskaper om Layers, Guides, Vector og lagmasker, Børster, Pen Tool, og arbeider med Typografi (Character og avsnitt)
De eiendeler for denne opplæringen er:.
The Paper Texture - Utklipp
Sunburst Shapes
Tegneserie fonter fra Font Squirrel (Komika Tittel og Komika tekst)
Social Media Icon Pack av Komodo Media
Det første trinnet er å skape en uekte opp, doodle, eller bare en skisse oppsettet på en serviett. Å ha en grov skisse av nettstedets struktur gjør det enkelt å plassere elementene på design. Nedenfor ser du en enkel skisse som viser følgende elementer:
En header, med logo, søk bar og sosiale medier linker, i tillegg til hovednavigasjon bar.En banner, med kjennetegnet innlegg, legge merke til hvordan innlegget tekst plasseres over bildet inn i en diskusjon boble å skildre " tegneserie " style.A innholdsområde, med en liste over poster som vises i to kolonner, hvert innlegg har et bilde assosiert og teksten vises i en tale boble som well. footer, med en liste over bloggens kategorier, arkiv og populær post og siste kommentarene og informasjonen om opphavsrett
Trinn 1:. Sette opp Document
Åpne Photoshop, laste ned 12 kolonner Photoshop mal fra 960 Grid System eller opprette et nytt dokument 960 x med og lage trekke noen guider til venstre og høyre grenser.
Øk arbeidsområdet for å se hvordan det ser ut på bredere resolusjoner og øke høyden også. Jeg setter dimensjonene dokument til 1420px bredde og 1200px høyde. Til slutt går til lag > New Fill Layer > Solid Color ... og satt en svart (# 000000) bakgrunn for lerretet
Trinn 2:. Header Bakgrunn
Tegn en horisontal guide rundt 450px fra toppen grensen, vil vi bruke den en håndbok for å legge til en skygge på toppen av siden. Bruke rektangelverktøyet, tegne et bredt rektangel ved hjelp av denne fargen som forgrunnen (# AA0001). Påfør deretter en Gradient lagmaske (svart til hvit) til rektangelet for å skjule den nederste delen av det. Tips: ikke noen gang bruke en Gradient Layer for bakgrunner, fordi da øke høyden på lerretet (en svært vanlig praksis i webdesign) bakgrunnen blir forvrengt Åpne " Paper Texture " fra eiendelene Kopier og lim det over den røde gradient laget. Skalere det for å gjøre det passer inn grensene for design og endre lagets Blending Mode til Linear Burn. Vi vil skjære dette som et stort bilde bakgrunn, men for større oppløsninger vi må subtil sammenslåing kantene på papiret med svart bakgrunn, for dette, ved hjelp av Burn Tool, mørkere områdene nær den venstre og høyre kant av våre papir tekstur. Du kan bruke en stor og myk børste (0% hardhet) Ha alltid lagene organisert, satt begge lag. (&Quot; Paper " og " rektangel ") i en mappe som heter " Header Bg ". Fremover med tegneserien stil, la oss legge til noen sunburst striper for å skape en dramatisk bakgrunn for logoen Åpne " Sunburst " figurer fra eiendelene. På Custom Shape Tool, velg din favoritt sunburst form en trekke den over rød gradient laget. Sett formen til nær til venstre kant av 960 mal (viser Guides å se grensene). Gjelde for " Sunburst " lag en Radial Gradient lagmaske (hvit i midten og svart på utsiden). Endre Layer Opacity til 50%. Valgfritt: ved hjelp av en uregelmessig Brush, male med svart over lagmaske til å skape en mer grunge merge mellom sunburst og bakgrunnen For å håndheve tegneserien stil , vil vi legge til noen halvtone punkter over header bakgrunn. Lag et nytt lag over " Sunburst " lag, og gjengi noen svarte og hvite skyer i det (Filter > Render > Clouds). Deretter går du til Filter > Pikseler > Color Halftone. Endre " Halvtone " lags Blending Mode til Multipliser og legge til en lagmaske > Skjul alle til det. Deretter bruke en stor og myk børste. (Farge: Hvit og Opacity og Flow til 75%) male noen områder av lagmaske for å synliggjøre bare en bit av halvtonemønster Nå har du header bakgrunn ferdig, la oss legge til logoen. Først tegne en referanse guide rundt 180 px under toppen grensen, bør logoen ikke være under som guide. Bruke " Komika Tittel " skrifttype fra eiendelene skriver tittelen på stedet (" Comicastic ") Font Size: 68pt og forgrunn color: # FFB401. Deretter legge til mer tekst element, som utropstegn eller slagord i hvitt (skriftstørrelse 16pt). Deretter bruke Free Transform Tool rotere teksten noen grader igjen å gjøre det ser mindre formell. Prøv å få noe som bildet nedenfor, men husk å ikke plassere noen element under guiden. Endelig legge alle disse lagene i en mappe merket " Logo ". Legg et lag Stil > Gradient Overlay (# EA9403 - # FFC501) en Stroke (Størrelse: 1px, Inside, # FCB600) og en Drop Shadow (svart, 50% Opacity, Avstand og Størrelse: 2px) til " logo " lag. Bruke en lignende stil til slagord, men endre fargene på Gradient Overlay til #EDEDED - #FFFFFF og Strek til White (#FFFFFF). Hvis du plasserer utropstegn til logoen, kan du prøve å konvertere den til en form (Layer > type > Konverter til figur) og forvrenge det litt som viser bunnen av bildet nedenfor Bruk Avrundet rektangel Tool (Radius 5px) for å tegne et bredt rektangel over hele banneret under logoen som viser bildet nedenfor, høyden hvis rektangelet er opp til deg, jeg sette 250px. Påfør deretter en Gradient Overlay (Colors # DA7E00 - # F0AD00, vinkel: 90 °) og Stroke (color: # F2AA00, Mål: 1px, Posisjon: Inside) .Layer Styles til det Bruke Direct Selection Tool (A) over vår splitter nye avrundet rektangel, grip avreise øvre venstre hjørne og flytte dem til høyre (du kan bruke pekere for en nøyaktig flytte) . Deretter flytter de nederste høyre poeng noen piksler igjen Nå bruker rektangelverktøyet tegne en grå firkant inni den gule banner (630px x 250px ca. .), kan du la den nederste delen av den grå rektangelet noen piksler bort til bunnen av den gule banneret for å skape en out-of-bounds effekt. Legg en Stroke (Størrelse: 1px, Posisjon: Inside, Farge: #FFFFFF) og en Drop Shadow (color: # 000000, Opacity: 50%, Avstand: 0px, Spread: 0px, Mål: 5px) og prøve å plassere rektangelet som viser bildet nedenfor. Til slutt, la begge lag (Gray og Gule rektangler) inn i en mappe som heter " Top Banner ". Ved hjelp av skriftfamilien " Komika Text " skriver sider navigasjon øverst til høyre i toppbanner, angi skriftstørrelsen til 18px og farge: #FFFFFF. Sett den på en mappe som heter " Sider Navigation ", pass på denne mappen er bak " Top Banner ". Deretter bruker Avrundet rektangel Tool (Radius: 3px, Farge: # EFA800), tegne et rektangel rett bak det første ordet av navigasjon, lagnavnet " Selected Tab ". Neste bruker Direct Selection Tool (A) flytte avreise nederst til venstre som viser bildet nedenfor. Påfør en Gradient Overlay til " Selected Tab " Layer (Farger: # F0A900 - # FEBF00, vinkel: 90 °). Hvis du vil, kan du legge en veldig subtil Drop Shadow (color: # 000000, Opacity: 25%). Til navigasjons tekst For å vise en faktisk prøven, lime et bilde over banner. Hvis bildet er større at rektangelet du kan bruke en Clipping Mask, for dette lime bildet ovenfor den grå rektangel, deretter Tilvalg /Alt - Klikk mellom de to lagene, vil dette kutter bildet inne i rektangelet ingen beskjæring nødvendig Velg Custom Shape Tool og valgte en av pilene, og trekke et par ene siden til den andre, både som peker til venstre. Da gjelde for både en Gradient Overlay (# 6D0004 - # 980000) og en Stroke (Størrelse: 1px, Posisjon: Inside, Farge: # B20002). Sett begge piler inn i en mappe som heter " Forrige " og bruke Free Transform Controls og holder Kommando /Ctrl-tasten, forvrenge pilene litt. Deretter kopiere mappen og endre navnet til " Neste ", flytte den til høyre for banner og gå til Edit > Transform > Vend vannrett for å endre retning. Til slutt la begge mapper " Neste " og " Forrige " inn i en ny mappe som heter " Controls ". Nå duplisere " Neste " og " Forrige " mapper og bruke et annet lag stil til pilene for å skape en hover effekt for hver enkelt. Jeg Kopiering av Lagstil fra utrops synge om tittelen Med den samme prosessen med trinn 5, opprette et rutenett Layer over den gule banneret. Med " Halvtone " laget valgt å gjøre Kommando /Ctrl - Klikk over den gule banneret, deretter traff Kommando /Ctrl + Shift + jeg å invertere utvalget, deretter slette den over. Change " Halvtone " lags Blending Mode til Overlay og Opacity til 25%. Til slutt legger du til en lagmaske > Skjul alle og bruke en stor myk hvit Brush, male over enkelte områder på lagmaske for å synliggjøre bare noen få deler av mønsteret Nå er på tide å legge til et felt for å sette utvalgt stillingens innhold. For dette, ved hjelp av Custom Shape Tool utseende for Avrundet Cornered og rektangulært snakke boble. Trekke den over " Featured Image " Banner og plassere den på høyre side som viser bildet nedenfor. Før designe noe av dette har du trenger å gjøre noen undersøkelser om det er mulig å oppnå denne slags effekt, selv om du ikke vet hvordan å kode, kan du se etter noen eksisterende biblioteker av Ajax (JQuery /MooTools) og se hva er allerede gjort og fungerer, og deretter tilpasse design til et eksisterende bibliotek. Deretter bruker Direct Selection Tool (A) forvrenge formen av boblen litt. Endelig gjelder en Drop Shadow (color: # 000000, Opacity: 25%, Avstand: 5px, Spread: 0px, Mål: 10px). Det er på tide å legge til tittel og et kort til vår omtalt post. For tittelen bruk " Komika Tittel ", 18 pkt. # 680001. For Brødtekst, bruke " Komika Tekst Tight ", Størrelse: 16pt, Farge: # 1B1B1B. Plasser tekstlag rett linje som vist på bildet nedenfor Nå legger en annen boble, men mindre denne gangen, bruker denne fargen som forgrunnen: # 9C0001 og legge en Stroke lag stil (color: # D00000, Mål: 1px, Posisjon: Inside), akkurat som viser på bildet nedenfor, legg deretter til kommentarer nummer med " Komika Tittel " skrifttype, farge: #FFFFFF og Størrelse: 24 pkt. Og ordet " Kommentarer " med " Komika Tittel ", Størrelse: 12pt, Farge: # FFB301 Til slutt legger en liten Meta (informasjon om innlegget) nedenfor innlegget kort med " Tahoma ". font, størrelse: 10pt, Farge: # 1B1B1B. Hvis det ikke er nok plass til å sette Meta tekst, kan du bruke Direct Selection Tool for å øke høyden på utvalgt post boble boksen litt. Tips: Ikke noen gang forvandle en Vector avrundet hjørne element ved hjelp av Free Transform Tool i Photoshop, vil dette forvrenge hjørnet, velg de punktene du ønsker å flytte med Direct Selection Tool og fortrenge dem . Duplicate utvalgt post bakgrunn boble, skjule skygge, endre fyllfargen til gul (# FFC001) og rastrere den. Deretter bruker Rectangular Marquee Tool Selection velger all den gule boblen under tittellinjen, deretter Slett utvalget. Deretter legger du en linje av grensen, med " Bubble Tittel " laget valgt, Kommando /Ctrl - Klikk over " Bubble Bakgrunn " Vektormaske. Deretter Gå til Rediger > Endre > Kontrakt og sett verdien til 1px. Til slutt, traff Kommando /Ctrl + Shift + jeg å invertere utvalget og slette den. Dette er en god tid til å sette alt relatert til toppbanner organisert i mapper og legge til flere detaljer om du vil, jeg 'm legge en gul linje mellom Post kort og Meta La oss nå gå videre med hovedinnholdet bakgrunn, skape en mappe som heter " Page Content " og tegne en hvit (#FFFFFF) Avrundet Corner rektangel (5 px radius) flere piksler høyde (Hvis original lerretet blir for lite på dette tidspunktet kan du øke sin størrelse, bare sørge for å holde den øverste grensen som er). Det er på tide å begynne å legge til innhold på siden, som standard på blogger vi vil utforme en liste over de nyeste innleggene. Tegn to firkanter (3 kolonner bredde ca.) og plassere dem som viser bildet nedenfor. Gjør den samme prosessen enn trinn 12 legge til noen bilder i løpet av de rutene som bruker dem som klipping masker. Til slutt velger torget og legge en Stroke Layer stil til det (color: # FFB801, Mål: 1px, Posisjon: Inside). Vi vil arbeide over en av disse bildene legger innholdet rundt det, og deretter kopiere det så mange ganger som post vil vise på hjemmesiden Tegn to brede rektangler, ett gult (# F2AA00) og en annen Hvit med. gul ramme under (# FFB401). Over den gule stripen, skriver du inn tittelen på innlegget ved hjelp av " Komika Tittel ", color: # 670003, Mål: 18 pkt. Og på den hvite stripen, skriver kategorier navnene hjelp " Komika Tekst Tight " Størrelse: 13pt, Colors # 212121 for linker og # 670003 når musen over Tegn en snakkende boble igjen, over bildet og gul stripe, fyll det med denne color: # 333333 med en 1px Stroke (color: # 696969) og gjelder også Drop shadow vi gjorde før på banneret. Deretter legger du et eksempel kort tekst med " Komika Tekst Tight " Størrelse: 14 pkt, Farge: #FFFFFF, en prøve Meta tekst med " Tahoma " 10pt Color # 979797 og hvis du vil en linje mellom begge tekster (# 4B4B4B) For å avslutte denne delen legge en Kommentarer boble, i utgangspunktet gjenta Prosessen med Trinn 18. Deretter satte alt på mapper, jeg navngi innlegget mappen " Et innlegg ". Deretter kopiere den (Kommando /Ctrl + Drag) og plassere den på høyre. Gjenta fremgangsmåten med to eller tre rekker av innlegget som er vist ved bunnen av bildet under. Øke høyden på den hvite bakgrunnen som nødvendig for å få plass til all innlegget i For å øke " tegneserie ". stil, vil vi legge til en enkel side curl nederst til høyre på hvit bakgrunn. Først tegne en svart trekant nederst i høyre hjørne (du kan bruke Pen Tool), deretter kopiere det og flytte trekanten slik at det er en " refleks " av den sorte, kan du fylle denne kopien med alle andre farger. Neste fordreie den andre trekanten gjør det litt kurve. Deretter gjelder for skjev trekant en Gradient Overlay ved hjelp av en fin blanding av farger: (# 9C0001 - # FE0000 - # 9C0001) og endre vinkel til noe som ser bra ut ifølge vinkelen på curl, i dette tilfellet 108 grader. Neste bruke en myk børste (Svart, Opacity og Flow 50%) male noen skygger i et nytt lag bak vridd trekant. Hvis du ønsker å legge til noen punkter til skjev trekanten for å legge til en avrundet hjørne til spissen like viser bunnen av bildet nedenfor. Til slutt, satte alle curl relatert lagene inn i en mappe som heter " Page Curl ". Hold det praktisk fordi vi bruker den senere Vi er nesten ferdig, må du først opprette en mappe som heter " Footer " og sikre er under " Page Content " mappe, inni den trekke en rød (# 9C0001) sirkel, deretter bruke en Gaussian Blur på minst 65px radius. Deretter forvandle den resulterende uskarpt sirkelen for å gjøre det samsvarer med grense guider Nå, med Custom Shape Tool, velg en av Sunburst figurer og tegne en svart en i midten, deretter ned sin Opacity til 50%. Deretter legger Halvtonemønster over den røde glødende sirkelen, skjule den ved hjelp av en lagmaske og viser bare deler av den. Til slutt ned tettheten av den røde sirkelen til 50% .. Vi vil legge til vanlige elementer av en blogg slike kategorier og arkiv på bunnteksten Nå, la oss legge til en bakgrunn for bunnelementer, tegne en Avrundet rektangel (5px radius) Farge: # 1A1A1A og sette Fyll verdi til 50%, noe som gjør det rundt tre kolonner bred. du kan lage kopier av det å gjøre fit 4 bokser på bunnteksten. Velg den første rektangel, (du kan slette de andre på dette punktet). Deretter kopiere " Page Curl " mappen og plassere den inne i " Footer " mappe, forvandle det til å gjøre det samsvarer med den nederste høyre hjørne av rektangelet, og deretter endre fargene på graderingen til forskjellige toner av grått. Til slutt legger til rektangelet lag en Stroke stil (1px, Inside, # 242424) Nå legger tittelen på delen, i dette tilfellet " Kategorier " bruker " Komika Tittel ", Størrelse: 14px color: # F2AA00. Bruk guider for å avgrense tittellinjen, holde det minst 20 px under slutten av innholdet på siden bakgrunnen. Deretter legge til noen rader som eksempel kategorier, ved hjelp av " Komika Tekst Tight ", Størrelse: 16px, Farge: #FFFFFF, og Red (# EC000A) som hover effekt. Som en ekstra detalj for hover effekt, tilsett litt gul (# FFB301) arrow hjelp av Custom Shape Tool. Sett alle lagene i en mappe som heter " Footer Element ". Dupliser " bunnelementet " mappe og flytte den til høyre, endre ord for å skildre " Archives " denne gangen. Deretter kopiere mappen igjen, men denne gangen utvide gjennomskinnelig bakgrunn for å gjøre det to ganger bredere, på toppen, skriver titlene for " Populære innlegg ", " Siste innlegg " og " Siste kommentarer ", bruke gult for den første og grå for de to andre. Som du skjønner, vil dette ha en lignende funksjonalitet enn en tabbed ruten. Deretter legger en liten gul trekant for å markere den valgte kategorien Siden denne delen vil ha det meste lister over innlegg, lar legge dem, er egentlig en kombinasjon av " Komika Tittel " og " Komika Tekst Tight " med forskjellige farger (se skjermbilde under). Den første raden vil være en prøve av det valgte (hover) element, på dette, legger en svart (# 000000) avrundet rektangel bak teksten og legge en horisontal Gradient (svart til hvit) lagmaske. Til slutt , tilsett litt Øker nederst i denne delen Det er på tide å legge til noen detaljer for å gjøre ferdig vår grafikk. La oss starte med søkefeltet. Lag en mappe som heter " Søk Bar " på toppen av alt, opprette en Avrundet rektangel (3px Radius, Farge: # 000000 med en Stroke Effect Size: 1px, Posisjon: Inside, Farge: # 7C0000) som søkeinngang, og en liten firkant for søkeknappen; Kopier Lagstil av det valgte elementet på hovedmenyen og lim den inn i søkeknappen. For selve knappen, skriver ordet "! Go " over den med hvit, og bruk samme Drop Shadow enn hovednavigasjon tekst (resirkulering lagstiler er en flott tid saver). På Søk innspill, skriver ordet " Leter du etter noe " bruker " Komika Tekst Tight " . Color: # F9A600 Deretter legger et rektangel bak alle lagene inne " Søk Bar ", fylle det med en mørk rød # 380001 (Fill: 50%) og påfør en Stroke bruke denne color: # 890101 . Konvertere den til et smart objekt og bruke en lagmaske > Skjul alle til det, fylle masken med en reflektert Svart - Hvit Gradient å skape effekten showet nederst i bildet nedenfor Gjenta prosessen med. søkefeltet bakgrunnen, men denne gangen ved hjelp av en mindre høyde bar og med en sightly annen Stroke farge (# 860001). Deretter skriver du inn ordet " Følg oss " bruker " Komika tittelen " og lime alle ikonene du vil legge til, du kan bruke mini ikoner fra eiendelene. Ikke glem å holde lagene organisert i mapper Ferdigstilling dagens arbeid, la oss legge søkemotoren til bunntekst. Avgrense delen med en hvit Line, maskert med et reflektert svart - hvitt gradient. Skriv inn navigasjonskoblinger bruker Arial, størrelse 10px, color: # 515151 og merk en hover effekt med gul: # F2AA00. Deretter legger teksten opphavsrett Høyre justert Til slutt dobbeltsjekke alle lagene er på sin respektive mappe. Vi avsluttet den grafiske delen av prosessen, nå er det på tide å hoppe over NetTuts + for å se hvordan du skal skjære dette og snu den til HTML + CSS, er du klar?
Trinn 1:. Legg en Texture å theBackground
Trinn 1:. Sunbursts
Trinn 1:. Halftone
Trinn 1: Tittel
Trinn 7: Logo Layer Styles
Aktuelt. Innlegg Banner
Trinn 8: Bakgrunn
Trinn 9:. Endre Top Banner
Trinn 10:. Legge skyve bildet beholder
Trinn 11: Hovednavigering
Trinn 12: Legg banner Images
Trinn 13: Banner Styrer
Trinn 14: Styring Hold
Trinn 15:. Halftone detaljer
Trinn 16:. Utvalgt Artikkel Snakker Bubble
Trinn 17: Utvalgte Post Tekst
Trinn 18:. Kommentarfeltet og Post Meta
Trinn 19: Utvalgte Post Tittel bakgrunn
hovedinnhold
Trinn 20:. Innhold Bakgrunn
Trinn 21: Post Bilde
Trinn 22:. Legg innleggets titler og kategorier
Trinn 23:. Post kort og Meta
Trinn 24:. Avslutte hovedinnhold
Trinn 25: Page Content Corner
Trinn 26:. Footer Bakgrunn
Step. 27: Bakgrunns sunbursts
Trinn 28: Footer innhold bakgrunn
.
Trinn 29: Footer innhold bakgrunn - Curl
Trinn 30:. Kategorier
Trinn 31: Dupliser footer delen
Trinn 32:. Tabbed ruten innhold
Trinn 33:. Search Bar
Trinn 34: Social Media Icons
Trinn 35:. Footer navigasjon og informasjon om opphavsrett
Trinn 36:.! Dette er det
Konklusjon
.