Share
Vandaag, in deel 2 van deze enorme tutorial, zetten we deze sessie voort met de tweede dag van het ontwerp. We hebben de startpagina al ontworpen - dus nu ontwerpen we de vier ondersteuningspagina's die de rest van het volledige siteontwerp vormen (portfolio, bloglijst, blogpost en de contactformulierpagina). Laten we erin duiken zullen we?
U zult veel webontwerpen en zelfstudielessen vinden op het internet? maar heel weinig tuts die je van start tot finish brengen. Veel tutorials zijn alleen voor ontwerp en andere zijn alleen voor codering. Vandaag starten we een nieuwe serie waarin we vanaf nul een complete website ontwerpen en ontwikkelen; We nemen u mee van het oorspronkelijke draadframe naar het volledige siteontwerp (inclusief 5 pagina's). Vervolgens coderen we het ontwerp (in Nettuts natuurlijk) en tenslotte wordt dit complete XHTML-thema omgezet naar een werkend WordPress-thema!
Bekijk het hele proces zoals het gebeurt op onze Sessiepagina!
Laten we kort onze projectdoelstellingen bekijken die we op dag één hebben opgesteld:
Ons doel is om een eenvoudig site-ontwerp te ontwerpen en ontwikkelen met een moderne lay-out die bevorderlijk is voor CMS-systemen zoals WordPress. We zullen geen wilde en gekke stijleffecten toepassen in ons ontwerp (het punt hier is om het simpel te houden), maar we gaan het hele proces benaderen, van start tot finish, als een studie in lay-out en een juist gebruik van marges en opvulling.
We zullen het 960-rastersysteem van begin tot eind gebruiken - en dit zal niet anders zijn voor onze Day Two-ontwerpsessie.
Een kort overzicht van de cursus. We kunnen dit anders oplossen als we eenmaal de codeerfase hebben bereikt, maar dit zou je een goed idee moeten geven van waar we naartoe gaan met deze serie:
Laten we beginnen met een kijkje te nemen naar wat we gaan maken:
De ontwerpfase van vandaag is ook verdeeld in vier delen en we zullen alle andere pagina's van Iconify in deze sessie ontwerpen. Omdat we de startpagina al hebben ontworpen, is onze primaire taak voltooid. We hoeven alleen de lege plekken voor de rest van de sitemap in te vullen.
Dit is een cruciale stap die vaak over het hoofd wordt gezien in veel ontwerpprojecten, maar het ontwerpen van een aantal specificaties voor deze ondersteuningspagina's is iets dat u niet wilt overslaan. Vergeet niet dat een websiteontwerp niet compleet is na het instellen van de startpagina - u hebt op zijn minst een paar extra sjablonen nodig die zijn ontworpen voor de extra pagina's waaruit een website bestaat.
Aangezien onze lay-out vrij eenvoudig is, zullen we gewoon het primaire inhoudsgebied voor elke pagina omwisselen. De universele site-elementen (koptekst, navigatie, voettekst) blijven allemaal hetzelfde van de ene pagina naar de volgende. Dit is belangrijk om een consistente basis voor de site te behouden, zodat gebruikers altijd weten waar ze zich bevinden.
De Portfolio-pagina is de eerste ondersteuningspagina die we zullen ontwerpen. Vergeet niet dat we het 960-rastersysteem gebruiken voor het gehele siteontwerp, dus we zullen dezelfde basislay-out en kolomstructuur gebruiken als we instellen op het startpagina-ontwerp.
Maak een duplicaat van de index.psd bestand en hernoem het naar portfolio.psd. Open het met Photoshop. Verwijder alles van binnenuit inhoud laaggroep behalve de bg laag.
Maak nu de lagen "breadcrumbs" en "notes" voor de portfolio-pagina. Gebruik voor de achtergrondvorm "notities" dezelfde laagstijlen als waarvoor we het deden recent project's bar rechthoek. Gebruik afbeelding E - 1a als richtlijn.
Vervolgens gaan we een eenvoudige techniek gebruiken om in een handvol verschillende kolomvarianten binnen deze ene pagina voor onze portfolio-items te werken.
Gebruik de techniek voor het maken van afbeeldingen van dag één (stap C3) om twee kolomportfolio-items te maken, zoals weergegeven in de afbeelding E - 2a. Als u het zich herinnert, tekenen we gewoon rechthoeken die in de kolomgidsen passen, een laagstijl toepassen en vervolgens bijsnijden in afbeeldingen om een subtiel randeffect te creëren.
Herhaal nu dezelfde techniek voor portfolio-items met drie en vier kolommen. Gebruik afbeelding E - 2b en E - 2c als richtlijn. Houd er rekening mee dat we tussen de verschillende 12-kolom- en 16-kolomgeleidervlaggen schakelen om dit perfect te krijgen. Tenslotte, organiseer je lagen zoals getoond in de afbeelding E - 2d.
De pagina Bloglijst is bedoeld als de locatie waar 'fragmenten' van elk blogbericht worden weergegeven. Deze "fragmenten" worden ook "loop" -elementen genoemd - en bestaan meestal uit een titel, een miniatuurafbeelding, een korte tekstvoorvertoning en wat meta-informatie (zoals de datum, auteur, tags, enz.).
Net als bij de laatste pagina, beginnen we met het maken van een duplicaat van portfolio.psd pagina en de naam ervan wijzigen in blogs.psd. In het blogs.psd-bestand verwijdert u alles behalve in de contentmap bg, paneermeel, en pagina's lagen. Nu hebben we een leeg blogs-bestand, we kunnen het beginnen te vullen met wat inhoud.
Voor de eerste keer gaan we een standaard blogstijl met twee kolommen gebruiken: een voor de inhoud en een voor de zijbalk. Gebruik afbeelding F - 1a als leidraad voor het ontwerpen van de inhoud van blog en zijbalk - merk op dat we de verticale scheidingslijn tussen twee van de kolomlagen hebben geplaatst, zodat deze perfect uit elkaar geplaatst is.
Het daadwerkelijke ontwerp hier is vrij eenvoudig, dus we gaan niet te veel in detail treden - volg gewoon de ingestelde regels voor de typelagen (de rode tekst in de voorbeelden) en gebruik alle stijlen die we al hebben ingesteld op onze andere pagina's. Let vooral op de afstand tussen elementen (ook gemarkeerd in rode tekst), want dat vertelt je precies waar je alles moet plaatsen.
Als je klaar bent, organiseer je je lagen zoals in de afbeelding wordt getoond F - 1b.
Nu we onze pagina-indeling voor een bloglijst hebben, hebben we een sjabloon nodig voor elk volledige blogbericht. Dit is een behoorlijk forse pagina qua inhoud, want we moeten ook vooruit plannen voor een reactiesysteem en veel andere kleine details. Besteed speciale aandacht aan de voorbeeldafbeeldingen in dit gedeelte!
Nogmaals, begin met het opnieuw opslaan van de blogs.psd bestand met een naam van blog-post.psd. Binnen blog-post.psd, verwijder alle inhoud van de bloglijst, zodat we opnieuw kunnen beginnen. In de content-sectie pak je je teksttool en begin je te vullen met wat tekst en afbeeldingen zoals in de afbeelding G - 1a.
Teken een rechthoek en pas dezelfde laagstijlen toe van recent project's bar van het index.psd bestand. Vul het met inhoud en positie zoals weergegeven in de afbeelding G - 2a. Raadpleeg de afbeelding voor de horizontale liniaalstijlen G - 2b.
Teken voor nu een rechthoek met een breedte van 630 px en een willekeurige hoogte. Noem maar op bg en plaats het in een lagengroep met de naam opmerkingen. Kopieer de laagstijlen uit de populaire bg van de bpost en plak deze in deze laag. Gebruik afbeelding G - 3a als richtlijn.
Voor de pijlen van de opmerkingboxen tekent u een driehoek in het opmerkingenvak (inschakelen Voeg toe aan vormgebied tijdens het tekenen) van 10X10px roteer de pijl en plaats ze zoals getoond in de afbeelding G - 3b en pas de laagstijlen toe zoals weergegeven in de afbeelding G - 3b.
We laten een linker marge van 40 px over voor de tweede opmerking om aan te geven dat dit een antwoord is. Door dezelfde techniek te gebruiken, kunnen we nog dieper gaan - een derde, vierde of zelfs vijfde antwoorddiepte laten zien door gewoon nog een 40px in te knippen voor elk niveau. We doen hetzelfde in onze XHTML-versie, dus onthoud deze basisstijlregels.
Teken een andere rechthoek met dezelfde stijl als van opmerkingen's bg laag en noem deze laag bg. Plaats het in een lagengroep met de naam commentaarformulier. Gebruik afbeelding G - 4a als richtlijn.
Nogmaals, kopiëren blogs.psd en plak het met een naam van contact.psd. Open het in Photoshop. Verwijder alles behalve broodkruimels en zijbalk van inhoud laaggroep. Kopiëren commentaarformulier en plak het zoals weergegeven in de afbeelding H - 1a. Voer opnieuw de inhoud in zoals in de afbeelding wordt weergegeven.
Je zult merken dat veel hiervan nu al herhaling is - we kopiëren en plakken alleen in inhoud, passen het aan de handleidingen die we willen gebruiken, en gebruiken dezelfde typografie- en laagstijlen van de vorige pagina's.
Dingen zouden snel moeten bewegen tegen de tijd dat je deze pagina hebt voltooid. Je kunt hetzelfde basisproces herhalen voor zoveel pagina's als je nodig hebt om te mockup - houd je gewoon aan de kolomgidsen en gebruik dezelfde elementaire typografische en laagstijlregels voor elk nieuw ontwerp en zou in staat moeten zijn om nog meer hiervan te kloppen kan heel snel nodig hebben.
Dit besluit het tweede deel van onze enorme tutorial! Inmiddels hebben we onze website met succes ontworpen. In de volgende sessie (binnenkort bij Nettuts) gaan we beginnen met het codeerproces, dus kijk hier terug (en bij Nettuts) terwijl we de nieuwe gedeelten van deze tutorial posten!
Accentsconagua