Share
Jag är ett stort fan av fotocentriska webbdesigner? så idag är jag glad att starta en ny "fullständig webbplats" handledning som riktar sig till fotografer, illustratörer och andra visuella annonsmaterial. I dag 1 designade vi mallen i Photoshop med hjälp av några speciella knep och tekniker. I dag, i dag 2, går vi igenom den slutliga designfasen och gör sedan ett förberedelser för förflyttning för kodningsfasen, som vi kommer att gå över i detalj i dag 3. På dag 4 visar vi du hur du skapar tre helt olika webbplatser med samma råa HTML.
Dagens session kommer att vara relativt snabb när det gäller tekniska knep? men vi kommer att gå tungt på "workflow" -tipsen, så var uppmärksam om du är nyfiken på fasen av ett projekt som händer efter design och innan kodningen börjar.
Låt oss börja dagens session med några allmänna anteckningar om vad "före flygning"är: När du är klar med att designa en webbplats finns det några viktiga steg som borde ideellt ske innan du börjar själva kodprocessen. Det första steget är att börja skära upp vårt design.
Den fullständiga skriftliga steg-för-steg-guiden finns nedan. Vi börjar med det Photoshop-dokument som vi skapade i dag 1, men du kan också hämta demo PSD för att kontrollera ditt arbete mot mina.
Oj, med våra mål nu tydligt definierade, låt oss börja!
Det första steget är att skära upp eventuella bilder som krävs i den kodade mallen. I vårt fall är denna process ganska enkel: ta en bra hård titt på mallen och peka ut alla designelement som inte kan dupliceras med CSS eller andra kodande tricks. Här är vår lista:
Låt oss märka var dessa finns på vår design (klicka för bilden i full storlek):
">
Att skära dessa är inte svårt så jag kommer inte att gå in på för mycket djup, men innan vi börjar kommer det att vara värt att överväga om några av dessa bilder kan kombineras till en enda CSS Sprite.
Vad är en CSS Sprite? Enkelt sagt, en sprite är en metod att använda en enda bild som ett sätt att lagra flera mindre bilder. Ta en titt på sprite som används på Webdesigntuts:
När vi börjar kodning kan vi helt enkelt använda CSS-positionering och beskärning av bilden för att visa den del av sprite som vi vill ha.
Varför använd en CSS Sprite? Fart! Använda sprites för att lagra bilder kommer att minska tiden som krävs för att ladda en hel webbsida? När bilderna återanvändas om och om igen på flera sidor kan det innebära mycket sparad tid.
Sprites används bäst med mindre bilder som används över och om igen. Till exempel kan de flesta av de tillgångar som diskuteras ovan faktiskt minskas till denna sprite:
I en enda sprite har vi redan prepped huvuddelen av vår design för kodning? och det är allt under 19kb! Inte dåligt rätt?
För att skapa din egen sprite, skapa bara ett tomt dokument (starta med vilken storlek som helst, du kommer så småningom gräva ner det här så att det bara passar knappt varje element på spritet), lägg sedan till designelementen med en rimlig mängd vadderingar mellan varje element. Här är några extra knep:
För de återstående bilderna kan vi helt enkelt skapa egna generiska skivor. Jag ska lista dem nedan och beskriva var och en (och varför det inte är en sprite):
Den inre skuggan överlägger för Slidedown. Det är inte en sprite eftersom den är stor (vilket innebär att det skulle onödigt bära upp storleken på sprite).
De övre och nedre rundade hörnen: Dessa är inte sprites av några anledningar: 1) som ovanstående exempel är de stora och obehagliga; 2) det här kommer sannolikt att bli omskalat eller ändrat på ett senare datum, vilket innebär att ladda dem till en sprite ger bara extra arbete och 3) det finns en bra möjlighet att vi kanske bestämmer oss för att dölja dessa bilder för CSS-metoder i framtiden.
Bakgrundsbilden: Det här är inte en sprite eftersom 1) det är sannolikt att bytas ut med en annan BG-bild och 2) det måste upprepas i obestämd tid, vilket spriter bara inte gör det bra.
Andra "icke-sprit": Självklart kommer vi inte att ladda våra miniatyrbilder eller andra innehållsbilder i sprites. Huvudskälet här är praktiskt? Sprites är avsedda för grundläggande användargränssnitt och branding-element som kan ladda snabbt och påskynda en webbplats? om vi laddar varje bild i en enda sprite, skulle det göra en extra lång laddningstid, även om det spedade upp saker efter det laddade. Tänk på förladare för de stora Flash-webbplatserna några år tillbaka;)
Den andra uppenbara orsaken är att dessa innehållsbilder sannolikt kommer att ändras varje gång någon uppdaterar webbplatsen. Sprite-bilden är avsedd att vara ganska oförändrad så länge som webbplatsdesignen är densamma.
Slutliga skivor: Det säger sig självklart, men det finns andra sätt att skära den här designen. Olika metoder kan vara avgörande för din egen variation av denna design? så begränsa dig inte till att använda idéerna ovan. Om du vill attackera de avrundade hörnen och bakgrundsskuggan med hjälp av CSS3, z-indexegenskapen och en transparent PNG, går det helt klart!
Nu när vi har våra bildtillgångar redo att gå, är det dags att samla våra skript på en plats så att när vi sätter oss ner till hårdkodningen är vi redo för handling. Ta en titt igen på vår design, låt oss identifiera de viktigaste områdena som kräver ytterligare skript eller plugins:
Varje bra fotografmall behöver en ljuskälla? och det finns få bättre än prettyPhoto där ute just nu. Det är enkelt att installera / anpassa, och det kommer att erbjuda en hel del extrafunktioner som andra ljuslådor inte - som miniatyrnavigering, anpassade delnings tillägg och mer.
Detta är ett ganska enkelt problem med några grundläggande jQuery? så vi ska faktiskt använda ett anpassat, lättviktigt manus för den här. Kolla tillbaka på dag 3 för att se hur det fungerar!
jQuery Cycle kommer att hantera den tunga lyftningen för våra bildreglage. Det är ett otroligt väl dokumenterat plugin, vilket innebär att det blir lätt att installera (och anpassa) för att passa vår malls behov.
Jag har använt tecknet Museo i designen, så vi måste hitta ett sätt att använda detta i den kodade versionen. Det snabbaste sättet att ställa upp det här är med @ font-face. Så, vi körde teckensnittet via Font Ekorre (http://www.fontsquirrel.com/fontface/generator) för att skapa våra typsnitt filer som vi kan använda i dag 3.
Se till att du laddar ner pluginet prettyPhoto och kopierar nödvändiga tillgångar till respektive mappar (javascript i mappen "js", stylesheets till "css" -mappen etc.), cykelpluggen kan kopplas från Github och jQuery kan länkas från Google API: er.
Vid denna tidpunkt borde vi nu vara redo att starta HTML / CSS-konvertering. Vi har utformat vår webbplatsmall, skivad några bilder som vi behöver använda och samlade alla tredjepartsskript som vi kommer att behöva för att göra webbplatsfunktionen som vi vill ha den till. I nästa steg gör vi själva kodningen? så gör dig redo för dag 3!
Accentsconagua