M-am hotarat sa pasesc in lumea webdesign. Dupa multe lecturi pe internet si dupa cum am fost sfatuita, am ales HTML, Dreamweaver si Adobe Photoshop pentru ca este mai usor. Pasii sunt multi, marunti si greu de parcurs si am decis ca fiecare lectie pe care o voi invata si fiecare tutorial pe care-l voi face o sa-l prezint aici din doua motive:
1. Repetitia este mama invataturii, repetand voi retine mai bine.
2. Poate acest blog facut in pasi marunti va mai ajuta pe cineva.
Voi incepe sa invat bazele HTML-ului in Notepad dupa care voi trece la Dreamweaver
Cine doreste sa invete pas cu pas cu mine este binevenita (binevenit)

Adobe Photoshop : Cum sa facem link-uri in Photoshop si cum le convertim in HTML

Crearea unui site care sa arate bine si sa se miste bine duce implicit la imbinarea mai multor elemente.
Bineinteles ca poti face o pagina web numai in Notepad insa inserarea anumitor elemente ce tin de design si nu numai duce la necesitatea acumularii de cunostiinte din mai multe tehnologii. Asta nu inseamna ca trebuie sa stim la perfectie si HTML si CSS si PHP si Photoshop si altele insa cateva elemente in plus nu strica.
Un exemplu clar este ca Dreamweaver desi este un editor HTML genereaza automat coduri CSS, deci trebuie sa avem habar de asta daca vrem sa intervenim in liniile de cod.
Avantajul in Adobe Photoshop este ca putem lucra pe o imagine si in afara de faptul ca o putem prelucra in diverse moduri putem implementa si elemente de HTML si nu numai.
Am sa va prezint cum putem lua o imagine si sa punem link-uri pe ea folosind Adobe Photoshop.

Am luat o poza cu frumoasa Megan Fox si am deschis-o in Photoshop
Am scris cateva cuvinte pe imagine pe care le voi transforma in link-uri (butoane)


Din bara cu unelte selectam Slice Tool. Cu aceasta unealta incepem sa marcam in jurul scrisului niste dreptunghiuri care practic pe viitor vor functiona ca niste link-uri (acele dreptunghiuri vor fi practic butoanele).





Dupa ce le-am marcat dam click dreapta pe fiecare si alegem optiunea Edit Slice Options.
In fereastra ce apare facem setarile pentru fiecare link in parte. Despre Name, URL, Alt tag, am mai spus, dar e bine sa repet.
La URL trecem adresa catre care face legatura link-ul.
La alt tag punem un text daca vrem sa apara un scris la trecarea mouse-lui peste ,,buton".
Ce este frumos este ca exista si optiunea de _blank. La Target daca punem _blank pagina se va deschide intr-o fereastra noua a browser-ului. Daca punem _parent se va deschide in aceeasi fereastra.
Se pot seta si dimensiunile.
Dupa ce am setat fiecare link dam Save as -> Save for web & devices si apare alt set de setari.
Cel mai important este sa alegem Jpeg. Restul optiunilor tin de fiecare in parte.



Cand dam save alegem type : HTML & images (*.html)
Apoi pe salvare putem lucra normal intr-un editor pentru ca practic acum avem un document HTML
De observat in directorul unde am salvat ca apare un folder in care avem toate imaginile decupate.



Publicat de
Etichete: ,