Share
Ik ben een grote fan van op foto's gebaseerde site-ontwerpen? dus vandaag ben ik verheugd om een nieuwe tutorial over de "volledige site" te lanceren die is gericht op fotografen, illustratoren en andere visuele creatieven. In dag 1 hebben we de sjabloon in Photoshop ontworpen met behulp van een paar speciale trucs en technieken. Vandaag, in dag 2, lopen we door de definitieve ontwerpfase en doen we wat voorbereidingen voor de vlucht voor de coderingsfase, die we in detail zullen bespreken in dag 3. Op dag 4 zullen we laten zien hoe je drie totaal verschillende sites maakt met dezelfde onbewerkte HTML.
De sessie van vandaag zal relatief snel zijn in termen van technische tricks? maar we zullen druk zijn met de tips voor de "workflow", dus let op als je nieuwsgierig bent naar de fase van een project dat plaatsvindt na het ontwerp en voordat de codering begint.
Laten we de sessie van vandaag beginnen met enkele algemene opmerkingen over wat "pre-flight"is: Wanneer u klaar bent met het ontwerpen van een website, zijn er enkele cruciale stappen die idealiter moeten plaatsvinden voordat u begint met het daadwerkelijke coderingsproces. De eerste stap is om te beginnen met het opdelen van ons ontwerp.
De volledige schriftelijke stapsgewijze handleiding staat hieronder. We beginnen met het Photoshop-document dat we in dag 1 hebben gemaakt, maar u kunt ook de demo PSD downloaden om uw werk tegen het mijne te controleren.
Ok, met onze doelen nu duidelijk gedefinieerd, laten we beginnen!
De eerste stap is het opdelen van alle afbeeldingen die nodig zijn in de gecodeerde sjabloon. In ons geval is dit proces vrij eenvoudig: neem de sjabloon eens goed in overweging en wijs alle ontwerpelementen aan die niet met CSS of andere codeertrucs kunnen worden gedupliceerd. Hier is onze lijst:
Laten we labelen waar deze zich bevinden in ons ontwerp (klik voor de afbeelding op volledige grootte):
">
Het is niet moeilijk om deze te snijden, dus ik zal niet te diep ingaan, maar voordat we beginnen, is het de moeite waard om te overwegen of sommige van deze afbeeldingen kunnen worden gecombineerd tot een enkele CSS Sprite.
Wat is een CSS Sprite? Simpel gezegd, een sprite is een methode om een enkele afbeelding te gebruiken als een middel om meerdere kleinere afbeeldingen op te slaan. Kijk bijvoorbeeld eens naar de sprite die bij Webdesigntuts wordt gebruikt:
Wanneer we beginnen met coderen, kunnen we gewoon CSS-positionering en bijsnijden van de afbeelding gebruiken om het stuk van de sprite te tonen dat we willen.
Waarom een CSS Sprite gebruiken?? Snelheid! Het gebruik van sprites om afbeeldingen op te slaan, vermindert de tijd die nodig is om een hele webpagina te laden? wanneer afbeeldingen steeds opnieuw op meerdere pagina's worden hergebruikt, kan dit veel tijd besparen.
Sprites kunnen het beste worden gebruikt met kleinere afbeeldingen die steeds opnieuw worden gebruikt. De meeste van de hierboven besproken activa kunnen bijvoorbeeld in feite worden teruggebracht tot deze sprite:
In één enkele Sprite hebben we al het grootste deel van ons ontwerp voorbereid voor codering? en het is allemaal onder 19kb! Niet slecht toch?
Om een eigen sprite te maken, maakt u gewoon een leeg document (begin met een willekeurig formaat, u snijdt dit uiteindelijk af om nauwelijks elk element op de sprite te plaatsen) en voegt vervolgens de ontwerpelementen toe met een redelijke hoeveelheid opvulling tussen elke element. Hier zijn enkele extra trucs:
Voor de resterende afbeeldingen kunnen we eenvoudig onze eigen generieke schijven maken. Ik zal ze hieronder opsommen en elke beschrijving beschrijven (en waarom het geen sprite is):
De binnenste schaduw overlay voor de Slidedown. Het is geen sprite omdat het groot is (wat betekent dat het onnodig groter zou worden dan de sprite).
De afgeronde hoeken bovenaan en onderaan: Dit zijn geen sprites om een paar redenen: 1) zoals het bovenstaande voorbeeld zijn ze groot en onpraktisch; 2) deze zullen waarschijnlijk op een later tijdstip opnieuw worden geschild of van grootte worden veranderd, wat inhoudt dat ze in een sprite worden geladen, zorgt alleen voor extra werk en 3) er is een goede mogelijkheid dat we in de toekomst besluiten deze afbeeldingen voor CSS-methoden te dumpen.
De achtergrondafbeelding: Dit is geen sprite omdat 1) het waarschijnlijk wordt verwisseld met een ander BG-beeld en 2) het moet voor onbepaalde tijd worden herhaald, welke sprites het gewoon niet goed doen.
Andere "Not-Sprites": Het is duidelijk dat we onze miniaturen of andere inhoudsafbeeldingen niet als sprites zullen laden. De belangrijkste reden hier is bruikbaarheid? Sprites zijn bedoeld voor elementaire UI- en brandingelementen die snel kunnen laden en een site kunnen versnellen? als we ELK beeld in één enkele sprite zouden laden, zou het een extra lange laadtijd meebrengen, zelfs als het dingen zou versnellen nadat het geladen was. Denk aan de pre-laders voor die enorme Flash-websites een paar jaar geleden;)
De andere voor de hand liggende reden is dat deze inhoudsfoto's waarschijnlijk zullen veranderen telkens als iemand de site bijwerkt. De Sprite-afbeelding is bedoeld om vrijwel ongewijzigd te blijven zolang het ontwerp van de site hetzelfde blijft.
Final slicing notes: Het is waarschijnlijk vanzelfsprekend, maar er zijn andere manieren om dit specifieke ontwerp in plakjes te snijden. Verschillende benaderingen kunnen zinvol zijn voor uw eigen variatie van dit ontwerp? dus beperk jezelf niet tot het gebruik van de bovenstaande ideeën. Als je de afgeronde hoeken en de achtergrondschaduw wilt aanvallen met CSS3, ga dan voor de z-index-eigenschap en een transparante PNG!
Nu we onze beeldelementen gereed hebben voor gebruik, is het tijd om onze scripts op één plek te verzamelen, zodat we klaar zijn voor actie als we aan de harde codering gaan werken. Kijk opnieuw naar ons ontwerp, laten we de belangrijkste gebieden identificeren waarvoor extra scripts of plug-ins nodig zijn:
Elke goede fotosjabloon heeft een lightbox nodig? en er zijn er op dit moment weinig beter dan prettyPhoto. Het is eenvoudig te installeren / aanpassen en het biedt een aantal extra functies die andere lightboxes niet bieden, zoals thumbnail-navigatie, add-ons voor het delen op maat en meer.
Dit is een vrij eenvoudig probleem met behulp van een basisjQuery? dus we zullen in feite een aangepast, lichtgewicht script gebruiken voor deze. Kom terug op dag 3 om te zien hoe het werkt!
jQuery Cycle gaat het zware werk aan voor onze beeldschuifregelaars. Het is een ongelooflijk goed gedocumenteerde plug-in, wat betekent dat het gemakkelijk kan worden ingesteld (en aangepast) om te voldoen aan de behoeften van onze sjabloon.
Ik heb het font Museo in het ontwerp gebruikt, dus we moeten een manier vinden om dit in de gecodeerde versie te gebruiken. De snelste manier om dit in te stellen is met @ font-face. Dus hebben we het lettertype beheerd via Font Squirrel (http://www.fontsquirrel.com/fontface/generator) om onze lettertypebestanden te maken die we kunnen gebruiken in dag 3.
Zorg ervoor dat u de prettyPhoto-plug-in downloadt en de benodigde items naar hun respectieve mappen kopieert (javascript in de map "js", stylesheets naar de map "css", enz.), De cyclus-plug-in kan worden gekoppeld vanuit Github en jQuery kan worden gekoppeld van Google API's.
Op dit punt zouden we nu klaar moeten zijn om de HTML / CSS-conversie te starten. We hebben onze sitesjabloon ontworpen, alle afbeeldingen gesneden die we nodig hebben en hebben alle scripts van derden verzameld die we nodig hebben om de site te laten functioneren zoals we dat willen. In de volgende fase zullen we de daadwerkelijke codering doen? dus maak je klaar voor dag 3!
Accentsconagua