Welkom op de Nederland Computer Kennisnetwerk!  
 
Zoeken computer kennis
Home Hardware Netwerken Programmering Software Computerstoring Besturingssysteem
Computer Kennis >> Software >> Photoshop >> Content
Hoe maak je een webpagina ontwerpen in Photoshop voor Dreamweaver
Photoshop is een geweldig hulpmiddel voor diegenen die willen een visuele benadering van webdesign of die zich geïntimideerd door het idee van omgaan met HTML code . Het heeft alle tools die u nodig hebt om foto's , tekst en afbeeldingen in een webpagina -indeling te integreren , en alles wat nodig is om deze elementen te optimaliseren voor het web en Adobe Dreamweaver in het bijzonder . Wat je nodig hebt
Computer
Adobe Photoshop -software ( bij voorkeur CS3 of hoger ) op Afbeeldingen en inhoud van een webpagina ( of dummy -inhoud ) op Twitter Toon meer instructies
Initial Setup
1

Start Photoshop en kies Bestand > Nieuw in het programmamenu . Klik op de Preset drop- down menu en selecteer Web . Pas de Maat keuzelijst aan een standaard web formaat dat u wilt dat uw pagina te zijn . Kopen van 2

Selecteer Bestand - > Openen in het menu applicatie en open de afbeelding die u wilt gebruiken als je header . Dit zal een nieuwe tab of venster voor de afbeelding te maken , afhankelijk van uw Photoshop- instellingen .
3

Selecteer het rechthoekig selectiegereedschap uit het Tools-paneel aan de linkerkant van je canvas . Stel de Style keuzemenu te Vaste grootte in het Tool Options paneel boven je canvas en de breedte gelijk aan de breedte van de pagina die u hebt gemaakt in stap 1 . De hoogte kan zo lang of kort als u het imago van de header zou graag op uw webpagina .
4

Selecteer het gereedschap Verplaatsen in het deelvenster Gereedschappen en beweeg de feesttent op het gebied van de afbeelding u wilt gebruiken als het imago van uw header . Kies Afbeelding > Uitsnijden in het programmamenu .
5

Kies Bewerken > Kopiëren om de afbeelding bijgesneden header kopiëren . Schakel terug naar het tabblad of venster met daarin uw webpagina doek . Selecteer Bewerken > Plakken om de koptekst op de webpagina plakken . Met behulp van het gereedschap Verplaatsen , verplaatsen header image het zo dat de bovenste hoeken overeenkomen met de bovenste hoeken van uw webpagina .
Ontwerpen van uw pagina en Slices maken
6

Open en voeg alle andere elementen die u wilt uw webpagina . U kunt plakken in andere afbeeldingen met dezelfde proces wordt gebruikt om de header plakken . Omvatten een menu met tekst met behulp van het type gereedschap in het deelvenster Gereedschappen . De meeste webpagina's bevatten een header , een orgaan dat uw inhoud en afbeeldingen of foto's in verband met de inhoud of de menu- items bevat , en een voettekst , die vaak bevat contactgegevens of informatie hierover.
7

Houd rekening met de basisgedachte van de tabellen in website design bij het opmaken van uw pagina in Photoshop .
8

selecteer View > Snap uit het programmamenu en selecteer de Slice Tool , genesteld onder de Crop Tool in het deelvenster Gereedschappen . Klik en sleep een doos met het gereedschap rond het geheel van uw pagina om te beginnen .
9

Maak plakjes rond de header , body -en voettekst van uw pagina om verder te verdelen de pagina . Dit proces is het begin van het leggen van de pagina in een tabel formaat voor gebruik in Dreamweaver .
10

Maak sneetjes rond elk grafisch element van de header , body -en voettekst , zoals menu- knoppen , logo's of afbeeldingen . Proberen te plakken te houden voor uw knoppen en uitlijnen van elementen uitgelijnd . De snap -functie zal helpen bij het maken van dit makkelijker .
Opslaan en optimaliseren van uw ontwerp voor Dreamweaver

Access 11 bureaublad van uw computer en maak een nieuwe map voor uw webpagina . Mac- gebruikers zullen Finder > Nieuwe map te selecteren . Windows-gebruikers zullen de rechtermuisknop op het bureaublad en selecteer Nieuw> Map . Maak een extra map in deze ene titel " beelden . "
12

Terug naar Photoshop en kies Bestand > Opslaan voor web ( of Opslaan voor web en apparaten voor CS4 gebruikers) . Deze actie zal een dialoogvenster waar u het optimaliseren van uw gesneden beelden voor het web en Dreamweaver .
13

Maak bestandstype , kwaliteit en kleuraanpassingen aan elk van uw schijfjes in de rechterkolom van de dialoogvenster . Selecteer een stukje door erop te klikken in de etalage van het dialoogvenster. Fotografische afbeeldingen moeten worden opgeslagen als JPEG-bestanden in het drop-down net onder Preset en door gekleurde beelden zoals logo's of menu- knoppen kunnen in GIF-formaat worden opgeslagen voor optimale Web prestaties . Kwaliteit aanpassingen kunnen worden gemaakt in de twee vervolgkeuzelijsten hieronder . De meeste afbeeldingen kunnen hun kwaliteit verminderd , terwijl nog steeds op zoek prima op uw webpagina , dus hoe lager de kwaliteit tot je een merkbaar verschil zien . Dit maakt snellere uw pagina te laden .
14

Klik op Opslaan wanneer elke plak is aangepast . Kies HTML & Images in de dropdown Opmaak van het dialoogvenster dat verschijnt . Wijzig de doelmap op de map afbeeldingen in de map Web pagina aangemaakt op het bureaublad . Uw lay-out is nu geoptimaliseerd en klaar voor gebruik in Dreamweaver . De elementen van uw pagina kan worden gevonden in de bestanden palet in Dreamweaver , aan de rechterkant van uw raam website . U kunt een kijkje krijgen op je hele layout gesneden en geoptimaliseerd voor het web en onderhouden zoals je het in Photoshop ontworpen door het openen van het . Html- bestand gemaakt in de map afbeeldingen wanneer u klaar de Opslaan voor web in Photoshop .

Previous: Next:
  Photoshop
·Advanced Photoshop Effecten 
·Hoe je Adobe Photoshop Album S…
·Hoe je T - shirts maken in Pho…
·Hoe maak je een karakter invoe…
·Adobe Photoshop Color Correcti…
·Hoe kan ik een actie in Photos…
·Hoe te driehoeken in Photoshop…
·Hoe kan ik een achtergrond op …
·Hoe maak je mensen kijken Skin…
  Related Articles
Hoe maak je een Tilde gebruiken in een W…
Hoe kan ik een Umlaut gebruiken in een W…
Hoe maak je een Holiday Nieuwsbrief op u…
Hoe maak je een viervoudige Wenskaart ma…
Hoe maak je een Tent - Fold Wenskaart Ma…
Hoe te Spelling en grammatica fouten te …
Hoe kan ik een document Zoom in Word 200…
Hoe je tekst rond een afbeelding in Word…
Hoe je de uitlijning van de tekst wijzig…
  Software Articles
·Hoe verwijder ik Meerdere Hyperlinks in …
·Hoe maak je een zaak in API SugarCRM Cre…
·Hoe de gegevensbron wijzigen in Excel 20…
·Hoe te converteren naar AVI MV4 
·Mijn iTunes is bevroren 
·LANDesk Vs . LANguard 
·Hoe te verwijderen Talen in de MS Word 2…
·Hoe maak je een videoclip converteren na…
·Wordpad Tutorial 
Copyright © Computer Kennis http://www.nldit.com