Jos haluat luoda oman verkkosivusi, ymmärrä, miten voit tehdä sivuston Photoshopissa. Adobe Photoshop on graafinen editori. On mahdollista piirtää asetteluja ja niiden yksittäisiä elementtejä. Tämä on melko pitkä ja monimutkainen prosessi. Vuosien mittaan web-suunnittelijat ovat oppineet suunnittelemaan malleja ja asettamaan heille verkkosivuja. Mutta yksinkertainen ulkoasu voi kerätä henkilöä. Tarvitaan vain Photoshopin perustiedot ja fantasia.

Photoshopissa piirtää yksinkertainen sivuston suunnittelu jopa aloittelija voi

Ensimmäistä kertaa olet epätodennäköistä, että saat sivun, kuten design-mestarit. Mutta voit tehdä houkuttelevan ja epämiellyttävän palvelun.

Vähän noin sivustojen luomisesta

Joidenkin termien dekoodaus.

• CSS (Cascading Style Sheets) ja HTML (HyperText Markup Language) ovat tietokoneen kieliä, joita käytetään web-resurssien luomiseen. Jos avaat minkä tahansa Internet-sivun lähdekoodin, on HTML-tunnisteita.
• Asettelu - materiaalien asettelu ja asennus ulkoasusta, kääntämällä se html-malliksi. Se riippuu siitä, miten esineet on järjestetty, onko ne näyttävät kauniilta koko koostumuksesta, onko se hyödyllistä lukea tekstiä ja vastaavia.
• Tasot ovat osa ulkoasua. Yhdessä ne muodostavat suuren kuvan. Mutta niitä voidaan muokata ja siirtää toisistaan ​​erillään.
• Elin on paikka, jossa sisältö sijaitsee. Sen ympärillä voi olla taustaa.
• Kehys (kehys) - sivuelementti. Lohko, jossa on joitakin tietoja, kuva, muoto.

Tee upea sivusto tyhjästä vain ammattilainen. Tätä varten sinun täytyy ymmärtää web-suunnittelu ja tietää HTML. Koska valmiiden asettelujen on oltava edelleen päteviä.

Mutta on olemassa yksinkertaisia ​​tapoja. On olemassa verkkopalveluja ja ohjelmia, jotka muuntaa .psd (Photoshop-tiedostomuodon) automaattisesti HTML: ksi ja CSS: ksi. Sinun täytyy vain koota malli oikein.

Photoshopin käyttäminen ei ole välttämätöntä olla taiteilija ja ymmärtää kaikki ohjelman vaihtoehdot. Mutta jos aloitit sen ja et tiedä, miten voit lisätä tekstiä, piirtää geometrinen muoto, kopioi kerros, muuttaa väriä tai valita mielivaltaisen alueen, sinun pitäisi aloittaa jotain yksinkertaisempaa. Jotta voit tehdä asettelun Photoshopissa, tarvitsemme vähintään alkutaidot apuohjelman kanssa työskentelemiseen ja perusfunktioiden ymmärtämiseen (kuinka piirtää viiva, aseta opas, valitse fontti ja vastaavat).

Yleisiä tietoja verkkopalveluista on myös hyödyllinen. Sivustoa voidaan tunnistaa seuraavilla kriteereillä:

• Yksi sivu. Kaikki resurssin sisältö, sisältö ja sisältö ovat yhdessä paikassa. Yhdellä sivulla. Jos haluat tarkastella palvelun sisältöä, älä napsauta linkkejä tai avaa uusia välilehtiä. Samaan aikaan sivusto voi olla mielivaltaisesti suuri. Se sopii pieneen mainoslehteen ja valtavaan 600-sivuiseen romaaniin.
• Täynnä. Mukana on siis useita sivuja. Näitä voivat olla esimerkiksi "Koti", "Forum", "Vieraskirja", "Vastaukset usein kysyttyihin kysymyksiin", "Yhteystiedot". Jokaiselle niistä on tehtävä ulkoasu. Tarvitset myös navigointia ja sivustokarttaa: erillinen osio, jossa on linkit palvelun kaikkiin osiin. Jotta käyttäjä voi nopeasti löytää tarvitsemansa kirjanmerkin.
• "Kumi". Muuttaa kokoa näytön tarkkuuden mukaan. Kiristetty yhdessä selainikkunan kanssa. Meidän on laskettava etukäteen, mitä sivusto näyttää. Jos leveys on 1300, kaikki näytetään normaalisti, niin 900 pikselissä osa artikkelista voi "mennä" kehysrajan yli, kuvat eivät nouse ylös kuin pitäisi, ja flash-animaatio sulkee syöttömuodon.
• Kiinteä. Sivuston runko ei muuta kokoa. Helpoin ja käytännöllisin vaihtoehto. Jotta sivu näyttää vankalta ja ikkunaa laajennettaessa ei ollut "tyhjää" tilaa reunoilla, voit tehdä kumipinnan.

layout

Ensinnäkin päättää, mitä suunnittelua tarvitset. Ei riitä, että yksinkertaisesti "kuvitellaan" ja järjestetään sitten Photoshopissa. On oltava selkeä näkymä. Piirrä kuvio tavalliselle paperille. Ei tarvitse piirtää jokaista kuvaa. Riittävä järjestelmä: muutama suorakulmio ja ympyrä, jotka tavallisesti merkitsevät verkkosivun elementtejä. Ajattele, miten kehykset sijoitetaan, missä on parempi sijoittaa logo, missä voit sijoittaa tietoja kävijöille.

Katso esimerkkejä Internet-sivujen sivuista. Ajattele, mihin haluat ja miksi. Olipa kyseessä kätevä kehysten järjestäminen, miellyttävät värit tai mielenkiintoinen lähestymistapa suunnitteluun. Kopioi jonkun toisen muotoilu ei ole sen arvoista. Se riittää vetämään siitä inspiraatiota. Tämän jälkeen voit selvittää, miten piirtää sivusto Photoshopissa.

• Luo uusi asiakirja (Tiedosto - Uusi). Mitat valitaan pienillä näytöillä tai matalalla resoluutiolla: 1024 × 720 pikseliä. Tämä on "informaation" osan leveys eikä koko kuva. Jos haluat 1100 pikselin sivun, sinun on tehtävä asiakirja, jonka leveys on 1300 pikseliä. Itse asiassa pituus ei ole kiinteä - se riippuu siitä, kuinka paljon sisältöä haluat sijoittaa resurssiin. Nämä ovat suosituksia, ei sääntöjä. Voit rakentaa suuren asettelun, jos haluat.
• Kytke hallitsija päälle. Paina Ctrl + R tai siirry Näytä-valikkoon - Viivaimet. Tämä on mittakaava. Hän ilmestyy kuvan ulkopuolelle. Ilman sitä sinun on arvioitava koko ja etäisyys "silmällä", mikä ei vaikuta kovin hyvin lopputulokseen. Voit määrittää tämän toiminnon Muokkaa - Asetukset - Mittausyksiköt ja Viivaimet -valikossa. Siellä on parempi vaihtaa senttimetriä pikseliä kohti yhden parametrin kanssa työskentelemiseksi eikä laskea kuinka monta pistettä yksi tuuma.
• Sinun pitäisi myös aktivoida verkko. Näytä - Näytä - Ruudukko tai Ctrl + E (voit myös sammuttaa sen). Tämä on eräänlainen häkin muistikirja. Photoshopissa näytetään pystysuorat ja vaakasuorat viivat. Ne eivät näy itse piirustuksessa. Ne näkyvät vain muokkauksen yhteydessä. Tätä toimintoa tarvitaan mallin elementtien tasaiseksi järjestämiseksi. Joku helpompi työskennellä ruudukolla, joku ilman sitä. On parasta ottaa se käyttöön, jos teet sivuston ensimmäistä kertaa.
• Voit määrittää sen valitsemalla Muokkaa - Asetukset - Oppaat, Ruudukko ja Fragmentit. Siellä voit valita solujen koon sekä viivojen värin ja tyypin (kiinteät, katkoviivat, pisteistä).

Esimerkki nykyaikaisesta sivuston suunnittelusta

• Asenna ohjaimet. Niiden välillä on tärkein sisältöresurssi - sivuston kiinteä runko. Ja niiden takana - kumipinta. Voit tehdä tämän napsauttamalla Näytä - Uusi opas. Valitse "Orientation" -ruutuun "Vertical". Kirjoita kenttään "Sijainti" etäisyys, jolla kohde on vasemmasta reunasta. Keskity hallitsijan mittakaavaan.
• Tarvitaan kaksi ohjainta - sivun rungon oikealle ja vasemmalle puolelle. Niiden välisen etäisyyden tulisi olla enintään 1003 pikseliä näytöille, joiden resoluutio on 1024 × 720. Voit määrittää eri leveyden. Suuret resurssit ovat kuitenkin hankalat katsomaan pieniä näyttöjä.
• Miksi 1003, ei 1024? Jos sivusto tarvitsee vierittää alaspäin ("vieritä") alaspäin, selaimella on pystysuuntainen liukusäädin vierittääksesi. Tämän liukusäätimen koko on noin 21 pikseliä. Jos et ota sitä huomioon, näkyviin tulee vaakasuora vieritys. Ja resurssien kävijän on siirrettävä sivu vasemmalle ja oikealle nähdäksesi kaikki tiedot.
• Rungon tulisi olla kankaan keskellä.

Nämä ovat työn valmisteluvaiheita. Photoshopin asettelu riippuu mielikuvitustasi ja makusi. Siksi on vain teknisiä yleisiä suosituksia.

• Ensinnäkin ulkoasu tarvitsee taustaa. Se voidaan tehdä itsenäisesti tai ladata verkosta. On paljon resursseja, joissa on ilmaisia ​​kuvioita. Älä aseta tekijänoikeuden alaisia ​​kuvia. Älä ota kirkasta tai kontrastista taustaa. On parempi olla käyttämättä tekstiilejä, joissa on paljon pieniä silmiinpistäviä yksityiskohtia. He häiritsevät kävijää sivun rungosta.
• Jos yksinkertaisesti avaat piirustuksen Photoshopissa, se on uudessa välilehdessä, eikä sitä lisätä ulkoasuun. Korosta koko tausta. Tätä varten tarvitaan näppäimistön pikanäppäin Ctrl + A tai Valintatyökalu (se sijaitsee vasemmalla ruudulla). Kopioi se ja liitä se malliin.
• Tämä vaihtoehto on käytettävissä myös, jos valitset Muokkaa - Liitä.

• Uusi kerros näkyy oikeassa alakulmassa olevassa luettelossa. Napsauta sitä hiiren oikealla painikkeella nähdäksesi mahdolliset toimet. "Tasoasetukset" -valikossa voit muuttaa sen nimeä. "Overlay-asetukset" ovat perusasetuksia. Voit tehdä siitä hehkua, kohokuvioida, kiiltoa, aivohalvausta, kaltevuutta. Jos valitset vaihtoehdon, muutokset näkyvät heti Photoshopissa. On olemassa joukko valmiita tyylejä. Niinpä normaalista tekstuurista luodaan alkuperäisiä suunnitteluratkaisuja. Ja älä tee mitään ylimääräistä.
• "Suodattimet" -painike on valikkorivillä. Sieltä löydät erilaisia ​​jäljitelmiä (pastelli, akvarelli, lyijykynät), muotoilua, kuvioita, luonnoksia, kohokohtia, hämärtymistä.
• Voit valita tavallisen taustan. Väri riippuu henkilökohtaisesta mieltymyksestäsi. Mutta on parempi olla tekemättä sitä mustaksi tai myrkylliseksi. Sopivat vuodevaatteet ja pehmeät sävyt tai läpinäkyvä kylmä (esimerkiksi vaaleanharmaa, vaaleansininen).
• Tekstuurien jälkeen voit kerätä itse sivuston. Täällä sinulla on vapaus luoda.
• Jos haluat lisätä jonkinlaista muotoa (viiva, neliö, soikea), napsauta oikealla olevaa vastaavaa painiketta. Siinä on senhetkisen valitun kohteen ulkonäkö ja nimi. Esimerkiksi "Ellipse Tool", "Polygon Tool". Photoshopissa muotojen määrä on rajoitettu. Mutta ne löytyvät Internetistä, ladataan ja asennetaan Edit - Set Management - valikon kautta. Määritä Tyyppi-kenttään, mitkä kohteet ovat ladattavissa.
• Ohjelman eri versioissa näitä lukuja kutsutaan eri tavoin. Joko painikkeella, joka on pienen mustan kolmion muodossa (oikealla) tai vaihdekuvakkeella tai "Pisteen muoto" -kohdassa (se on valikkorivin alapuolella). Esineet voidaan yhdistää, ryhmitellä, tehdä niistä koostumuksia.
• Voit luoda tekstikehyksen napsauttamalla painiketta T-kirjaimen muodossa. Valitse sitten paikka, jossa merkit tulisi sijoittaa, napsauta ja kirjoita mitä tarvitset.
• Jokainen elementti on parempi laittaa erilliseen kerrokseen. Niinpä on helpompaa siirtää ja muokata ilman, että kosketat koko sivustoa. Voit lisätä tämän objektin valitsemalla Tasot - Uusi.

• Jos haluat projisoida kuvan ennalta valittuun alueeseen, valitse ensin se ja avaa sitten Edit - Paste Special. Vaihtoehtoja on "Lisää sen sijaan" ja "Lisää ulkopuolelle".
• Voit siirtää osan kuvasta uudelle kerrokselle. Voit tehdä tämän valitsemalla sen, napsauttamalla sitä hiiren kakkospainikkeella ja valitsemalla "Leikkaa uudelle tasolle".
• Muodot, kuvat ja kuvat ovat samat vaihtoehdot kuin taustalla: tehosteet, suodattimet ja niin edelleen.
• Photoshopissa on vielä monia työkaluja piirtämiseen: harjat, kynät, lyijykynät.

Voit tehdä laadukkaan resurssin myös yksinkertaisista geometrisista kohteista.

On resursseja, joissa on ilmaiset asettelut. Lataa ne Photoshopiin ja muokkaa tarvittaessa. Se on helpompaa ja nopeampaa kuin tyhjästä.

Miten kääntää asettelun html-tiedostoksi?

Selvitit, miten voit luoda sivuston Photoshopissa ja suunnitellut ensimmäisen asettelun. Mitä seuraavaksi? Loppujen lopuksi se ei voi vain ladata hosting.

Se voidaan antaa kooderille, joka tekee laadukkaan html-mallin. Mutta on olemassa toinen vaihtoehto. Muunna PSD-tiedosto HTML- ja CSS-palveluiksi.

• Psd2Html-muunnin. Maksettu online-palvelu. Muunna Photoshop-muoto nopeasti verkkosivumalliksi. Tämän resurssin avulla, jopa huonolaatuisesta asettelusta, voit luoda kunnon sivuston.
• HTML Panda.
• PSDCenter
• 40 dollarin merkintä.

rakentajien

Ulkoasuja voidaan myös kerätä erityisistä sivustoista. Yleensä on selkeä ja intuitiivinen käyttöliittymä. Voit koota mallin eri osista. Jotkut elementit ovat parhaiten Photoshopissa. Joten saat alkuperäisen suunnittelun. Huolimatta siitä, että se luotiin rakentajalle.

Photoshopissa ei vain piirtää. Se kerää ulkoasuja sivustoille. Useimmissa tapauksissa tämä tapahtuu päälliköiden toimesta. Mutta yksinkertainen malli voi tehdä kenellekään henkilölle. Tarvitaan vain Photoshopin perustiedot.