Hoe maak je een Web-pagina met behulp van Adobe Photoshop

Hoe maak je een Web-pagina met behulp van Adobe Photoshop


Adobe Photoshop maakt het gemakkelijk om te maken een uniek ontwerp voor een Web-pagina. Photoshop de krachtige grafische tools en effecten bieden gebruikers met uitgebreide controle over de lay-out, kleur en afbeeldingen. In plaats van steeds verward met complexe codering en andere scripts, kunt u plannen en uw volledige webdesign in Photoshop maken en vervolgens gemakkelijk te exporteren naar het Web via een HTML-programma.

Instructies

1

Gebruik maken van Photoshop te openen het logo of de afbeelding die u wilt gebruiken als de belangrijkste afbeelding op uw webpagina.

2

Beslissen over een kleurenschema voor uw Web-pagina, met behulp van uw foto als een gids. Selecteer het gereedschap Pipet op het paneel van de tool. Breng de pipet op een kleur op uw afbeelding. Klik en de tool zal neemt een monster van de kleur die u zojuist hebt geselecteerd. U zal zitten kundig voor zien van specifieke informatie, zoals het RGB-aantal, de kleur in het deelvenster "Kleur". Neemt nota van het specifieke RGB aantal elke kleur die u monster. Blijven met behulp van het gereedschap Pipet om te proeven van de verschillende kleuren in de afbeelding. Nadat u verschillende kleuren hebben bemonsterd, ten minste drie kleuren die u wilt gebruiken als het kleurenschema voor uw webpagina selecteren De kleuren moeten elkaar contrast en licht, medium en donker.

3

Ga naar "File" in Photoshop de belangrijkste navigatie menu. Selecteer "Nieuwe..." en maak een nieuw document met een breedte van 600 pixels en een hoogte van 300 pixels. Dit zal de belangrijkste banner en navigatie header voor uw Web-pagina.

4

Beslissen over het lettertype voor uw pagina. Denk na over het idee dat u wilt overbrengen. Ga naar het deelvenster Tool en selecteer de knop "Tekst". Sleep met de muis om een rechthoek op het nieuwe document. Typ in de tekst van de Web-header. Markeer de tekst die u net hebt geschreven en ga naar de opties van de tekst aan de bovenkant van Photoshop. Probeer verschillende lettertypen en maten, en experimenteren met tekstkleur en uitlijning totdat u tevreden bent. Gebruik het gereedschap "Verplaatsen" in het deelvenster Tool om uw koptekst naar positie in het document gewenste.

5

Maak een achtergrond voor uw nieuwe banner met behulp van een van de kleuren uit uw vooraf ingestelde kleurenschema. Ga naar het venster lagen, en selecteer de knop "Vul of Adjustment Layer" op de bodem. Klik op "Effen kleur" en voer de gegevens van de RGB-u nam neer over de kleur die u wilt gebruiken. De laag zal nu betrekking hebben op de tekst die u in de vorige stap hebt geschreven. Sleep in het deelvenster Lagen de laag van de "Effen kleur" u zojuist hebt gemaakt zodat deze onder de laag "Tekst". De kleur moet nu in de achtergrond.

6

Zorg ervoor dat het "tekstbestand" is geselecteerd in het deelvenster Lagen. Selecteer vervolgens uw logo of grafisch bestand zodat het komt op de voorgrond. Klik in het deelvenster Gereedschappen op het Verplaatsgereedschap en die op de top moet. Sleep de afbeelding van uw logo naar uw nieuwe document van de webpagina. Een nieuwe laag moet onmiddellijk worden gemaakt op uw document met uw logo. Met uw logo-laag geselecteerd, klikt u op de "fx"-knop in het deelvenster Lagen. Klik op "opties voor overvloeien... "en probeer uit Photoshop de verscheidenheid van de overvloeimodus tools om te helpen uw logo naadloos overeenkomt met de achtergrondkleur.

7

Ga naar "Layer" in de bovenste navigatie menu en selecteer "Nieuwe laag". Ga naar de gereedschap-Configuratiescherm en selecteer het tekstgereedschap. Sleep uw muis over het gebied waar u zou willen maken van de navigatie links voor uw Web-pagina. Voeg de tekst voor uw navigatie met behulp van een kleinere grootte van het lettertype dat u eerder gebruikt voor het maken van de kop.

8

Ga naar "File" en klik "Opslaan voor Web." Op het bovenste drop-down menu, selecteer welk formaat u wilt opslaan van het bestand (.jpg, .png of .gif). Photoshop zal opslaan en uw banner te optimaliseren voor het Web.

9

Open uw HTML-editor en maak een nieuw HTML-document dat een tabel met vijf rijen en een kolom. Uw banner in de eerste rij invoegen. Een afbeelding met hyperlinks maken voor elk van uw navigatie woorden en de bestemming van de koppeling toe te voegen. De resterende vier rijen kunnen worden gevuld met de tekst van uw webpagina's.

Tips & waarschuwingen

  • Neem de tijd om echt te ontdekken alle grafische functies in Photoshop. Maskers, borstels, filters, kleurniveaus en vele andere hulpmiddelen gebruiken om een uniek en persoonlijk ontwerp te maken.