Instituţia de învăţământ superior: Universitatea de Arte “Gorge Enescu”, Iaşi Facultatea: Arte Plastice, Decorative şi Design Catedra/Departamentul: Textile şi Design/Design Disciplinele postului: Proiectare asistată de calculator Domeniul: Anul III: graphic - design -

PROIECTARE ASISTATĂ DE CALCULATOR

Cuprins:

Realizarea de copertă CD, urmărindu-se următoarele etape: 1. Optimizarea imaginii digitale; 2. Interpretarea imaginii prelucrate anterior; 3. Crearea unui text cu efect 4. Prelucrarea unei singure imagini în vederea transmiterii de mesaje

diferite, în funcţie de suporturile folosite – afiş, fluturaş, ambalaj, copertă carte, etc.

5. Pregătirea pentru tipar 6. Despre realizarea paginilor web 7. Ilustraţia 8. Mijloace publicitare 9. Structura unei agenţii de publicitate

PREGĂTIREA PENTRU TIPAR – date generale pentru realizarea machetei Folosirea programului Adobe Illustartor CS2

În acest tutorial am luat ca şi exemplu o carte poştală.

* La deschiderea unui document nou în Illustrator, document ce va constitui macheta, trebuie stabilite dimensunile finale ale lucrarii ce urmează a fi tipărită, în cazul de faţă 15,2/10,2cm, dimensiune ce corespunde cu6/4inch (o dimesiune standard pentru carti postale). Foarte important este tipul paletei cromatice. Obligatorie fiind opţiunea CMYK .

*Tiparul are nevoie de un mic spaţiu de jur împrejurul imaginii.(Bleed area)Pentru a vizualiza aceste margini urmaţi linia de comenzi:Object >>> Crop Area >>> Make

Mărimea acestui spaţiu trebuie să fie de 1/8” adică 0,125” sau 0,3 cm. Pe fiecare latură. Imaginea va fi pregătită ţinând-u-se cont şi de cei 6 mm. Atât pe înălţime cât şi pe lăţime, deoarece scalările în Illustrator afectează rezoluţia.

* Avem trei spaţii de care trebuie să ţinem cont: - marginea cernelei Bleed Area – mai mare cu 6 mm. - dimensiunea produsului finit - zona de siguranţă, unde nu trebuie să avem text sau chenare.

* Toate imaginile vor trebui OBLIGATORIU să fie prelucrate la o rezoluţie de 300 dpi iar desenele artistice la 1200 dpi CMYK Imaginile Alb-Negru vor fi convertite la Grayscale şi nu RGB. Imaginile TIFF să nu fie salvate cu “LZW Compresion”.

* Culoarea neagră nu este cea din paletă, adică CMYK- 0;0;0;100%, negrul tipografic fiind : CMYK : 60; 40; 20; 100% (4 Color RICH Black)

* O atenţe deosebită trebuie acordată contururilor de culoare neagră, ce pot rămâne cu negrul din paletă şi conţinutul să fie 4colorRICH black.. Cu ajutorul pipetei, pe care dând dubluclic o puteţi seta să preia valorile punctului (în partea dejos), urmăriţi în caseta Info valorile CMYK

Edit >>> Preferences >>> Appearance of Black

* Înainte de salvare trebuie verificate dacă imaginile sunt link sau embedd, acest lucru îl puteţi vedea deschizând Window >>> Document Info >>> Linked image;tot la Document Info puteţi verifica dacă rezoluţia este 300, dacă sunt folosite 4 canale de culoare, daca documentul este CMYK..

Dacă imaginile sunt linkuri, trebuie trimise spre tipografie şi folderele care le conţin.Verificaţi acest lucru deschizând fereastra links –Windows >>> Links unde puteţI vedea starea imaginilor.

* Pentru a evita neplăcerile cauzate de substituirea unor fonturi, prin asta modificând aspectul grafic al paginii, convertiţi textul la Outline.

Altfel va trebui să trimiteţi tipografiei si folderele ce conţin fonturile folosite.

* Salvarea documentului se va face EPS şi NU nativ AI .

În fereastra cu proprietăţi EPS verificaţi compatibilitatea şi check la includerea Thumbnails; CMYK PostScript; 8 bit Preview şI PostScript Level2.

* Folosiţi File >>> Document Setuppentru a mări reyoluţia daca este necesar, mai ales în cazul Line Art

* Dimensiunile standard al colilor de hârtie folosite în tipografie: A0 paper size (841mm x 1189mm) - A1 paper size (594mm x 841mm) A2 paper size (420mm x 594mm) - A3 paper size (297mm x 420mm) - A4 paper size (210mm x 297mm) A5 paper size (148mm x 210mm) - A6 paper size (105mm x 148mm) - Compliment Slip (99mm x 210mm) - Business Card Standard (85mm x 55mm or 90mm x 50mm)

Realizarea unei texturi în Adobe Photoshop CS2 Având un layer background. Adăugaţi un layer nou, numit Forma, unde desenaţi o formă oarecare. În acest exemolu am desenat un cerc.

Deschideţi paleta Channel urmând ca după ce daţi clic pe săgeata din dreapta sus, să alegeţi opţiunea New Channel Bifaţi opţiunea Masked după care alegeţi culoarea zonei luminate, precum si opacitatea acesteia, dar să fie peste 50% şi daţi OK.

Umpleti selecţia cu un gradient. Nu uitaţi că atunci când lucraţi pe canalele de culoare, lucraţi pe negativ, aceste canale conţinând numai informaţii in paleta Grayscale.

Pentru a încărca selecţia, doar cea care are transparenţa peste 50% daţi dublu clic pe layerul Alpha 1.

După ce vă întoarceţi la modul RGB si în paleta Layers veţi avea gradientul pe formă. Pentru a salva selecţia gradientului adăugaţi o mască layerului forma.

Faceţi o dublură layerului forma şi numiţi-o umbrire Acum blocaţi pixelii transparenţi apăsând pe iconiţa Lock, urmând să umpleţi forma cu o altă culoare, care va fi culoarea zonei umbrite.

Această culoare o veţi putea schimba ulterior.

Urmează să adaugaţi textura. Selectaţi masca layerului umbrire si alegeţi: Filter > Noise > Add Noise urmând să stabiliţi valoarea şi modul de afişare.

Acesta este rezultatul acestui exerciţiu. Puteţi folosi şi alte texturi: Filter > Artistic > Sponge Filter > Sketch > Reticulation... Pueţi oricând să schimbaţi culorile, dar atenţe să aveţi blocată zona de transparenţă.

Succces !

Aplicarea unei ‘umbre aruncate’ – în Adobe Photoshop CS2 Scopul este de a realiza umbra aruncată de către un obiect inserat într-o imagine De exemplu: inserarea unei coloane sau a unui monument 3D pe o imagine cu o piaţetă. Pentru a realiza o umbră ‘aruncată’, în Photoshop, aveţi nevoie de două imagini – spre exemplificare am ales un portret şi o şapcă . Scopul este realizarea unei imagini cât mai realistă, prin adăugarea unui element nou pe o imagine şi realizarea umbrei aruncate de acesta peste imagine. Deschideţi pentru început imaginea de bază.

Urmează să deschideţi Channel palette. Selectaţi si lasati vizibil doar layerul cu cel mai mare contrast, respectiv 'Red', urmând să duplicaţi acest layer (clic dreapta...).

În fereastra 'Duplicate Channel' denumiţi noul layer 'Blur map' după ce aţi ales ca destinaţie un document nou.

Acum veţi avea incă o imagine numită 'Blur map' deschisă pe Desktop. Dispersia umbrei poate fi aplicată oricărui document photoshop, cu excepta celor bitmap.

Acum dacă doriţi să neteziţi gradaţia, dar păstrând detaliile alegeţi linia de comenzi: Filter > Noise > Despeckle. Repetaţi operaţiunea de patru ori (Ctr+F) Imaginea este mult mai neteda ;i mai blândă. Salvati această imagine (Blur map).

Acum vă întoarceţi la modul RGB (Ctr+~) pe documentul iniţial. Deschideţi documentul pe care se află obiectul pe care doriţi să-l lipiţi pe imaginea dvs. şi a cărui umbră urmează sa fie dispersată pe imaginea iniţială. Obiectul pe care-l aduceţi (Copy+Paste) trbuie să aibă backgroundul transparent. Scalaţi şi poziţionaţi obiectul în poziţia dorită, ţinând cont şi de locul unde veţi avea umbra aruncată. Pentru 'Transform' puteţi folosi un shorcut (Ctr+T).

Pentru a crea umbra, aveţi nevoie de un nou layer, situat între cele două existente. Cu ajutorul lasoului, avănd în vedere parametrul 'Feather' pe care+l stabiliţi după ce aţi conturat forma umbrei. Pentru aceasta urmaţi linia de comenzi: Select > Feather şi dati valoarea dorită.. Umpleţi selecţia cu 50% Gray după care alegeţi Filter > Blur > Gaussian blur, pentru a netezi umbra. Având layerul cu umbra selectat, alegeţi Filter > Distort >Displace, si daţi valoare '0' la scalare pe verticală şi ‘30’ la cea verticală. Puteţi experimenta diverse alte valori. Va apărea căsuţa de dialog care te întreabă ce document foloseşti . Căutaţi 'Blur map' şi daţi Ok şi aşteptaţi rezultatul. Veţi oserva cum sa mulat imaginea în interioril selecţiei dvs. Acum pentru a obţine o imagine cât mai realistă, alegeţi modul Multiply (din caseta Layers) care va uni layerele, umbrind culorile de pe imaginea iniţială

Urmează să faceţi cateva corecţii alegând: Adjustement > Hue/Saturation iar în căsuţa de dialog activaţi Colorize şi Prewiew urmând sa corectaţi valorile. Se poate aplica si imaginilor alb-negru (grayscale), cu excepţia celor bitmap.

Cam asta este tot.

Prelucrarea unei fotografii digitale – în Adobe Photoshop CS2 În general imaginile realizate cu o camera foto digitală cu performanţe reduse, sau a imaginilor scanate este necesara ‚repararea’ lor în Photoshop. Deschideţi imagine pe care doriţi să o prelucraţi, urmând să alegţi Image >Image Size şi să modificaţi rezoluţia la 300px. Pentru a vizualiza mai bine eventualele ‘greşeli’ descchideţi caseta Channel şi lăsaţi viyibil doar canalul Blue, sau puteţi folosi Ctr+3

După ce aţi denumit layerul ‘bază’ daţi click dreapta şi alegeţi Duplicate Layer pe care-l numiţi Blur.

Alegeţi Filter > Blur > Gaussian Blur ,

pentru a realiza o estompare a rezoluţiei imaginii, în special pe canalul Red, acesta fiind cel mai sensibil.

În caseta de dialog daţi valoarea care să realizeze atât o uşoară estompare dar să păstreze totuşi imaginea de ansamblu. Daţi OK. În casela Layers alegeţi modul Color care nu schimbă culoarea de bază ci face un mixaj prin amestecul luminii reflectate cu suprafeţele umbrite.

Duplicaţi layerul Blur şi daţii numele Focus. Schimbaţi Color mode în Normal urmând sa modificaţi opacitatea la o valoare de aprox. 30%.

Acum aveţi o imagine cu un aspect mai ‘moale’

Duplicaţi layerul bază şi numiţi noul layer Nuanţe. Trageţi de acesta şi aduceţi-l pe prima poziţie. Creaţi un layer nou pe care-l puneţi pe ultima poziţie, după care Select All (Ctr+A) şi umpleţi cu alb. Acest layer va va ajuta să vizualizaţi modificările pe care le veţi face pe layerul Nuanţe. Lăsaţi vizibile doar layerele Nuanţe şi cel alb.

Dublu-click pe layerul Nuanţe, pentru a deschide căsuţa Layer Style.

În câmpul Blend If: alegeţi canalul Gray, urmând ca pe şirul This layer să mutaţi cursorul din dreapta la o valoare aprox. de 98. Cu Alt+Click creaţi un nou cursor cu o valoare de aprox. 22.

Schimbaţi canalul de amestec pe ‘Red’ unde mutaţi cursorul din dreapta la o valoare aprox. de 160 şi creaţi unul nou la o valoare aprox de 72, după care vă întoarceţi pe canalul ‘gray’ şi daţi OK.

Nu vă mai rămâne decât sa faceţi vizibile toate layerele. În cazul în care rezultatul nu vă satisface, întoareţi-vă pe layerul Nuanţe şi Focus pentru că valorile folosite aici sunt orientative, ele trebuind a fi stabilite pentru fiecare imagine în parte, în funcţie de ceea ce se doreşte a fi obţinut.

Cam asta este !

Adăugare unui efect 3D unui text – în Adobe Photoshop CS2

Având un layer de culoare albă pentru background, creaţi un nou layer pe care numiţi-l text. Deschideţi paleta Channel şi creaţi un nou canal.

Numiţi acest canal mască. Alegeţi o culoare ce va acoperi partea luminoasă a textului. În cazul în care aveţi un background colorat, dati valoare şi opacităţii culorii.

Pe acest canal, scrieţi un text. El poate fi editat,mutat-scalat, chiar dacă vă aflaţi pe un canal ce conţine doar o selecţie. Faceţi o dublură canalului masca pe care numiţi-o plaster.

Alegeţi Filter > Sketch > Plaster În acest exemplu, img balance 16; Smoothness 8; light:buttom-left.

Vă întoarceţi în paleta Layers şi duplicaţi layerul text Numiţi noul layer text3D

Acum va trebui să încărcaţi selecţia. Pentru aceasta urmaţi Select > Load Selection şi alegeţi canalul plaster.

Umpleţi selecţia cu o culoare închisă ca tonalitate. Puteţi să expandaţi această selecţie prin: Select > Modify > Expand

Pentru a salva selecţia alegeţi: Select > Save Selection Evaluaţi rezultatul. Puteţi folosi şi: Filter > Sharpen > Unsharp Mask

Adobe Photoshop CS3 Scrierea unui text pe o curbă – Fit Text To Path Acest tutorial prezintă căteva modalităţi de lucru cu Shape şi Path în Photoshop, aranjând, sau făcând un text să urmeze o anume cale, direcţie. Să începem cu desenarea unei linii curbe, folosind Pen Tool. Pentru cei ce nu sunt famializaţi cu acest instrument, daţi un click în punctul de start al curbei urmat de un alt click undeva unde fie doriţi să se termine, fie este doar un nod de arcuire. În acest punct trageţi de mouse şi veţi observa arcurea liniei.

După ce curba a fost desenată, cu ajutorul instrumentului Direct Selection Tool puteţi muta nodurile, trage de manetele ancorei pentru a modifica arcuirea, până ce obţineţi forma de care aveţi nevoie.

Acum luaţi din nou instrumentul Pen Tool şi având forma selectată daţi click pe butonul ce transformă forma pe care o aveţi într-o ‘cale’, butonul Path aflat în bara principală.

Dacă nu o aveţi deschisă, deschideţi din Window fereastra Path, urmând să luaţi instrumentul pentru text şi să daţi click pe cale în locul în care doriţi să înceapă scrierea textului, după care scrieţi textul dorit. Nu uitaţi să va uitaţi şi la indicatorii de aliniere a textului Acum puteţi să vă întoarceţi în caseta Layer, să faceţi invizibil layerul ce conţine calea, să aplicaţi ce stil doriti pe layerul ce conţine textul. În final faceţi un New Layer lăsând vizibile layerul text şi cel nou, unindu-le (Merge visible)

Să încercăm şi Line Tool. Selectaţi instrumentul şi trageţi o linie în document.

Pentru a putea arcuii acestă linie, avem nevoie de cel puţin încă un nod (ancoră), pentru aceasta luăm instrumentul Add Anchor Point Tool şi dăm click undeva pe linie.

Pentru a putea deplasa acest nod, avem nevoie de instrumentul Direct Selection Tool (tasta ‘A’). Pe lângă deplasarea nodului putem trage şi de manetele de arcuire, până vom obţine ce ne dorim.

Mergeţi în fereastra Path, urmănd ca după ce aţi luat instrumentul de scriere să daţi click undeva pe cale şi să scrieţi textul. Dând click pe text obsevaţi că vor apărea doi marcatori pe care puteţi să-i trageţi pănă ce textul se poziţionează în mod convenabil. Textul putând fi poziţionat şi pe cealaltă parte a căii (la interior)

Să îmcercăm o SPIRALĂ Pentru a desena spitala, avem nevoue pentru început de in dreptunghi, nu foarte lat, plasat în partea stângă a documentului, asupra căruia vom aplica efectul Twirl.. din Filter >> Distort

Atenţie! Dreptunghiul NU trebuie să fie selectat pentru aplicarea filtrului. Daţi valoarea maximă (999) şI OK

Pentru a mări numărul spirelor folosiţi Ctr+F pentru repetarea filtrului

Pentru a selecta numai spirala, ţinând Ctr apăsat daţi clic pe imaginea layerului.

Deschideţi fereastra Path iar în partea inferioară găsiţi butonul Make work path from selection. Acum aveţi calea, urmând să scrieţi textul

Şi în acest caz cu ajutorul instrumentului de selectie directă puteţi să mutaţi textu, trăgând de limitatorul de text. Veţi avea nevoie probabil de puţin timp pentru a va oboşnii cu modul de distribuire a textului pe cale.

La fel ca şi în exemplele anterioare, vă întoargeţi în fereastra Layer unde puteţi interveni în orice mod doriţi asupra textului.

Optimizarea şi prelucrarea unei fotografii digitale de dimensiuni şi rezoluţie reduse, în vederea folosirii sale în compoziţii grafice – Adobe Photoshop CS2

De cele mai multe ori imaginile realizate cu o cameră foto digitală cu performanţe reduse, importate de pe internet, sau cele scanate, necesită operaţiuni de retuşare şi prelucrare. Să presupunem că avem de realizat o copertă de CD, pentru lansarea unui album retrospectiv “BOB MARLEY”. Imaginea este impusă, nu avem voie să folosim altceva, dar nu am avut posibilitatea să o găsim la o rezoluţie acceptabilă. Ea trebuie prelucrată în aşa fel încât să poată fi pregătită în vederea tipăririi.

Aceasta este imaginea de bază. Dimensiunea sa este de 264 X 279 pixeli, cu o rezoluţie de 72 X 72 dpi. Deschideţi imaginea pe care doriţi să o prelucraţi, urmând să alegeţi Image >Image Size şi să modificaţi rezoluţia la 300px. Pentru a vizualiza mai bine eventualele “greşeli” deschideţi caseta Channel şi lăsaţi vizibil doar canalul Blue; sau puteţi folosi Ctr+3.

Pentru a vizualiza mai bine eventualele “greşeli” deschideţi caseta Channel şi lăsaţi vizibil doar canalul Blue; sau puteţi folosi Ctr+3.

După ce aţi denumit layerul ‘bază’ daţi click dreapta şi alegeţi Duplicate Layer pe care-l numiţi Blur.

Alegeţi Filter > Blur > Gaussian Blur , pentru a realiza o estompare a rezoluţiei imaginii, în special pe canalul Red, acesta fiind cel mai sensibil.

În caseta de dialog daţi valoarea care să realizeze atât o uşoară estompare dar să păstreze totuşi imaginea de ansamblu. Daţi OK.

În casela Layers alegeţi modul Color care nu schimbă culoarea de bază ci face un mixaj prin amestecul luminii reflectate cu suprafeţele umbrite.

Duplicaţi layerul Blur şi daţii numele Focus. Schimbaţi Color mode în Normal urmând sa modificaţi opacitatea la o valoare de aprox. 30%. Acum aveţi o imagine cu un aspect mai ‘moale’

Duplicaţi layerul bază şi numiţi noul layer Nuanţe. Trageţi de acesta şi aduceţi-l pe prima poziţie. Creaţi un layer nou pe care-l puneţi pe ultima poziţie, după care Select All (Ctr+A) şi umpleţi cu alb. Acest layer vă va ajuta să vizualizaţi modificările pe care le veţi face pe layerul Nuanţe. Lăsaţi vizibile doar layerele Nuanţe şi cel alb.

Dublu-click pe layerul Nuanţe, pentru a deschide căsuţa Layer Style.

În câmpul Blend If: alegeţi canalul Gray, urmând ca pe şirul This layer să mutaţi cursorul din dreapta la o valoare aprox. de 98. Cu Alt+Click creaţi un nou cursor cu o valoare de aprox. 22.

Schimbaţi canalul de amestec pe “Red”, unde mutaţi cursorul din dreapta la o valoare aproximativă de 160 şi creaţi unul nou la o valoare aproximativă de 72; după care vă întoarceţi pe canalul “gray” şi daţi OK.

Nu vă mai rămâne decât sa faceţi vizibile toate layerele. În cazul în care rezultatul nu vă satisface, întoarceţi-vă pe layerul Nuanţe şi Focus pentru că valorile folosite aici sunt orientative, ele trebuind să fie stabilite pentru fiecare imagine în parte, în funcţie de ceea ce se doreşte a fi obţinut.

Interpretarea imaginii prelucrate anterior

Imaginea optimizată poate fi „dusă” mai departe trecând la o altă etapă, şi anume cea a interpretării, pentru o anumită destinaţţie. În cazul nostru este vorba de o copertă de CD. Puteţi folosi: Filter > Dust&Scratchnes şi să mai reglaţi din radius.

Duplicaţi layerul şi alegeţi: Filter > Blue > Gaussian Blur unde daţi valoarea 15.

Adăugaţi o mască (clic pe Add vector mask din partea inferioară a paletei layers. Alegeţi un gradient circular şi umpleţi masca cu el. Nu uitaţi să daţi click pe mască.

Urmează să alegeţi opţiunea Hue/Saturation din Image/Adjustment şi să ajustaţi valorile. Aici am dat pentru Hue=38 şi pentru Saturation=22. Bifaţi opţiunea Colorize

Copiaţi imaginea de pe layerul 2 (gaussian) –Ctrl+C. şi daţi click pe layer ţinând Ctrl apăsat pentru a nu avea nici un layer selectat, după care daţi Paste – Ctr+V. Schimbaţi Set blending mode în Multiply.

Din partea inferioară a paletei Layers daţi clic pe Brightness/Contrast şi faceţi corecţiile pe care le doriţi.(în funcţie de imaginea pe care o prelucraţi)

Acum aveţi nevoie de o imagine ca aceasta, care să sugereze zgârieturile de pe o fotografie veche. Copiaţi această imagine, deschideţi-o în Photoshop, copiaţi-o şi lipiţi-o in documentul pe care îl prelucraţi. Având layerul cu acestă imagine selectat şi alegeţi: Edit > Define patern...

Schimbaţi Set blending mode În Lighten. Puteţi încerca şi Soft light sau orice altă combinaţie care va avantajeză.

• acesta este imaginea finală, prelucrată în acest exerciţiu

*şi un exemplu de ajustări diferite a parametrilor

Crearea unui text cu efect în Adobe PhotoshopCS Pe un document 800x800px scrieţi textul dorit, după care cu ajutorul instrumentului de selecţie’Magic Wand’ ,având toleranţă (0), selectaţi fundalul. Având Ctr apăsat adăugaţi selecţiei şi golurile literelor. Urmează să inversaţi selecţia Ctr+Shift+I

Având literele selectate, deschideţi fereastra Channel urmând ca din partea inferioară a ferestrei să alegeţi Save selection as channel, obţinând canalul Alpha 1 pe care urmează să îl prelucrati. Lăsaţi vizibil doar acest canal.

Filter > Blur > Gaussian Blur Aplicati acest filtru în mod repetat, de 6 ori dând în căsuţa Radius valori ca: 9; 6; 6; 3; 3; 1. Urmează să copiaţi acest canal într-un document nou. Ctr+A > Ctr+C Ctr+N >Ctr+V

Dacă aţi salvat primul document, să zicem text_sticla.psd salvati noul document ce contine imaginea canalului Alpha 1 ca: text_sticla_bump.psd, în acelasi director.

Urmează să aduceţi în documentul initial (text_sticla.psd) o imagine, ceva În genul acesta. Importantă este dimensiune ei, trebuind să aiba aceiaşi dimensiune cu documentul tău. (800 x 800 px) *Deschideţi imaginea, scalaţi-o, copiaţi-o şi lipiti-o în doc. cu text.

Imaginea va arăta cam aşa, datorită faptului ca mai este vizibil canalul Alpha 1. Puteţi sa-l faceţi invizibil, pentru că mai mult încurcă Având activat layerul cu imagine Filter > Distort > Glass....

În fereastra de proprietăţi alege Distortion – 20 Smoothness – 8 Scaling – 94% Bifaţi căsuţa – Invert În partea dreaptă a căsuţei texture apasă pe săgeată şi alege: Load texture urmând să încarci documentul ce conţine canalul Alpha 1 (text_sticla_bump.psd)

Ţinând Alt apăsat plimbaţi cursorul în caseta layers pe layerul text până ce cursorul se va schimba în două săgeţi intersectate. Dati clic. Acum layerul cu imagine a devenit mască pentru textul tău.

Copiati layerul text- (Ctr+A) şi daţi Paste (Ctr+V) obţinând un nou layer În caseta blending mode alegeţi modul Overlay

Filter > Render >Lighting Effects

Image >Adjustements > Lavel Image >Adjustements >Brightness/ Contrast

Lighting Effects > Blue Omni

Tipuri de extensii ale fisierelor si compatibilitatea lor:

Exista doua categorii principale de imagine bitmap si vectoriala. Bitmap se prezinta sub forma unor harti de puncte Vectorial imagini compuse din vectoriCDR formatul nativ al programului CorelCDT fisier sablon al programului CorelCDX format de metafisier Corel care utlizeaza un algoritm de compresie intern de marca pentru a reduce dimensiunea fisieruluiCGM format de fisier Computer Graphics MetafileCMX Corel Metafile Exchange. Salveaza desenele sub forma de grafica vectoriala pentru utilizare in aplicatile CorelCPT Corel PhotopaintCPX Corel Presentation Exchange. Format de fisier care utilizeaza un algoritm intern de compresie, de firma, pentru a reduce dimensiunea fisieruluiDOC Microsoft WordEPS Encapsulated Postscript. Imagine needitabila in aplicatia tintaGIF - Fisier bitmap. Accepta comprimare fara pierderi, succesiune de cadre distincteHTML limbaj de generare de scripturi care permite afisarea unui document in internetNAP fisier pentru imagini vectorialePCT pentru MacintoshPCX fisier bitmap PaintbrushPDF document Adobe Portable - comprimariPIC fisier Lotus PicPRN pentru imprimanta PostScriptPSD fisier photoshopTIFF la scanari. Cel mai bun descriptor de imagine tip bitmapJPG vizualizari comprimateAI Adobe IllustratorWMF Windows Metafile

Rezolutia Finetea reprezentarii imaginii. Se masoara in pixeli sau puncte pe centimetru sau inch..

Adincimea de culoare adincimile de biti. Gamele cromatice mai largi presupun adincimi de culoare mai mari deci o acuratete sporita a imaginii.

Cîteva reguli pentru realizarea unei pagini Web

Asa cum se poate usor observa , ziarele si revistele acorda o mare importanta stilului in care apar . Acesta trebuie sa fie unitar si usor de recunoscut , in comparatie cu alte publicatii similare . La fel trebuie sa fie realizat si un sit web . Vizitatorii trebuie sa recunoasca fara dificultate un anumit stil , o anumita tusa pe care trebuie s-o imprimati paginilor web .Ceea ce inseamna ca va trebui sa gasiti o nota deosebita , un aranjament ingenios pentru aceste pagini . Ele trebuie sa se diferentieze net si chiar sa iasa in evidenta , in multimea siturilor web . Cu toate acestea , va trebui sa pastrati un stil unitar .

Folosirea unui design unitar mai are si un alt avantaj major : atunci cand vreti sa adaugati o noua pagina , formatul general il aveti deja si nu trebuie decat sa adaugati continutul . In acest caz , nu va trebui decat sa urmariti ca machetarea paginii sa se inscrie firesc in modul de prezentare general . Acest lucru se poate realiza prin :

• stilul de scriere • modul de aranjare in pagina • folosirea spatiilor goale

Stilul de scriere

Atunci cand analizati stilul de scriere pentru pagina web, trebuie sa tineti cont de faptul ca un text pe ecranul monitorului se va citi mai greoi si mai incet ( in medie cu 20% ) decat textul tiparit .

Stilul de scriere ( felul fonturilor , dimensiunea , culorile , etc. ) trebuie sa fie similar pentru toate paginile .In acest fel , cititorul se va familiariza mai usor cu paginile pe care le-ati creat .

Incercati sa nu folositi o varietate prea mare de fonturi pentru aceeasi pagina Fonturile uzuale sunt ARIAL si TIMES NEW ROMAN . Mai puteti folosi si VERDANA sau COURIER , care dau o nota de modernitate paginilor web. Aceste fonturi sunt acceptate de toate browserele. Puteti sa folositi si fonturi mai " exotice " dar in acest caz riscati ca vizitatorii care nu au instalat fontul respectiv sa nu poata vizualiza paginile respective .

NU FOLOSITI TEXT IN CARE SA EXISTE NUMAI LITERE MARI. ACEST TEXT SE CITESTE MULT MAI GREU SI IN PLUS , CITITORUL VA AVEA SENZATIA CA ESTE AGRESAT VIZUAL.

De asemenea , nu este recomandabila folosirea textelor care clipesc (blink text) si a textelor care defileaza ( scroling marques ).

Pentru a da o nota deosebita continutului , puteti sa scrieti prima litera a unui paragraf cu un alt font , alta dimensiune si o alta culoare . Bineinteles ca acest lucru va va lua mai mult timp , dar rezultatele vor fi deosebite .

Se poate incerca si folosirea unei culori atractive pentru text , dar in acest caz trebuie sa va asigurati ca exista un contrast suficient de mare intre aceasta culoare si culoarea fundalului .In caz contrar , lizibilitatea va fi mult mai scazuta iar cititorii vor obosi curand si in consecinta vor renunta sa mai navigheze prin paginile sitului.

Pentru ca vizitatorii sa nu fie derutati se păstrează acelasi loc in pagina pentru meniul si simbolurile folosite pentru navigare ( sagetile stanga si dreapta ).

Pagina web nu trebuie sa arate ca un bloc masiv de text .Se împarte continutul in bucati mai mici , numite paragrafe . Fiecare paragraf contine una sau mai multe propozitii si este separat de celelalte paragrafe sau de titlu prin spatii goale . In acest mod , textul se poate citi mult mai usor si fara a obosi ochii .

Grafica

Grafica se foloseste , in principal , pentru imbunatatirea aspectului unui sit si cresterea atractivitatii acestuia. Imaginile mai sunt folosite si pentru sublinierea unui text sau al mesajului transmis de o pagina web. Este recomandat sa includeti insa numai imaginile absolut necesare si care sunt intr-adevar valoroase. Nu trebuie ca pagina web sa arate ca o insiruire de imagini , indiferent cat de remarcabile ar fi acestea. In aceasta situatie , pagina va arata ca un brad de Craciun , iar mesajul pe care vreti sa-l transmiteti va fi mult diluat . Exista si exceptii , reprezentate de siturile web specializate si construite exclusiv pentru oferirea de imagini grafice , gratuite sau contracost . In acest caz , se folosesc thumbnails .

In fiecare pagina se folosesc una sau doua imagini sugestive, si care sa simbolizeze, pe cat posibil, titlul sau subiectul principal din pagina respectiva. Pe aceasta cale am dorit se imbunatateste aspectul paginii si se subliniază intr-un fel ideea principala. Pagina web nu trebuie sa arate, in nici un caz, ca un bloc masiv de text deoarece cititorii vor obosi foarte repede si vor renunta sa-l citeasca pana la capat.

Se reduc dimensiunile fisierelor grafice pentru ca paginile web sa se incarce intr-un timp cat mai scurt. Din acelasi motiv se folosesc atributele " HEIGHT " si " WIDTH " alaturate etichetei " IMG ". In acest mod, browserul cunoaste cat de mult spatiu este atasat fiecarei imagini si incepe incarcarea textului imediat , in paralel cu incarcarea imaginii respective . Daca nu specificati aceste atribute , browserul va calcula mai intai dimensiunile imaginii

Pentru ca imaginile sa nu apara cu o bordura in jurul lor, se setează atributul BORDER="0".

Imagini grafice GIF si JPEG

Atunci cand selectati forma de compresie a imaginilor grafice trebuie sa aveti in vedere tipul de imagine folosit . Cele mai folosite fisiere grafice si care sunt acceptate de toate browserele web sunt :

• GIF ( Graphics Interchange Format ) - o schema de compresie folosita pentru grafice si imagini cu o rezolutie mai redusa , dezvoltata de Compuserve .

• JPEG ( JPG ) - o metoda de compresie folosita pentru imagini fotografice sau cu o varietate de tonuri de culori , dezvoltata de Joint Photographic Expert Group

Alegerea formatului corect are o mare importanta atat pentru calitatea si claritatea imaginii folosite cat si pentru pastrarea unei dimensiuni reduse a fisierului grafic .

Daca doriti sa folositi imagini pe care le-ati vazut pe un alt sit web, este bine sa cereti in prealabil acordul webmasterului respectiv. In caz contrar, riscati sa fiti acuzati de incalcarea dreptului de autor, in cazul in care imaginea respectiva a fost realizata intr-adevar de acea persoana.

Se pot folosi multe imagini preluate din librariile grafice, disponibile pe Internet. Este suficient sa dati o cautare pe orice motor de cautare dupa cuvintele "images", "clipart"sau "graphics" si veti obtine in cateva secunde liste cu cateva mii de astfel de resurse.

Dupa ce ati incarcat aceste imagini in calculatorul dvs., este bine sa le grupati pe categorii pentru a putea sa le gasiti mai usor. In continuare, nu va ramane decat sa inserati aceste imagini in pagina dvs., acolo unde considerati ca este necesar

Printre cele mai vizitate librarii online mentionez urmatoarele :

http://www.arttoday.com/ http://www.free-graphics.com/ http://www.clipartconnection.com/ http://www.clipart.com/ http://www.clipartcastle.com http://www.clipsahoy.com http://www.topclipart.net http://www.100clipart.com http://www.freegraphicland.com http://www.free-graphics.com/ http://www.cooltext.com/ http://www.mediabuilder.com/

Fundal

In timp ce navigati pe Internet probabil ati vazut multe pagini web a caror citire este greoaie si obositoare . Acest lucru se intampla deoarece a fost ales un fundal necorespunzator . Ca sa nu mai vorbim de faptul ca unele pagini sunt total inestetice datorita alegerii ca fundal a unor imagini pretentioase si total neinspirate.

Alegerea fundalului

Atunci cand alegeti un fundal pentru paginile dvs. , trebuie sa tineti cont de urmatoarele aspecte :

• alegeti cu grija culorile fundalului sau culoarea dominanta , pentru a nu interfera cu culoarea textului

• folositi pentru text si fundal culori contrastante , care sa permita citirea usoara a continutului ( cea mai buna optiune , din punct de vedere al lizibilitatii , ramane folosirea unui fundal alb si text negru )

• daca folositi imagini pentru fundal , folositi fisiere GIF sau JPEG de dimensiuni mici , pentru a reduce la minimum timpul de incarcare a paginii

. Animatii

Imaginile animate , ca de altfel toate imaginile , se folosesc pentru a sublinia un mesaj sau pentru a da un impact deosebit unei pagini web . Cu toate ca unele animatii sunt ingenios realizate si atrag cititorii , nu trebuie uitat ca motivul principal pentru care se navigheaza pe Internet este cautarea de informatii dintr-un domeniu sau altul . Pagina web pe care ati realizat-o trebuie sa atraga cititorii prin continutul ei intrinsec si nu prin folosirea unor imagini animate viu colorate . Restrictii impuse in folosirea imaginilor animate Daca va hotarati totusi sa folositi unele animatii , trebuiesc luate in calcul cateva aspecte : a ) - dimensiunea fisierului folosit b ) - utilitatea lor c ) - browserele folosite

Pentru a reduce la minimum timpul de incarcare al paginilor web, se folosesc cat mai putin imagini animate. Este adevarat, unele dintre ele pot fi foarte atractive dar fisierele corespunzatoare au in general dimensiuni mari. De asemenea, trebuie avuta in vedere utilitatea lor. Acest sit este bazat in principal pe oferirea unui continut bogat. Daca as fi inclus o multime de imagini animate, ar fi crescut fara indoiala spectaculozitatea paginilor respective. In schimb, cititorii ar fi fost derutati si, probabil, ar fi citit textul cu o mai mare dificultate. Asta presupunand ca nu au dezactivata optiunea de incarcare a imaginilor din browser.

Harti grafice

Harta grafica reprezinta o imagine , mai mult sau mai putin elaborata , care permite utilizatorilor sa acceseze diferite pagini web in interiorul unui sit . Cand se da un clic cu mouse-ul pe una dintre diferitele portiuni ale imaginii grafice se acceseaza o hiperlegatura catre o alta pagina . Ele pot fi realizate in format GIF sau JPEG. In ultimul timp , sunt foarte des folosite ca metoda de navigare deoarece se incarca mai repede decat un set de butoane de navigare si sunt mai atractive.

Hartile grafice sunt suportate de toate browserele (exceptie face Netscape Navigator 1.0 ). In acelasi document HTML se pot utiliza atat harti grafice de tip client cat si de tip server.

Logo

Un logo este un nume , un simbol sau o marca inregistrata a unei companii sau organizatii . S-a constatat ca o imagine bine aleasa are un impact mult mai puternic decat cuvintele . De aceea , logo se foloseste pentru proiectarea imaginii firmei repective si stimularea memoriei vizuale a audientei . In general , el reprezinta o recunoastere internationala a unui nume de marca sau a unei companii . Din acest motiv , un logo trebuie sa fie unic si usor de recunoscut . Cand il vad , oamenii trebuie sa aiba reprezentarea vizuala a companiei sau afacerii respective . De aceea , nu este recomandat sa utilizati imagini sau tipuri de fonturi comune . Cautati sa fiti creativ si sa va folositi imaginatia .

Etapele parcurse de un designer în crearea unui logo – pentru afaceri online

Deoarece subiectul acestui sit web il constituie, in general, afacerile online si, in particular, modul cum se poate demara cu succes prima afacere pe Internet am cautat sa cumulez si sa sintetizez aceste doua aspecte. Din aceasta cauza, am ales un joc de cuvinte in limba engleza (Onebiz) care se poate interpreta astfel :

1. onEbiz sau intr-o traducere libera "Despre afacerile online" 2. OnEbiz sau in traducere "Prima afacere pe Internet"

Am considerat ca globul pamantesc ( pentru care am folosit o mica imagine animata ) reprezinta un simbol care arata ca se pot realiza afaceri online indiferent de tara in

care te afli. De asemenea, se pot realiza astfel de afaceri cu oameni aflati pe alte meridiane, fara limitarile obisnuite in cadrul unor afaceri clasice.

Am creat mai multe versiuni ale logo-ului, mai intai pe hartie iar apoi am folosit un editor grafic ( Macromedia Fireworks 4.0 - Trial Version ). In final am ales-o pe aceea care am considerat-o cea mai reusita si mai reprezentativa pentru subiectul pe care l-am abordat in acest sit web. De fapt, totul depinde numai de imaginatie si de cunostintele pe care le aveti in folosirea unui editor grafic Daca veti reusi sa creati un logo simplu , unic si atractiv , vizitatorii nu vor ezita sa asocieze acest logo cu imaginea sitului pe care l-ati creat sau imaginea afacerii dvs..

Imagini Icon

Prin folosirea iconurilor ( simboluri grafice ) puteti sa imbunatatiti aspectul unei pagini web sau , daca acestea nu sunt folosite corespunzator , sa produceti confuzie in randul cititorilor .

Datorita folosirii lor consecvente , unele iconuri au capatat o recunoastere universala . Printre cele mai cunoscute mentionam :

• sagetile directionale

• simbolul " casa " pentru pagina initiala

• simbolul " cutie postala " pentru transmiterea de emailuri • simbolul pentru fisiere audio

• simbolul " carte " pentru guestbook , etc.

In functie de modul de machetare al sitului web sau de continutul acestuia puteti sa folositi si alte icon-uri.

Cateva situri unde puteti gasi foarte multe icon-uri , grupate pe categorii , sunt prezentate in continuare :

http://www.iconbazaar.com/ http://www.sunsite.unc.edu/gio/iconbrowser/ http://www.coolarchive.com/ http://www.members.aol.com/dcreelma/imagesite/image.htm

Legaturi

Atunci cand se realizeaza machetarea sitului , o mare atentie trebuie acordata legaturilor ( hyper-legaturi ) . Acestea pot fi :

1. interne ( catre alte pagini din interiorul sitului dvs. ) 2. externe ( catre alte situri din Internet ) .

Pentru a crea o legatura externa trebuie sa cunoasteti URL-ul sitului respectiv . Pentru operativitate , puteti sa adunati toate legaturile externe pe care planuiti sa le folositi si sa le puneti intr-un fisier text denumit , de exemplu , " legaturi.txt " . Pentru multi surferi pe web , un text in culoarea albastra , subliniat , reprezinta o legatura nevizitata . O legatura vizitata apare ca un text in culoarea rosie sau purpurie , de asemenea subliniat . Acestea sunt culorile standard pentru legaturi si este bine sa le folositi ca optiune de baza . Puteti sa folositi pentru legaturi si un text boldat , marit sau asezat intre linii verticale . Textul legaturilor trebuie sa fie scurt si la obiect .

De asemenea , este foarte important locul unde se plaseaza legaturile in interiorul propozitiilor .

De exemplu , in propozitia urmatoare consider ca nu s-a utilizat o formulare adecvata :

" Apasati aici pentru a obtine mai multe informatii despre motoarele de cautare si directoare . "

In locul acesteia , mi s-a parut mult mai natural sa folosesc urmatoarea constructie verbala :

" Promovarea eficienta a unui sit se poate face cu motoare de cautare si directoare " .

Legaturile externe le-am plasat in subsolul paginii deoarece am dorit ca vizitatorii sa citeasca intreg continutul paginii si apoi, in cazul in care doresc, sa paraseasca acest sit web.

Pentru o buna navigare , am pus o legatura catre pagina principala in toate paginile componente. Acest lucru este deosebit de util deoarece vizitatorii sau robotii motoarelor de cautare pot ajunge , urmand o legatura externa , la o pagina interioara . De aici , ei trebuie sa ajunga , fara dificultate , la pagina principala pentru a se edifica asupra scopului si continutului sitului .

In final , asigurati-va ca ati testat toate legaturile interne si externe . Daca ati folosit un editor HTML puteti sa folositi optiunea de verificare a legaturilor , care va afisa un tabel cu situatia fiecarei legaturi .De asemenea , puteti sa folositi si programe specializate (link checker = verificatoare de legaturi), accesibile gratuit sau in versiune shareware pe Internet .

In continuare sunt prezentate , cateva adrese web de unde puteti sa incarcati aceste programe : http://www.incontext.com/wainfo.html http://www.matterform.com/theseus/ http://www.tetranetsoftware.com/solutions/linkbot.asp http://www.tali.com/indexo.html http://www.htmlvalidator.com/ http://www.lithops.mastak.com/hlv/

Navigare

Internetul , prin chiar natura sa , permite saltul de la o pagina web la alta , printr-o simpla apasare de buton. Nu este un proces liniar , cum este de exemplu citirea unei carti . Desi aceasta flexibilitate constituie un mare avantaj , realizarea unui sistem de navigare eficient nu este un lucru usor . Un continut interesant si o navigare usoara reprezinta cele doua componente principale ale unui sit bine intocmit . Dar chiar si cel mai atractiv continut este nefolositor daca nu este pus in evidenta de un sistem de navigare clar si consistent . Aceasta inseamna ca nu trebuie sa lasati cititorul sa pescuiasca dupa informatii. Trebuie sa-i oferiti tot sprijinul posibil , prin realizarea unui meniu de navigare bine structurat .

Meniul de navigare

Meniul este o reprezentare grafica sau de tip text a continutului si este adesea incorporat in tema generala a sitului . Meniul principal trebuie sa furnizeze trimiteri rapide si directe la sectiunile si informatiile disponibile dintr-un sit web . El va fi realizat intr-o forma practica si atractiva . Locul obisnuit pentru plasarea meniului principal este in partea stanga a ecranului dar el mai poate fi plasat si in partea dreapta sau in partea superioara a paginii web. Sectiunile meniului vor fi denumite astfel incat sa ofere o descriere concisa si sugestiva a paginilor web care vor fi accesate. Incercati sa folositi denumiri sugestive , ca de exmplu : Despre noi , Produsele noastre , Resurse utile. Cateva dintre schemele de navigare cele mai des intalnite sunt urmatoarele :

• legaturi text • harti grafice ( imagemaps ) • butoane de navigare

• meniuri tip lista derulanta ( generate cu Javascript , CGI ) • pagini generate dinamic • harta sitului ( site map )

"

Asa cum se poate observa, continutul acestui sit este structurat, pe orizontala, in sase categorii principale. Acestea sunt impartite, la randul lor pe nivele sau subcategorii ( maxim 5 ). Deoarece am dorit ca fiecare vizitator sa poata naviga cu usurinta prin paginile acestui sit web si in acelasi timp sa poata gasi usor informatiile de care are nevoie, am cautat sa realizez un sistem de navigare cat mai eficient si logic. Pentru acest lucru am folosit in fiecare pagina nu mai putin decat patru scheme de navigare.

De multe ori , incepatorii si chiar netsurferii mai versati se pot incurca atunci cand folosesc un sistem de navigare mai complicat . Din aceasta cauza, am realizat si o pagina web continand o harta a sitului. Pentru ca harta sa poata fi gasita usor am pus o legatura directa catre aceasta in fiecare meniu de navigare. Aceasta harta este utila si atunci cand se doreste cautarea rapida a unei informatii sau a unui subiect , fara a fi nevoie sa se navigheze prin tot situl . Ea trebuie sa fie clara si logica si in acelasi timp sa afiseze corect structura sitului . Mai poate fi realizata sub forma de tabel , arbore de legaturi ,etc.

Cheia pentru o navigare usoara este o buna organizare. Cu cat situl va fi mai mare si mai complex , cu atat va fi mai dificila sarcina organizarii acestuia si realizarii unui sistem de navigare consistent .

Cadre (frames)

Cadrele va permit sa afisati doua sau mai multe pagini web , in acelasi timp , prin impartirea ecranului in mai multe sectiuni independente . Initial , cadrele au fost o inovatie a firmei Netscape dar pe parcurs ele au fost folosite din ce in ce mai mult si tot mai multe browsere le-au acceptat.

Ele reprezinta o metoda controversata de machetare a unei pagini web. In randul webdesignerilor exista sustinatori si adversari ai folosirii cadrelor ca o solutie eficienta de aranjare in pagina. De aceea , inainte de a va hotara asupra folosirii cadrelor in situl dvs. analizati modul cum doriti sa organizati si sa structurati paginile web. Folosirea cadrelor prezinta atat avantaje cat si dezavantaje. Mai multe informatii despre cadre precum si adresele unor situri web care abordeaza pe larg acest subiect puteti citi in cartea mea.

Tabele

Tabelele sunt folosite atat pentru o machetare eficienta cat si pentru a face mai atractive diversele elemente componente ale unei pagini web. Ele permit o impartire a paginii in sectiuni si o pozitionare precisa a textului sau imaginilor in interiorul paginii .

Puteti crea margini sau borduri de diferite dimensiuni si culori . De asemenea , se poate incapsula continutul in celulele tabelului pentru a permite alinierea textului si a limita lungimea liniilor . Deoarece bordura tabelelor nu este totdeauna necesara si uneori poate avea un aspect neplacut , se poate renunta la ea prin folosirea atributului "BORDER = 0" Atunci cand folositi tabele , puteti sa setati o latime fixa , in pixeli , sau o latime relativa la dimensiunea ecranului , in procente. De exemplu , daca folositi atributul WIDTH=80% , continutul va fi afisat pe 80% din latimea ecranului . In acest caz , afisarea continutului se adapteaza mai usor la diferitele tipuri de monitoare sau rezolutii ale acestora . Setarea latimii in procente se face mai ales la paginile unde exista mult text si unde nu este necesara o formatare precisa. Pe de alta parte , tabelele definite cu o latime fixa in pixeli vor ramane neschimbate . In acest caz , daca se foloseste o rezolutie marita va apare un spatiu alb , in afara tabelului care va da uneori o imagine neplacuta . In schimb , setarea unei latimi fixe va permite un control ridicat al printarii , realizand o tiparire fara intreruperi laterale ale paginii web respective.

O machetare similara se poate realiza si cu ajutorul cadrelor . Dupa parerea mea folosirea unui tabel este mai indicata deoarece in acest mod veti avea mai mult control asupra elementelor paginii web.

Elemente multimedia

Exista foarte multe standarde multimedia si plug-in-uri pe Internet . Majoritatea browserelor web accepta trei tipuri de fisiere audio : WAV ,AU si MIDI . MIDI reprezinta cel mai potrivit format audio pentru web . In acest caz , volumul , diversele nuante ale sunetului , numele instrumentului sunt transmise prin retea . Interpretarea sunetului ramane in sarcina calculatorului si pentru acest lucru are nevoie de datele continute in fisierul MIDI . In aceasta problema opiniile sunt impartite . Multi webdesigneri sunt de parere ca fisierele audio nu ar trebui sa fie folosite la crearea paginilor web . Pe de alta parte , avand in vedere ca majoritatea PC-urilor sunt dotate cu placi de sunet , fisierele multimedia se pot folosi totusi intr-o proportie rezonabila . In ultimul timp s-au dezvoltat tehnici noi , cum este de exemplu Flash , produs de

firma Macromedia . Prin aceasta tehnica se obtine un raport de compresie a sunetului mult imbunatatit . Fundalul sonor existent in filmele Flash poate fi dezactivat cu un simplu click de mouse . Nu trebuie uitat faptul ca folosirea unor fisiere multimedia ( care in general sunt de mari dimensiuni ) duce la cresterea substantiala a perioadei de incarcare a paginii web . Astfel , un fisier audio WAV de numai 30 secunde ocupa aproximativ 150 Kb iar un fisier video de aceeasi lungime ocupa cativa Mb .

Mai multe informatii si resurse gratuite referitoare la elementele multimedia le puteti obtine accesand urmatoarele situri web :

http://www.zeldman.com/faq3f.html http://www.boogiejack.com/sounds.html http://www.cabelov.com/midi/midixbbm.shtml http://www.builder.cnet.com/Authoring/Audio/ http://www.harmony-central.com/MIDI/ http://www.hometurf.com/backmidi.html http://www.prs.net/midi.html http://www.soundamerica.com/ http://www.midifarm.com/

Programare

Dupa ce ati terminat etapa de machetare , trebuie sa transformati toate informatiile pe care le-ati acumulat intr-o pagina web . Pentru acest lucru , trebuie sa aveti instalat pe calculatorul dvs. instrumentul cu care se poate vizualiza un sit web , browserul .

Dupa aceea , aveti nevoie de mai multe programe si utilitare . O pagina web simpla poate fi realizata folosind limbajul HTML . Daca nu cunoasteti acest limbaj , nu este nici o problema . Puteti construi pagini web folosind editoare HTML sau puteti sa cautati situri unde vi se pun la dispozitie sabloane de pagini web .

Mai aveti nevoie de un editor grafic , pentru a putea realiza si prelucra imaginile pe care vreti sa le inserati in paginile web .

Daca vreti sa aflati mai multe informatii despre etapele necesare realizarii unui sit web si nu aveti timp sa cititi toate paginile acestui sit sau sa studiati bogata documentatie care exista pe Internet , mai exista o solutie !!!

Cum se poate realiza un cyber - produs

HTML

HTML este un acronim pentru HyperText Mark up Language si reprezinta un limbaj folosit pentru a eticheta diferite parti ale unui document Web . El va indica unui browser cum va trebui afisat un text , o legatura , un grafic sau o alta componenta media . Un document HTML este un fisier text si va avea extensia .html sau .htm .

Un cod HTML se poate crea manual , folosind un editor HTML , folosind sabloane sau o combinatie din aceste 3 metode .

Tag ( marcaj , eticheta )

In HTML, un tag ii arata browser-ului ce operatie trebuie sa execute . Cand creati o pagina html , folositi marcaje din mai multe motive :

• pentru a schimba modul de prezentare al unui text • pentru a arata o imagine • pentru a insera un tabel • pentru a crea o legatura catre o alta pagina .,etc.

Marcajele pe care le scrieti nu sunt vizibile de catre browser , dar efectele lor sunt notabile .Ele incep cu simbolul < > si se termina cu </ > si apar sub forma de perechi , una pentru inceputul actiunii , una pentru sfarsitul ei .

De exemplu , prin folosirea marcajului <B> se boldeaza un text . </B> opreste actiunea marcajului precedent <B> . Pentru a sublinia un cuvant sau o fraza puneti <U> inaintea unei fraze si </U> acolo unde doriti ca sublinierea sa se opreasca .

Legaturi

Legaturi interne

Pentru a crea o legatura catre o alta pagina a sit-ului dvs. folositi un marcaj ca acesta : <A HREF=" fisier.htm"> Legatura interna </A> Legaturi externe

Pentru a crea o legatura catre o alta pagina dintr-un alt site folositi un tag ca acesta : <A HREF=" www.yahoo.com "> Legatura externa </A>

Toate marcajele lucreaza in mod similar , ele aratand unui browser , printr-un cod special cand sa inceapa si cand sa se termine o actiune .

Structura unui documente HTML

Cel mai simplu document HTML va avea urmatoarea structura : <HTML> <HEAD> <TITLE> Titlul paginii Web</TITLE> </HEAD> <BODY> Toate fisierele text, sunete si imagini ale paginii dvs. </BODY> </HTML>

Definiţia unei agenţii de publicitate: …o echipă de experţi care lucrează pentru clienţi, denumiţi “conturi” ( accounts). Termenul nu are nimic comun cu contabilitatea. Un cont este pur şi simplu o firmă care foloseşte serviciile agenţiei pentru a-şi face reclamă. Agenţia ocupă poziţia de mijloc în trio-ul lumii reclamelor – clientul, agenţia de publicitate şi proprietarul media. Se situează între cei care vor să-şi facă reclamă şi cei care oferă mijloacele necesare pentru asta. Rolul unei agenţii de publicitate: …să planifice, să creeze şi să execute campanii publicitare pentru clienţi. Gradul de implicare variază în funcţie de tipul de agenţie. Unele oferă servicii complete; altele cumpără doar spaţiul publicitar; altele fac doar muncă de creaţie; iar altele oferă servicii speciale Personalul agenţiei de publicitate: 1. Directorul de conturi – account director …răspunde de un grup de conturi – clienţi. Are ca subordonaţi pe responsabilii de cont, care se ocupă de unul sau mai multe conturi. 2. Responsabilul de cont – account executive …menţinerea legăturii între agenţie şi clienţi. Trebuie să în]eleagă nevoile clientului, afacerea sa şi ramura industrială respectivă. în acelaşi timp, va prezenta clientului propunerile, ideile şi munca agenţiei. E necesar să cunoască domeniul reclamelor şi s\ poate colabora cu oricine din agenţie. 3. Responsabilul cu planificarea media – media planner …la agenţiile mari planificarea şi cumpărarea spaţiului publicitar sunt activităţi separate. La o agenţie mai mică, o singură persoană se va ocupa de amândouă. După ce a încheiat studierea mijloacelor de comunicare şi calculele, responsabilul cu planificarea întocmeşte planul media. Planul va fi inclus în prezentarea făcută clientului, privind întreaga campanie. 4. Responsabilul cu achiziţia – media buyer …negociază cumpărarea spaţiului publicitar şi a timpului de emisie.îşi demonstrează abilitatea prin obţinerea celor mai bune poziţii şi ore de difuzare, la tarife minime. 5. Copywriter-ul – redactorul publicitar ... responsabil cu formularea programelor. Creează teme sau platforme de text pentru campanii publicitare. Reduce argumentele pentru vânzare la un minimum de cuvinte necesare. Copywriter-ul foloseşte cuvintele, punctuaţia, corpul de literă, aşa cum lucrează un pictor cu formele şi culorile. 6. Directorul artistic – Art director ...conduce atelierul de creaţie. Într-o agenţie mare, el are o echipă de redactori artistici, machetatori şi tehnoredactori. Într-o agenţie mică, directorul artistic va executa toate aceste sarcini de creaţie.

7. Redactorul artistic – Visualiser ...omologul copywriter-ului, pe partea creativă. Lucrează împreună cu echipa de creaţie, care se ocupă de unul sau mai multe conturi. Realizează ciorne cu mai multe versiuni ale reclamei, până la exprimarea satisfăcătoare a ideilor. Apoi completează schiţele cu textul scris de mână şi stabileşte în linii mari amplasarea, dimensiunea şi culoarea ilustraţiilor. De obicei, clientului i se prezintă schiţele vizuale fără fotografia finală, desenele şi textul cules. După aprobare , se comandă realizarea materialelor artistice. 8. Machetatorul – layout artist ...macheta este planul exact al reclamei care transformă schiţa vizuală într-o reprezentare măsurată a reclamei. Poate servi ca model tipografului. Pe machetă se vor marca instrucţiunile privind caracterul şi corpul de literă. Macheta originală este adaptată pentru diverse mărimi ale spaţiului publicitar. 9. Tehnoredactorul ...încadrează textul în spaţiu. Va lua textul şi macheta, va selecta caracterul şi corpul de literă necesare şi va da instrucţiuni culegătorului de text. 10. Producătorul de televiziune ...concepe spoturile publicitare prezentate sub forma unui scenariu vizual – storyboard 11. Managerul de producţie ...organizează producţia de reclame în toate compartimentele agenţiei. Trebuie să respecte programarea stabilită, ca reclamele să fie livrate la timp către media. Urmăreşte evoluţia lucrărilor.

Despre ilustraţii – David Ogilvy

1. Subiectul ilustra]iei e foarte important. Dac\ nu `]i vine o idee remarcabil\, nici

chiar un fotograf nu te poate salva. 2. Cel mai mare impact `l au fotografiile care st\rnesc curiozitatea publicului.

3. Când nu ai o poveste de spus, este mai bine s\ faci din ambalaj subiectul

ilustra]iei.

4. Merit\ s\ ilustrezi rezultatul final al utiliz\rii produsului t\u. Fotografiile `nainte [i dup\ par s\-i fascineze pe cititori.

5. Fotografiile atrag mai mul]i cititori decât desenele, sunt mai credibile [i mai bine

memorate. Totu[i, fotografiile sunt uneori prost reproduse `n ziare `ncât, `n acest caz, ob]ii o ilustrare mai vie utilizând desenul.

6. Folosirea unor personaje cunoscute celor care urm\resc spoturile televizate

m\re[te procentul de memorare a reclamelor scrise.

7. P\streaz\ ilustra]iile cât mai simple, cu interesul concentrat pe o singur\ persoan\. Scenele cu mul]imi nu ]in.

8. Nu ar\ta chipuri umane m\rite mai mult dec=t m\rimea natural\.

9. Subiectele istorice plictisesc majoritatea cititorilor.

10. Nu porni de la premisa c\ subiectele care te intereseaz\ pe tine sunt obligatoriu

interesante [i pentru consumatori.

11. Ilustra]iile cu bebelu[i, animale [i referitoare la sex `i atrag `n mod special pe cititori.

12. Dac\ grupul ]int\ este format `n special din femei, folose[te `n ilustra]ii femei, iar

c^nd te adresezi b\rba]ilor fotografiaz\ b\rba]i – oamenii v\d `n personajele reclamelor persoane cu care se pot identifica.

13. Reclamele `n 4 culori cost\ cu 50% mai mult decât cele alb – negru, dar `n medie,

sunt cu 100% mai bine memorate.

14. Dac\ clientul are re]ineri `n ceea ce prive[te macheta, sau reclama, `n general, m\re[te dimensiunea logo – ului sau arat\ - i firma `n ilustra]ie [i, dac\ nici a[a nu merge, arat\ [i chipul managerului.

15. Când face]i reclam\ la produse pentru g\tit, atrage]i mai mul]i cititori dac\ ar\ta]i

mâncarea gata preg\tit\ decât dac\ fotografia] ingredientele.