skabe en tegneserie - web - design, photoshop til html + css (del 1),,,,,,,, ajourføres med kodning tut!denne gang har jeg til dig en sjov forelæsning for alle.i del 1, skaber vi en meget original design for alle tegneserien fans derude.vi vil skabe en blog layout fra bunden ved hjælp af flere tricks i photoshop, så det ser fantastisk ud.i del 2, vil vi lære at skære den kode, og få den klar til at blive omdannet til en blog cms tema.er du klar?,,, kodning fase er til rådighed, kodning fase af tutor (del 2) nu er tilgængelige på vores søster sted, nettuts!når du er færdig med denne designfase, over til nettuts til at skære og kode i html /ccs.tak til alle for feedback og anmodninger om opfølgningen af alle!,, før begyndt, lad os få det i gang!for at fremskynde behandlingen vil jeg undgå nogle af de mest grundlæggende forklaringer (som, hvordan man skaber et lag maske, eller hvordan man redigere kontanthåndterende virksomheder eller beziers en vektor form).du får brug for en grundlæggende viden om lag, vejledninger, vektor og lag masker, børster, pen redskab, og arbejder med typografi (karakter og stk.), aktiver for denne lektion:,, avisen tekstur - rester, solformet former, tegneserie skrifttyper fra skrifttype egern (komika titel og komika tekst), sociale medier ikon - pakning af komodo medier, det første skridt er at skabe en model, asparges, eller bare en skitse opstilling på en serviet.under en skitse af områdets struktur er let at elementer på designet.vil du se en simpel skitse nedenfor viser følgende elementer: en overskrift med logoet, gennemsøg bar og sociale medier forbindelser ud over de vigtigste navigation bar. et banner med var stillinger, hvor den efterfølgende tekst er placeret i det billede til en tale boble til at beskrive de " tegneserie " og stil. et område med en liste over stillinger opdelt i to kolonner, hver enkelt stilling har et billede, der er forbundet, og teksten er vist i en tale boble samt. en meter med en liste over de blog er kategorier, arkiv og populære post og de seneste bemærkninger og ophavsret, skridt. 1: oprettelse af dokumentet, åbne photoshop, downloade 12 kolonner photoshop model fra 960 nettet eller skabe et nyt dokument 960px med og drage en vejviseres til venstre og højre grænser., øge arbejds område for at se, hvordan det ser ud på flere resolutioner og øge højden som godt.jeg sætter det dokument, dimensioner 1200px 1420px bredde og højde.endelig går til lag > nye fylde lag > farve...og en sort (# 000000) baggrundsmateriale til gulvet.,, trin 2: header baggrund, udarbejde en horisontal vejledning omkring 450px fra øverste grænse, vi vil bruge den som en reference guide«, at tilføje en skygge på toppen af side.ved hjælp af rektangel værktøj, gøre et stort rektangel med denne farve som forgrundsviden (# aa0001).så anvende en gradient lag maske (sort hvid) til rektangel, for at skjule den nederste del af det., tip: ikke bruger en gradient lag til baggrund, for når en højde på gulvet (meget almindelig praksis i web - design) baggrund bliver fordrejet.,,, trin 1: tilføje en struktur til thebackground, åbne " papir tekstur " fra aktiver kopi og sæt det over den røde gradient lag.omfanget af det, så det passer ind i rammerne af design - og ændre lag er blanding tilstand til lineære brænde.vi skærer det som et stort billede, baggrund, men for bredere beslutninger skal vi diskret fusionerende kanterne af papir med den sorte baggrund for dette ved hjælp af brænde værktøj, mørkere områder tæt på venstre og højre kant af vores papir tekstur.du kan bruge en stor og blød børste (0% hårdhed), altid at holde din lag organiseret, har begge lag (" papir " og " rektangel ") i en mappe, der hedder " header bg ".,, trin 1: sunbursts fremad med - stil, så lad os tilføje nogle sunburst striber, til at skabe en dramatisk baggrund for logo, åbne " sunburst " profiler af aktiver.den skik form værktøj, vælge din favorit sunburst form en drage den røde gradient lag.den form for tæt på venstre grænse af 960 skabelon (se vejledning til se grænser).anvendelse til " sunburst " lag en radial gradient lag maske (hvid i midten og sort i udlandet).ændre lag uklarhed til 50%.valgfrit: ved hjælp af en uregelmæssig børste, maling med sorte i lag - maske til at skabe et mere grunge fusion mellem sunburst og baggrunden.,, trin 1: halftone, for at håndhæve den tegneserie stil, vi vil tilføje nogle halftone point over hovedet baggrund.skabe et nyt lag over " sunburst " lag, og til at gøre nogle sorte og hvide skyer der (filter > de > skyer).så gå til at filtrere > opbrydning > farve halftone.ændre " halftone " lag er blanding tilstand for at formere sig og tilføje et lag maske > gemme alt det.derefter ved hjælp af en stor og blød børste (farve: hvid og uklarhed og strøm til 75%) mal nogle områder af lag - maske til at synliggøre kun lidt af halftone mønster.,, trin 1: den titel, nu har du hovedet baggrund færdig, så lad os tilføje logoet.første drage en reference guide« ca. 180 px under det øverste grænse, logoet må ikke være under denne guide.ved hjælp af " komika afsnit " skrifttype ansigt fra aktiver type titlen på lokaliteten (" comicastic ") skriftstørrelse: 68pt forgrundsviden farve:&#ffb401.derefter tilsættes mere tekst element, som de sikkert tegn eller slogan i hvide (skriftstørrelse 16pt).så med den frie omdanne redskab roterer teksten et par grader til venstre for at få det til at se mindre formel.prøv at få noget, der ligner billedet nedenfor, men husk ikke at ethvert element under vejledning.endelig lægger alle disse lag i en mappe stemplet " logo ".,, trin 7: logo lag styles, tilføje endnu et lag stil > gradient - overlay - (# ea9403 -&#ffc501), slagtilfælde (størrelse: 1px indenfor,&#fcb600) og et drop shadow (sort, 50% opacitet, afstand og størrelse: 2px) til " logo " lag.brug en lignende stil til slogan, men ændrer farver af gradient - overlay til&#ededed -&#ffffff og slagtilfælde for hvidt (# ffffff).hvis du dem tegn til logoet, du kan forsøge at forvandle den til en form (lag > type > konvertere form) og forvrider det lidt, som viser bunden af billedet nedenfor.,, var stillinger banner, trin 8: baggrund, anvende de afrundede rektangel værktøj (radius 5px at fastlægge en bred rektangel i hele banner under det logo, som viser billedet nedenfor, hvis rektanglets højde er op til dig, jeg sætter 250px.så anvende en gradient - overlay - (farver:&#da7e00 -&#f0ad00 vinkel: 90 °) og slagtilfælde (farve:&#f2aa00, størrelse: 1px, holdning: i). lag stil.,, trin 9: ændringer i toppen banner, ved hjælp af den direkte udvælgelse værktøj (a) i forhold til vores nye. rektangel, tag de punkter i den øverste venstre hjørne og flytte dem til den rigtige (du kan bruge den cursors for en nøjagtig træk).så flyt bunden lige punkter et par pixels.,, trin 10: forøgelse af den glidende billede container, ved hjælp af et gråt rektangel i rektangel redskab henlede de gule flag (630px x 250px aprox.), kan du lade den nederste del af gråt rektangel, få det væk til bunden af gul - at skabe en out of bounds virkning.tilføj et slagtilfælde (størrelse: 1px, holdning: indenfor, farve:&#ffffff) og et drop shadow (farve:�, uklarhed: 50% afstand: 0px fordelt: 0px, størrelse: 5px) og forsøge at sætte rektangel, som viser billedet nedenfor.endelig lagde begge lag (grå gule kvadratisk eller rektangulær form) i en mappe, der hedder " top banner ".,, trin 11: vigtigste navigation ved hjælp af skrifttype familie " komika tekst " type sider navigation til toppen af toppen banner, fastsætte skriftstørrelsen på 18px og farve:&#ffffff.læg det på en folder, der hedder " sider, navigation og quot;, være sikker på den her mappe står bag " top banner ".så bruger de afrundede rektangel værktøj (radius: 3px, farve:&#efa800), udarbejde et rektangel, lige bag de første ord i navigation, navn på lag " udvalgte regning ".næste ved hjælp af den direkte udvælgelse værktøj a) få punkter i den nederste, venstre, som viser billedet nedenfor.ved anvendelse af en gradient overlay til " udvalgte regning " lag (farver:&#f0a900 -&#febf00 vinkel: 90 °).hvis du vil, kan du tilføje en meget fin drop shadow (farve:�, uklarhed: 25%) til navigation tekst.,, trin 12: tilføje banner billeder, der viser, at et virkeligt prøve, pasta, et billede på banneret.hvis billedet er større, at det rektangel, du kan bruge et udklip maske, for denne pasta billedet over gråt rektangel, så mulighed /alat - klik mellem to lag, vil dette klip det billede, inden for det rektangel, ingen afgrøder.,, trin 13: banner kontrol, vælges den skik form værktøj og valgte en af de pile og tage et par efter den anden, peger tilbage.så gælder for både en gradient - overlay - (# 6d0004 -󯐠) og et slagtilfælde (størrelse: 1px, holdning: indenfor, farve:&#b20002).læg begge pile i en folder, der hedder " tidligere ", og ved hjælp af de frie omdanne kontrol og med kommando /ctrl nøgle, fordreje de pile, en lille smule.så to mappen og omdøbe den til " næste ", flytte det til højre for den fane og gå til edit > omdanne > flip horisontale til at skifte kurs.endelig lagde begge mapper " næste " og " tidligere " i en ny mappe, der hedder " kontrol og quot;.,, trin 14: kontrol, svæv, nu gentager " næste " og " tidligere ", mapper og anvende en anden lag stil de pile med henblik på at skabe en svæver virkning for hver enkelt.jeg kopierer de lag stil fra dem synge af titlen.,, trin 15: halftone oplysninger, med den samme proces med trin 5, skabe en halftone lag over den gule banner.med " halftone " lag udvalgte befaler /ctrl - klik på det gule flag, så slå kommando /ctrl + forskydning + jeg at vende udvælgelse, sletter den over.ændre " halftone " lag er blanding tilstand til overlay - og uigennemsigtighed, til 25%.endelig tilføje endnu et lag maske > gemme alt og ved hjælp af en stor bløde, hvide børste, maling på nogle områder på lag - maske til at synliggøre kun få dele af mønstret, trin 16: indeholdt artikel taler boble, nu er det tid til at tilføje et område, de var efter indhold.for dette ved hjælp af custom form redskab ser for afrundet trængt op i en krog og rektangulær taler boble.træk den over " taget billede " banner og på den ret, som viser billedet nedenfor.før udarbejdelsen af noget af dette træk, du skal gøre noget, hvis det er muligt at opnå denne form for indflydelse, selv om du ikke ved, hvordan man kode, kan du se nogle eksisterende biblioteker af ajax (jquery /mootools) og se, hvad der allerede er gjort, og fungerer, og at tilpasse deres design til et eksisterende biblioteket., og med den direkte udvælgelse værktøj a) fordreje form af boblen, en lille smule.endelig anvendes en drop shadow (farve:�, uklarhed: 25%, afstand: 5px fordelt: 0px, størrelse: 10px).,, skridt 17: var post tekst, er det på tide at tilføje afsnit og en kort til vores kommende post.i afsnit anvendelse " komika afsnit ", 18pt.# 680001.for kroppen tekst, anvendelse og quot; komika tekst fast ", størrelse: 16pt, farve:
b1b1b. teksten lag ikke justeret som vist på billedet nedenfor.,, gå 18: bemærkninger kasse og post - meta - nu, tilføje en boble, men mindre denne gang, anvende denne farve som forgrundsviden: c0001 og tilføje et slagtilfælde lag stil (farve:&#d00000, størrelse: 1px, holdning: i), som viser billedet nedenfor, og tilføje bemærkninger nummer med " komika afsnit " skrifttype ansigt, farve:&#ffffff og størrelse: 24pt.og ordet " bemærkninger " med " komika afsnit ", størrelse: 12pt, farve:&#ffb301. endelig tilføje en lille meta (information om post) under post kort med " tahoma " skrifttype, størrelse: 10pt, farve:
b1b1b. hvis der ikke er tilstrækkelig plads til at sætte meta - tekst, kan du bruge den direkte udvælgelse værktøj til at øge højden af spillet efter boble pakke lidt.,, tip: ikke nogensinde ændre vektoren afrundet hjørne element ved hjælp af den frie omdanne redskab i photoshop, dette vil fordreje hjørnet, udvælge de punkter, de ønsker at komme med den direkte udvælgelse værktøj, og så flytte dem.,,, skridt 19: var efter afsnit baggrund, at kopiere var post baggrund boble, gem drop shadow, ændre fylde farve til gul (# ffc001) og rasterize.så, med rektangulært markise udvælgelse værktøj, vælge alle de gule boble under titlen, derefter slette udvælgelse.næste, tilføje en linje af grænser med den " boble afsnit " lag udvalgte, kommando /ctrl - klik på " boble baggrund " vektor maske.så gå til edit > ændre > kontrakt og den værdi, der skal 1px.endelig slog kommando /ctrl + forskydning + jeg at vende udvælgelses - og slette det. det er et godt tidspunkt at sætte alt i forbindelse med den øverste banner organiseret i mapper, og der tilsættes mere i detaljer, hvis du vil, jeg tilføjer en gul linje mellem post - kort og meta -.,, vigtigste indhold, skridt 20: indhold baggrund, lad os komme videre med det vigtigste indhold baggrund, skabe en folder, der hedder " side indhold ", og drage en hvid (# ffffff) rundet hjørnet rektangel (5 px radius) flere pixels højde (hvis den oprindelige lærred størrelse er for lille på den her gang kan du øge dens størrelse bare sikre, at holde den øverste grænse, som er).,, gå 21: post - billede, det er tid til at begynde at tilføje indhold til den side, som misligholder blogs, vi vil udarbejde en liste over de latest stillinger.drage to pladser (3 søjler bredde aprox.), og som viser billedet nedenfor.den samme proces end trin 12 tilføje nogle billeder med kvadratisk bruger dem som udklip masker.endelig udvælgelse af pladsen, og tilføje et slagtilfælde lag stil til det (farve:&#ffb801, størrelse: 1px, holdning: i). vi vil arbejde i en af billeder af indholdet i det, og så gentage det så mange gange, som efterfølgende vil vise på hjemmesiden, skridt 22: tilføje. stillinger titler og kategorier, drage to brede kvadratisk eller rektangulær form, ubearbejdet, en gul (# f2aa00) og en hvid med gul grænse under (# ffb401).i løbet af den gule stribe, type, titlen på den post ved hjælp af " komika afsnit ", farve:򣤳, størrelse: 18pt.og den hvide stribe, type kategorier navne med " komika tekst fast " størrelse: 13pt, farver𳲙 for forbindelser og򣤳 da mouse.,, gå 23: post - kort og metadata, gøre en talende boble igen, på billedet og den gule stribe, fyld den med dette farve:񑘕 med en 1px slagtilfælde (farve:򪊉) og også anvende drop shadow, vi gjorde før på banneret.derefter tilsættes en prøve kort tekst ved hjælp af " komika tekst fast " størrelse: 14pt, farve:&#ffffff, en prøve meta - tekst med " tahoma " 10pt farve󯍕, og hvis du vil en overensstemmelse mellem de to tekster (# 4b4b4b).,, at skridt 24: største indhold, for at afslutte denne del tilføje bemærkninger boble, dybest set at gentage processen for skridt 18.så sæt det på mapper, udnævner jeg den post - mappe " en post ".så gentage det (kommando /ctrl + drag) og sæt den til højre.gentag processen med to eller tre rækker af post som vist på bunden af billedet nedenfor.øge højden på hvid baggrund, som er nødvendig for at til passe den stilling,.,, gå 25: side indhold hjørne, for at øge " tegneserie " stil, vil vi tilføje en enkelt side krummer på bunden af hvid baggrund.først udarbejde en sort trekant på det nederste højre hjørne (du kan bruge pennen værktøj), så gentage det og træk den trekant, som en refleks &" quot; af de sorte, du kan udfylde denne kopi med en anden farve.næste skud anden trekant, gør det lidt kurve.så, anvendelse på de skæve trekant en gradient - overlay - ved hjælp af en dejlig blanding af farver: (# 9c0001 -&#fe0000 - c0001) og skifte vinkel til noget, der ser godt ud i den vinkel af krøller, i dette tilfælde grader.næste med en blød børste (sort, uigennemsigtighed og flow - 50%) i et nyt lag maling nogle skygger bag den trekant.hvis du ønsker at tilføje nogle punkter til den trekant, med henblik på at tilføje en afrundet hjørne til toppen, som viser bunden af billedet nedenfor.endelig lægger alle lag i en folder, der hedder krølle vedrørende " side bøjer ".hold den nytte, fordi vi bruger det senere. gå 26 meter baggrund, vi er næsten færdige, skaber en folder, der hedder " fod " og sikre under " side indhold " mappe indenfor det sætte en rød (# 9c0001) cirkel, så anvende en gaussisk slør på mindst 65px radius.så ændre den resulterende sløret cirkel, så det passer til den afgrænser vejledninger, skridt 27: baggrund sunbursts, nu med den sædvane, form, værktøj, udvælge en af sunburst former og trækker en sort i midten, så dens uklarhed til 50%.derefter tilsættes halftone mønster i de røde glødende cirkel, gem det ved hjælp af en lag, maske og viser kun dele af den.endelig ned opaciteten af den røde cirkel til 50%... skridt 28: fod indhold baggrund, vil vi tilføje fælles elementer af en blog sådanne kategorier og arkiv på fod. lad os tilføje en baggrund for fod elementer, udarbejde en afrundet rektangel (5px radius) farve:
a1a1a og det fylder værdi til 50%, hvilket gør det omkring 3 søjler bredt.du kan skabe kopier af det at gøre passer 4 kasser til fods.,, skridt 29: fod indhold baggrund - krøller, vælges den første rektangel (du kan slette den andre på dette punkt).så gentager " side bøjer " mappe og placere det i " fod " mappe, omdanne det til at gøre det i overensstemmelse med det nederste højre hjørne af rektangel, så ændre farver af gradient til forskellige nuancer af grå.endelig tilføje, at den rektangel lag et slagtilfælde stil (1px indenfor,𻋸).,, gå 30: kategorier, læg titlen på afsnit, i dette tilfælde " kategorier " anvendelse af " komika afsnit ", størrelse: 14px farve:&#f2aa00.anvende retningslinjer at afgrænse afsnit baseline, holde det mindst 20 px under afslutningen af side indhold baggrund.derefter tilsættes nogle rækker som prøve kategorier ved hjælp af " komika tekst fast ", størrelse: 16px, farve:&#ffffff og rød (# ec000a) som den virkning.som en yderligere detaljer om den virkning, tilføje en lille gul (# ffb301) pil efter sædvane form værktøj.læg alle lag i en folder, der hedder " fod element ".,, skridt 31: overlappe fod afdeling, at kopiere " fod element " mappe og flytte den til højre, ændre ord til at beskrive " arkiver " denne gang.så kopiere den mappe igen, men denne gang mere gennemsigtig baggrund at gøre det to gange større, på toppen, - titler for " populære stillinger ", " seneste stillinger " og " de seneste bemærkninger ", gule for den første og grå for andre to.som de ved, vil dette have en lignende funktion end en tabbed rude.derefter tilsættes en lille gul trekant til at markere de udvalgte regning.,, trin 32: tabbed pane indhold, da dette vil have for det meste lister over stillinger, lad os sige dem, i grunden er en kombination af " komika afsnit " og " komika tekst fast " med forskellige farver (jf. skærmbillede nedenfor).den første linje vil være en prøve af udvalgte (den) punkt, om det, tilføje en sort (# 000000) afrundet rektangel bag teksten og tilføje en horisontal hældning (sort på hvidt) lag maske. endelig tilføje en lille besked på bunden af denne afdeling,.,, skridt 33: søg bar det er tid til at tilføje nogle oplysninger til at afslutte vores grafisk.lad os starte med søgningen bar.skabe en folder, der hedder " søgning bar " oven i alt det, skabe en afrundet rektangel (3px radius, farve:� med et slagtilfælde virkning: 1px, holdning: indenfor, farve:c0000) søgningen input, og en lille rektangel til søgning knap; en kopi af det lag. de udvalgte punkt på de vigtigste navigations - og pasta til søgning på knappen.for den faktiske knap, type ordet ". gå!" over det med hvide, og anvende de samme drop shadow end de vigtigste navigation tekst (genanvendelse lag styles er en stor gang opsparer).på søgningen input, type ordet " og leder efter noget " anvendelse af " komika tekst fast " farve:&#f9a600. derefter tilføjes et rektangel med alle lag i " søgning bar ", fyld den med en mørkerød񜱡 (indhold: 50%) og anvende et slagtilfælde anvendelse af denne farve:󙓵.konvertere det til en smart ting og anvende et lag maske > gemme alt det, fylde maske med en sort - hvid stigning afspejles, at skabe virkning vise på bunden af billedet nedenfor.,, skridt 34: sociale medier ikoner, gentag processen for søgningen bar baggrund, men denne gang ved hjælp af en mindre højde, bar og med en sightly forskellige slagtilfælde farve (# 860001).så type ordet ", følg os " anvendelse af " komika afsnit " og pasta, alle de billeder, du vil tilføje, kan du bruge den mini - ikoner fra aktiverne.husk at holde din lag organiseret under mapper.,, skridt 35 fod navigations - og ophavsret, afslutter dagens arbejde, lad os tilføje meter lang sejlads.afgrænse afsnit med en hvid linje afspejlet sort - hvid - med en hældning.type sejlads forbindelser med arial, størrelse 10px, farve:񽱏 og fremhæve den virkning med gul:&#f2aa00.derefter tilsættes ophavsret tekst lige linje.,, trin 36: det er det!endelig dobbelttjekke alle lag er på deres respektive mappe.,, indgåelse, vi er færdige med det grafiske del af processen, nu er det tid til at springe over nettuts + for at se, hvordan vi skal skære det og gøre det til html + css, er du klar?,.,