Multi din noi avem unele website-uri, pagini sau grupe pe retelele de socializare. Si aceste pagini de internet arata desigur mult mai bine daca folosim imagini indite si la locul lor. O imagine aproape indispensabila este headerul.
In lectia acesta vom invata cum in citiva pasi simpli sa facem un html header original Altii denumesc acesta ca html file. Deasemenea vom invata cum sa salvam imaginile pentru internet (save for web).
Orice imagine dupa cum bine stim, se incarca greu in internet. Iar pentru a mari acest proces ne vine in ajutor instrumentul feliere.
Cu ajutorul lui poti taia imaginea pe felii si sa le salvezi.
Mai intii decupam imaginea care o dorim. Modul de decupare este prezentat aici.
O alta modalitate este folosirea instrumentului „Cadru de selectie dreptunghiular”. Cu ajutorul acestui document selecteaza suprafata dorita.
Apoi apasa Ctrl + N si creaza un nou document cu dimensiunile dorite si apoi in acest document apasa Ctrl + V. Astfel portiunea selectata in documentul precedent trebuia sa se fi copiat in acest nou, sub denumirea de Layer 1.
Alege instrumentul „Feliere” si selecteaza o portiune din imagine. In rezultat s-au format 3 felii. Daca mai selectam iar o portiune, atunci numarul feliilor creste. Eu am creat 6 felii.
Cu ajutorul instrumentului „Selectare Felie”, putem selecta felia dorita cu un simplu click si ducind cursorul spre margina feliei, o putem transforma, adica schimba dimensiunile. Permutarea de la instrumentul „Feliere” spre „Selectare Felie” se realizeaza si apasind pe tasta Ctrl.
Fiind o imagine pentru internet, ea si trebuie salvata in conformitate cu aceasta. Deci apasa meniul File → Save for Web and devices… Astfel apare o fereastra de optimizare a imaginii.
Mai departe cu cursorul alege pe rind feliile care trebuie modificate. Toti parametrii care pot fi modificati se afla in partea dreapta a ferestrei, unde poti alege formatul feliei respective, intensitatea culorilor, dimensiunea etc.
In partea stinga jos a ferestrei date avem informatia cu privire la formatul si greutatea imaginii (sageata albastra). Astfel monitorizind aceasta putem controlam greutatea si calitatea imaginii.
Deasemenea in partea stinga de sus (incercuit cu rosu) avem optiunea de a vizualiza imaginea in mai multe feluri: original, optimizat, in 2 si 4 variante. Cel mai bine este sa folosimt metoda optimizata (optimized).
Mai departe pentru fiecare felie setam parametrii necesari.
Un mic sfat: De exemplu daca intr-o felie avem un text, o schema sau nu avem o tranzitie intre planuri, atunci cel mai bine este sa salvam felia si pe viitor chiar imaginea in formatul gif, astfel o sa cintareasca mai putin. Daca avem o imagine nemonotona, cum ar fi chipul animalului, atunci cel mai bine sa salvam in formatul jpeg. Daca avem un lucru static sau buton, atunci cel mai bine de folosit formatul png.
Dupa ce am terminat, cream o noua mapa in care vom salva fisierele si apasam „save”, dupa care o sa iti apara o noua fereastra in care alege mapa proaspat creata, iar jos alege denumirea si seteaza tipul file-ului ca „HTMP and Images (*.htmp) si salveaza.
Acum uitete in mapa unde ai salvat imaginea si observi ca este un file in formatul .html si o mapa „images” unde sunt toate feliile create de noi in photoshop. File-ul html este in sine un file in care imaginea este inscrisa codat in el, si acesta se deschide cu ajutorul unui browser. Iar daca l-am deschide cu ajutorul blocnotes (click stinga → open with notepad) atunci am vedea codificarea. Eu insa folosesc programa Notepad + +. Pentru a vedea granitele dintre imaginile date, in dreptul sagetii albastre, inlocuieste cifra 0 cu 1 si salveaza.
Si iata in rezultat ce am obtinut:
Daca nu doresti ca sa se observe marginile, nu trebuie decit iar sa deschizi file-ul html cu ajutorul programei Notepad si sa schimbi „border” din 1 in 0.
Iata aceasta este o metoda simpla de a crea un html header. Oricare ar fi alegerea ta, sper ca lectia aceasta sa iti fie de folos mult timp!
Discutii sub anonimat!