Ekziston një larmi e madhe mjetesh për të hartuar faqe në internet dhe për të punuar në një mënyrë krejtësisht të thjeshtë dhe funksionale pa futur ose prekur kodin. Ato janë të panumërta, të propozuara nga aplikacionet (Adobe Dreamweaver është një shembull) ose drejtpërdrejt nga platforma online të tilla si Wix. Sidoqoftë, për një krijues uebi, njohja e procedurave manuale është thelbësore. HTML5 dhe CSS janë shtyllat themelore për paraqitjen e faqeve të internetit dhe faqeve të uljes.
Sidoqoftë, më shpesh sesa mund të prisni, do t'ju duhet t'i drejtoheni aplikacioneve si Indesign ose Adobe Photoshop për të plotësuar punën tuaj të paraqitjes dhe për t'i dhënë atyre një fund të përsosur. Sot do të shohim në këtë manual të gjerë, se si mund të paraqesim një faqe në internet duke përdorur Adobe Photoshop. Në këtë pjesë të parë ne do të qëndrojmë në punën që do të zhvillohet nga Photoshop, megjithëse në këstet e ardhshme do të shohim se si mund ta zbatojmë këtë punë tashmë direkt në kodin HTML për ta bërë atë funksionale.
Duke filluar me dizajnin e kornizës sonë të telit
Për të filluar me paraqitjen dhe hartimin e një faqe në internet, është jashtëzakonisht e rëndësishme që të fillojmë duke përcaktuar se cilat do të jenë elementet themelore, ky është skeleti. Kjo strukturë do të shërbejë si një mbështetje për të mbajtur të gjithë përmbajtjen (qoftë me tekst apo multimedia). Duke përcaktuar secilën nga seksionet që përbëjnë faqen tonë, ne do të jemi në gjendje të punojmë në to me saktësi të plotë dhe të sigurojmë një dizajn vizual sa më të saktë që të jetë e mundur.
Veryshtë shumë e rëndësishme që të marrim parasysh dimensionet që do të ketë faqja jonë e internetit, nëse do të ketë një në kuti ose me gjerësi të plotë. Një faqe në internet me kuti do të jetë brenda një ene të vogël dhe për këtë arsye do të shfaqet një hapësirë rreth tij. Përkundrazi, një rrjet i plotë i mendjes do të zërë të gjithë ekranin e pajisjes që riprodhon faqen. Zgjedhja midis një modaliteti ose një tjetri i përgjigjet thjesht pyetjeve stilistike dhe gjithashtu do të varet nga nevojat e projektit mbi të cilin po punojmë. Ne do të punojmë në këtë shembull me modalitetin boxed kështu që nuk do të zërë të gjithë hapësirën e siguruar nga shfletuesi.
Për të krijuar telin tonë, gjëja e parë që duhet të bëjmë është të hyjmë në aplikacionin Adobe Photoshop dhe të përfshijmë dimensionet që duam të ketë faqja jonë. Në këtë shembull faqja jonë do të jetë e gjerë 1280 piksel. Sidoqoftë, çështja e madhësisë mund të ndryshojë në varësi të destinacionit përfundimtar ose pajisjes në të cilën duam të riprodhojmë faqen tonë. Nuk ka dyshim se që një dizajn ueb të jetë funksional dhe efikas, ai duhet të jetë responsiv dhe duhet të përshtatet me të gjitha pajisjet në treg. Sidoqoftë, në këtë rast ne do të punojmë për të krijuar një prototip që do të riprodhojmë në një kompjuter desktop. Edhe kështu, çështja e përgjegjshme do të diskutohet më vonë, tani për tani, këtu është një hierarki e dimensioneve të ekranit për të punuar në këtë shembull. Mbani në mend se në këtë rast ne do të bëjmë një paraqitje të faqes së uljes në Adobe Photoshop dhe pastaj ta migrojmë atë në HTML5 DHE CSS3. Objektivi i kësaj praktike të vogël është të konvertojë një dizajn të krijuar në Photoshop në një dizajn të përdorshëm dhe interaktiv të uebit që i përgjigjet lëvizjeve të përdoruesit.
Matjet për celularët
iPhone 4 dhe 4S: 320 x 480
iPhone 5 dhe 5S: 320 x 568
iPhone 6: 375x667
iPhone 6+: 414x736
Lidhja 4: 384 x 598
Lidhja 5: 360 x 598
Galaxy S3, S4, S5: 360x640
HTC One: 360 x 640
Matjet e tabletave
iPad të gjitha modelet si dhe iPad Mini: 1024 x 768
Galaxy Tab 2 dhe 3 (7.0 inç): 600 x 1024
Galaxy Tab 2 dhe 3 (10.1 inç): 800 x 1280
Lidhja 7: 603 x 966
Lidhja 10: 800 x 1280
Microsoft Surface W8 RT: 768 x 1366
Microsoft Surface W8 Pro: 720 x 1280
Matjet për kompjuterat desktop
Ekranet e vogla (të përdorura për shembull në netbook): 1024 x 600
Ekranet mesatare: 1280 x 720/1280 x 800
Ekranet e mëdha: gjerësia më e madhe se 1400 pikselë, shembulli 1400 x 900 ose 1600 x 1200.
Për të filluar shpërndarjen e elementeve dhe caktimin e seksioneve brenda mockup tonë, është shumë e rëndësishme që të marrim parasysh proporcionet për të siguruar një përfundim të lexueshëm dhe melodik. Do të jetë thelbësore që të përdorni opsionet e rregullave dhe udhëzuesve që mund të gjeni në menunë kryesore View. Për të punuar në një mënyrë proporcionale dhe të saktë, është më mirë që të punojmë në përqindje. Ne do të klikojmë në menunë e pamjes dhe më pas në opsionin «Udhëzues i ri» për të zgjedhur modalitetin e ndarjes. Në këtë rast ne do të bëjmë katër ndarje vertikale me 25% dhe do t'i marrim ato si referencë për të vendosur imazhet tona në fund të faqes dhe imazhin e logos tonë në kokë.
Ekziston një kod për të përcaktuar secilën nga fushat që do të zënë zonat tona modeli dhe funksionin që do të ketë secili prej tyre. Për shembull, për të treguar zonën që do të zërë një imazh, ne do të krijojmë drejtkëndësha me një lloj kryqi. Për të treguar që duam të përfshijmë video në një zonë të caktuar, ne do të përfshijmë simbolin e lojës brenda kontejnerit tonë. Në këtë shembull të parë ne do të punojmë vetëm me imazhe, në kapjen e sipërme mund të shihni zonën që logotipo nga faqja jonë e internetit.
Ky do të ishte rezultati përfundimtar i tonës wireframe. Siç mund ta shohim, ajo është e ndarë në një titull të përbërë nga imazhi në të cilin do të gjendet logoja dhe i cili do të shërbejë si një lidhje në faqen kryesore e shoqëruar nga dy skeda, një motor kërkimi dhe katër butona në kutinë e kërkimit. Përveç kësaj, tashmë brenda trupit, ne kemi përfshirë një shirit anësor të përbërë nga një shirit ndarës dhe një seri kategorish që kategorizojnë llojin e përmbajtjes që do të jetë në faqen tonë të internetit. Një seksion tjetër me një numërim që përfshin shënimet që do të ekzistojnë në faqen tonë, dhe së fundmi një listë me meta etiketat më përfaqësuese në faqen tonë.
Në fushën e përmbajtjes, e cila do të përcaktohet nga një seksion që do të përfshijë përmbajtje të vetë-menaxhueshme, ne do të gjejmë përmbajtjen e artikujve tanë. Në këtë rast, thërrimet e bukës ose buka e grirë (që tregon strukturën organike të faqes sonë të internetit, titullin e artikullit, metadata, një paragraf si një pjesë e tekstit, brenda të cilit përfshihet një imazh.
Si fund, ne kemi përfshirë katër imazhe që do të shërbejnë si një lidhje me zonat e tjera të faqes tonë. Këtu mund të përfshijmë logot ose seksione të tjera interesante. Edhe pse në realitet, kjo zonë do të veprojë më shumë si pararendës, pasi që faqja në fund do të shkojë pak më poshtë me politikën e përdorimit, njoftimin ligjor dhe të drejtat e autorit.
Pasi të kemi përcaktuar strukturën ose skeletin bazë të faqes tonë, do të duhet të shkojmë në nivelin tjetër. Kjo do të konsistojë në modelimin e duhur të secilës prej fushave të faqes sonë të internetit. Me fjalë të tjera, ne do të fillojmë të "plotësojmë" secilën nga këto zona me përmbajtjen që më në fund do të futet në faqen tonë të internetit. Rekomandohet që ne të mos fillojmë me dizenjimin e këtyre elementeve para se të punojmë në tel, sepse ka shumë të ngjarë që nëse e bëjmë në këtë mënyrë, do të duhet të modifikojmë përmasat e tyre më vonë. Ne rrezikojmë të shtrembërojmë imazhet tona dhe duhet të ribëj modelimin e secilit prej elementeve, i cili do të bëhet ose humbje kohe ose rezultat me cilësi më të ulët.
Në këtë rast, dizajni i faqes sonë të internetit do të jetë jashtëzakonisht i thjeshtë. Ne do të përdorim porositë e modelit të materialit, pasi që ne do të përdorim logon e Google për të ilustruar këtë praktikë. Duhet të sqaroj se qëllimi i këtij tutoriali është të ilustrojë njohuritë teknike, kështu që rezultati estetik në këtë rast është i parëndësishëm. Siç mund ta shihni, pak nga pak ne kemi mbushur hapësirën me të gjitha fushat që kemi përcaktuar më parë në skemën tonë. Sidoqoftë, ne bëmë një modifikim të vogël në minutën e fundit. Siç mund ta keni vërejtur, ne kemi zvogëluar madhësinë e logos sonë në mënyrë të konsiderueshme dhe kemi përfshirë një vijë ndarëse në zonën e poshtme të kokës që lidhet në mënyrë të përsosur me menunë e sipërme. Në këtë rast ne kemi përdorur butona dhe materiale nga një bankë burimesh. Si krijues, ne mund t'i krijojmë vetë, (veçanërisht ky opsion rekomandohet nëse dëshirojmë që ai të paraqesë një tonik shumë të ngjashëm me atë të paraqitur nga imazhi i markës ose logoja).
Importantshtë e rëndësishme të kemi parasysh që për të dhënë këtë shembull do të punojmë në dy nivele të ndryshme. Nga njëra anë, ne do të punojmë për objektet dhe nga ana tjetër pamjen e faqes në internet. Kjo është, nga njëra anë në skeletin e faqes sonë të internetit dhe nga ana tjetër në të gjitha elemente lundruese që ky skelet do të mbështesë. Do të vini re se ka zona që nuk do të lëvizin aspak, të tilla si zona që shiriti ynë do të zërë, këmbët e para ose shiriti ndarës që ndan kokën nga trupi.
Strukturat 1, 2, 3 dhe 4 do të jenë pjesë e sfond nga faqja jonë e internetit, kështu që në të vërtetë nuk do të jetë e nevojshme që të eksportojmë si të tillë nga Adobe Photoshop, megjithëse mund ta bëjmë, nuk është e nevojshme. Kur është fjala për Ngjyra të sheshta (Një nga tiparet thelbësore të dizajnit të sheshtë dhe modelit të materialit, ato mund të zbatohen në mënyrë të përsosur përmes kodit duke përdorur një fletë stilesh CSS). Sidoqoftë, pjesa tjetër e elementeve duhet të ruhen për t'u futur më vonë në kodin tonë HTML. Në këtë diagram të vogël ne gjithashtu kemi riprodhuar zonat që i përkasin sfondit të faqes në mënyrë që të kemi një ide të qartë se cila do të jetë pamja përfundimtare e faqes tonë.
Siç do të jeni në gjendje ta kuptoni, kuptimi i krijimit të kësaj skeme në Adobe Photoshop është që të merrni dimensionin real të secilit element dhe të sqaroni rregullimin dhe strukturën e secilit element. Sigurisht, përmbajtja tekstuale nuk ka vend në këtë fazë të procesit pasi që duhet të jetë furnizuar nga redaktori ynë i kodit. Ne gjithashtu duhet të theksojmë se në këtë praktikë, ne do të punojmë me butona dhe elemente statike, megjithëse zakonisht këto zbatohen zakonisht nga kornizat si Bootstrap ose direkt nga Jquery.
Pasi të kemi krijuar secilin prej elementeve që do të përbëjnë faqen tonë të internetit, është koha të fillojmë t'i eksportojmë dhe t'i ruajmë në dosjen e imazheve që ndodhet brenda dosjes së projektit HTML. Shtë e rëndësishme që të mësoheni të eksportoni nga korniza juaj e telit, sepse ka shumë të ngjarë që do të duhet të modifikoni disa nga elementët origjinal bazuar në konfigurimin e skeletit. (Për shembull, në këtë rast, ne kemi ndryshuar madhësinë e butonave origjinalë, logos dhe shumicës së elementeve që janë pjesë e përbërjes, përfshirë imazhet në zonën e poshtme).
Shtë e rëndësishme që ne të mësojmë të ruajmë çdo send në mënyrë të pavarur për t'i ruajtur ato me dimensionet që ata kanë dhe në një mënyrë precize. Çdo gabim, sado minimal, mund të ndikojë në të gjithë elementët që janë pjesë e faqes suaj të internetit. Mbani në mend se ato do të lidhen me njëra-tjetrën dhe duhet të kenë dimensione perfekte në mënyrë që ato të futen nga HTML në faqen përfundimtare. Në këtë rast, do të duhet të presim dhe ruajmë në mënyrë të pavarur elementët e mëposhtëm:
- Logoja jone
- Të gjithë butonat (ato që janë pjesë e menusë kryesore dhe pjesa tjetër).
- Të gjitha imazhet.
Ne mund ta bëjmë atë në shumë mënyra dhe ndoshta ju do të gjeni një alternativë që është më efektive për ju. Por nëse është hera e parë që do të bëni këtë lloj paraqitjeje, unë ju rekomandoj që të ndiqni këshillat e mëposhtme.
- Së pari, duhet të shkoni në dosjen ku ndodhet skedari PSD që përmban telin tonë dhe ta kopjoni atë aq herë sa elementët që do të eksportoni. Në këtë rast ne kemi krijuar 12 kopje nga origjinali dhe i kemi ruajtur ato në të njëjtën dosje. Tjetra, ju do të riemërtoni secilën prej kopjeve dhe secilit prej tyre do t'i caktoni emrin e elementit që përmban. 12 kopjet tona do të riemërtohen: Logo, butoni i menusë 1, butoni i menusë 2, shiriti i kërkimit, butoni i sipërm 1, butoni i sipërm 2, butoni i sipërm 3 dhe butoni i sipërm 4. Katër të tjerët do të riemërtohen si: Image 1, Image 2, Imazhi 3 dhe Imazhi 4.
- Pasi të jetë bërë kjo, ne do të hapim skedarin me emrin e logos.
- Ne do të shkojmë në gamën tonë të shtresave dhe do të lokalizojmë shtresën që përmban logon tonë. Pastaj do të shtypim Ctrl / Cmd ndërsa klikojmë në miniaturën e shtresës së përmendur. Në këtë mënyrë logo do të jetë zgjedhur automatikisht.
- Hapi tjetër do të jetë t'i themi Photoshop-it që duam që ajo të presë atë logo në një mënyrë precize. Për këtë ne do të duhet vetëm t'i bëjmë një thirrje mjetit të prerjes nga çelësi ose komanda C.
- Pasi ta kemi bërë këtë, ne do të klikojmë në butonin tonë Enter për të konfirmuar prerjen.
- Tani do të shkojmë në menunë e sipërme të Skedarit për të klikuar në ruajtjen e mënyrës. Ne do të zgjedhim emrin, i cili në këtë rast do të jetë «Logo» dhe do të caktojmë një format PNG, për të qenë skedari që ofron cilësinë më të lartë në internet.
- Ne do ta përsërisim procesin me të gjitha kopjet dhe elementet. Kur të keni shkurtuar, sigurohuni që pjesa tjetër e shtresave në paletën tonë të jenë i padukshëm ose eliminohen. Në këtë mënyrë ne mund të ruajmë secilin element me një sfond transparent.
Në këtë rast ne po zgjedhim butonin tonë të menusë 2 nga paleta e shtresave. Ju mund të shihni në pamjen e ekranit se si janë zgjedhur automatikisht kufijtë e butonit tonë.
Sapo të zgjedhim mjetin e prerjes nga tasti C, kanavaca jonë zvogëlohet vetëm në dimensionet e butonit tonë.
Tani është koha për të ruajtur një nga një të gjithë elementët që janë pjesë e faqes sonë të internetit dhe t'i përfshijmë ato në dosjen e imazheve dhe që do t'i përdorim më vonë. Ne do të bëjmë thirrje nga kodi ynë dhe do të vazhdojmë me paraqitjen tonë, por tani e tutje nga redaktuesi ynë i kodit.
Megjithëse ka shumë mjete dhe alternativa për paraqitjen e një faqe në internet që e bëjnë procesin plotësisht intuitiv, është shumë e rëndësishme që ne të mësojmë ta bëjmë atë në një udhëzues. Në këtë mënyrë ne do të mësojmë se cilat janë bazat prapa hartimit të një faqe në internet.
Përmbledhje:
- Dizenjoni strukturë të faqes së internetit duke i kushtuar vëmendje të veçantë përmbajtjes që dëshironi të transmetoni dhe pjesëve që duhet të krijoni në faqen tuaj të internetit.
- Punoni në skeletin tuaj ose wireframe nga Adobe Photoshop duke treguar se në cilat zona do të shfaqet përmbajtja dhe formati i tyre.
- Duke u mbështetur në masat dhe markat që keni zhvilluar më parë, filloni dizajni sipërfaqja e rrjetës. Përfshin të gjithë elementët (si lundrues ashtu edhe fiks). Mos harroni të përfshini butonat, logon dhe imazhet përkatëse.
- Pritini të gjithë elementët që janë pjesë e projektit një nga një. Sigurohuni që ato të kenë masat e duhura dhe që nuk do t'ju shkaktojnë probleme më vonë.
- Ruani të gjithë elementët në format PNG në dosjen e imazheve brenda dosjes së projektit HTML.
- Mbani në mend se ky projekt do të ketë një dalje në dritaren e internetit, prandaj është shumë e rëndësishme që të merrni parasysh mënyrën e ngjyrave dhe të aplikoni RGB.
- Frymëzohuni nga faqet e tjera të internetit që admironi para se të filloni të punoni dhe mos harroni ta diskutoni këtë me anëtarët e ekipit tuaj. Në rast se është një projekt për një klient, përpiquni t'i përmbaheni udhëzime aq sa është e mundur.
hahahahahaha dhe ne fund te gjithe kesaj, ti shkon tek butoni startues, fik pajisjet dhe shkon te nje profesionist i ndyrë qe do te te beje nje faqe ne internet qe nuk eshte mut i ndyrë;)
Tutoriali më përshëndet mirë, por mbase në një tjetër do ta bëni atë më të detajuar, unë jam ende duke filluar në këtë dizajn, dhe kur shoh imazhet me rezultatin përfundimtar ka disa hapa që nuk di t'i bëj. Faleminderit.