Er zijn een groot aantal websitesjablonen op internet, maar ze hebben één nadeel: ze zijn niet uniek. Als de site-eigenaar niet wil dat het ontwerp van zijn site elders wordt herhaald, kan hij een sjabloon bestellen bij een professionele ontwerper of het zelf proberen te maken.
Het is nodig
Adobe Photoshop-programma
instructies:
Stap 1
Het maken van uw eigen sjabloon is niet zo moeilijk als het op het eerste gezicht lijkt. Om te kunnen werken, heb je Adobe Photoshop nodig - je moet natuurlijk op zijn minst een basiskennis hebben om ermee te werken. Maar voordat u het programma start en begint te creëren, moet u van tevoren nadenken over het toekomstige ontwerp. De handigste manier om dit te doen, is om eerst kennis te maken met minstens honderd kant-en-klare sjablonen en hun voor- en nadelen te evalueren. Besteed aandacht aan de succesvolle oplossingen van bepaalde ontwerpelementen. Dit betekent niet dat je ze gaat kopiëren, maar het is heel redelijk om een aantal mooie en handige oplossingen als basis te nemen.
Stap 2
Op basis van de analyse van de sjablonen van anderen en uw eigen creativiteit, zou u een idee moeten krijgen van hoe uw site eruit zal zien. Het is het beste om ruwe schetsen van het toekomstige ontwerp te maken met kleurpotloden op gewone A4-vellen. Je moet pas met Photoshop gaan werken als je een duidelijk idee hebt van wat je precies gaat tekenen.
Stap 3
Start Photoshop, maak een nieuw 1200x1600-project, stel een transparante achtergrond in. Schakel het gereedschap Liniaal in, als het nog niet is ingeschakeld, druk hiervoor op de toetsencombinatie Ctrl + R. Snappen inschakelen: Bekijken - Snappen.
Stap 4
Nu moeten we de sjabloon verdelen met hulplijnen die de randen van de elementen laten zien - zijkanten, kolommen, enz. U wilt bijvoorbeeld de sjabloon splitsen zodat er links een smalle kolom is, rechts van de sjabloon een brede kolom en er bovenaan ruimte is voor een koptekst. Dit betekent dat je drie verticale lijnen nodig hebt (de linkerrand van de sjabloon, de rechter en de lijn ertussen) en een horizontale, die de onderrand van de koptekst weergeeft. Om een verticale lijn in te stellen, verplaatst u de cursor naar de linker liniaal aan de linkerkant, drukt u op V en, terwijl u de toets ingedrukt houdt, sleept u de lijn naar de gewenste locatie. Doe hetzelfde met de andere twee verticale lijnen. Horizontale worden op dezelfde manier gebouwd, alleen de bovenste liniaal wordt gebruikt.
Stap 5
Zoek een achtergrond voor je sjabloon, het moet een klein, herhalend patroon zijn. Open het in Photoshop, selecteer, kopieer. Plak vervolgens zo vaak als nodig is in de sjabloon om deze met de achtergrond te vullen. Plakken gaat als volgt: "Bewerken" - "Plakken", en sleep vervolgens het achtergrondgebied naar de gewenste locatie. Het is zelfs nog sneller om een afbeelding in te voegen met de opdracht Ctrl + V. Voeg op dezelfde manier een achtergrond voor de sitekoptekst toe. U kunt verschillende verloopvullingen gebruiken om een achtergrond te maken.
Stap 6
Teken met het gereedschap Potlood de randen van de sjabloon, waarbij u zich concentreert op de lijnen die al zijn getekend (dat wil zeggen, er bovenop). U hebt de basis van de eenvoudigste sjabloon ontvangen, nu moet u deze aanvullen met de nodige details - navigatieknoppen, menuregels, verschillende decoratie-elementen, enz. Lees de bijbehorende artikelen over werken met Adobe Photoshop voor meer informatie over het maken van knoppen en andere elementen.
Stap 7
Het sjabloon is gemaakt, nu moet je het in stukjes knippen om ze in de html-pagina in te voegen. Gebruik de Slice Tool om te snijden. Om het te vinden, klikt u met de rechtermuisknop op het gereedschap Kader en kiest u Uitsparing in het menu dat wordt geopend. Nu kunt u de sjabloon naar wens nesten en vervolgens opslaan: "Bestand" - "Opslaan voor web". Selecteer in het geopende venster het bestandstype: HTML & afbeeldingen, geef de bestandsnaam op: index.htm en sla het op. Je hebt een index.htm-bestand en een afbeeldingenmap met gesegmenteerde afbeeldingen.
