, hvordan vi kan forbedre deres photoshop arbejdsgang med csshat og pnghat,,,,,,, hvad du gerne vil være, at i løbet af denne lektion, jeg følger dig gennem indførelsen af avancerede net element på vej i photoshop, men uden at anvende et enkelt billede fil i deres færdige websted.når vi er færdige, vil du have en enkelt side opbygning med alle eu - erhvervsgrenen elementer i forvisningen image over, med kun css3, base64 - kode og skrifttype ikoner., ved at skabe en "image" design, du kan holde din last og http anmodning, tæl til et absolut minimum, og samtidig opnå den størst mulig fleksibilitet i eu - erhvervsgrenen elementer.ren kode - elementer kan være hurtigt og let justerede via css i måder stillbilleder kan ikke uden at være manuelt, redigeret og genudføres.,, at gøre alt dette ske, vil vi være med fire vigtige ressourcer:,,,, csshat, photoshop stik af, som kilde, som skaber css3 direkte fra photoshop lag.,,,, pnghat, photoshop stik af, også af kilde, der konverterer et billede til base64 - kode.,,,,,, css preprocessor, der gør kodning en basillion gange lettere, *.,,,,, fontawesome, en populær indsamling af skrifttype baseret ikoner.,,,,, *, du kan bruge en anden preprocessor, hvis du foretrækker det., ved at bringe disse elementer, det er muligt at skabe en ren kode design, der næsten er identisk med den originale psd:,,,, psd,,,,, ren kode resultat(set i firefox), denne forelæsning vil blive brudt i to dele:,,, design.,, koden generation.,,, i denne første del vil vi demonstrere de former for teknik, du kan bruge photoshop ved at skabe en css3 og base64 miljøvenlige design.vi kan nå langt med ren kode i disse dage, kan vi ikke endnu ikke alt, hvad man kan finde i photoshop.så det er vigtigt at have "dos" og "om, hvad" med i betragtning, når du er ude. lad os komme i gang med en kort oversigt over csshat og pnghat, photoshop plugins, vi vil bruge til at skabe vores css3 og base64 - kode, intro til csshat & pnghat csshat,,, med csshat stik af installeret kan man se alle lag i photoshop dokument og csshat vindue med det samme vil produktion produktion klar kodeks for dig.,,,,, csshat fortolker primært fra din lag stil miljøer, så du bør tage sigte på at tilføje stigninger og grænser via lag styles, snarere end i photoshop er alternative metoder, photoshop egenskaber. der csshat kan fortolke:,,, gradient /farve fylde lag, gradient - overlay -, smid skygge, tekst - lag, indre skygge, indre glød,, ydre glød, farve - overlay -, slagtilfælde, grænse radius, - uklarhed, kode, som csshat kan produktionen, standarder, i overensstemmelse css3 herunder stigninger, smid skygger, tekst skygger osv.), sælger præfikser (valgfrit), bredde og højde, forsyning, (valgfrit), skrifttype egenskaber:, skrifttype, familie, skriftstørrelse, skrifttype vægt (dristige /normal), skriftstørrelse, mindre med lesshat mixins, sass /scss med kompas mixins,, stylus med nib mixins, perspektivgruppen stigninger for ie9, pakker i klasse opkaldt efter photoshop lag (valgfrit), css kredse, både rubrik skygger og tekst skygger,,, det csshat kan ikke arbejde med:,,, blanding af transportformer, som formerer sig og overlay - altid blanding tilstand for fald skygger og så videre til det normale, mønster - overlay - - vil vi være håndtering baggrund image kode generation, men heller ikke dér er menneskene sikrehat i stedet.,, separate grænser egenskaber pr. side - på grund af photoshop kun kan gøre alle sider af en grænse på ensartet vis.,, css trekanter, numeriske skrifttype vægt (100, 700 osv.,,, pnghat,, pnghat kan gøre mange ting.se hvordan eksporterer photoshop aktiver til nettet med pnghat for en fuldstændig oversigt over de stik af., i forbindelse med denne forelæsning, vi vil bruge den til at skabe base64 - kode, som vil danne baggrund billede af designet.vil du se, hvordan det fungerer i praksis, om kort tid.,, når en billede omdannes til base64 - får du en tekststreng, som derefter kan indgå direkte i ccs.det er flere data i billedet, længere snoren, så derfor base64 - er bedst egnet til simpel flisearbejde billeder med få farver.,, begyndt at få bolden op, du får brug for et par ting.,, photoshop plugins, til at begynde med, du skal have csshat og pnghat plugins installeret.,, hvis du ikke er i stand til at købe et eksemplar af csshat du stadig kan følge med og bruge photoshop er indbygget "kopi css" funktionalitet, der kan vælges i forbindelse menu efter lige klikke alle lag.,,,,, imidlertid i denne sag, vil du have manuelt at fjerne uønskede misligholdelse kode for ting, som absolut position, z-index, dimensioner og klasse navne.det lyder ikke klare produktion af flere skygger og stigninger såvel som csshat, og det kan ikke producere mindre næsvished /scss eller stylus klar kodeks.,, hvis du ikke kan købe pnghat kan du manuelt eksport din baggrund image, så tag det gennem en online - konverter, som f.eks.: http: /////////////////////imagetobase64converter webcodertools. com,, jeg også foreslå en tredje stik af fra kilde kaldet indviklede mønstre.dette stik af tilsat tilføjer et bibliotek med hundredvis af mønstre til photoshop, som hver kan være på stedet, der anvendes som et mønster - overlay til alle lag, som et alternativ til anvendelse af de indviklede mønstre stik af, du kan bare kigge mønstre og downloade dem gratis.,,, note: jeg ved, hvad du kan tænkte på - det er en masse ting ved kilden, er det en sponsoreret post?nej, sandheden er, at jeg købte kilden er hele varesortimentet, længe før jeg begyndte at skrive til tuts + og jeg elsker hver eneste en af dem på grund af det store antal timer, de har tilføjet tilbage i min dag.jeg anbefaler disse plugins, fordi jeg har været meget imponeret af min egen erfaring med hele suiten.,, skrifttype fedt & roboto, vil vi være, at nogle billeder i dit design med en skrifttype, fedt, så du er nødt til at gå og hente skrifttype og installere det fast til dit system.,, font valg til vores regelmæssige tekst vil blive roboto, så du får brug for at installere det også.du kan få den fra google webfonts.,, nye psd og baggrund image, skabe en ny photoshop dokument på en størrelse af, 1600px, x, 2180px,.dobbeltklik default "baggrund" lag til at låse den op, så gem din psd., i den indviklede mønstre, vindue, (eller websted), søge, satin væve,.når du finder det, med din baggrund, lag udvalgte, klik mønstret er fliser til automatisk gælder det som et mønster overlap.,,,,,. nu skal de se en lille grayscale lodrette linjer på lærredet.vi har valgt dette mønster, som passer til omstilling til base64, som den bruger meget få farver og er kun 24px af 12px i størrelse, og det betyder, at det vil resultere i en relativt lille kode snor.,, tilføje den øverste trim, for at hjælpe ramme side skabe et rektangel, på toppen af din lærred, at fuld bredde, og 8px, højden.giv disse egenskaber:,,, fyld farve:,,&#g g g g g,,,,,,, - uklarhed:,, 50%,,,, lag - > indre skygge:,,,, at blande tilstand:, normale, farve:,&#c8c8c8,,, - uklarhed: 100%, og vinkel: - 90, afstand: 2,,, størrelse:, 4,,,,, lag stil > drop shadow:,,,, at blande tilstand:, normale, farve:,&#ffffff,,, - uklarhed: 100%, vinkel, 90,,, afstand: 2,,, størrelse:, 1,,,, din "top trim" burde se sådan,,,,, skabe menuen, ved at skabe denne plan, vil vi få at se nogle af de virkninger, der kan opstå med stigninger, skygger og slagtilfælde.vi skal til en ren ser rejst menu, der sidder i en indpresningsdybde papir.,, 1.menu - papir, til at begynde med, vil vi skabe indpresningsdybde indpakning, der vil have menuen.oprette et center på linje, rundet hjørnet rektangel på lærred, 1200px, lang, 61px, højt.Set the following properties:,,,,,Fill color: ,,#f9f9f9, - note that even though there will be a gradient on this rectangle, we still want to set a fill color as a fallback.,,,Properties > Live Shape Properties > ,,Corner radius: ,,12px,,,,,Layer style > Inner Shadow:,,,,Blending Mode: ,Normal,,,Color: ,#000000,,,Opacity: ,15%,,,Angle: ,90,,,Distance: ,1,,,Size: ,10,,,,,Layer style > Gradient Overlay:,,,,Color > Location, 0%: ,#ffffff,,,Color > Location, 100%: ,#f3f3f3,,,Style: ,Linear,,,,,Layer style > Drop Shadow:,,,,Blending Mode: ,Normal,,,Color: ,#ffffff,,,Opacity: ,100%,,,Angle: ,90,,,Distance: ,1,,,Size: ,2,,,,Your menu wrapper should now look like:,,,,,2. menu baggrund, skabe en anden runde hjørnet rektangel over menuen papir på, 1190px, lang, 50px, høj, med dens øverste venstre hjørne, 5px, yderligere rettigheder og ned end menuen indpakning er øverste venstre hjørne.tilføje disse egenskaber:,,, fyld farve:,,&#ffffff,,,, egenskaber > bor morfologiske egenskaber >,, hjørne radius:,, 10px,,,,, lag stil > apopleksi:,,,, - størrelse: 1, holdning:, udenfor,,, farve:,&#e4e4e4,,,,, lag stil > gradient - overlay -:,,,, farve > placering, 0%:,&#e5e5e5, farve > placering, 100%:,&#ffffff, stil:, lineære,,,,, lag stil > drop shadow:,,,,,,, blanding tilstand:, normale, farve:,&#c1c1c1,,, - uklarhed: 100%,,, -, 90, afstand: 3, størrelse:, 4,,,, du nu har.,,,,, 3.tilføj menu produkter, skabe en rektangel, denne gang på, 130px, lang, 51px, høje direkte over toppen af din "menu baggrund" bar.Give it this gradient overlay:,,,Layer style > Gradient Overlay:,,,,Color > Location, 0%: ,#efefef,,,Color > Location, 25%: ,#e4e4e4,,,Color > Location, 100%: ,#fcfcfc,,,Style: ,Linear,,,,Now add some placeholder text: type out the word "Page" and position it over the middle of your menu items with the following settings:,,,Character > Font: ,,Roboto, Regular,,,,,Character > Font size: ,,18px,,,,,Character > Color: ,,#5c5c5c,,,,,Layer style > Drop Shadow:,,,,Blending Mode: ,Normal,,,Color: ,#ffffff,,,Opacity: ,100%,,,Angle: ,90,,,Distance: ,1,,,Size: ,0,,,,Your menu item should look like this:,,,,,4. skabe "løbende" menupunkt stil, en kopi af din menupunkt rektangel og tekst, så kør til højre, så det sidder lige ved siden af din originale.Edit the text to read "Current".,,Set the rectangle's layer style properties to:,,,Layer style > Stroke:,,,,Size: ,1,,,Position: ,outside,,,Color: ,#e62d4ee4e4e4,,,,,Layer style > Inner Shadow:,,,,Blending Mode: ,Normal,,,Color: ,#faabb9,,,Opacity: ,60%,,,Angle: ,90,,,Distance: ,3,,,Size: ,5,,,,,Layer style > Gradient Overlay:,,,,Color > Location, 0%: ,#ef3d5d,,,Color > Location, 25%: ,#dc2345,,,Color > Location, 100%: ,#fc6c86,,,Style: ,Linear,,,,,Layer style > Drop Shadow:,,,,Blending Mode: ,Normal,,,Color: ,#cc2241,,,Opacity: ,100%,,,Angle: ,90,,,Distance: ,1,,,Size: ,0,,,,Then change your text color and drop shadow settings to:,,,Character > Color: ,,#ffffff,,,,,Layer style > Drop Shadow:,,,,Blending Mode: ,Nsynspunkter, farve:,&#b50020,,, - uklarhed: 100%,,, -, 90, afstand: 1.,,, størrelse: 0,,,,, når du er færdig med ovenstående, lave flere kopier af de originale "menupunkt" og placere dem til højre for den nuværende menupunkt ".vi gør det for at se, hvordan de menupunkt styles se, når mødet ud mod hinanden, for at sikre, at der er tilstrækkelig visuel adskillelse fra ét punkt til den næste., desværre photoshop har ingen måde - - at noget lignende "grænse tilbage", så vi kan ikke til venstre eller højre grænser direkte på vores menupunkt rektangel.men vi er stadig nødt til at simulere effekten, så vi kan skabe en adskillelse mellem hvert punkt på dagsordenen.bruge photoshop linje værktøj til at drage nogle, 1px, store lodrette linjer mellem menuen poster, og fastsætte deres fylde farve,&#g g g g g,,, med alle disse elementer på plads, du skal have:,,,,, tilføje selve teksten, hvis du brugte det her layout for en kunde, dette er det område, inden for hvilket vil du tilføje deres hovedinteresse klo eller opfordring til handling.i forbindelse med denne forelæsning, tilføjes følgende fire linjer, centreret om side:,,, vidste du, at du kan, din photoshop,,, - - og din, ren kode?,,,, give den første og tredje linje følgende indstillinger:,,, art > skrifttype:,, roboto, tynd,,,,, karakter > skriftstørrelsen:,, 48px,,,,, karakter > farve:,,b6b6b,,, så giv den anden og fjerde linje i disse miljøer:,,, art > skrifttype:,, roboto, modige,,,,, karakter > skriftstørrelsen:,, 80px,,,,, karakter > farve:,,&#ef3d5d,,, din tekst bør nu ser sådan ud:,,,,, tilføje info - panel, 1.skabe panelet baggrund, under selve teksten, skabe en afrundet hjørne rektangel, 1200px, mange af 665px, højt.giv disse indstillinger:,,, fyld farve:,,&#ffffff,,,, egenskaber > bor morfologiske egenskaber >,, hjørne radius:,, 15px,,,,, lag stil > apopleksi:,,,, - størrelse: 1, holdning: indenfor,,, farve:,&#d8d8d8,,,,, lag stil > drop shadow:,,,, at blande tilstand:, normale, farve:,&#c1c1c1,,, - uklarhed: 27%,,, -, 90, afstand: 3, størrelse:, 4, 2.skabe panelet header baggrund, så 60px, under toppen af panelet baggrund, skabe en rundet hjørnet rektangel.det bør være 1230px, bredt og 70px, højt.center, det på lærredet, så det stikker ud af, 15px, på hver side af panelet baggrund.Give it these properties:,,,Fill color: ,,#ef3d5d,,,,Properties > Live Shape Properties > ,,Corner radius: ,,10px,,,,,Layer style > Inner Shadow:,,,,Blending Mode: ,Normal,,,Color: ,#de2a4a,,,Opacity: ,60%,,,Angle: ,90,,,Distance: ,0,,,Size: ,5,,,,,Layer style > Gradient Overlay:,,,,,Color > Location, 0%: ,#ef2c4f,,,Color > Location, 10%: ,#dc2345,,,Color > Location, 100%: ,#fc6c86,,,Style: ,Linear,,,,,Layer style > Drop Shadow:,,,,Blending Mode: ,Normal,,,Color: ,#cc2241,,,Opacity: ,100%,,,Angle: ,90,,,Distance: ,3,,,Size: ,0,,,,3. skabe panelet header baggrund er anden skygge, har vi allerede en dråbe skygge på rektangel, vi har skabt, som vil give det en diskret 3d virkning.men vi vil også gerne have en anden drop shadow, der ligner faktisk en skygge af en downlight.vi har allerede brugt "drop shadow ejendom af eksisterende rektangel, vi bliver nødt til at skabe en anden rektangel til at anvende en anden skygge.,, kopiere dit panel baggrund rektangel og trække det under det oprindelige i lag - panelet, så det klart, at den nuværende lag stil.hedder det "panelheadershadow", så du kan fortælle de to lag bortset let.giv disse drop shadow indstillinger:,,, lag - > drop shadow:,,,, at blande tilstand:, normale, farve:,�,,, - uklarhed: 27%,,, -, 90, afstand: 5,,, størrelse: 3.,,,, 4.skabe panelet header tekst, direkte over midten af panelet header baggrund type "i denne lektion:" og give teksten disse indstillinger:,,, art > skrifttype:,, roboto, regelmæssig,,,,, karakter > skriftstørrelsen:,, 24px,,,,, karakter > farve:,&#ffffff,,,,, lag stil > drop shadow:,,,, at blande tilstand:, normale, farve:,&#b50020,,, - uklarhed: 100%,,, -, 90, afstand: 1.,,, størrelse: 0, 5.skabe panelet tekst, endelig tilføje disse linjer:,,, lære at design og produktion i photoshop, standarder, klar rent css3 + base64 - kode.det betyder ingen billeder og minimal http, anmodninger om ultra effektiv lastning.,, csshat + pnghat + mindre + fontawesome,,,,, der er fastsat i den første del af teksten:,,, art > skrifttype:,, roboto, tynd,,,,, karakter > skriftstørrelsen:,, 36px,,,,, karakter, og gt; farve:,,b6b6b,,, og den anden del af teksten til:,,, art > skrifttype:,, roboto, sort,,,,, karakter > skriftstørrelsen:,, 48px,,,,, karakter > farve:,,b6b6b,,, så fremhæve hvert "+" symboler og fastsætte deres farve:,&#ef3d5d, bør de nu har et info - panel, der ser sådan ud:,,,,, tilføje den store ned pil, det er her, vi skal begynde at anvende skrifttype, fedt.vi skal sætte "fa ned pil" ikon og anvendelse, at der i stedet for et billede.,, den letteste måde at gøre det på er at få passende "brev" ind i dit lager ved at gå til den skrifttype fedt cheatsheet.find "fa ned pil" ikon, fremhæve det lille billede se og presse, ctrl /cmd + c,,,,, fremhæve og kopiere den lille nedadgående pil,,, - - gå tilbage til dit sejl, en markør med teksten, og pasta i rollen, du har.først, du ser bare en sjov lille rektangel med et kryds i det, så ændrer indstillinger til dette:,,, art > skrifttype:,, fontawesome,,,,, karakter > skriftstørrelsen:,, 200px,,,,, karakter > farve:,,b6b6b,,, sørg for at den pil er centreret om bord, og fastsætte lag er uigennemsigtigt, 30%.skal du nu har denne sejt pil:,,,,, tilføje "start" knap 1.knap baggrund og anden skygge, skabe en ny rundet hjørnet rektangel, 420px, mange af 105px, højt.den knap, vil bruge de samme lag stil egenskaber som "panel header baggrund", så du kan simpelthen kopiere de lag, styles.højreklik laget af dit panel header baggrund og udvælge "kopi lag stil", så right-click din nye knap lag og udvælge "pasta lag stil.", som vi gjorde med panelet header baggrund, vi ønsker at skabe en anden rektangel til den knap, som kan have en anden drop shadow anvendelse.to eksemplarer på din knap lag og trække det under det oprindelige i din lag palet, så omdøbe den til "knap skygge".en kopi af det lag stil fra "panelheadershadow" lag du skabte tidligere og sæt det på din nye "knap skygge", lag., 2.knap cirkel og pil, er vi nødt til at tilføje en lille cirkel til knap, som vil se ud som en lille depression, og vi vil sætte en hvid pil mod højre, på toppen af det, skabe en cirkel (ellipse) over den knap, 47px, ved, 47px,.holdning, det, så det er samme afstand fra den øverste, venstre og bunden kanter af på den baggrund, så giv det denne gradient - overlay -:,,, lag - > gradient - overlay -:,,,, farve > placering, 0%:,&#f04f6c, farve > placering, 100%,&#e32d4f, stil:, lineære,,,, at skabe en pil mod højre, er vi igen kommer til at bruge fontawesome.gå tilbage til cheatsheet. og denne gang kan kopiere, fa karat, ikon.på din lærred, bruge teksten værktøj til at sætte en markør for den cirkel, du har lige skabt og pasta i skrifttypen fantastisk ikon /karakter.giv disse egenskaber:,,, art > skrifttype:,, fontawesome,,,,, karakter > skriftstørrelsen:,, 36px,,,,, karakter > farve:,,&#ffffff, holdning den nyoprettede hvid pil i midten af ringen, det er over., 3.skabe knap tekst, over toppen af knappen til højre for den cirkel og pil, type "start læren" og give teksten disse indstillinger:,,, art > skrifttype:,, roboto, regelmæssig,,,,, karakter > skriftstørrelsen:,, 36px,,,,, karakter >&#ffffff; farve:,,,,, at denne tekst har samme drop shadow som "panel header tekst", så du kan kopiere den stil i teksten, og sæt det på den her. nu skal de have en knap, der ser sådan ud:,,,,, tilføje bunden trim, er vi nu ved at tilføje den sidste del af design, trim på bunden for at afslutte udarbejdelsen af rummet.da dette element er kodet op, vi vil bruge separat øverste og nederste grænse miljøer, men som photoshop kan ikke lette denne vil vi igen anvende form værktøjer i stedet, så vi kan få den rigtige farver på plads.,, under startknap, skabe et rektangel med fyld farve,&#g g g g g, og det er 5px store og strækker sig den fulde bredde af den side.to nye rektangel og går det ned, 10px, så er der en, 5px, kløft mellem de to områder, i centrum for deres sejl over to grå linjer /kvadratisk eller rektangulær form, ubearbejdet, tegner en cirkel, som 40px, ved, 40px og give disse egenskaber:,,, fyld farve&#f2f2f2:,,,,,,,,, lag - > apopleksi:,,,, - størrelse: 5, holdning: indenfor,,, farve:,&#g g g g g,,,,, lag stil > gradient - overlay -:,,,, farve > placering, 40%,&#g g g g g,,, farve > placering, 45%:,&#f2f2f2, stil:, radialdæk,,,,,,, er særlig opmærksom på den gradient - overlay - indstillinger, som de er forskellige fra dem, vi har brugt før.farven kan bringes på 40% og 45% i stedet for 10% og 100%, og vi bruger en radial gradient i stedet for lineær.langs med grænsen /slagtilfælde, giver det den virkning, de små grå kreds, omgivet af et større.,, din nederste kant skal se sådan ud:,,,,,, færdig!,, bør du har nu afsluttet psd design, 100% klar til oversættelse til ren css3 og base64 - kode:,,,,, kommer op, i den følgende del af denne lektion:,,, - - vil du fælde den html til dit design.,, du skal også lave en let, autocompiling mindre projekter (med kommando linje) ved hjælp af den frie vinduer & mac app prepros.,, vil vi indarbejde lesshat og normalisere. mindre, så også skrifttype fantastisk via fontawesome. mindre.,, vil du ændre din baggrund image at base64 - og indarbejde det i din under kode.,, efter det, vil du konvertere alle konstruktionselementer for at css3 og tilføjer dem til deres mindre kode, du endelig vil være i stand til at læne sig tilbage i stolen og er meget imponeret over dig selv,,, jeg vil se dig så!,