Verkossa on valtava määrä verkkosivustomalleja, mutta niillä on yksi haitta - ne eivät ole ainutlaatuisia. Jos sivuston omistaja ei halua sivustonsa toistuvan muualla, hän voi tilata mallin ammattimaiselta suunnittelijalta tai yrittää luoda sen itse.
Se on välttämätöntä
Adobe Photoshop -ohjelma
Ohjeet
Vaihe 1
Oman mallin luominen ei ole niin vaikea tehtävä kuin se saattaa tuntua ensi silmäyksellä. Toimiakseen tarvitset Adobe Photoshopin - tietysti, sinulla on oltava ainakin perustiedot sen kanssa työskentelystä. Mutta ennen ohjelman käynnistämistä ja luomisen aloittamista sinun on mietittävä tulevaa suunnittelua etukäteen. Kätevin tapa tehdä tämä on ensin tutustua vähintään sata valmiita malleja, arvioida niiden edut ja haitat. Kiinnitä huomiota tiettyjen muotoiluelementtien onnistuneisiin ratkaisuihin. Tämä ei tarkoita sitä, että kopioisit ne, mutta on järkevää ottaa perustaksi kauniita ja käteviä ratkaisuja.
Vaihe 2
Muiden mallien ja oman luovuutesi analyysin perusteella sinun pitäisi saada käsitys siitä, miltä sivustosi näyttää. On parasta tehdä karkeita luonnoksia tulevasta suunnittelusta värikynillä tavallisille A4-arkeille. Aloita työskentely Photoshopin kanssa vasta, kun sinulla on selkeä käsitys siitä, mitä aiot piirtää.
Vaihe 3
Käynnistä Photoshop, luo uusi 1200x1600-projekti, aseta läpinäkyvä tausta. Käynnistä Viivain-työkalu, jos se ei ole vielä päällä, ja tee tämä painamalla näppäinyhdistelmää Ctrl + R. Ota napsautus käyttöön: Näytä - Napsautus.
Vaihe 4
Nyt meidän on jaettava malli ohjaimilla, jotka näyttävät sen elementtien reunat - sivut, sarakkeet jne. Haluat esimerkiksi jakaa mallin siten, että vasemmalla on kapea sarake, oikealla leveä sarake mallin oikealla puolella ja yläosassa on tilaa ylätunnisteelle. Tämä tarkoittaa, että tarvitset kolme pystysuoraa viivaa (mallin vasen reuna, oikea ja niiden välinen viiva) ja vaakasuoran, joka näyttää otsikon alarajan. Määritä pystysuora viiva siirtämällä kohdistin vasemmanpuoleiseen viivaimeen, painamalla V ja pitämällä näppäintä painettuna, vetämällä viiva haluamaasi kohtaan. Tee sama kahden muun pystysuoran viivan kanssa. Vaakasuorat rakennetaan samalla tavalla, käytetään vain ylempää hallitsijaa.
Vaihe 5
Etsi mallipohjalle tausta, sen tulisi olla pieni toistuva kuvio. Avaa se Photoshopissa, valitse, kopioi. Liitä sitten malliin niin monta kertaa kuin sinun on täytettävä se taustalla. Liittäminen tapahtuu seuraavasti: "Muokkaa" - "Liitä" ja vedä sitten tausta-alue haluamaasi kohtaan. Kuvan lisääminen on vieläkin nopeampi Ctrl + V-komennolla. Lisää tausta sivuston otsikkoon samalla tavalla. Voit luoda taustan erilaisilla liukuväritäytöillä.
Vaihe 6
Piirrä lyijytyökalulla mallin reunat keskittymällä jo piirrettyihin viivoihin (eli niiden päälle). Olet saanut yksinkertaisen mallin perustan, nyt sinun on täydennettävä sitä tarvittavilla yksityiskohdilla - navigointipainikkeet, valikkorivit, erilaiset koriste-elementit jne. Lisätietoja painikkeiden ja muiden elementtien luomisesta on vastaavissa artikkeleissa työskentelystä Adobe Photoshopin kanssa.
Vaihe 7
Malli on luotu, nyt sinun on leikattava se paloiksi lisätäksesi ne HTML-sivulle. Leikkaa viipaletyökalulla. Löydät sen napsauttamalla hiiren kakkospainikkeella Kehystyökalua ja valitsemalla avautuvasta valikosta Leikkaus. Nyt voit sijoittaa mallin haluamallasi tavalla ja tallentaa sitten: "Tiedosto" - "Tallenna verkkoon". Valitse avautuvassa ikkunassa tiedostotyyppi: HTML & images, määritä tiedoston nimi: index.htm ja tallenna se. Sinulla on index.htm-tiedosto ja kuvakansio viipaloiduilla kuvilla.
