Verkkosivustoa luodessa on erittäin tärkeä vaihe sivun suunnittelussa, joka myöhemmin ladataan ja julkaistaan verkossa. Tässä artikkelissa opit kuinka Adobe Photoshopilla piirtää pätevä ulkoasu verkkosivustolle, jonka perusteella voit myöhemmin muodostaa monimutkaisempia asetteluja.
Se on välttämätöntä
Adobe Photoshop -ohjelma
Ohjeet
Vaihe 1
Luo uusi tiedosto Photoshopissa (Ctrl + N), jonka mitat ovat 1040x1400, missä korkeus on 1400. Kytke viivaimen näyttö päälle (Ctrl + R) ja aseta pikselit mittayksiköiksi viivaimen asetuksissa.
Vaihe 2
Aloita ohjainten venyttäminen niin, että ne sopivat asetteluruutujen rajoihin. Venytä sivureunoja siten, että reunoihin jää 40 pikseliä. Ylä- ja alareunan tulisi myös jättää 40 pikseliä kummallekin puolelle taustan reunoihin.
Vaihe 3
Valitse sitten ylätunnisteen opas, joka on 200 kuvapistettä alaspäin taustan yläosasta.
Vaihe 4
Muodosta sivupalkit asettelun vasemmalle ja oikealle puolelle asettamalla ohjaimet 240 pikseliä taustarajasta vasemmalle ja 800 pikseliä oikealle.
Vaihe 5
5px sisäänpäin vasemmasta ja oikeasta sivupalkista ja vedä vielä kaksi pystysuuntaista ohjainta. Vedä sitten vielä kaksi ohjainta 245 px vasemmalle ja 795 px oikealle.
Vaihe 6
Mittaa nyt otsikon reunasta 30px ja piirrä vaakasuuntainen opas vaakasuuntaista valikkoa varten.
Vaihe 7
Valitse vaakasuoran valikon kapea alue, jonka olet juuri merkinnyt suorakulmaisella valinnalla M-näppäimellä. Valitse täyttötyökalu ja täytä alue neutraalilla vaaleanharmaalla värillä.
Vaihe 8
Valitse täyttötyökalu ja täytä alue neutraalilla vaaleanharmaalla värillä. Napsauta "Valitse-muokkaa-pakkaa" -valikkoa, määritä 1 pikselin vaihtoehto ja napsauta "OK". Täytä alue vaaleammalla harmaalla sävyllä - sinulla on valikkokehys.
Vaihe 9
Luo uusi kerros, valitse sopiva kuva sivuston kuvakkeelle tai logolle ja avaa se.
Vaihe 10
Lisää kuva uuteen tasoon otsikossa ja aseta se vasempaan reunaan. Kirjoita kuvan oikealle puolelle tekstin otsikko millä tahansa fontilla.
Vaihe 11
Suunnittele verkkosivustosi lohkot samalla värimallilla kuin äskettäin luotu otsikko. Valitse vasemman sivupalkin alue ja suorita samat kaksiväriset täyttöoperaatiot kuin valikkolohkossa.
Vaihe 12
Tee sama keskileveän sisältölohkon kanssa. Kopioi vasen sivupalkkikerros ja aseta se oikeaan sivupalkkiin.
Vaihe 13
Lisää tekstiä ulkoasuusi - valitse neutraali fontti ja täytä valikkojen otsikot, uutisesimerkit, valokuvat, tunnisteet ja linkit.
Vaihe 14
Viimeistele asettelu luomalla alatunniste tai alatunniste - kirjoita sinne tekijänoikeutesi ja yhteystietosi.
