Vodič: Kako postaviti web stranicu pomoću Adobe Photoshopa

Postoji velika raznolikost alata za dizajn web stranica i rad na potpuno jednostavan i funkcionalan način bez unošenja ili dodirivanja koda. Nebrojeni su, predloženi u aplikacijama (Adobe Dreamweaver je primjer) ili direktno putem mrežnih platformi kao što je Wix. Međutim, za web dizajnera poznavanje ručnih postupaka je neophodno. HTML5 i CSS su temeljni stupovi za izgled web stranica i odredišnih stranica.

Međutim, češće nego što biste mogli očekivati, morat ćete se obratiti aplikacijama poput Indesign ili Adobe Photoshop da nadopune vaš posao na izgledu i daju im savršen završetak. Danas ćemo u ovom opsežnom vodiču vidjeti kako možemo postaviti web stranicu pomoću Adobe Photoshopa. U ovom prvom dijelu ostat ćemo na radu koji će se razviti iz Photoshopa, iako ćemo u budućim ratama vidjeti kako to djelo već možemo primijeniti izravno u HTML kodu kako bi postalo funkcionalno.

Počevši od dizajna našeg žičanog okvira

Za početak s izgledom i dizajnom web stranice, izuzetno je važno da počnemo definiranjem šta će biti osnovni elementi, ovo je kostur. Ova će struktura služiti kao podrška za čuvanje čitavog sadržaja (bilo tekstualnog ili multimedijskog). Definiranjem svakog od odjeljaka koji čine našu stranicu, možemo na njima raditi s potpunom preciznošću i pružiti što precizniji vizualni dizajn.

Vrlo je važno da uzmemo u obzir dimenzije koje će imati naša web stranica, ako će imati u kutiji ili pune širine. Web stranica upakovana u okvir nalazi se u malom spremniku i stoga će se oko nje pojaviti razmak. Suprotno tome, mreža s punom pametnošću zauzet će čitav zaslon uređaja koji reproducira stranicu. Izbor između jednog ili drugog modaliteta odgovara samo na stilska pitanja, a ovisit će i o potrebama projekta na kojem radimo. U ovom ćemo primjeru raditi s boks načinom, tako da neće zauzimati sav prostor koji pruža preglednik.

Da bismo kreirali svoj žičani okvir, prvo što moramo učiniti je unijeti Adobe Photoshop aplikaciju i uključiti dimenzije koje želimo da ima naša stranica. U ovom primjeru naša stranica će biti široka 1280 piksela. Međutim, problem s veličinom može se razlikovati ovisno o konačnom odredištu ili uređaju na kojem želimo reproducirati našu stranicu. Nema sumnje da web dizajn mora biti funkcionalan i efikasan odziv i mora se prilagoditi svim uređajima na tržištu. Međutim, u ovom slučaju ćemo raditi na stvaranju prototipa koji ćemo reproducirati na stolnom računaru. Unatoč tome, odgovorno pitanje s kojim ćemo se pozabaviti kasnije, za sada je ovdje hijerarhija dimenzija zaslona na kojem ćemo raditi u ovom primjeru. Imajte na umu da ćemo u ovom slučaju napraviti izgled odredišne ​​stranice u Adobe Photoshopu, a zatim ga migrirati na HTML5 I CSS3. Cilj ove male prakse je pretvoriti dizajn kreiran u Photoshopu u upotrebljiv i interaktivan web dizajn koji odgovara kretanju korisnika.

Mjerenja za mobilne telefone

iPhone 4 i 4S: 320 x 480

iPhone 5 i 5S: 320 x 568

iPhone6: 375x667

iPhone 6+: 414x736

Nexus 4: 384 x 598

Nexus 5: 360 x 598

Galaxy S3, S4, S5: 360x640

HTC One: 360 x 640

Mjerenja tableta

iPad svi modeli kao i iPad Mini: 1024 x 768

Galaxy Tab 2 i 3 (7.0 inča): 600 x 1024

Galaxy Tab 2 i 3 (10.1 inča): 800 x 1280

Nexus 7: 603 x 966

Nexus 10: 800 x 1280

Microsoft Surface W8 RT: 768 x 1366

Microsoft Surface W8 Pro: 720 x 1280

Mjerenja za stolne računare

Mali ekrani (koriste se, na primjer, u netbook računarima): 1024 x 600

Srednji ekrani: 1280 x 720/1280 x 800

Veliki ekrani: širina veća od 1400 piksela, na primjer 1400 x 900 ili 1600 x 1200.

Za početak distribucije elemenata i dodjeljivanja odjeljaka unutar naše web makete, vrlo je važno da uzmemo u obzir proporcije kako bismo osigurali čitljiv i melodičan završetak. Bit će neophodno da koristite opcije pravila i vodiče koje možete pronaći u gornjem meniju Pogled. Da bismo radili proporcionalno i tačno, najbolje je da radimo u procentima. Kliknite na meni prikaza, a zatim na opciju «Novi vodič» da biste izabrali modalitet podjele. U ovom slučaju napravit ćemo četiri okomite podjele od 25% i uzeti ćemo ih kao referencu za smještanje naših slika u podnožje i slike našeg logotipa u zaglavlje.

Postoji kod koji određuje svako područje koje će zauzimati naše područje model i funkciju koju će imati svaki od njih. Na primjer, da naznačimo područje koje će slika zauzimati, stvorit ćemo pravougaone s vrstom križa. Da bismo naznačili da želimo uključiti videozapise u određeno područje, uključit ćemo simbol reprodukcije unutar našeg spremnika. U ovom prvom primjeru radit ćemo samo sa slikama, u gornjem snimku možete vidjeti područje koje će zauzimati logo sa naše web stranice.

Ovo bi bio krajnji rezultat našeg wireframe. Kao što vidimo, podijeljen je u zaglavlje sastavljeno od slike na kojoj će se pronaći logotip i koje će služiti kao veza do početne stranice popraćene s dva jezička, pretraživačem i četiri dugmeta na okviru za pretraživanje. Pored toga, već smo unutar tijela uključili bočnu traku koja se sastoji od razdjelne trake i niza kategorija koje kategoriziraju vrstu sadržaja koji će biti na našoj web stranici. Još jedan odjeljak s numeracijom koji uključuje unose koji će postojati na našoj web lokaciji i na kraju listu s najreprezentativnijim metatagovima na našoj web stranici.

U području sadržaja, koje će biti definirano odjeljkom koji će sadržavati sadržaj kojim se može upravljati, naći ćemo sadržaj naših članaka. U ovom slučaju, prezle ili mrvice (što ukazuje na organsku strukturu naše web stranice, naslov članka, metapodatke, odlomak kao tijelo teksta, unutar kojeg je i slika.

Kao podnožje uvrstili smo četiri slike koje će poslužiti kao veza do drugih područja naše stranice. Ovdje možemo uključiti logotipe ili druge zanimljive odjeljke. Iako će u stvarnosti ovo područje djelovati više slično predfooter, jer će samo podnožje ići malo dalje s politikom upotrebe, pravnom napomenom i autorskim pravima.

Nakon što definiramo osnovnu strukturu ili kostur naše stranice, morat ćemo prijeći na sljedeći nivo. Ovo će se sastojati od pravilnog dizajna svakog od područja naše web stranice. Drugim riječima, počet ćemo "popunjavati" svako od ovih područja sadržajem koji će konačno biti umetnut na našu web stranicu. Preporučuje se da ne započnemo s dizajniranjem ovih elemenata prije rada na žičnom okviru jer je vrlo vjerojatno da ćemo, ako to radimo ovim redoslijedom, kasnije morati izmijeniti njihove proporcije. Rizikujemo da iskrivimo svoje slike i morati prepraviti dizajn svakog od elemenata, što će postati ili gubljenje vremena ili rezultat slabije kvalitete.

U ovom slučaju dizajn naše web stranice bit će izuzetno jednostavan. Koristit ćemo propisi o dizajnu materijala, budući da ćemo koristiti Googleov logotip da bismo prikazali ovu praksu. Moram pojasniti da je svrha ovog vodiča ilustrirati tehničko znanje, tako da su estetski rezultati u ovom slučaju nebitni. Kao što vidite, malo po malo ispunjavali smo prostor svim područjima koja smo prethodno odredili u našoj shemi. Međutim, napravili smo malu preinaku u zadnji čas. Kao što ste mogli primijetiti, znatno smo smanjili veličinu svog logotipa i u donji dio zaglavlja uključili smo razdjelnicu koja se savršeno povezuje s gornjim izbornikom. U ovom smo slučaju koristili gumbe i materijale iz banke resursa. Kao dizajneri možemo ih dizajnirati sami, (posebno se preporučuje ova opcija ako želimo da predstavlja vrlo sličan tonik onome koji predstavlja slika ili logotip marke).

Važno je imati na umu da ćemo za iznošenje ovog primjera raditi na dva različita nivoa. S jedne strane, radit ćemo na objektima, a s druge strane izgled web stranice. Odnosno, s jedne strane u kosturu naše web stranice, a s druge strane u svima plutajući elementi koje će podržavati ovaj kostur. Primijetit ćete da postoje područja koja uopće neće plutati, kao što je područje koje će zauzeti naša bočna traka, predfooter ili razdjelna traka koja dijeli zaglavlje od tijela.

Konstrukcije 1, 2, 3 i 4 bit će dio pozadina naše web stranice, tako da u stvarnosti neće biti potrebno izvoziti kao takav iz Adobe Photoshopa, iako to možemo učiniti, to nije potrebno. Kada je u pitanju Ravne boje (Jedna od bitnih karakteristika ravnog dizajna i dizajna materijala, mogu se savršeno primijeniti putem koda koristeći CSS tablicu stilova). Međutim, ostatak elemenata mora biti sačuvan za kasnije umetanje u naš HTML kôd. U ovom malom dijagramu reproducirali smo i područja koja pripadaju pozadini stranice, tako da imamo jasnu ideju kakav će biti konačni izgled naše stranice.

Kao što ćete moći shvatiti, svrha stvaranja ove sheme u Adobe Photoshopu je dobiti stvarnu dimenziju svakog elementa i razjasniti raspored i strukturu svakog elementa. Naravno, tekstualnom sadržaju nije mjesto u ovoj fazi procesa, jer mora biti isporučuje se iz našeg uređivača koda. Moramo također naglasiti da ćemo u ovoj praksi raditi s gumbima i statičkim elementima, iako se oni obično primjenjuju iz okvira poput Bootstrapa ili direktno iz Jqueryja.

Nakon što kreiramo svaki od elemenata koji će činiti našu web stranicu, vrijeme je da ih počnemo izvoziti i spremati u mapu slika koja se nalazi unutar mape HTML projekta. Važno je da se naviknete na izvoz sa svog žičanog okvira, jer je vrlo vjerojatno da ćete morati izmijeniti neke od izvornih elemenata na osnovu konfiguracije kostura. (Na primjer, u ovom smo slučaju promijenili veličinu originalnih gumba, logotipa i većine elemenata koji su dio kompozicije, uključujući slike u donjem dijelu).

Važno je da naučimo spremati bilo koji predmet samostalno kako bismo ga sačuvali u dimenzijama koje imaju i na precizan način. Svaka greška, ma kako minimalna bila, može utjecati na sve elemente koji su dio vaše web stranice. Imajte na umu da će biti međusobno povezani i da moraju imati savršene dimenzije kako bi ih se moglo unijeti iz HTML-a u konačnu mrežu. U ovom slučaju trebat ćemo samostalno izrezati i spremiti sljedeće elemente:

• Naš logo.
• Svi gumbi (oni koji su dio glavnog izbornika i ostali).
• Sve slike.

To možemo učiniti na više načina i možda ćete pronaći alternativu koja je za vas efikasnija. Ali ako je prvi put da izrađujete ovu vrstu izgleda, preporučujem da slijedite sljedeće savjete.

• Prvo morate otići u mapu u kojoj se nalazi PSD datoteka koja sadrži naš žičani okvir i duplicirati je onoliko puta koliko je elemenata koje želite izvesti. U ovom slučaju stvorili smo 12 kopija od originala i spremili ih u isti folder. Dalje, preimenovat ćete svaku od kopija i dodijeliti svakoj od njih ime elementa koji sadrži. Naših 12 kopija bit će preimenovano: Logotip, tipka izbornika 1, tipka izbornika 2, traka za pretraživanje, gornja tipka 1, gornja tipka 2, gornja tipka 3 i gornja tipka 4. Preostale četiri bit će preimenovane u: Slika 1, Slika 2, Slika 3 i Slika 4.
• Nakon što to učinimo, otvorit ćemo datoteku s imenom logotipa.
• Otići ćemo na našu paletu slojeva i pronaći sloj koji sadrži naš logotip. Tada ćemo pritisnuti Ctrl / Cmd dok kliknemo na sličicu spomenutog sloja. Na ovaj način logotip će biti automatski odabran.
• Sljedeći korak će biti reći Photoshopu da želimo da taj logotip izreže na precizan način. Za to ćemo morati samo pozvati alat za obrezivanje pomoću tipke ili naredbe C.
• Nakon što to učinimo, kliknuti ćemo na naš gumb Enter da bismo potvrdili rez.
• Sada ćemo otići na gornji meni Datoteka da kliknemo na spremi kako. Odabrat ćemo ime koje će u ovom slučaju biti «Logo» i dodijelit ćemo format PNG, jer je datoteka koja nudi najviši kvalitet na Internetu.
• Ponovit ćemo postupak sa svim kopijama i elementima. Kada obrežete, provjerite jesu li ostali slojevi u našoj paleti nevidljiv ili eliminiran. Na taj način svaki element možemo spremiti s prozirnom pozadinom.

U ovom slučaju odabiremo naše dugme izbornika 2 iz palete slojeva. Na snimku zaslona možete vidjeti kako su ograničenja našeg gumba automatski odabrana.

Jednom kada odaberemo alat za obrezivanje s tipke C, naše se platno smanjuje samo na dimenzije našeg gumba.

Sada je vrijeme da jedan po jedan spremite sve elemente koji su dio naše web stranice i uključite ih u mapu slika koju ćemo kasnije koristiti. Nazvat ćemo iz našeg koda i nastavit ćemo s izgledom, ali od sada iz našeg uređivača koda.

Iako postoji mnogo alata i alternativa za postavljanje web stranice koji postupak čine potpuno intuitivnim, vrlo je važno da naučimo to raditi u priručnik. Na taj ćemo način naučiti koje su osnove dizajna web stranice.

Resumen:

1. Dizajnirajte struktura web stranice obraćajući posebnu pažnju na sadržaj koji želite prenijeti i odjeljke koje morate stvoriti na svojoj web stranici.
2. Poradite na svom kosturu ili wireframe iz Adobe Photoshopa naznačujući u kojim će se oblastima sadržaj prikazivati ​​i njihov format.
3. Oslanjajući se na mjere i marke koje ste prethodno razvili, počnite dizajn površinu mreže. Uključuje sve elemente (i plutajuće i fiksne). Ne zaboravite uključiti odgovarajuća dugmad, logotip i slike.
4. Izrežite jedan po jedan sve elemente koji su dio projekta. Pazite da imaju prave mjere i da vam kasnije neće stvarati probleme.
5. Spremite sve elemente u formatu PNG u fascikli slika unutar fascikle projekta HTML.
6. Imajte na umu da će ovaj projekt imati izlaz na web prozor, tako da je vrlo važno da uzmete u obzir način boje i primijenite se RGB.
7. Inspirirajte se drugim web stranicama kojima se divite prije nego što krenete na posao i ne zaboravite o tome razgovarati sa članovima svog tima. U slučaju da je to projekat za klijenta, pokušajte se držati brifing koliko je to moguće.