Het ontwerpen van een website kan een heel leuk maar uitdagend zijn. Misschien wel het moeilijkste onderdeel van het ontwerp is om te beslissen hoe elk segment van de website lay-out . Hoewel dit kan worden bereikt op vele web -editors , ze zijn vaak niet de beste tools in dit vroege ontwerpfase . Adobe Photoshop zorgt voor een eenvoudiger en meer efficiënte manier om web -indelingen te maken , omdat het stelt u in staat om de layout te visualiseren zonder het omgaan met de HTML-code . Deze tutorial zal je leren om een web lay-out in Photoshop CS3 te creëren ; andere versies van Photoshop moeten gelijkaardig zijn . Wat je nodig hebt
Adobe Photoshop
Toon Meer Aanwijzingen
1 Open een nieuw document . Als u gebruik maakt van Adobe CS3 of hoger , heeft Adobe voorzien van een vooraf ingesteld voor webpagina's die is 640 x 480 pixels . In de "nieuwe " dialoogvenster , selecteert u " Web " van de " Preset " drop - down menu . Als u niet beschikt over een web- preset of uw web lay-out is een ander formaat , voert u de grootte van uw webpagina op de " Breedte " en " Hoogte " dozen . Kopen van 2 Vul de achtergrond met de achtergrondkleur . Selecteer de " Paint Bucket Tool . " Dubbelklik op de " Voorgrondkleur " om de open " Color Picker . " Selecteer de " Only Web Colors 'in te schakelen . Vervolgens kies je achtergrond laag. Selecteer " OK".
Plaats 3 van de banner . Maak een nieuwe laag . Selecteer " File > Place ... " Navigeer naar het imago van uw banner en klik op "OK . " Positioneer uw banner zoals gewenst . Als u niet beschikt over een afbeelding banner , kunt u een plaats voor uw banner te creëren zoals in de volgende stap .
4 Voeg de resterende segmenten van de web lay-out . Maak een nieuwe laag voor elk deel van de webpagina . Selecteer een shape tool uit het menu gereedschappen . Selecteer hier een achtergrond voor het segment . Teken de resterende lay-out voor uw website .
5 Snijd het web lay-out voor te bereiden op het web . Selecteer het gereedschap " Slice " . Teken een kader rond elk segment .
6 Opslaan voor web . Selecteer " Bestand > Opslaan voor web . " Druk op " Controle A " om alle segmenten te selecteren . Druk vervolgens op 'Opslaan'. Selecteer " HTML en Beeld " van de "Formaat " drop - down menu . Zorg ervoor dat " All Slices " is geselecteerd en sla de lay-out in je map website . Het web lay-out is nu klaar om inhoud in een web- editing programma zoals Dreamweaver toe te voegen .
|
