Adobe Photoshop is een ideaal hulpmiddel voor het maken van een website lay-out en is de industrie standaard tool voor fotobewerking en bitmapafbeelding creatie . Het maken van een lay-out in Adobe Photoshop kan de ontwerper de mogelijkheid om snel wijzigingen aan te brengen zonder enige code te passen . Zodra de look en feel van de site zijn afgewerkt , Adobe Photoshop maakt het zeer eenvoudig om de beelden te snijden en te optimaliseren voor web gebruik . Wat je nodig hebt
Adobe Photoshop CS3
Code compiler of web design programma
Toon Meer Aanwijzingen
1 Plan van de site op papier . Benader de computer met een duidelijk plan en kennis van wat de site zal moeten verwachtingen project te voldoen . Vinden ideeën voor kleuren en stijlen om uit te putten . De meer planning en organisatie die optreedt in dit stadium , zal het minder moeilijk ontwerpkeuzes eenmaal te werken in Adobe Photoshop .
Open Adobe Photoshop CS3 2 en een nieuw document te starten . Stel de hoogte van het document tot 800 pixels en de breedte tot 600 pixels . Dit is een standaard formaat voor web lay-out ontwerp en zal ervoor zorgen dat de pagina kan worden bekeken door een verscheidenheid aan schermresoluties .
3 Stel de resolutie van het document tot 72 pixels per inch ( PPI ) . Zorg ervoor dat de kleurmodus van het document is ingesteld op RGB . Schakel de meeteenheden weergegeven op de liniaal om pixels voor nauwkeurige metingen .
4 Bouw het kader van de pagina met behulp van gidsen . De verticale grenzen zal de parameters voor de breedte van de website en de horizontale hulplijnen te creëren zal de ruimte uit elementen van de site . Gebieden bepalen voor een kop- , navigatie- bar en het content gebied . Laat een consistente marge , meestal rond de 10 pixels , tussen de elementen om esthetische ruimte toe te voegen aan de site .
5 Voeg de afbeeldingen en tekst die de stijl van de pagina zal bestaan . Voor gecompliceerde beelden , zoals de site header , ontwerp een afbeelding eerst in een ander bestand en plak in de gewenste locatie in de layout -bestand . Houd alle van de lay-out elementen op afzonderlijke lagen voor het gemak in het bewerken te garanderen . Noem elke laag na de corresponderende element .
6 Maak een achtergrond afbeelding . Een eenvoudig patroon in een 100 pixel x 100 pixel plein kan worden betegeld en is sneller te laden dan een grotere afbeelding .
7 Snijd het document in stukken te worden gecodeerd in de website. Gebruik de functie " Slice " om gebieden die zullen worden opgeslagen als afzonderlijke afbeeldingsbestanden definiëren .
8 Kies een schijfje worden opgeslagen met " Slice selecteren . " Selecteer Bestand> Opslaan voor web en apparaten om het beeld te optimaliseren voor het web . De gesneden beelden en de stijl van de pagina zal de look bestaan en feel van de website .
|
