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 .
|