ShutterPress: Design &kode A Photo Portfolio nettstedet (Dag 2: Kutting og kode Prep)
Jeg er en stor fan av foto-sentriske området design ... så i dag er jeg glad for å lansere en ny "komplett site" tutorial som er rettet mot fotografer, illustratører og andre visuelle reklamer. I dag 1, har vi designet malen i Photoshop ved hjelp av noen spesielle triks og teknikker. I dag, i dag 2, vil vi gå gjennom den endelige utformingen fase og deretter gjøre noen "pre-flight" forberedelse for koding fase, som vi vil gå over i detalj i Dag 3. I dag 4, vil vi vise deg hvordan du kan opprette tre helt forskjellige nettsteder som bruker den samme rå HTML.
Intro: Dag to, "Pre-Flight" Forberedelse
Dagens sesjon kommer til å være relativt rask i form av tekniske triks ... men vi vil gå tungt på "arbeidsflyt ". tips, så vær oppmerksom hvis du er nysgjerrig på den fasen av et prosjekt som skjer etter design og før kodingen starter
La oss begynne dagens sesjon med noen generelle notater om hva" pre-flight "er: når du er ferdig med å designe et nettsted, er det noen viktige skritt som bør ideelt sett skje før du begynner selve kodingen prosessen. Det første trinnet er å begynne å skjære opp vår design.
Den fulle skrevet steg-for-steg guide er nedenfor. Vi skal starte med Photoshop-dokumentet som vi opprettet i dag en, men du kan også laste ned demoen PSD for å sjekke arbeidet mot mitt.
Ok, med våre mål nå klart definert, la oss begynne!
trinn 01: Bilde slicing og den Allmektige CSS Sprite
Identifisere Hva Images Vi må Skjær
det første trinnet er å ha klippet opp noen bilder som vil være nødvendig i kodet mal. I vårt tilfelle er denne prosessen ganske enkel: ta en god hardt se på malen og peker ut alle de designelementer som ikke kan dupliseres med CSS eller andre koding triks. Her er vår liste:
Logo
bakgrunnsbilde
Footer Shadow
Trekkspill +/- Grafisk
The Slider Venstre /Høyre Tabs
The Grid paginering
Social Media Ikoner
Søk Bar + lupe
Bilder innhold (Slider bilder + Grid miniatyrbilder)
de Images avrundet hjørne (ja, vi kan gjenskape dette med CSS3, men vi vil holde med bilder for å være trygt for tiden)
Hjemmesiden Lysbilde overlegg (inner skygge)
La oss etiketten om disse er på vår design (klikk for bildet i full størrelse):
">
Slicing disse er ikke vanskelig, så jeg vil ikke gå inn for mye dybde, men før vi kommer i gang er det verdt å vurdere om noen av disse bildene kan settes sammen til en enkelt CSS Sprite.
Hva er en CSS Sprite? enkelt sagt, er en sprite en metode for å bruke et enkelt bilde som . en måte å lagre flere mindre bilder for eksempel ta en titt på sprite som blir brukt ved Webdesigntuts:
Når vi begynner koding, kan vi bare bruke CSS posisjonering og beskjæring av bildet for å vise stykke sprite som vi ønsker.
Hvorfor bruke en CSS Sprite? Fart! Ved hjelp av sprites til å lagre bilder vil redusere tiden det tar å laste en hel nettside ... når bildene blir gjenbrukt om og om igjen på flere sider, kan dette bety mye spart tid.
Sprites er best brukt med mindre bilder som blir brukt om og om igjen. For eksempel, de fleste av eiendelene som er omtalt ovenfor kan faktisk bli redusert til denne sprite:
I en enkelt sprite, har vi allerede preparerte mesteparten av vår design for koding ... og det er alt under 19 KB! Ikke dårlig ikke sant?
For å lage din egen sprite, bare lage et tomt dokument (starter ut med en hvilken som helst størrelse, vil du til slutt beskjære dette ned til bare knapt plass hvert element på sprite), og deretter legge i designelementer med en rimelig mengde polstring mellom hvert element. Her er noen flere triks:
Elementer som er fordelt jevnt i design skal være fordelt jevnt i sprite (som sosiale medier ikoner)
Hvis et element er gjennomsiktig (som våre skyve faner), sørg for at det viser seg som skikkelig gjennomsiktig i sprite
Lagre det endelige sprite bildet som en gjennomsiktig PNG-24 ... så er du klar til å rocke og rulle!
For de resterende bilder, kan vi bare lage våre egne generiske skiver. Jeg skal liste dem nedenfor og beskrive hver enkelt (og hvorfor det ikke er en sprite):
Den indre skygge overlegg for Slidedown. Det er ikke en sprite fordi det er store (noe som betyr at det ville unødvendig beef opp størrelsen på sprite)
Topp- og bunn avrundede hjørner. Dette er ikke sprites for et par grunner: 1) som ovennevnte eksempel, de er store og uhåndterlige; 2) disse vil trolig bli re-skinned eller endre størrelsen på et senere tidspunkt, noe som betyr at du legger dem i en sprite bare gjør for ekstra arbeid og 3) det er en god mulighet for at vi kan bestemme seg for å droppe disse bildene for CSS metoder i fremtiden .
bakgrunns~~POS=TRUNC bildet~~POS=HEADCOMP:. Dette er ikke en sprite fordi 1) det er sannsynlig å bli byttet ut med en annen BG bilde og 2) det er behov for å gjenta i det uendelige, som sprites bare ikke gjøre det bra
Annet "Not-sprites": Selvfølgelig vil vi ikke bli lasting vår miniatyrbilder eller andre bilder i innholdet i som sprites. Hovedårsaken her er praktisk ... Sprites er ment for grunnleggende UI og logoer som kan lastes raskt og fremskynde et område ... hvis vi lastet hvert bilde i en enkelt sprite, det ville gjøre for en ekstra lang lastetid , selv om det sped ting opp etter det lastet. Tenk på de forhåndslaster til de store Flash nettsteder for noen år tilbake;)
Den andre åpenbare grunnen er at disse innholds bildene vil trolig være i endring hver gang noen oppdaterer nettstedet. Sprite Bildet er ment å være ganske mye uendret så lenge site design forblir den samme
Avslutt slicing notater. Det går sannsynligvis uten å si, men det finnes andre måter å ha klippet denne spesielle design. Ulike tilnærminger kan være fornuftig for din egen variant av denne design ... så ikke begrense deg til å bruke de ideene ovenfor. Hvis du ønsker å angripe avrundet hjørner og bakgrunnen skyggen bruker CSS3, z-index eiendom og en gjennomsiktig PNG, for all del gå for det
Trinn 02: Samle Scripts /Plugins /Add- ons Vi må bruke
nå som vi har fått våre bilde eiendeler klar til å gå, er det på tide å samle våre skript på ett sted, slik at når vi setter oss ned til hardkoding, vil vi være klar for action. Ta en titt igjen på vår design, la oss identifisere de viktigste områdene som vil kreve ekstra skript eller plugins:
The Lightbox: prettyPhoto
Hver god fotograf Malen trenger en lysboks ... og det er noen bedre enn prettyPhoto der ute akkurat nå. Det er lett å installere /tilpasse, og det kommer til å tilby ganske mange ekstra funksjoner som andre lysbord ikke gjør det - som miniatyr navigasjon, tilpasset deling add-ons, og mer
trekkspill Meny
<. p> dette er et ganske enkelt problem å bruke noen grunnleggende jQuery ... så vi vil faktisk være å bruke en tilpasset, lett script for dette. Kom tilbake på dag 3 for å se hvordan det fungerer
Den Sliders: jQuery Cycle
jQuery Cycle kommer til å håndtere de tunge løftene for våre bildeskyveknapper. Det er et utrolig godt dokumentert plugin, noe som betyr at det vil være enkelt å sette opp (og tilpasse) til å passe vår mal behov
Font Erstatning:.
Jeg har brukt fonten Museo i design, så vi må finne en måte å bruke dette i kodet versjon. Den raskeste måten å sette opp dette er med @ font-ansikt. Så kjørte vi skriften gjennom Font ekorn (http://www.fontsquirrel.com/fontface/generator) for å lage våre skriftfiler som vi kan bruke i dag 3.
Pass på at du laster ned prettyPhoto plugin og kopiere de nødvendige midler til sine respektive mapper (javascript i "js" -mappen, stilark til "css" -mappen, etc.), kan syklusen plugin kobles fra Github og jQuery kan knyttes fra Google API-er.
Slutt på dag 2: gjennomgang
på dette punktet vi skal nå være klar til å starte HTML /CSS konvertering. Vi har utviklet vår side mal, skiver noen bilder som vi trenger å bruke, og samlet alt av tredjeparts skript som vi kommer til å kreve å gjøre området fungerer som vi vil ha det til. I den neste fasen, vil vi være å gjøre selve kodingen ... så gjør deg klar for dag 3!