Share
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!
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 einde gebruiken, dus als je je ooit hebt afgevraagd hoe het is om het systeem te gebruiken, is dit een geweldige tijd om te leren! We zullen een paar afwijkingen van de norm maken, maar voor het grootste deel zullen we 960gs gebruiken in de ontwerp- en codefasen.
Zodra jullie klaar zijn, kun je het ontwerp helemaal naar wens aanpassen met je eigen lettertypen, kleuren, stijlen en texturen! Vergeet niet dat dit slechts een beginpunt is - u bent van harte welkom om zo gek te worden als u wilt als het gaat om de persoonlijkheid van uw eigen versie van het ontwerp.
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:
Middelen die voor dit project zijn gebruikt
U kunt uw eigen bronnen gebruiken als u dat wilt, maar hier is de volledige lijst met afbeeldingen en pictogrammen die ik in de zelfstudie heb gebruikt:
Dus, zonder verder uitstel, laten we beginnen met de ontwerpfase! Deze ontwerpfase is verdeeld in twee delen. Vandaag zullen we het draadframe uitwerken met behulp van het 960gs-systeem, en we zullen de startpagina ontwerpen. In het tweede deel (komende volgende week) ontwerpen we de andere ondersteuningspagina's.
Het belangrijkste dat u vandaag nog wilt bijhouden, is hoe we twee verschillende varianten van de 960gs (een 12-kolom lay-out en een 16-kolom lay-out) samen in hetzelfde bestand gebruiken. Ik zal hier later meer over vertellen, maar houd bij wanneer we elke verschillende lay-out gebruiken, omdat het later een grote rol zal spelen in de coderingsfase.!
De vier subonderdelen van vandaag zijn:
Omdat we gaan werken met het 960-rastersysteem, ga je gang en pak je het 960-rastersysteem van hier (of pak je het vast uit 960.gs als die link ooit naar beneden gaat).
In de hoofdmap (wat je zojuist hebt gedownload van http://960.gs), ga je naar "templates-> photoshop" en open je "960_grid_16_col.psd" in Photoshop. Hernoem dit bestand naar "index.psd" en sla het op in een nieuwe map naar keuze, zoals in de afbeelding A - 1a.
Nu we de 16-kolom bestandsinstellingen hebben, willen we ook de hulplaag importeren uit het 12 kolombestand.
Open de "960_grid_12_col.psd "in Photoshop (vanuit dezelfde map hebt u het bestand" 960_grid_16_col.psd "geopend. Ontgrendel nu de laag en de positie" 12 Col Grid "en sleep deze naar onze nieuw gecreëerde map index.psd bestand zoals getoond in de afbeelding A - 1b en A - 1c. Ontgrendel ook de laag en positie van "grid_16_col".
Je vraagt je misschien af: "Waarom zou ik twee verschillende rasterbestanden gebruiken?Omdat de grid_16 ons geen drie gelijke kolommen kan geven, moeten we grid_12 ook gebruiken. Het 960gs-systeem is feitelijk gebouwd om op deze manier te worden gebruikt, dus het veroorzaakt geen conflicten langs de lijn. gebruik deze twee rasters in de XHTML-conversiefase.
Selecteer de lagen "grid_12_col" en "grid_16_col" en selecteer vervolgens "Uitgelijnde randen uitlijnen" en "Horizontale uitlijning uitlijnen" in het optiescherm zoals weergegeven in de afbeelding A - 1d (zorg er tijdens het selecteren van deze opties voor dat u ook het Verplaatsingsgereedschap (V)). En je eindresultaat moet er uitzien als een afbeelding A - 1d.
Het is de tijd om onze richtlijnen en linialen in te stellen om onze elementen eenvoudig te positioneren. Ga naar "Bewerken-> Voorkeuren-> Eenheden & Linialen" of druk op "Ctrl + K" om het te bellen voorkeuren dialoogvenster. Selecteer vervolgens het tabblad "Units & Rulers". In het deelvenster "Units & Rulers" eenheden subsectie, stel "pixels" in voor zowel "Linialen" als "Type" opties zoals getoond in de afbeelding A - 2a.
Selecteer nu het tabblad "Gidsen, raster en segmenten" en in de bijbehorende rooster subsectie, ingestelde waarde "100" en eenheid naar "pixels" voor optie "Gridline elke". En stel "10" in voor "Subdivisions" -veld zoals weergegeven in de afbeelding A - 2b.
Druk nu op "Ctrl + Alt + C" of ga naar "Afbeelding-> Canvasgrootte" om te bellen Canvas grootte dialoogvenster en instellingen wijzigen zoals in de afbeelding wordt weergegeven A - 3.
Omdat we onze canvashoogte hebben verhoogd, moeten we nu onze roosters selecteren en vergroten op basis van de hoogte van ons document.
Selecteer beide rasterlagen en druk op "Ctrl + T" of ga naar "Bewerken-> Vrije transformatie" en sleep vervolgens die rasters zoals in de afbeelding wordt weergegeven A - 3b. Vergrendel nu beide rasterlagen en verberg de "grid_12_col layer" zoals getoond in de afbeelding A - 3c.
Standaard hebben we de gidsen van grid_16_col aangezien we worden gestart vanuit de grid_16_col.psd het dossier. We hebben geen handleidingen voor grid_12_col, maar we hebben ze echt niet nodig, want we gebruiken grid_12_col alleen in zeldzame omstandigheden.
U kunt ook de rasters en hulplijnen van uw document controleren door op "Ctrl +" (Weergave-> Tonen-> Raster) "en" Ctrl +; (Weergave-> Tonen-> Gidsen) "te drukken, zoals weergegeven in de afbeelding A - 3d.
Onze documentbreedte is 1020px; Bij gebruik van het 960-rastersysteem wordt verondersteld dat we 940 px gebruiken voor onze inhoudsbreedte. We gaan een beetje afwijken van het 960-model door een 20px links en rechts opvulling (40px totaal) te gebruiken voor de inhoudskolom. Onze totale inhoudsbreedte wordt dus 980 px. Selecteer de achtergrondlaag en druk op "Ctrl + Backspace" of "Ctrl + F5" of ga naar "Bewerken-> Opvullen" om te bellen Vullen dialoogvenster en selecteer vervolgens "Kleur?" uit "Gebruiken". En stel de waarde in op "e7e7e7" zoals weergegeven in de afbeelding A - 4a
Als u problemen ondervindt om dit in oudere versies van Photoshop zoals CS4 te doen, moet u eerst "rasteren" Achtergrond laag en pas dan de achtergrond toe met behulp van de bovenstaande stap.
Selecteer nu het gereedschap "Afgeronde rechthoek", stel "Radius" in op "10 px" opties paneel en stel de "Voorgrond" -kleur in op "f1f1f1". Teken een afgeronde rechthoek in het tekengebied om de grootte te meten 980 x 150 px. Geef deze laag een naam header bg en plaats deze laag in een lagengroep en noem die groep hoofd. En organiseer je lagenpalet zoals weergegeven in de afbeelding A - 4b. En houd de rasterlagen altijd boven alle lagen in het lagenpalet.
Om een groep te maken, selecteert u gewoon de laag (lagen) die u in een groep wilt instellen (houd de Ctrl- of Shift-toets ingedrukt) en druk vervolgens op "Ctrl + G" of ga naar "Laag-> Groepslagen". En om een groepsnaam of laagnaam te wijzigen, dubbelklikt u eenvoudig op de standaardnaam, waarna het een bewerkbaar tekstveld wordt zoals in de afbeelding wordt getoond A - 4b.
Selecteer de Puntgereedschap converteren van tool palette's Pen gereedschap groep. Vervolgens "Ctrl + klik" op de header bg rechthoek en klik op de vier bovenste hoeken zoals weergegeven in de afbeelding A - 4c. En verwijder hele bovenste twee punten met Ankerpunttool verwijderen van Pen gereedschap groep zoals getoond in afbeelding A - 4d.
Nu onze header bg rechthoek moet een hoogte van 140px hebben, omdat we de bovenste twee punten hebben verwijderd. kiezen hoofd laaggroep en achtergrondlaag en selecteer vervolgens Lijn de bovenranden uit en Lijn horizontale centra uit van opties palet zoals weergegeven in de afbeelding A - 4e.
Een laagstijl toepassen in de header bg laag met behulp van instellingen weergegeven in afbeelding A - 4f. Schuif deze laag 1px naar boven om de bovenste gloed te verbergen.
Selecteer nu opnieuw de Afgeronde rechthoek-tool en teken inhoudsgebied (meet 980 x 1400 px). Noem maar op bg en plaats het in een lagengroep met de naam inhoud en dezelfde laagstijlen toepassen als header bg. Teken een andere rechthoek (van 980 x 570 px) voettekst bg en plaats het in een lagengroep met de naam footer en passen dezelfde laagstijlen ook toe. Verwijder onderste twee punten van voettekst bg rechthoek met dezelfde methode van header bg. Houd een afstand van 20 px tussen elke sectie (bijvoorbeeld koptekst, inhoud en voettekst). Plaats alles zoals in de afbeelding wordt getoond A - 4g.
Alles omlijsten en vervolgens inhoud toevoegen, zou onze kostbare tijd opeten? Dus we gaan meteen door met het toevoegen van een aantal "echte" inhoud voor deze mockup in de volgende sectie.
Selecteer de Lijntool teken dan een lijn met 1px gewicht en 940px in lengte (houd de "Shift" -toets ingedrukt terwijl je tekent voor een perfecte lijn). Plaats het zoals in de afbeelding wordt getoond B - 1a. Geef deze laag een naam hr, vul de achtergrond met kleur cdcdcd en een laagstijl zoals weergegeven in de afbeelding B - 1a.
Selecteer nu de Rechthoekgereedschap en teken een rechthoek van 200 x 24 px, pas laagstijlen toe en plaats deze zoals weergegeven in de afbeelding B - 1b. Zet de achtergrondkleur op 000000 verminder vervolgens de vuldekking naar 10%.
Typ een snelkoppelingstekst aan de linkerkant van onze zoekveld. Selecteer de Text Tool van de paragraaf deelvenster en selecteer Tekst rechts uitlijnen. Typ vervolgens een aantal menunamen en scheid ze van elkaar met een "|" (verticale balk). Gebruik afbeelding B - 1c als richtlijn. Stel de tekstkleur in op ababab. Voor de zoekveld typetiket Zoeken met kleur ababab selecteer vervolgens Aangepast vormgereedschap en van Vorm menu selecteren Zoeken vorm en teken en plaats de vorm van het vergrootglas zoals weergegeven in de afbeelding B - 1c. Stel de kleur van de vergrootglas in op f1f1f1.
Ik ga je niet helpen met het maken van dit logo, omdat dit niet zo belangrijk is dat je het perfect dupliceert; Ik hoop dat je gemakkelijk je eigen logo kunt maken om te gebruiken. Plaats het bestaande logo (of uw eigen logo) zoals weergegeven in de afbeelding B - 2a.
Selecteer de Text Tool, schakel vervolgens de Tekst rechts uitlijnen van PARAGRAAF ruit. En typ een aantal menunamen met behulp van de instellingen zoals weergegeven in de afbeelding B - 2b.
Omdat de meeste toetsenborden niet de ">>" -toets hebben, selecteert u eerst deze pijl (") en kopieert u deze en plakt u deze in de Photoshop en geeft u deze laag de naam pijl. Gebruik dezelfde kleur als de menukleur en stel in Horizontaal schaal naar 150% en selecteer pijl laag (indien niet al) druk op "Ctrl + T" en draai het dan zoals in de afbeelding B - 2c.
Teken met elke maat een afgeronde rechthoek met een straal van 4 px. Stel vervolgens de vulkleur in op d5d5d5, pas de getoonde laagstijlen toe en typ een aantal submenu-namen zoals weergegeven in de afbeelding B - 2d.
Teken een rechthoek van 940 x 338 px en pas vervolgens laagstijlen toe, zoals in de afbeelding C - 1a. Geef deze laag een naam slider bdr. Plaats slider bdr in de inhoud gebied zoals weergegeven in de afbeelding C - 1b.
Plaats en selecteer een afbeelding boven de slider bdr laag dan Ctrl + klik slider bdr laag om het schuifregelaarbeeldgebied te verkrijgen (afbeelding C - 1c). Ga vervolgens naar "Selecteer-> Wijzigen-> Contract" in het Contract dialoogvenster set 1px en druk op "Enter". Druk nu op "Shift + Ctrl + i" of ga naar "Select-> Inverse" naar inverse selectie en druk vervolgens op de "Delete" -toets van het toetsenbord. Nu zouden we een perfecte afbeeldingsschuif moeten hebben zoals in afbeelding C - 1d.
Selecteer de Ellipse Tool en teken een cirkel van 16 x 16 px. Pas een laagstijl toe zoals in afbeelding C - 1e en plaats ze zoals getoond in de afbeelding C - 1e. Groepeer die cirkels en noem hun laaggroep: radio's.
Eerst gaan we vier kolom promo-items maken. Als u een vierkolommengroep wilt maken, schakelt u in grid_16_col. Verdeel die 16 kolommen met vier en je zult vier gelijke breedte kolommen vinden. Vul uw kolommen met de inhoud zoals weergegeven in de afbeelding C - 2a. Plaats vervolgens een regel met dezelfde instellingen van hoofd's hr plaats het volgens afbeelding C - 2a.
Bij het maken van meerdere regels, zoals HR's en VR's, is het meestal belangrijk dat ze dezelfde basisstijl en kleur hebben.
Die pictogrammen komen uit tutorial9. Je kunt ze hier downloaden.
Dit is een promo-sectie met drie kolommen. Hiervoor zullen we de verbergen grid_16_col en zichtbaar maken grid_12_col. Gebruik elke vierde kolom als één kolom om promo-items te plaatsen. Teken eerst een rechthoek van 300 x 140 px en plaats deze zoals in de afbeelding C - 2b. Plaats nu een afbeelding bovenop deze laag en selecteer vervolgens afbeeldingsgebieden (die uit het onderste rechthoekgebied zijn verbogen) zoals we deden voor de beeldschuifregelaarsectie. Breng nu laagstijlen aan, zoals weergegeven in de afbeelding C - 2b.
Laten we nu wat tekst toevoegen. kiezen Text Tool en teken een tekstblok zoals weergegeven in de afbeelding C - 2c en typ een kop, typ ook een korte beschrijving en een koppelingstekst zoals in de afbeelding C - 2c.
Maak nu een groep met deze lagen met de naam "promo". Kopieer en plak vervolgens de 'promo'-groep twee keer en groepeer vervolgens alle drie' promo'-groepen met een naam promo-col-3 en plaats ze en je lagen zoals weergegeven in de afbeelding C - 2d.
kiezen Rechthoekgereedschap teken een rechthoek met een breedte van 940px en stel de hoogte in op basis van uw behoefte. Vul deze rechthoek met 000000 kleur en verminder het Vullen dekking naar 5% en noem het testi bg.
Selecteer nu de Aangepast vormgereedschap van Vorm menu en selecteer de Triangle Shape. Klik op de Vectormasker thumbnail van de testi bg laag. U zou nu een vormselectie moeten hebben.
in staat stellen Toevoegen aan vormgebied (+) van de opties paneel en teken een driehoek naar binnen testi bg vorm. Dan met de Ankerpunt verwijderen gereedschap verwijder de ene kant van de driehoek en plaats deze zoals in de afbeelding C - 2e.
Pas vervolgens de getoonde laagstijlen toe, positioneer deze en vul deze met wat tekst zoals weergegeven in de afbeelding C - 2f.
Selecteer de Rechthoekgereedschap teken een rechthoek van 940 x 40 px en noem deze laag bar. Zet deze rechthoek in een laaggroep en label deze groep Recente projecten. Stel de vulkleur van de rechthoek in op FFFFFF, en stel zijn Vullen dekking naar 15% pas vervolgens laagstijlen toe op de rechthoek zoals in de afbeelding wordt weergegeven C - 2g en plaats en plaats wat foto's eronder met de instellingen en de positie zoals weergegeven in de afbeelding C - 2 uur en die foto's zijn 220 x 180 pixels groot.
Gebruik voor afbeeldingen dezelfde technieken en laagstijlen die we hebben gebruikt voor de promo-col-3 secties. Gebruik vanaf nu dezelfde techniek en stijlen voor het ontwerpen van afbeeldingen voor dit thema in het eerste deel en het tweede deel. Waarom? Omdat het ons ontwerp zal helpen om een uniform, consistent stijlschema te krijgen. Vanaf nu verwijs ik alleen naar deze stijlen en technieken met "toepassen van afbeeldingsstijlen" in plaats van al deze stappen te herhalen.
In de footer laaggroep maak een laaggroep en noem die top. Binnen deze groep plaatst u de inhoud en maakt u deze op zoals getoond in de afbeelding D - 1a. Gebruik voor de verticale liniaal dezelfde kleur en laagstijl van de horizontale liniaal hr. Plaats tenslotte je lagen zoals weergegeven in de afbeelding D - 1b.
Download die sociale pictogrammen van het pictogram wefunction en twitter bird from webtreats.
Maak nu de hoofdinhoud van het voettekst. Vul de inhoud in en plaats deze zoals in de afbeelding wordt getoond D - 1c. Plaats uw lagen zoals weergegeven in de afbeelding D - 1d.
Selecteer de Aangepast vormgereedschap, van Vorm menu selecteren Driehoek vorm en teken een driehoek van 10 x 10 px. Vul dit met kleur cdcdcd en pas een lijn toe vanaf de laagstijl zoals weergegeven in de afbeelding D - 1e, en noem deze laag bovenste pijl. Voeg ten slotte wat tekst toe en plaats de elementen zoals weergegeven in de afbeelding D - 1f.
Nu moet je ontwerp er ongeveer uitzien als onze demo:
Dit is het eerste deel van onze enorme tutorial! Inmiddels hebben we het basisraamwerk voor de site met succes opgezet en onze startpagina ontworpen. In de volgende ontwerpsessie (komende volgende week) gaan we de ondersteuningspagina's ontwerpen. Ten slotte gaan we het ontwerp doorsnijden en klaar krijgen voor XHTML en uiteindelijk WordPress-codering!
Accentsconagua