Saidi kujunduse loomine Photoshopi abil

Kui soovite luua oma veebilehe, mõista, kuidas teha Photoshopis veebisaiti. Adobe Photoshop on graafiline redaktor. On võimalik joonistada paigutusi ja nende üksikuid elemente. See on üsna pikk ja keeruline protsess. Aastate jooksul on veebidisainerid õppinud, kuidas kujundada malle ja neile veebilehti panna. Kuid lihtne paigutus võib koguda isikuid. Vaja on ainult põhilisi Photoshopi teadmisi ja fantaasia.

Photoshopis on lihtne veebilehe kujundamine isegi algajale

Esmakordselt ei ole tõenäoline, et saaksite lehekülje nagu disaini meistrid. Aga te saate joonistada atraktiivse ja ebamugava teenuse.

Vähe saitide loomisest

Mõnede terminite dekodeerimine.

  • CSS (Cascading Style Sheets) ja HTML (HyperText Markup Language) on arvuti keeled, mida kasutatakse veebiressursside loomiseks. Kui avate internetilehekülje lähtekoodi, on HTML-märgendid.
  • Paigutus - paigutuse materjalide paigutus ja paigaldus, muutes selle html-malliks. See sõltub objektide paigutamise viisist, olenemata sellest, kas nad on üldises kompositsioonis ilusad, kas on mugav lugeda teksti ja muud sarnast.
  • Kihid on osa paigutusest. Koos moodustavad nad suure pildi. Kuid neid saab muuta ja üksteisest eraldada.
  • Keha on koht, kus sisu asub. Selle ümber võib olla taust.
  • Raam (raam) - leheelement. Plokk, mis sisaldab teavet, pilti, vormi.

Teha uimastamise kohas nullist ainult professionaalne. Selleks peate mõistma veebidisaini ja tundma HTML-i. Kuna valmis paigutus peab endiselt pädevalt kehtestama.

Kuid on veel lihtsamaid viise. On olemas võrguteenused ja programmid, mis konverteerivad .psd (Photoshopi failivorming) automaatselt HTML-i ja CSS-ks. Sa pead lihtsalt malli õigesti kokku koguma.

Photoshopi kasutamiseks ei ole vaja olla kunstnik ja mõista kõiki programmi võimalusi. Aga kui te seda esimest korda alustasite ja ei oska teksti sisestada, joonistada geomeetriline kuju, dubleerida kihti, muuta värvi või valida suvaline ala, peaksite alustama midagi lihtsamat. Paigutuse tegemiseks Photoshopis on vaja vähemalt esmaseid oskusi kasuliku töötamisel ja põhifunktsioonide mõistmisel (kuidas joonistada joon, panna juhend, valida font ja muu sarnane).

Kasulik on ka üldine teave võrguteenuste kohta. Saidi saab iseloomustada järgmiste kriteeriumidega:

  • Üks leht. Kõik ressursi elemendid, sisu, kogu sisu on ühes kohas. Ühel lehel. Teenuse sisu vaatamiseks ärge klõpsake linkidel ega avage uusi vahekaarte. Samal ajal võib sait ise olla meelevaldne. See sobib väikese reklaamibrošüüri ja tohutu 600-leheküljelise romaaniga.
  • Mitmeleheküljeline. Seega sisaldab see mitmeid lehekülgi. Need võivad olla näiteks “Kodu”, “Foorum”, “Külalisteraamat”, “Vastused korduma kippuvatele küsimustele”, “Kontaktid”. Igaühe jaoks peate tegema paigutuse. Teil on vaja ka navigatsiooni ja saidi kaarti: eraldi sektsioon, millel on lingid teenuse kõigile osadele. Et kasutaja saaks kiiresti leida vajaliku järjehoidja.
  • "Kummi". Muudab suurust sõltuvalt ekraani eraldusvõimest. Sirvitud koos brauseri aknaga. Me peame eelnevalt välja arvama, milline sait välja näeb. Kui 1300 laiusega kuvatakse kõik normaalselt, siis 900 pikselis võib osa artiklist minna kaadri piiridest kaugemale, pildid ei püsti nii, nagu peaks, ja flash-animatsioon sulgeb sisendvormi.
  • Fikseeritud Saidi keha ei muuda suurust. Lihtsaim ja kõige praktilisem valik. Lehekülje väljanägemise kindluseks ja akna laiendamisel ei olnud servade juures tühja ruumi, saate teha kummist tausta.

Paigutus

Esiteks otsustage, millist disaini vajate. Ei piisa lihtsalt "ette kujutada" ja siis korraldada Photoshopis. Peab olema selge vaade. Joonista muster tavalisele paberile. Iga pilti ei ole vaja uuesti joonistada. Piisavalt skeem: mõned ristkülikud ja ringid, mis tähistavad tavaliselt veebilehe elemente. Mõelge sellele, kuidas raamid asuvad, kus on parem panna logo, kuhu paigutada teavet külastajatele.

Vaadake veebilehtede näiteid. Mõtle, millised ja miks. Kas see on mugav raamide paigutus, meeldivad värvid või huvitav lähenemine disainile. Kopeeri kellegi disain ei ole seda väärt. Piisab sellest inspiratsiooni juhtida. Seejärel saate välja selgitada, kuidas Photoshopis veebilehte joonistada.

  • Uue dokumendi loomine (fail - uus). Mõõtmed valitakse väikeste monitoride või madala eraldusvõimega arvutustega: 1024 × 720 pikslit. See on "info" osa laius, mitte kogu pilt. Kui soovite lehekülge 1100 pikslit, siis tuleb teha dokument, mille laius on 1300 pikslit. Pikkus ei ole tegelikult fikseeritud - see sõltub sellest, kui palju sisu soovite ressursse paigutada. Need on soovitused, mitte reeglid. Soovi korral saate luua suure paigutuse.
  • Lülita joonlaud sisse. Vajutage klahvikombinatsiooni Ctrl + R või avage menüü Vaade. See on mõõteskaala. Ta ilmub pildist välja. Ilma selleta peate hindama suurust ja kaugust "silmade järgi", mis ei mõjuta lõpptulemust väga hästi. Seda funktsiooni saab seadistada menüüs Redigeerimine - Seaded - Mõõtühikute ja joonikute menüü. Seal on parem muuta sentimeetrit pikslite kohta, et töötada ühe parameetriga, ja mitte arvutada, kui palju punkte ühes tollis.
  • Samuti peaksite võrku aktiveerima. Vaade - Näita - Võrgustik või Ctrl + E (saate ka välja lülitada). Tegemist on puuri analoogiga sülearvutist. Photoshopis kuvatakse vertikaalsed ja horisontaalsed jooned. Nad ei ilmu joonisele ise. Neid saab näha ainult redigeerimisel. See funktsioon on vajalik malli elementide ühtlaseks korraldamiseks. Keegi, kes on võrguga mugavam töötada, keegi ilma selleta. Kõige parem on see sisse lülitada, kui teete saidi esmakordselt.
  • Selle konfigureerimiseks minge Edit - Settings - Guides, Grid ja Fragments. Seal saab valida rakkude suuruse, samuti värvi ja liini tüübi (tahke, punktiiritud, punktidest välja).

Näide kaasaegsest ehitusest

  • Paigaldage juhikud. Nende vahel on peamine sisuressurss - saidi kindel keha. Ja nende taga - kummist taust. Selleks klõpsake View - New Guide. Märkige ruut „Orientatsioon“ „Vertikaalne“. Väljal "Asukoha" kirjutage kaugus, mille juures objekt asub vasakust servast. Keskenduge joonlaua skaalale.
  • Vaja on kahte juhendit - lehekülje keha paremale ja vasakule. Nende vaheline kaugus peaks olema maksimaalselt 1003 pikslit, kui eraldusvõime on 1024 × 720. Te saate määrata erineva laiuse. Kuid suured ressursid on väikeste monitoride jaoks ebamugavad.
  • Miks 1003, mitte 1024? Kui sait peab allapoole kerima ("keri"), on brauseril liikumiseks vertikaalne liugur. Selle liuguri suurus on umbes 21 pikslit. Kui te seda arvesse ei võta, ilmub horisontaalne kerimine. Ja ressursi külastaja peab lehekülje vasakule ja paremale liikuma, et näha kogu teavet.
  • Keha peaks olema lõuendi keskel.

Need on töö ettevalmistavad etapid. Photoshopi paigutuse tegemine sõltub teie kujutlusvõimest ja maitsest. Seetõttu on ainult tehnilised üldised soovitused.

  • Esiteks vajab teie paigutus tausta. Seda saab teha sõltumatult või võrku alla laadida. Vaba tekstuuriga on palju ressursse. Ärge asetage autoriõigusega kaitstud saidi piltidele. Ärge võtke heledat või kontrastset tausta. Parem on mitte kasutada tekstuuri suure hulga väikeste pilkupüüdevate detailidega. Nad tõmbavad külastajale lehekülje kehast tähelepanu.
  • Kui sa lihtsalt avad Photoshopis joonise, on see uuel vahekaardil ja seda ei lisata paigutusele. Tõstke esile kogu taust. Selleks vajate klaviatuuri otsetee Ctrl + A või valiku tööriista (see asub vasakul paanil). Kopeerige see ja kleepige see malli.
  • Ka see valik on saadaval, kui klõpsate Edit - Paste.

  • Alumine parempoolne loend kuvab uue kihi. Klõpsake seda hiire parema nupuga, et näha võimalikke toiminguid. Menüüs "Kihi valikud" saate selle nime muuta. "Overlay Settings" on põhilised pildiseaded. Teil on võimalik muuta see hõõguvaks, reljeefiks, läikivaks, insultiks, gradientiks. Kui valite suvandi, ilmuvad muudatused kohe Photoshopis. On olemas valmis stiilid. Nii luuakse standardsest tekstuurist originaalsed disainilahendused. Ja ärge joonistage midagi.
  • Nupp „Filtrid“ on menüüribal. Seal leiad erinevaid imitatsioone (pastell, akvarell, pliiatsid), stiili, tekstuure, visandeid, esiletõstmisi, hägusust.
  • Võite valida tavalise tausta. Värv sõltub teie isiklikust eelistusest. Aga see on parem mitte teha seda mustaks või mürgiseks. Sobivad voodid ja pehmed toonid või läbipaistev külm (näiteks helehall, kahvatu sinine).
  • Pärast tekstuuride kogumist saate ise saidi koguda. Siin on teil vabadus luua.
  • Mõne kuju (rida, ruut, ovaalne) lisamiseks klõpsa paremal asuvale nupule. Sellel on joonistamiseks valitud objekti välimus ja nimi. Näiteks “Ellipse tööriist”, “Polygon Tool”. Photoshopis on kujundite arv piiratud. Kuid neid võib leida internetist, alla laadida ja installida menüüst Edit - Set Management. Tippige väljale Tüüp, millist objektide kogumit laadite.
  • Programmi erinevates versioonides nimetatakse neid numbreid erinevalt. Kas nupuga väikese musta kolmnurga kujul (see on paremal) või käigukasti ikooniga või punkti „Punkti kuju” all (see on menüüriba all). Objekte saab kombineerida, rühmitada, koostada.
  • Teksti raami loomiseks klõpsake nupul suurtähtedega T. Seejärel valige koht, kus märgid peaksid asuma, klõpsake seal ja tippige see, mida vajate.
  • Iga element on parem panna eraldi kihile. Seega on mugavam liikuda ja redigeerida ilma kogu saidi puudutamata. Selle objekti lisamiseks minge jaotisse Kihid - Uus.

  • Pildi projektimiseks eelnevalt valitud piirkonda valige see kõigepealt ja avage seejärel valik Edit - Paste Special. Valikud on “Lisa selle asemel” ja “Lisa välja”.
  • Te saate osa pildist üle kanda uuele kihile. Selleks valige see, paremklõpsake seda ja valige "Lõika uuele kihile".
  • Kujundite, pealdiste ja piltidega on saadaval samad valikud nagu taustal: efektid, filtrid ja nii edasi.
  • Photoshopis on veel palju tööriistu joonistamiseks: harjad, pliiatsid, pliiatsid.

Kvaliteetset ressurssi saate teha isegi lihtsatest geomeetrilistest objektidest.

On olemas tasuta paigutusega ressursid. Laadige need Photoshopisse ja vajadusel muutke. See on lihtsam ja kiirem kui nullist.

Kuidas paigutust muuta html-failiks?

Te arvasite, kuidas luua Photoshopis veebisait ja kujundasite oma esimese paigutuse. Mida edasi teha? Lõppude lõpuks, see ei saa lihtsalt laadida hosting.

Seda saab anda kodeerijale, kes teeb kvaliteetse html-malli. Kuid on veel üks võimalus. Kasutage teenuseid, et teisendada PSD-fail HTML ja CSS.

  • Psd2Html muundur. Tasuline võrguteenus. Kiiresti konverteerige Photoshopi formaat veebilehe malliks. Selle ressursi abil saate isegi kehva kvaliteediga paigutuse korral luua korraliku saidi.
  • HTML Panda.
  • PSDCenter
  • 40 Dollar Markup.

Konstruktorid

Paigutusi saab koguda ka erilistel saitidel. Tavaliselt on olemas selge ja intuitiivne kasutajaliides. Lihtsalt koguge malli erinevatest osadest. Mõned elemendid on parimad Photoshopis. Nii saad algse disaini. Vaatamata sellele, et see loodi konstruktoril.

Photoshopis mitte ainult ei joonista. See kogub saitide paigutusi. Enamikul juhtudel teeb seda meistrid. Lihtne mall võib aga teha iga isiku. Vaja on ainult Photoshopi põhiteadmisi.