Hoe maak je een website mockup met Photoshop

Maak een nieuw document

Bij het maken van een website, soms het moeilijkste deel is het bepalen van de lay-out.Adobe Photoshop biedt een snelle en gemakkelijke manier om een ​​website mockup creëren.Door het gebruik van lagen en een combinatie van Photoshop design tools, het proces van het herschikken van de look en feel van uw website kunt u besparen uur.

instructies

  1. Bepaal de grootte van uw mock website canvas op basis van uw publiek.Bijvoorbeeld, voor een publiek dat nog steeds gebruik maakt van een lage resolutie beeldbuis monitor, zou je een doek formaat dat 760 pixels breed gebruiken.Echter, voor een flatscreen-monitor met de op 1024 bij 768 resolutie, wil je een doek dat is 975 pixels breed gebruiken.Maak een nieuw document en zet het doek grootte.

    Maak een nieuw document
  2. Bepaal de lay-out van de website.Gebruik eenvoudige vierkanten of ellipsen af ​​te bakenen van de verschillende secties voor uw mockup.Bijvoorbeeld, markeren een ruimte voor de top banner, de zijkant banner, de inhoud en

    de voettekst.Maak elke functie op een nieuwe laag, zodat u gemakkelijk de website herschikken.

    Markeren de basis lay-out
  3. Bepaal de lettergrootte en vul de secties die tekst met placeholder tekst bevatten.Het doen van een snelle zoekopdracht naar Lorem Ipsum, een Latijns toespraak gebruikt door ontwerpers te zien hoe de tekst eruit zal zien op een pagina, zal deze tekst voor u te genereren.Als de achtergrond of andere gedeelten bestaat uit een kleur, vullen met de juiste kleur.

    Stel lettergrootte
  4. Maak de graphics.U kunt Photoshop gebruiken om deze graphics, zoals de banner of logo's te maken, of trek ze vanaf een andere locatie.Plaats en positie van de afbeeldingen in de mock website.Selecteer "File" en vervolgens "Place" en navigeer naar het beeld.Opmerking: Houd een Photoshop-versie van de graphics, zodat u ze later kunt bewerken.

    afbeeldingen toe te voegen
  5. Fine-tunen en bewerken van de mock website totdat de website ziet de manier waarop je wilt kijken.Omdat elke nieuwe functie is op een andere laag, kunt u snel verplaatsen secties, secties verbergen (klik op het oog in de laag pallet) of vervang beelden en kleuren.

570
0
5
Photoshop