Professionele webdesigners ontwikkelen websitesjablonen, meestal in krachtige grafische editors zoals Adobe Photoshop. Het resultaat van het werk is een bestand met een afbeelding, dat in deze vorm aan de klant wordt verstrekt. Om het kant-en-klare ontwerp te gebruiken, dat wil zeggen om een webpagina op te maken, moet u de sjabloon knippen.
Noodzakelijk
raster grafische editor Adobe Photoshop
instructies:
Stap 1
Open het sjabloonbestand in de grafische editor Adobe Photoshop. Selecteer Bestand en Openen in het menu, of druk op de toetsencombinatie Ctrl + O. Ga in het dialoogvenster dat daarna verschijnt naar de map met het bestand, selecteer het in de lijst en klik op de knop "Openen".
Stap 2
Kies een handige schaal om de sjabloonafbeelding te bekijken. Gebruik de Zoom Tool of contextmenu-items. Selecteer een schaal waarmee u de cursor met pixelprecisie kunt positioneren. Dit is nodig om de referentielijnen nauwkeurig in te stellen.
Stap 3
Vorm een reeks referentielijnen boven de sjabloonafbeelding. Schakel de weergave van linialen in documentvensters in als dit nog niet is gebeurd. Om dit te doen, drukt u op Ctrl + R of selecteert u Beeld en linialen in het menu.
Stap 4
Beweeg de muiscursor over de bovenste liniaal om een horizontale referentielijn toe te voegen. Houd de linkertoets ingedrukt. Beweeg de muiscursor omlaag naar het afbeeldingsgebied. Evenzo kunt u met de juiste liniaal horizontale lijnen toevoegen.
Stap 5
Voeg het vereiste aantal referentielijnen toe en plaats ze langs de grenzen van de verdeling van de regio's van de sjabloon. De lijnen moeten door alle plaatsen gaan waar u de sjabloon wilt snijden. Ze moeten alle afbeeldingen en logische gebieden (logo, koptekst van de site, horizontale en verticale menu's, enz.) die op een webpagina worden weergegeven, beperken.
Stap 6
Activeer de Slice-tool. De knop bevindt zich op de verticale werkbalk.
Stap 7
Maak het vereiste aantal snijgebieden met behulp van de Slice Tool. Kies een handige schaal om de sjabloon weer te geven. Gebruik de muis om de grenzen van de gebieden in te stellen. De richtlijnen die in de derde stap zijn toegevoegd, bieden een nauwkeurige positionering van de grenzen van de objecten die u maakt. Pas de bestaande gebieden indien nodig aan met behulp van de Slice Select Tool.
Stap 8
Wijzig desgewenst de eigenschappen van de snijgebieden. Activeer het gereedschap Segmentselectie. Klik met de rechtermuisknop op het gewenste gebied. Selecteer in het contextmenu het item Segmentopties bewerken. Selecteer in het dialoogvenster Segmentopties dat verschijnt het type gebied (afbeelding, leeg gebied, tabel), de modus voor het vullen van de achtergrond, specificeer, indien nodig, de naam, doel-URL, inhoud van het attribuut alt="Afbeelding" en andere waarden. Klik OK.
Stap 9
Knip de sjabloon uit. Selecteer Bestand en Opslaan voor web en apparaten in het menu of druk op Shift + Ctrl + Alt + S. Geef in het dialoogvenster Opslaan voor web en apparaten het formaat en de beeldcompressieparameters op waarin de sjabloon wordt geknipt. Klik op de knop Opslaan. Het dialoogvenster Geoptimaliseerd opslaan als wordt weergegeven.
Stap 10
Selecteer HTML en afbeeldingen (*.html) in de vervolgkeuzelijst Bestandstype en voer in het veld Bestandsnaam de naam in van het bestand waarin de HTML-opmaak van de sjabloon wordt geplaatst. Selecteer in de lijst Segmenten Alle segmenten. Geef de map voor de uitvoer op en klik op de knop "Opslaan".
Stap 11
Een HTML-bestand wordt in de doelmap geplaatst, wat in feite een kant-en-klaar webpaginasjabloon is. De submap afbeeldingen bevat de set afbeeldingen waarin de originele sjabloon is geknipt.
