Photoshop gebruiken om een webpagina te ontwerpen

Er zijn veel manieren om webpagina`s te maken. Photoshop is daar een van.

Inhoud

Stappen
Tips

stappen

Titel afbeelding Gebruik Photoshop om een website te ontwerpen Stap 1

Download en installeer Photoshop.

Titel afbeelding Gebruik Photoshop om een website te ontwerpen Stap 2

Open de versie van Photoshop die u op uw computer hebt en maak een nieuw document met de juiste hoogte en breedte volgens wat u hebt gekozen om te doen (normale breedte van 800 px tot 900 px, normale hoogte van 1200 px tot 1500 px).

Titel afbeelding Gebruik Photoshop om een website te ontwerpen Stap 3

Maak een koptekst voor de pagina (van een bestaande afbeelding of helemaal opnieuw) en met het logo van uw webpagina opgenomen.

Titel afbeelding Use Photoshop to Design a Website Stap 4

Maak menuknoppen (vorm en kleur, laat een spatie ertussen, zoals een topmenu, een ondermenu, een menu naar rechts of links, of de combinatie van twee of drie groepen menu`s, enz.).

Titel afbeelding Gebruik Photoshop om een website te ontwerpen Stap 5

Maak het inhoudgedeelte, de voettekst, een plaats om banners te plaatsen, een ander voor een fotogalerij enzovoort, totdat u klaar bent met het uiterlijk van uw webpagina.

Titel afbeelding Gebruik Photoshop om een website te ontwerpen Stap 6

Nu komt het moeilijke gedeelte in Photoshop: knip en exporteer de voltooide pagina en geef namen aan alle onderdelen voordat u ze exporteert (bijvoorbeeld: markeer het header-gebied met het snijgereedschap en plaats "header" als de naam, markeer het gebied van de "Start" -knop en plaats de naam "startknop" enzovoort voor elk afzonderlijk deel van de webpagina).

Titel afbeelding Gebruik Photoshop om een website te ontwerpen Stap 7

Het is raadzaam om het inhoudsgebied leeg te laten, aangezien u het alleen als afbeeldingsstukken hebt opgeslagen en de tekst op dezelfde manier wordt weergegeven, maar wanneer deze leeg zijn, kunt u de inhoud van elke pagina apart toevoegen.

Titel afbeelding Use Photoshop to Design a Website Stap 8

Exporteren naar een nieuw bestand op het bureaublad. Er wordt een HTML-webpagina gemaakt (uw pagina, zonder centreren en zonder inhoud), een CSS-bestand en een afbeeldingsbestand met daarin alle verschillende divisies en afbeeldingen.

Titel afbeelding Gebruik Photoshop om een website te ontwerpen Stap 9

Open het HTML-bestand met de "OneNote" of "Notepad" en veranderingen in HTML (gecentreerd rond de pagina te maken, wijst een achtergrondkleur om de hele pagina, doe de inhoud op een tafel in Div waar is de afbeelding voor de inhoud, maak de metadata voor trefwoorden, inhoud enzovoort).

Titel afbeelding Gebruik Photoshop om een website te ontwerpen Stap 10

Kopieer en plak dezelfde HTML-pagina op basis van het aantal pagina`s en verander vervolgens de naam van de gerelateerde pagina`s (Startpagina, Wie zijn we, Contactpersoon) .550px]]

Titel afbeelding Gebruik Photoshop om een website te ontwerpen Stap 11

Maak interne links voor de pagina`s van de HTML-bestanden (of doe dit voordat u meer pagina`s maakt, zodat u het proces niet hoeft te herhalen), waar is de code van de knopafbeelding, divs aan het maken en de knoppen de adressen van de links.