Izrada dizajna web-lokacije pomoću Photoshopa

Ako želite stvoriti vlastitu web stranicu, shvatite kako napraviti stranicu u Photoshopu. Adobe Photoshop je grafički urednik. Moguće je nacrtati rasporede i njihove pojedinačne elemente. To je prilično dug i kompliciran proces. Tijekom godina, web dizajneri su učili kako dizajnirati predloške i postavljali web stranice na njima. No, jednostavan izgled može prikupiti bilo koju osobu. Potrebna su samo osnovna Photoshop znanja i fantazije.

U Photoshopu za crtanje jednostavnog dizajna web-mjesta čak i početnik može

Od prvog puta nije vjerojatno da ćete dobiti stranicu poput majstora dizajna. Ali možete privući atraktivnu i neudobnu uslugu.

Malo o stvaranju web-lokacija

Dekodiranje nekih pojmova.

  • CSS (Cascading Style Sheets) i HTML (HyperText Markup Language) su računalni jezici koji se koriste za stvaranje web resursa. Ako otvorite izvorni kôd bilo koje stranice na Internetu, bit će HTML oznake.
  • Izgled - izgled i instalacija materijala iz rasporeda, pretvarajući ga u html-predložak. To ovisi o tome kako su objekti raspoređeni, bilo da izgledaju lijepo u cjelokupnom sastavu, je li prikladno čitati tekst i slično.
  • Slojevi su dio izgleda. Zajedno čine veliku sliku. Ali oni se mogu uređivati ​​i pomicati odvojeno jedan od drugog.
  • Tijelo je mjesto gdje se nalazi sadržaj. Možda postoji pozadina oko nje.
  • Okvir (okvir) - element stranice. Blok s nekim informacijama, slikom, formom.

Napravite zapanjujući site od nule samo može biti profesionalni. Da biste to učinili, morate razumjeti web dizajn i znati HTML. Budući da je gotovi izgled mora i dalje kompetentno nametnuti.

No postoje i jednostavniji načini. Postoje online usluge i programi koji automatski konvertiraju .psd (format datoteke Photoshop) u HTML i CSS. Vi samo trebate ispravno sastaviti predložak.

Za korištenje Photoshopa nije potrebno biti umjetnik i razumjeti sve opcije programa. Ali ako ste ga prvi put pokrenuli i ne znate kako umetnuti tekst, nacrtati geometrijski oblik, duplicirati sloj, promijeniti boju ili odabrati proizvoljno područje, trebali biste početi s nečim jednostavnijim. Da bismo napravili raspored u Photoshopu, potrebna su nam barem početna znanja u radu s uslužnim programom i razumijevanje osnovnih funkcija (kako nacrtati liniju, staviti vodič, odabrati font i slično).

Opće informacije o mrežnim uslugama također su korisne. Stranica može biti karakterizirana sljedećim kriterijima:

  • Jedna stranica. Svi elementi, sadržaj, sav sadržaj izvora nalazi se na jednom mjestu. Na jednoj stranici. Da biste pregledali sadržaj usluge, nemojte kliknuti na veze niti otvoriti nove kartice. U isto vrijeme mjesto može biti proizvoljno veliko. To će se uklopiti u malu brošuru o oglašavanju i ogroman roman od 600 stranica.
  • Pun. Prema tome, uključuje mnoge stranice. To mogu biti, primjerice, "Početna", "Forum", "Knjiga gostiju", "Odgovori na često postavljana pitanja", "Kontakti". Za svaku od njih trebate napraviti raspored. Potrebna vam je i navigacija i karta web-mjesta: poseban odjeljak s vezama za sve dijelove usluge. Tako da korisnik može brzo pronaći knjižnu oznaku koja mu je potrebna.
  • „Guma”. Mijenja veličinu ovisno o razlučivosti zaslona. Rastegnut je uz prozor preglednika. Moramo unaprijed izračunati kako će stranica izgledati. Ako se s širinom od 1300 sve normalno prikazuje, onda u 900 piksela dio članka može "ići" izvan granica okvira, slike neće stajati onako kako bi trebale, a flash-animacija će zatvoriti obrazac za unos.
  • Fiksna. Tijelo stranice ne mijenja veličinu. Najjednostavnija i najpraktičnija opcija. Kako bi stranica izgledala čvrsto, a pri proširenju prozora nije bilo "praznog" prostora na rubovima, možete napraviti gumenu pozadinu.

raspored

Prvo odlučite koji vam dizajn treba. Nije dovoljno jednostavno "zamisliti", a zatim organizirati u Photoshopu. Mora biti jasan pogled. Nacrtajte uzorak na običnom papiru. Nema potrebe ponovno crtati svaku sliku. Dosta sheme: nekoliko pravokutnika i krugova, koji konvencionalno označavaju elemente web stranice. Razmislite o tome kako će se okviri smjestiti, gdje je bolje staviti logotip, gdje ćete postaviti informacije za posjetitelje.

Pogledajte primjere stranica na Internetu. Razmislite koje vam se sviđaju i zašto. Bilo da se radi o prikladnom rasporedu okvira, ugodnih boja ili zanimljivom pristupu dizajnu. Kopiraj tuđi dizajn nije vrijedan toga. Dovoljno je izvući inspiraciju iz nje. Nakon toga možete shvatiti kako nacrtati stranicu u Photoshopu.

  • Izradite novi dokument (Datoteka - Novo). Dimenzije su odabrane s izračunom na malim monitorima ili niskoj razlučivosti: 1024 × 720 piksela. To je širina "informacijskog" dijela, a ne cijela slika. Ako želite stranicu od 1100 piksela, trebate napraviti dokument širine 1300 piksela. Dužina, zapravo, nije fiksna - to ovisi o tome koliko sadržaja želite staviti na izvor. To su preporuke, a ne pravila. Ako želite, možete izgraditi veliki raspored.
  • Uključite ravnalo. Pritisnite Ctrl + R ili idite na izbornik Prikaz - Ravnala. Ovo je mjerna ljestvica. Pojavljuje se izvan slike. Bez toga ćete morati procijeniti veličinu i udaljenost "po oku", što ne utječe na konačni rezultat. Tu funkciju možete konfigurirati u izborniku Uređivanje - Postavke - Mjerne jedinice i Ravnila. Tamo je bolje promijeniti centimetre po pikselu kako bi radili s jednim parametrom, a ne izračunati koliko točaka u jednom inču.
  • Također biste trebali aktivirati mrežu. Prikaz - Prikaži - Mreža ili Ctrl + E (možete ga i isključiti). Ovo je analogna bilježnica u kavezu. U Photoshopu će se prikazati okomite i vodoravne linije. Oni se neće pojaviti na samom crtežu. Mogu se vidjeti samo pri uređivanju. Ova je funkcija potrebna za ravnomjerno raspoređivanje elemenata predloška. Netko je prikladniji za rad s mrežom, netko bez njega. Najbolje je da ga uključite ako prvi put napravite web-lokaciju.
  • Da biste ga konfigurirali, idite na Uredi - Postavke - Vodiči, Mreža i Fragmenti. Tamo možete odabrati veličinu ćelija, kao i boju i vrstu linija (čvrste, točkaste, od točkica).

Primjer suvremenog dizajna web-lokacije

  • Ugradite vodilice. Između njih bit će glavni sadržaj resursa - fiksno tijelo stranice. I iza njih - gumena pozadina. Da biste to učinili, kliknite Prikaži - Novi vodič. U okviru "Orijentacija" označite "Okomito". U polje "Položaj" upišite udaljenost na kojoj će objekt biti s lijevog ruba. Usredotočite se na skalu vladara.
  • Potrebna su dva vodiča - desno i lijevo od tijela stranice. Udaljenost između njih trebala bi biti maksimalno 1003 piksela za zaslone rezolucije 1024 × 720. Možete odrediti drugu širinu. No, veliki resursi su nezgodni za gledanje na malim monitorima.
  • Zašto 1003, a ne 1024? Ako web-lokacija treba pomicati prema dolje ("scroll") prema dolje, preglednik će imati okomiti klizač za pomicanje. Veličina ovog klizača iznosi približno 21 piksela. Ako ga ne uzmete u obzir, pojavit će se vodoravno pomicanje. I posjetitelj resursa morat će premjestiti stranicu lijevo i desno da vidi sve informacije.
  • Tijelo bi trebalo biti u središtu platna.

To su pripremne faze rada. Kako napraviti raspored u Photoshopu ovisi o vašoj mašti i ukusu. Stoga će samo opće tehničke preporuke biti daljnje.

  • Prvo, vašem izgledu je potrebna pozadina. Može se izvršiti neovisno ili preuzeti s mreže. Postoje mnogi resursi s besplatnim teksturama. Ne stavljajte na web-lokaciju slike koje podliježu autorskim pravima. Nemojte uzeti svijetlu ili kontrastnu pozadinu. Bolje je ne koristiti teksture s velikim brojem sitnih detalja. Oni će odvratiti posjetitelja od tijela stranice.
  • Ako jednostavno otvorite crtež u Photoshopu, on će biti na novoj kartici i neće biti dodan izgledu. Označite cijelu pozadinu. Da biste to učinili, trebate tipkovnički prečac Ctrl + A ili alat za odabir (nalazi se u lijevom oknu). Kopirajte ga i zalijepite u predložak.
  • I ova je opcija dostupna ako kliknete Uredi - Zalijepi.

  • Novi sloj pojavit će se na popisu u donjem desnom kutu. Kliknite na nju desnom tipkom miša da biste vidjeli moguće akcije. U izborniku "Opcije sloja" možete promijeniti njegovo ime. U "Overlay Settings" su osnovne postavke slike. Možete učiniti sjaj, reljef, sjaj, udar, gradijent. Ako odaberete neku od opcija, promjene će se odmah pojaviti u Photoshopu. Postoji skup gotovih stilova. Tako se iz standardne teksture stvaraju izvorna dizajnerska rješenja. I ne crtajte ništa ekstra.
  • Gumb "Filtri" nalazi se u traci izbornika. Tamo ćete naći razne imitacije (pastel, akvarel, olovke), styling, teksture, skice, naglašava, zamagliti.
  • Možete odabrati običnu pozadinu. Boja ovisi o vašim osobnim željama. Ali bolje je ne učiniti ga crnim ili otrovnim. Prikladna posteljina i mekani tonovi ili prozirna hladnoća (na primjer, svijetlo siva, blijedo plava).
  • Nakon tekstura možete prikupiti samu stranicu. Ovdje imate slobodu stvaranja.
  • Da biste dodali neki oblik (red, kvadrat, oval), kliknite na odgovarajući gumb na desnoj strani. Imat će izgled i ime objekta koji je trenutno odabran za crtanje. Na primjer, "Alat za elipse", "Alat za poligone". U Photoshopu je broj oblika ograničen. No mogu se naći na Internetu, preuzeti i instalirati putem izbornika Edit - Set Management. U polju Vrsta navedite skupinu objekata koje učitavate.
  • U različitim verzijama programa, te se brojke nazivaju na različite načine. Ili gumbom u obliku malog crnog trokuta (on je s desne strane), ili ikonom zupčanika ili stavkom "Oblik točke" (nalazi se ispod trake izbornika). Objekti se mogu kombinirati, grupirati, izraditi od njih.
  • Da biste stvorili okvir teksta, kliknite na gumb u obliku velikog slova "T". Zatim odaberite mjesto gdje će se znakovi nalaziti, kliknite tamo i upišite što vam je potrebno.
  • Svaki element je bolje staviti na poseban sloj. Tako će biti prikladnije za kretanje i uređivanje, a da se "dotakne" cijelu stranicu. Da biste dodali ovaj objekt, idite na Slojevi - Novo.

  • Da biste projicirali sliku u unaprijed odabrano područje, prvo je odaberite, a zatim otvorite Edit - Paste Special. Tu će biti opcija "Umetni umjesto" i "Umetni izvan".
  • Dio jedne slike možete prenijeti na novi sloj. Da biste to učinili, odaberite ga, kliknite desnom tipkom miša i odaberite "Izreži na novi sloj".
  • S oblicima, opisima i slikama dostupne su iste opcije kao i za pozadinu: efekti, filtri i tako dalje.
  • U Photoshopu još uvijek postoje mnogi alati za crtanje: četke, olovke, olovke.

Možete napraviti kvalitetan resurs čak i iz jednostavnih geometrijskih objekata.

Postoje resursi s besplatnim izgledom. Umetnite ih u Photoshop i uredite ako je potrebno. To je lakše i brže od crtanja od nule.

Kako pretvoriti raspored u html datoteku?

Shvatili ste kako stvoriti web-lokaciju u Photoshopu i osmislili svoj prvi izgled. Što dalje? Uostalom, to ne može samo upload na hosting.

Može se dati koderu koji će napraviti visokokvalitetan html-predložak. Ali postoji još jedna mogućnost. Koristite usluge za pretvorbu PSD datoteke u HTML i CSS.

  • Psd2Html Converter. Plaćena online usluga. Brzo pretvorite Photoshop format u predložak web-stranice. Pomoću ovog resursa, čak i iz lošeg izgleda, možete stvoriti pristojnu web-lokaciju.
  • HTML Panda.
  • PSDCenter
  • 40 Mark Mark.

graditelji

Rasporedi se također mogu prikupljati na posebnim web-mjestima. Obično postoji jasno i intuitivno sučelje. Jednostavno sastavite predložak iz različitih dijelova. Neki elementi su najbolje nacrtani u Photoshopu. Tako dobivate izvorni dizajn. Unatoč činjenici da je stvoren na konstruktoru.

U Photoshopu ne samo crtati. Ona prikuplja rasporede za web-lokacije. U većini slučajeva to rade majstori. Ali jednostavan predložak može učiniti bilo koju osobu. Potrebno je samo osnovno znanje o Photoshopu.