Vodič: Kako postaviti web stranicu s Adobe Photoshopom

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 izravno putem mrežnih platformi kao što je Wix. Međutim, za web dizajnera poznavanje ručnih postupaka je neophodno. HTML5 i CSS temeljni su 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 Indesigna 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 započnemo definiranjem što će biti osnovni elementi, ovo je kostur. Ova će struktura služiti kao potpora za čuvanje svih sadržaja (bilo tekstualnih ili multimedijskih). Definiranjem svakog od odjeljaka koji čine našu stranicu, možemo na njima raditi s potpunom točnošću i pružiti što precizniji vizualni dizajn.

Vrlo je važno da uzmemo u obzir dimenzije koje će naša web stranica imati, ako će imati u kutiji ili pune širine. Web stranica upakirana u okvir nalazi se u malom spremniku i stoga će se oko nje pojaviti razmak. Naprotiv, mreža s punom pametnošću zauzet će cijeli zaslon uređaja koji reproducira stranicu. Odabir 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 okvirnim načinom, tako da neće zauzimati sav prostor koji pruža preglednik.

Da bismo stvorili svoj žičani okvir, prvo što moramo učiniti je ući u program Adobe Photoshop i uključiti dimenzije koje želimo da naša stranica ima. U ovom primjeru naša će stranica 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 učinkovit osjetljiv i mora se prilagoditi svim uređajima na tržištu. Međutim, u ovom ćemo slučaju raditi na stvaranju prototipa koji ćemo reproducirati na stolnom računalu. Unatoč tome, responzivni problem s kojim ćemo se pozabaviti kasnije, u ovom primjeru za sada imamo hijerarhiju dimenzija zaslona. 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 stvoren 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 stolna računala

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

Srednji zasloni: 1280 x 720/1280 x 800

Veliki zasloni: širina veća od 1400 piksela, primjerice 1400 x 900 ili 1600 x 1200.

Da biste započeli s distribucijom elemenata i dodjeljivanjem 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 bitno da koristite opcije pravila i vodiča koje možete pronaći u gornjem izborniku Pogled. Da bismo radili proporcionalno i točno, najbolje je da radimo u postocima. Kliknut ćemo na izbornik pogleda, a zatim na opciju «Novi vodič» za odabir modaliteta podjele. U ovom ćemo slučaju napraviti četiri okomite podjele na 25% i uzeti ćemo ih kao referencu za postavljanje 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 pravokutnike s vrstom križa. Da bismo naznačili da želimo uključiti videozapise u određeno područje, uvrstit ćemo simbol reprodukcije u naš spremnik. U ovom prvom primjeru radit ćemo samo sa slikama, u gornjem hvatanju možete vidjeti područje koje logo s 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 poveznica na početnu stranicu popraćenu s dvije kartice, tražilicom i četiri gumba na okviru za pretraživanje. Osim 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 popis s najreprezentativnijim metatagovima ili oznakama 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 prezle (š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 poveznica na druga 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 predpodnožje, budući da ć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ću razinu. To će se sastojati od pravilnog dizajna svakog od područja naše web stranice. Drugim riječima, počet ćemo "ispunjavati" svako od ovih područja sadržajem koji će konačno biti umetnut na našu web stranicu. Preporučuje se da ne dizajniramo ove elemente 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 gubitak vremena ili rezultat slabije kvalitete.

U ovom će slučaju dizajn naše web stranice biti izuzetno jednostavan. Koristit ćemo propisa o dizajnu materijala, budući da ćemo upotrijebiti Googleov logotip kao primjer ove prakse. 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, u zadnji smo trenutak napravili malu preinaku. Kao što ste mogli primijetiti, znatno smo smanjili veličinu svog logotipa i u donji zaglavni dio 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 marke ili logotip).

Važno je imati na umu da ćemo za iznošenje ovog primjera raditi na dvije različite razine. 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, prednožje ili razdjelna traka koja dijeli zaglavlje od tijela.

Strukture 1, 2, 3 i 4 bit će dio pozadina s naše web stranice, tako da nam zapravo neće biti potrebno izvesti kao takav iz Adobe Photoshopa, iako to možemo učiniti, to nije potrebno. Kada je u pitanju Ravne boje (Jedna od bitnih značajki ravnog dizajna i dizajna materijala, oni se mogu savršeno primijeniti putem koda pomoću CSS tablice stilova). Međutim, ostatak elemenata mora biti spremljen za kasnije umetanje u naš HTML kôd. U ovom malom dijagramu također smo reproducirali 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 pojasniti raspored i strukturu svakog elementa. Naravno, tekstualnom sadržaju nije mjesto u ovoj fazi postupka, 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 to obično primjenjuje iz okvira poput Bootstrapa ili izravno iz Jqueryja.

Nakon što smo kreirali 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 s vašeg žičanog okvira, jer je vrlo vjerojatno da ćete morati izmijeniti neke od izvornih elemenata na temelju konfiguracije kostura. (Na primjer, u ovom smo slučaju promijenili veličinu izvornih gumba, logotipa i većine elemenata koji su dio kompozicije, uključujući slike u donjem dijelu).

Važno je da naučimo pohranjivati ​​bilo koji predmet neovisno kako bismo ga spremili s dimenzijama koje imaju i na precizan način. Svaka pogreš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 moraju imati savršene dimenzije kako bi ih se moglo unijeti iz HTML-a u konačnu mrežu. U tom ćemo slučaju morati samostalno izrezati i spremiti sljedeće elemente:

• Naš logotip.
• 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 učinkovitija. Ali ako prvi put izrađujete ovu vrstu rasporeda, 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 smo slučaju stvorili 12 kopija od izvornika i spremili ih u istu mapu. Zatim ćete preimenovati svaku od kopija i dodijeliti svakoj od njih ime elementa koji sadrži. Naših 12 kopija bit će preimenovano: Logotip, gumb izbornika 1, gumb izbornika 2, traka za pretraživanje, gornji gumb 1, gornji gumb 2, gornji gumb 3 i gornji gumb 4. Preostala četiri bit će preimenovana 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 minijaturu spomenutog sloja. Na taj će način logotip biti automatski odabran.
• Sljedeći će korak biti reći Photoshopu da želimo da na precizan način izreže taj logotip. Za to ćemo samo trebati nazvati alat za obrezivanje pomoću tipke ili naredbe C.
• Nakon što to učinimo, kliknite naš gumb Enter kako bismo potvrdili rez.
• Sada ćemo otići na gornji izbornik Datoteka da kliknemo na spremi kako. Odabrat ćemo ime, koje će u ovom slučaju biti «Logo», i dodijelit ćemo mu format PNG, jer je datoteka koja nudi najvišu kvalitetu na webu.
• Ponovit ćemo postupak sa svim kopijama i elementima. Kad 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š gumb izbornika 2 iz palete slojeva. Na snimci zaslona možete vidjeti kako su automatski odabrana ograničenja našeg gumba.

Nakon što 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 i koji postupak čine potpuno intuitivnim, vrlo je važno da to naučimo raditi u ručno. Na taj ćemo način naučiti koje su osnove dizajna web stranice.

Rezime:

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 područjima sadržaj prikazivati ​​i njihov format.
3. Oslanjajući se na mjere i marke koje ste prethodno razvili, počnite oblikovati površinu mreže. Uključuje sve elemente (i plutajuće i fiksne). Ne zaboravite uključiti odgovarajuće gumbe, logotip i slike.
4. Izrežite jedan po jedan sve elemente koji su dio projekta. Pobrinite se da imaju ispravne mjere i da vam kasnije neće stvarati probleme.
5. Spremite sve elemente u formatu PNG u mapi slika unutar mape projekta HTML.
6. Imajte na umu da će ovaj projekt imati izlaz na web prozor, tako da je vrlo važno uzeti u obzir način boja i primijeniti se RGB.
7. Inspirirajte se ostalim 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 projekt za klijenta, pokušajte se držati informiranje koliko je to moguće.