Imaginile web

Imaginile web

Generalitati :

Cu ajutorul lui Adobe Photosho putem concepe imagini web si putem optimiza imagini web sau machete de pagini complete ;

Putem creea pagini web si elemente de interfata ptr pagini web cu ajutorul straturilor si feliilor ;

Putem creea imagini cu efecte de rollover pe text sau pe butoane pentru a le importa in Dreamweaver sau Flash.

Putem creea animatii cu ajutorul Panoului Animatie ;

Adobe Bbridge - ne ajuta sa creem o galerie foto unde putem sa transformam rapid un set de imagini intr-un site web interactive ( avem la dispozitie mai multe sabloane cu aspect profesionist );

De asemenea putem felia imaginile web

Notiuni :

Rollover - este un buton sau o imagine web care in momentul cand trecem cu mosul deasupra lui se modifica ; ptr a creaa un rollover avem parte de 2 imagini : una principala - ptr starrea normala si un asecundara - ptr starea modificata

Expertul in Zoomify - cu ajutorul lui Photoshop noi putem exporta pe un server ( care poate fi chiar al nostru) fisiere JPEG si fisier HTML

Felierea paginilor web

Generalitati :

v    Felierea paginilor inseamna ca se imparte o imagine in mai multe imagini mai mici ( aceste imagini mai mici sunt reconstituite pe o pagina web folosind un table Html sau straturi CSS;

v    Daca dorim ca o imagine web sa fie exportata pe un server sau optimizate trebuie sa intram intram in Meniul File ( fisier ) la comanda Salvare pentru foliateve & Web;( Photoshop salveaza fiecare felie ca un fisier foliate si genereaza codul HTML sau CSS necesar pentru afisarea imaginii foliate.

Felierea paginilor web

Mai inainte de a crea o felie trebuie sa deschidem un fisier ( document) file new , sau file open sau file open as ,open recent ;

Creare de felii:

o      Feliile pot fi create prin cu ajutorul instrumentului feliere sau pe baza de straturi ; ( acest instrument de feliere face parte din instrumentele de decupaj si feliere ; ) dup ace am creat o felie o putem selecta , deplasa redimensiona ,alinia ;

Crearea unei felii dintr-un strat :

Intram in panoul Layer ( straturi) si selectam un strat

Aici bifam optiunea Felie noua bazata pe strat.

Crearea unei felii din ghidaje :

     La o imagine adaugam ghidaje

     Selectam instrumental feliere

     Intram in bara de optiuni si dam click pe Optiunea felii din ghidaje ;

Crearea unei felii cu instrumental feliere

v    Selectam instrumental feliere ( feliile existente le gasim in fereastra documentului)

v    Intram in bara de optiuni si aici intalnim mai multe optiuni ;

a)     Dimensiune fixa - aici putem introduce valori ptr inaltimea si latimea feliei ; de asmenea introducem valori ptr pixeli sub forma de numere intregi )

b)     Proportie fixa - introducem numere sau zecimale ptr dimensiuni 0 spre expl daca vrem sa creem o felie cu latimea dubla fata de inaltime, introduceti 2 pentru latime si 1 pentru inaltime.

c)     Normal - stabilim proportiile feliei pe masura ce tragem ;

v    Mergem in zona unde vrem sa creem felia , tinem apasat tasta shift ; iar cu mana dreapta dam clic stanga pe mouse si tragem ( va aparea un patrat ; o felie in forma de patrat) ; dac vrem sa trasam din centru , tinem apasat tasta alt si tragem cursorul ; dac vrem sa aliniem o felie la o alta felie din imagine intram in meniul Wiew - Ajustare la ;

v    Selectarea feliilor ;

Se face cu ajutorul instrumentului selectare felie ;

Setarea optiunilor ptr felie :

T    Exista o caseta de dialog numita Optiuni felie - aici intalnim urmatoarele optiuni ; Tipul , Numele si Url ;

Optimizarea feliei :

T    Exista o caseta de dialog Salvare pentru dispozitive & Web. In care putem seta optimizarea ;

Tipuri de felii:

Felii create automat -sunt generate automat

Felii create de utilizator -create cu ajutorul instrumentului feliere

Felii bazate pe straturi -create cu ajutorul straturilor ;

Deplasarea unei felii ;

     Selectam una sau mai multe felii

     Intram in chenarul de selectie a feliei si tragem felia in noua pozitie ; (Apasati Shift pentru a limita deplasarea la o linie verticala, orizontala sau diagonala de 45°.)dac am ajuns déjà in caseta de dialog nu mai putem dimensiona feliile sau sa le redimensionam )

Redimensionarea feliilor :

Selectam una sau mai multe felii;

Tragem de specificatorul lateral sau din colt al acesteia ( feliile le putem face mai mari sau mai mici prin miscarea cursorului )

De asemenea putem deplasa sau redimensiona feliile folosind coordinate numerice ; selectam felia ; apoi dam dublu clic stanga pe unul din punctuletele feliei ; se va deschide o caseta de dialog numita Felie ( slice option ) aici intalnim 2 optiuni ; slice type si dimension : in caseta dimension gasim niste litere ; x, y , w, h , w- specifica latimea feliei ; h - specifica inaltimea feliei ; x- pecifica distanta in pixeli intre muchia stanga a feliei si originea riglei in fereastra documentului.; y- Specifica distanta in pixeli intre muchia superioara a feliei si originea riglei in fereastra documentului.

Ajustarea feliilor :

Intram in meniul Vizualizare --- Ajustare la ;

Selectati Vizualizare > Ajustare. O bifa indica faptul ca optiunea este activata.

Deplasati feliile selectate dupa cum doriti. Feliile se ajusteaza la oricare din obiectele alese de dvs. in cadrul a 4 pixeli.

Conversia feliilor automate si strat la felii utilizator

T    Dam click pe instrumental Selectare feliere

T    Selectam una sau mai multe felii ptr conversie ;

T    Intram in bara de optiuni si facem click pe Promovare ;

Afisare sau ascundere limite felii;

Selectati Vizualizare > Afisare > Felii.

Afisare sau acundere felii automate :

o      Selectam instrumental felie

o      Intram in bara de optiuni si dam click pe afisare felii automate sau ascundere felii automate ;

o      Selectam Vizualizare > Afisare > Felii.( Feliile automate apar cu celelalte felii ale dvs.)

Afisare sau ascundere numere de felie

o      Editare > Preferinte > Ghidaje, Grila, si Felii.

o      Sub felii facem click pe afisare numere felii ;

Modificarea culorii ptr liniliile feliilor :

T    Editare > Preferinte > Ghidaje, Grila si Felii

T    De sub Felii, selectati o culoare din meniul Culoare linie.

Compozitia unei felii:

A) liniile - daca liniile sunt pline e linie utilizator sau strat ; iar daca liniile sunt punctuate e linie automata ; feliile utilizator si cele strat au simboluri albastre iar cele automate au simboluri gri ; feliile sun numerotate de la stanga la dreapta si de sus in jos , incepand cu coltul din stanga jos a imaginii;

Stergerea unei felii :

Selectam una sau mai multe felii

Selectam instrumental feliere sau selectare feliere

Apoi apasam tasta backspace sau delete

Stergerea tuturor feliilor :

Vizualizare > Stergere felii.( astfel putem sterge toate feliile utilizator si toate feliile strat)

Blocarea feliilor :

T    Vizualizare > Blocare felii.

Alinierea feliilor :

Selectati feliile utilizator pe care doriti sa le aliniat

Selectam instrumental selectare feliere

Intram in bara de optiuni si selectam o optiune( exista urmatoarele optiuni : sus , jos , stanga , centru vertical , dreapta , centru orizontal , centru vertical ; )

Distribuirea feliilor :

Selectati feliile utilizator pe care doriti sa le aliniat

Selectam instrumental selectare feliere

o      Intram in bara de optiuni si selectam o optiune : ( aceleasi optiuni ca cele de mai sus )

Modificarea ordinii de stivuire a feliilor

v    Selectam una su mai multe felii

v    Selectam instrumental selectare felie

v    Intram in bara de optiuni si facem click pe o optiune de ordine de stivuire ( optiunile de ordine de stivuire sunt : Aducere in fata ; Aducere spre fata ; Trimitere inapoi ; Trimitere in fata;

Combinarea feliilor : se pot combina 2 sau mai multe felii intr-o singura felie ;

Selectati doua sau mai multe felii.

Faceti clic dreapta si selectam combinare felii;;( feliile strat nu se combina )

 Copierea si lipirea unei felii

o      Selectam instrumental selectare felie

o      Selectam una sau mai multe felii

o      Apoi intram in meniul Edit - Copy ; (O felie nu poate fi copiata daca exista o selectie activa in document (o selectie de pixeli intr-un cadru sau un traseu selectat)

o      In aceasta etapa stabilim unde vrem sa efectuam lipirea (Daca doriti sa lipiti felia in alta imagine, deschideti si afisati imaginea respectiva.iar daca Daca lipiti felia in Dreamweaver, verificati daca fereastra documentului Dreamweaver este activa.

o      Selectati Editare > Lipire. Se creeaza un strat nou cand este lipita o felie intr-o imagine Photoshop.

Duplicarea feliei:

Selectam una sau mai multe felii '

Tinem apasat tasta Alt si tragem cursorul in interiorul selectiei ;

Divizarea feliilor :

T    Selectam una sau mai multe felii

T    Selectam instrumental selectare feliere

T    Intram in bara de optiuni si dam click pe Divizare ( in aceasta caseta de dialog Divizare felie selectam Previzualizare ptr a previzualiza modificarile ;

T    Intram in caseta de dialog Divizare felie si selectam una din optiunile urmatoare :

T    A) Divizare orizontala Divizeaza felia in lungime.

T    B)Divizare verticala divizeaza felia in latime.

Selectati si introduceti o valoare pentru felii in jos sau felii pe lung pentru a spatia fiecare felie uniform in numarul de felii specificat.

Selectati si introduceti o valoare pentru pixeli per felie pentru a crea felii cu numarul de pixeli specificat. Daca felia nu poate fi divizata uniform dupa numarul respectiv de pixeli, cantitatea ramasa va crea o alta felie. De exemplu, daca divizati o felie care are 100 de pixeli latime in trei felii noi, fiecare de 30 de pixeli latime, zona ramasa de 10 pixeli latime devine o noua felie.

Faceti clic pe OK.

Selectarea feliilor :

Fie "

o      Selectam instrumental selectare felie

o      Facem click pe felia din imagine

Fie :

T    Selectam instrumental selectare felie ;

T    Mentinem apasata tasta shift ptr a adauga felii la selectie ;

Fie :

     Fisier > Salvare pentru dispozitive & Web.

     Intram in caseta de dialog Salvare pentru dispozitive & Web.si utilizam instrumental fliere ptr a selecta o felie ;

Fie :

o      Intram in caseta de dialog Salvare pentru dispozitive & Web

o      Selectam instrumental selectare feliere ;

o      Faceti clic intr-o felie automata sau in afara zonei imaginii si trageti peste feliile pe care doriti sa le selectati. (Pentru a deplasa o felie utilizator este suficient sa faceti clic in interiorul acesteia si sa o trageti.)

Adaugarea de text html la o felie ;

o      Selectam o felie ;

o      Selectam instrumentul selectare felie

o      Apoi facem dublu click pe felie cu instrumental selectare felie si va fi afisata caseta de dialog Optiuni felie ; (daca vrem sa setam optiuni suplimentare de formatare ,facem dublu click pe pe felie in caseta de dialog Salvare pentru dispozitive & Web

o      Intram in caseata de dialog optiuni felie si din meniul Tip felie selectam Fara Imagine ;

o      In caseta de text introducem textul dorit ;

o      (numai in caseta de dialog Salvare pentru dispozitive & Web) Daca textul include taguri de formatare HTML, selectati optiunea Text HTML

o      Numai in caseta de dialog Salvare pentru dispozitive & Web) Daca doriti, selectati optiunile din sectiunea Aliniere celula a casetei de dialogL optiunile de aliniere sunt urmatoarele ;

a)     Stanga-Aliniaza textul la stanga zonei feliei.

b)    Dreapta- Aliniaza textul la dreapta zonei feliei.

c)     Mijloc - Centreaza textul vertical in zona feliei.

d)    Jos - Aliniaza textul din partea de jos a zonei feliei.

e)     Sus - Aliniaza textul din partea de sus a zonei feliei.

f)      Centru - Aliniaza textul pe centrul zonei feliei.

g)     Linie de baza - Seteaza o linie de baza comuna pentru prima linie de text din celulele aceluiasi rand (al tabelului HTML obtinut). Fiecare celula din rand trebuie sa utilizeze optiunea Linie de baza.

h)    Implicit - Utilizeaza alinierea verticala implicita a browserului.

i)      Implicit - Utilizeaza alinierea orizontala implicita a browserului.

Specificarea mesajelor de browser si a textului alt ;

Puteti specifica ce mesaje sa apara in browser. Aceste optiuni sunt disponibile doar pentru feliile de tipul Imagine si apar doar in fisierele HTML exportate.

Selectam o felie

Selectam instrumental selectare felie

Cu instrumental selectare felie facem dublu click pe felie si astfel va fi afisata caseta de dialog Optiuni felie ;

In caseta de dialog Optiuni felie, introduceti textul dorit

a)     Text mesaj - Modifica mesajul implicit in bara de stare a browserului pentru o felie sau mai multe felii selectate

b)    Tag alternative/alt- Specifica un tag Alt pentru o felie sau mai multe felii selectate. Textul Alt apare in locul imaginii feliei in browserele negrafice. De asemenea, apare in locul imaginii in timp ce imaginea se descarca si ca sugestie pentru instrument in anumite browsere.

Asignarea informatiilor de legatura URL unei felii imagine

Daca asignam o legatura un URl unei felii intreaga zona a feliei devine legatura in pagina Web obtinuta. Cand un utilizator face clic pe legatura, browserul Web navigheaza la URL-ul specificat si la cadrul tinta. Aceasta optiune este disponibila numai pentru feliile de tipul Imagine.

Selectam o felie

Selectam instrumental selectare felie si se va afisa o caseta de dialog numita Optiuni Felie

In caseta de dialog Optiuni Felie -in caseta de text URL introducem un URl ;( Puteti introduce un URL relativ sau absolut (complet).daca introducem un URL absolute trebuie sa introducem un Url correct ;

Daca dorim , putem introduce numele cadrului tinta in caseta de text tinta :

a)     blank -fisierul legat e afista intr-o alta fereastra ( e lasata deschisa fereastra initiala de browser)

b)     self - fisierul legat este afisat in acelasi cadru ca fisierul initial ;

c)     patent - fisierul legat este afisat in propriul cadru initial ;

d)     top - intreaga fereastra de browser este inlocuita cu fisierul legat ( se inlatura toate cadrele curente ) Numele trebuie sa se potriveasca cu numele unui cadru definit anterior in fisierul HTML pentru document. Cand un utilizator face clic pe legatura, fisierul specificat se afiseaza in cadrul nou.

Selectarea unei culori de fundal ptr o felie

o      ptr feliile imagine putem selecta o culoare de fundal ptr a umple zona transparenta a feliei ;

o      ptr feliile fara imagine , putem selecta o culoare de fundal ptr a umple intreaga zona a feliei ;

v    Selectam o felie (Daca lucrati in caseta de dialog Salvare pentru dispozitive & Web din Photoshop, faceti dublu clic pe felie cu instrumentul Selectare Felie pentru a afisa caseta de dialog Optiuni felie.)

v    Intram in caseta de dialog Optiuni Felie intram in meniul Pop-Up si selectam o culoare de fundal ;

v    In meniul Pop-up - Alegere culoare Adobe ( avem urmatoarele optiuni: Fara , Mat Alb , Negru , Altele ;

Redenumirea unei felii

Selectarea unei felii

Selectam instrumental selectare felie

Facem dublu click pe felie cu instrumental selectare felie ; si astfel se va afisa o caseta de dialog numita optiuni felie ;

In caseta de dialog optiuni felie - intram in caseta text nume si introducem un nume nou ;

Afisarea casetei de dialog optiuni felie

o      Selectam instrumental selectare felie

o      Cu instrumental selector felie facem dublu click pe felie ( sau selectam instrumental selectare felie si dam click pe butonul optiune felie ;

Specificarea unui tip de continut de felie

Cand exportam un fisier html , putem preciza cum sa apara datele de felie intr-un browser Web

Selectam o felie

Selectam instrumental selectare felie

Cu instrumental selectare felie facem dublu click pe felie ; astfel se afiseaza caseta de dialog Optiuni felie

Intram in caseta de dialog Optiuni Felie si din meniul pop-up Tipe felie selectam tipul feliei ;

Optimizarea paginilor web

Daca vrem sa optimizam paginile web intram in caseta de dialog Salvare pentru Web si diapozitive ( intram in File si selectam aceasat optiune )

Prezentare generala a casetei de dialog Salvare ptr web si diapozitive :

Sub locul unde scrie Save for Web and device gasim caseta de instrumente

A)   Optiunile de afisare

B)    Caseta de instrumente ( instrumente de marire , de decupare etc )

C)    Meniu pop-up optimizare ( situate in partea de sus drept a casetei : unde scriePresetare ( optiune nespecificat iar din jos scrie Gif,, etc )

D)   Meniu Pop -up table de culori

E)    Controale Animatie ( sunt situate deasupra la save , cancel , finish)

F)    Caseta text Zoom ( este in partea de jos a imaginii langa locul unde scrie previzualizare )

G)   Meniu Previzualizare in Browser ( langa caseta de text zoom)

H)   Imagine originala

I)      Imagine optimizata

In partea de sus stang a casettei gasim urmatoarele optiuni de afisare :

a)     Initial - imginea este afisata fara optimizare

b)     Optimizat - afiseaza imaginea cu setarile curente de optimizare aplicate.

c)     Pliere dubla -Afiseaza doua versiuni ale imaginii una langa cealalta.

d)     Pliere cvadrupla -Afiseaza patru versiuni ale imaginii una langa cealalta.

Optimizarea unei imagini ptr web

     Fisier > Salvare pentru Web si dispozitive.

     In aceasta caseta de dialog facem click pe una din optiunile de afisare : Optimizat sau Pliere dubla sau Pliere cvadrupla.( Daca imaginea contine mai multe felii, selectati una sau mai multe felii pe care doriti sa le optimizati.)

     Intram in meniul presetare si aici fie selectam o setare prestabilita , fie setam optiuni de setare individuale ;

     Setam reglarile de optimizare pana cand suntm satisfacuti de echilibrul dintre calitatea imaginii si dimensiunea fisierului ; ( daca imaginea contine mai multe felii trebuie sa ne asiguram ca am optimizat toat feliile ;

     Daca optimizati o imagine care are un profil de culoare incorporat, altul decat sRGB, trebuie sa efectuati conversia culorilor imaginii la sRGB inainte a salva imaginea pentru a fi utilizata pe Web

     Intram in meniul metadate din si alegem metadatele XMP de salvat impreuna cu fisierul optimizat.;( Metadatele sunt acceptate integral de formatul de fisier JPEG si partial de formatele GIF si PNG.)selectam Fisier > Informatii fisier pentru a vizualiza sau a introduce metadate pentru document).

Intalnim urmatoarele optiuni ;

a)     Fara - Nu sunt salvate metadate.

b)     Drepturi de autor- Salveaza notele despre drepturile de autor, termenii de utilizare a drepturilor, starea drepturilor de autor si un URL cu informatii despre drepturile de autor.

c)     Informatii despre contact si drepturile de autor -Salveaza toate informatiile despre drepturile de autor, plus urmatoarele informatii: autorul, titlul postului autorului, e-mail(urile), adresa, orasul, statul/provincia, codul postal, tara, numerele de telefon si site-urile Web.

d)    Totul cu exceptia informatiilor despre camera - Salveaza toate metadatele XMP, cu exceptia datelor EXIF.( Datele EXIF includ setarile camerei si informatiile despre scena precum timpul de expunere, data si ora, distanta focala, compensarea expunerii, modelul de masurare si utilizarea blitului.)

e)     Facem click pe salvare

f)      In caseta de dialog salvare optimizata introducem un nume de fisier si selectam o locatie ptr fisierul sau fisierele rezultate ; de asemenea putem selecta o optiune ptr format : avem urmatoarele optiuni: un fisier html si fisiere de imagine, numai fisiere de imagine , numai un fisier html ; optional putem seta setarile de imagine ptr fisierile html si de imagine ; daca imaginea contine mai multe feliiselectam o optiune ptr a salva felii din meniul felii; Toate feliile sau Feliile selectate.

Stergere a presetarilor de optimizare : Ptr a sterge o presetare procedam in felul urmator ;

Intram in meniul Presetare si selectam Presetare

Din meniul optimizare selectam stergere setari ;

Salvarea presetarilor de optimizare :

Presetarile de optimizare pot fi salvate si aceste setari salvate apar in meniul "Pop-up Presetare"impreuna cu setarile denumite predefinite ;

T    Setam optiunile de optimizare in functie de necesitati

T    Denumim setarile si le salvam in dosarul corespunzator ;

T    Photoshop(Windows XP) Document and Settings[Nume utilizator]Application DataAdobeAdobe Photoshop CS4Optimized Settings

Lucrul cu felii in caseta de dialog salvare ptr web si diapozitive

Daca o imagine contine mai multe felii primul lucru pe care trebuie sa-l facem este sa specificam feliile pe care vrem sa le optimizam

A) Afisarea sau ascunderea felilor :

Dam click pe butonul Comutare vizibilitate felii ptr a afisa sau ascunde toate feliile ; ( ptr a afisa sau ascunde felii automate intram in meniul Po-up Previzualizare ; selectam optiunea ascundere felii automate

A)   Selectarea feliilor din caseta de dialog Salvare ptr web si diapozitive :

o      Selectam instrumental selectare felie ;

o      Apoi selectam o felie ( facem click pe ea ) ( ptr a selecta mai multe felii facem Shift-clic sau Shift-tragere)

Vizualizarea optiunilor ptr felii in caseta de dialog Salvare pentru Web si dispozitive

Selectam instrumental selectare felie

Facem dublu click pe o felie ;

Legarea feliilor :

Selectam 2 sau mai multe felii ;

Intram in meniul Pop-up Optimizare ( situate in dreapta meniului Presetare ) si selectam optiunea legare felii; ( pictograma ptr legare apare pe feliile legate si este in forma de 8 bagat intr-un patrat negru )

Anularea legarii unei felii ;

T    Selectam felie

T    Intram in meniul pop-up optimizare si selectam Anulare Legare Felie ;

Anularea legarii tuturor feliilor dintr-o imagine

o      Intram in meniul Pop-up optimizare , si selectam Anulare globala felii ;

Comprimarea unui element graphic web la o anumita dimensiune de fisier

o      File ( fisier) Fisier > Salvare pentru Web si dispozitive.

o      In caseta de web" Salvare ptr web si diapozitive" , din partea de sus stanga , selectam una din optiunile de afisare ; Optimizat, Pliere dubla sau Pliere cvadrupla.( Daca selectati Pliere cvadrupla, selectati previzualizarea pe care doriti sa o optimizati.)optional putem select ape care dorim sa le optimizam si formatul de fisier pe care dorim sa-l utilizam ;

o      Din meniul optimizare ( situate in dreapta meniului Setari ) selectam Optimizare la dimensiune fisier

o      Introduceti dimensiunea de fisier dorita.

o      Selectam o optiune ptr incepere :

a)     Setari curente-Utilizeaza formatul de fisier curent.

a)Selectare automata GIF/JPEG;

b)Selecteaza automat formatul optim, in functie de continutul imaginii.

o      Selectati o optiune de utilizare pentru a specifica daca doriti sa aplicati dimensiunea de fisier indicata numai pentru felia curenta, pentru fiecare felie din imagine sau pentru toate feliile. Faceti clic pe OK.

Redimensionarea ilustsratiilor la optimizare - adica putem sa redimensionam o imagine la dimensiunea in pixeli specificata sau la un procentaj din dimensiunea initiala ;

o      Intram in caseta de dialog Salvare pentru Web si dispozitive.- si dam click pe fila Dimensiune imagine ;

o      Aici avem urmatoarele optiuni ;

a)     Constrangere proportii- Pastreaza proportiile curente de latime pe inaltime, in pixeli.

b)     Calitate -Specifica metoda de interpolare.( Optiunea Bicubica mai precisa produce in general rezultate mai bune atunci cand reduceti dimensiunea imaginii.)

c)     Antialias(Numai Illustrator) Elimina muchiile zimtate din ilustratii, aplicand functia antialias.

d)     Taiere la plansa de lucru (Numai Illustrator) Taie dimensiunea ilustratiei pentru a corespunde limitelor plansei de lucru a documentului(Partea din ilustratie care depaseste limitele plansei de lucru va fi stearsa.)

e)     Introduceti noua dimensiune in pixeli sau specificati procentajul cu care va fi redimensionata imaginea

f)      apoi facem clic pe Aplicare.

Gnerare de straturi CSS ptr grafica web

     intram in caseta de dialog Salvare pentru Web si dispozitive.

     In aceasta caseta de dialog dam click pe fila straturi

     In fila straturi selectam Export ca straturi CSS.

     Din meniul pop - up straturi selectam un strat ( la valorile dorite selectam urmatoarele valori ;

a)     Vizibil-Creeaza un strat CSS vizibil in fisierul HTML rezultat.

b)    Ascuns - Creeaza un strat CSS ascuns in fisierul HTML rezultat.

Salvarea unui fisier ptr a fii trimis prin email

Deschidem imaginea in fotoshop

Fisier > Salvare pentru Web si dispozitive.

In partea de sus a casetei de dialog Salvare pentru Web si dispozitive., facem click pe fila optimizat ;

Intram in meniul Presetare si selectam optiunea JPEG:

Dam click pe fila Dimensiune Imagine

Trebuie sa ne asiguram ca optiunea Constrangere proportii este selectata si introducem, o latime.( dac destinatarul are o conexiune la internet redusa utilizam o dimensiune mai mica ) o dimensiune foarte buna ptr email este 400 pixeli )

Facem click pe salvare( introducem un nume de fisiser si locatia unde dorim sa salvam fisierul )

Trebuie sa ne aiguram ca in Format este selectat optiunea : Numai imgini ;( facem click pe salvare ; )

Acum sunteti pregatit sa trimiteti fisierul prin e-mail. In unele programe de e-mail, puteti sa trageti fisierul in corpul mesajului. In alte programe, trebuie sa utilizati comanda Atasare sau Inserare.

Optiunile de optimizare a graficii web

Formatele ptr grafica web - pot fi de doua feluri ;

a)     rasterizate (bitmap)( Formatele bitmap - GIF, JPEG, PNG si WBMP - depind de rezolutie, ceea ce inseamna ca dimensiunile unei imagini bitmap, posibil si calitatea imaginii, se vor modifica la diferite setari de rezolutie ale monitorului. Formatele vectoriale pot sa includa si date rasterizate.

b)    Vectoriale(SVG si SWF - nu depind de rezolutie si pot fi marite sau micsorate fara a pierde din calitatea imaginii.)

Din caseta de dialog Salvare pentru Web si dispozitive puteti sa exportati numai in format SVG si SWF in Adobe Illustrator.

Optiuni de optimizare JPEG

Formatul JPEG- este este formatul standard pentru compresia imaginilor cu tonuri continue, cum ar fi fotografiile;

Setarile de optimizare ptr JPEG :
Meniul format fisier

Meniul calitate compresie

Meniul optimizare

Calitate - determina nivelul de compresie ; dac utilizam o valoare mare ptr setarea calitate acest lucru determina o dimensiune mai mare a fisierului ; de aceea est bines a folosim setari diferote si apoi sa vizualizam imaginea optimizata cu setari diferite ptr a stabili echilibrul optim intre calitate si dimensiunea fisierului.( la calitate in curs am vazut 60??)

Optimizat - creeaza un JPEG imbunatatit cu o dimensiune a fisierului putin mai mica.; Formatul JPEG optimizat este recomandat pentru compresia maxima a fisierului;; dac e o versiune mai mica de browser nu accepta acezt lucru ;

Progresiv -Afiseaza imaginea progresiv intr-un browser Web.( Fisierele JPEG progresive necesita mai multa memorie RAM pentru vizualizare si nu sunt acceptate de unele browsere.)

Neclaritate - specific gradul de neclaritate care va fi aplicat imaginii; (Se recomanda o setare intre 0,1 si 0,5.

Incorporare profil de culoare (Photoshop) sau profil ICC (Illustrator-)-Pastreaza profilurile de culoare din fisierul optimizat. Unele browsere utilizeaza profiluri de culoare pentru corectarea culorilor.

Mata-Specifica o culoare de umplere pentru pixelii care erau transparenti in imaginea initiala.( Faceti clic pe specimenul de culoare Mat pentru a selecta o culoare din instrumentul Alegere culoare sau selectati o optiune din meniul Mat: Pipeta culoare (pentru a utiliza culoarea din caseta de esantion a pipetei), Culoare plan frontal, Culoare fundal, Alb, Negru sau Altele (pentru a utiliza instrumentul Alegere culoare).

Optiunile Culoare plan frontal si Culoare fundal sunt disponibile numai in Photoshop.

Optiuni de optimizare GIf si PNg 8 -

GIF este formatul standard pentru compresia imaginilor cu culori aplatizate si detalii clare, cum ar fi grafica vectoriala, logo-urile sau ilustratiile cu text.

PNG 8 -comprima eficient zonele solide de culoare, pastrand in acelasi timp claritatea detaliilor.

Fisierele PNG‑8 si GIF accepta culori pe 8 biti, deci pot afisa pana la 256 de culori.

Setari de optimizare ptr GIF : pe aceasta pagina intalnim urmatoarele maniuri :

La Presetare scriem GIF 128 cuantizat

A)   Meniul Format Fisier - unde scrie GIF ;

B)    Meniul algoritm reducere de culori

C)    Meniul Algoritm de cuantizare

D)   Meniul de optimizare

Meniul algoritm reducere de culori :

Exista urmatoarele metode de reducere a culorillor :

a)     Perceptual -e creat un tabel de culori personalizat ( se acorda prioritate culorilor sensibile ochiului uman )

b)     Selectiv -e creat un tabel de culori similar cu tabelul de culori perceptual ; ( se pastreaza culorile web si sunt favorizate zone largi de culoare )

c)     Adaptive- e creat un tabel de culori personalizat ( sunt esantionate culorile din spectrul predominant din imagine )de exemplu daca o imagine are numai culorile verde si albastru produce un tabel de culori compus in principal din tonuri de verde si albastru.

d)     Restrictiv(WEB) -Utilizeaza tabelul de 216 culori standard, comun pentru paletele de culori pe 8 biti din Windows si Mac OS (256 de culori)

e)     Personalizat - Utilizeaza o paleta de culori care este creata sau modificata de catre utilizator.

Daca vrem sa personalizam tabelul de cautare a culorilor intram in caseta de dialog "Salvare ptr Web si diapozitive "

Meniul algoritm de cuantizare :

Metode de cuantizare :

Exista urmatoarele metode de cuantizare :

a)     difuzie -Aplica un tipar aleatoriu care de obicei este mai putin vizibil decat un tipar de cuantizare.

b)    Tipar-Aplica un tipar patrat similar semitonului pentru a simula culorile care nu se gasesc in tabelul de culori. -

c)     Zgomot -Aplica un tipar aleatoriu similar metodei de cuantizare Difuzie, ( deosebirea e ca tiparul nu devine difuz in pixelii adiacenti.)