Ammattimaiset verkkosuunnittelijat kehittävät verkkosivustomalleja, yleensä tehokkaissa grafiikkaeditorissa, kuten Adobe Photoshop. Työn tuloksena on tiedosto, jossa on kuva, joka tässä muodossa toimitetaan asiakkaalle. Valmiiden mallien eli verkkosivujen asettamiseksi sinun on leikattava malli.
Välttämätön
rasterigrafiikkaeditori Adobe Photoshop
Ohjeet
Vaihe 1
Avaa mallitiedosto grafiikkaeditorissa Adobe Photoshop. Valitse valikosta Tiedosto ja Avaa tai paina näppäinyhdistelmää Ctrl + O. Siirry sen jälkeen näkyviin tulevaan valintaikkunaan hakemistoon, jossa on tiedosto, valitse se luettelosta ja napsauta "Avaa" -painiketta.
Vaihe 2
Valitse kätevä asteikko mallikuvan katselua varten. Käytä Zoom-työkalua tai pikavalikkokohteita. Valitse asteikko, jonka avulla kohdistin voidaan sijoittaa pikselitarkasti. Tämä on tarpeen referenssiviivojen asettamiseksi tarkasti.
Vaihe 3
Muodosta joukko viiteviivoja mallikuvan yläpuolelle. Ota viivainten näyttö käyttöön asiakirjaikkunoissa, jos se ei ole vielä päällä. Voit tehdä tämän painamalla Ctrl + R tai valitsemalla valikosta Näytä ja Viivaajat.
Vaihe 4
Lisää vaakasuuntainen viiva siirtämällä hiiren osoitin ylimmän viivaimen päälle. Pidä vasenta näppäintä painettuna. Siirrä hiiren kohdistin alas kuva-alueelle. Samoin oikean viivaimen avulla voit lisätä vaakasuoria viivoja.
Vaihe 5
Lisää tarvittava määrä vertailulinjoja ja sijoita ne mallin alueiden jakautumisen rajoille. Viivojen tulisi käydä läpi kaikki paikat, joihin haluat leikata mallin. Niiden tulisi rajoittaa kaikkia kuvia ja loogisia alueita (logo, sivuston otsikko, vaaka- ja pystysuuntaiset valikot jne.), Jotka esitetään verkkosivulla.
Vaihe 6
Aktivoi Slice-työkalu. Sen painike on pystysuorassa työkalurivissä.
Vaihe 7
Luo tarvittava määrä leikkausalueita Slice-työkalulla. Valitse kätevä asteikko mallin näyttämistä varten. Määritä alueiden rajat hiirellä. Kolmannessa vaiheessa lisätyt ohjeet antavat tarkan sijainnin luomiesi objektien rajoille. Säädä olemassa olevia alueita tarvittaessa viipaleiden valintatyökalulla.
Vaihe 8
Muuta leikkausalueiden ominaisuuksia tarpeen mukaan. Aktivoi viipaleiden valintatyökalu. Napsauta hiiren kakkospainikkeella haluamaasi aluetta. Valitse pikavalikosta Muokkaa leikkeen asetuksia -kohde. Valitse avautuvassa Slice Options -valintaikkunassa alueen tyyppi (kuva, tyhjä alue, taulukko), taustan täyttötila, määritä tarvittaessa nimi, kohde-URL, attribuutin alt="Image" sisältö ja muut arvot. Napsauta OK.
Vaihe 9
Leikkaa malli. Valitse valikosta Tiedosto ja Tallenna Webille ja laitteille tai paina Vaihto + Ctrl + Alt + S. Määritä Tallenna Webille ja laitteille -valintaikkunassa muoto ja kuvan pakkausparametrit, joihin malli leikataan. Napsauta Tallenna-painiketta. Tallenna optimoitu nimellä -valintaikkuna tulee näkyviin.
Vaihe 10
Valitse HTML ja kuvat (*.html) avattavasta Tiedostotyyppi-luettelosta ja kirjoita Tiedostonimi-kenttään tiedoston nimi, johon HTML-mallimerkinnät sijoitetaan. Valitse Viipaleet-luettelosta Kaikki viipaleet. Määritä lähtöhakemisto ja napsauta "Tallenna" -painiketta.
Vaihe 11
HTML-tiedosto sijoitetaan kohdehakemistoon, joka on itse asiassa valmis web-sivumalli. Kuvien alihakemisto sisältää joukon kuvia, joihin alkuperäinen malli leikattiin.
