Home >Documents >Grafic Design Anul 2 Si 3

Grafic Design Anul 2 Si 3

Date post:02-Jul-2015
Category:
View:353 times
Download:3 times
Share this document with a friend
Description:
curs facultate
Transcript:

Instituia de nvmnt superior: Universitatea de Arte Gorge Enescu, Iai 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, urmrindu-se urmtoarele 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 funcie de suporturile folosite afi, flutura, ambalaj, copert carte, etc. 5. Pregtirea pentru tipar 6. Despre realizarea paginilor web 7. Ilustraia 8. Mijloace publicitare 9. Structura unei agenii de publicitate

PREGTIREA PENTRU TIPAR date generale pentru realizarea machetei Folosirea programului Adobe Illustartor CS2 n acest tutorial am luat ca i exemplu o carte potal.

* La deschiderea unui document nou n Illustrator, document ce va constitui macheta, trebuie stabilite dimensunile finale ale lucrarii ce urmeaz a fi tiprit, n cazul de fa 15,2/10,2cm, dimensiune ce corespunde cu 6/4inch (o dimesiune standard pentru carti postale). Foarte important este tipul paletei cromatice. Obligatorie fiind opiunea CMYK . *Tiparul are nevoie de un mic spaiu dejur mprejurul imaginii.(Bleed area) Pentru a vizualiza aceste margini urmai linia de comenzi: Object >>> Crop Area >>> Make Mrimea acestui spaiu trebuie s fie de 1/8 adic 0,125 sau 0,3 cm. Pe fiecare latur. Imaginea va fi pregtit innd-u-se cont i de cei 6 mm. Att pe nlime ct i pe lime, deoarece scalrile n Illustrator afecteaz rezoluia.

* Avem trei spaii 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 rezoluie 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 atene deosebit trebuie acordat contururilor de culoare neagr, ce pot rmne cu negrul din palet i coninutul s fie 4colorRICH black.. Cu ajutorul pipetei, pe care dnd dubluclic o putei seta s preia valorile punctului (n partea de jos), urmrii n caseta Info valorile CMYK

Edit >>> Preferences >>> Appearance of Black

nainte de salvare trebuie verificate dac imaginile sunt link sau embedd, acest lucru l putei vedea deschiznd Window >>> Document Info >>> Linked image; tot la Document Info putei verifica dac rezoluia 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 conin. Verificai acest lucru deschiznd fereastra links Windows >>> Links unde puteI vedea starea imaginilor.

*

* Pentru a evita neplcerile cauzate desubstituirea unor fonturi, prin asta modificnd aspectul grafic al paginii, convertii textul la Outline. Altfel va trebui s trimitei tipografiei si folderele ce conin fonturile folosite.

* Salvarea documentului se vaface EPS i NU nativ AI .

n fereastra cu proprieti EPS verificai compatibilitatea i check la includerea Thumbnails; CMYK PostScript; 8 bit Preview I PostScript Level2.

* Folosii File >>> Document Setup pentru a mri reyoluia daca este necesar, mai ales n cazul Line Art

*

Dimensiunile standard al colilor de hrtie 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

Avnd un layer background. Adugai un layer nou, numit Forma, unde desenai o form oarecare. n acest exemolu amdesenat un cerc.

Deschidei paleta Channel urmnd ca dup ce dai clic pe sgeata din dreapta sus, s alegei opiunea New Channel Bifai opiunea Masked dup care alegei culoarea zonei luminate, precum si opacitatea acesteia, dar s fie peste 50% i dai OK.

Umpleti selecia cu un gradient. Nu uitai c atunci cnd lucrai pe canalele de culoare, lucrai pe negativ, aceste canale coninnd numai informaii in paleta Grayscale.

Pentru a ncrca selecia, doar cea care are transparena peste 50% dai dublu clic pe layerul Alpha 1.

Dup ce v ntoarcei la modul RGB si n paleta Layers vei avea gradientul pe form. Pentru a salva selecia gradientului adugai o masc layerului forma.

Facei o dublur layerului forma i numii-o umbrire Acum blocai pixelii transpareni apsnd pe iconia Lock, urmnd s umplei forma cu o alt culoare, care va fi culoarea zonei umbrite.

Aceast culoare o vei putea schimba ulterior.

Urmeaz s adaugai textura. Selectai masca layerului umbrire si alegei: Filter > Noise > Add Noise urmnd s stabilii valoarea i modul de afiare.

Acesta este rezultatul acestui exerciiu. Putei folosi i alte texturi: Filter > Artistic > Sponge Filter > Sketch > Reticulation... Puei oricnd s schimbai culorile, dar atene s avei blocat zona de transparen.

Succces !

Aplicarea unei umbre aruncate n Adobe Photoshop CS2Scopul este de a realiza umbra aruncat de ctre un obiect inserat ntr-o imagineDe exemplu: inserarea unei coloane sau a unui monument 3D pe o imagine cu o piaet.

Pentru a realiza o umbr aruncat, n Photoshop, avei nevoie de dou imagini spre exemplificare am ales un portret i o apc . Scopul este realizarea unei imagini ct mai realist, prin adugarea unui element nou pe o imagine i realizarea umbrei aruncate de acesta peste imagine. Deschidei pentru nceput imaginea de baz.

Urmeaz s deschidei Channel palette. Selectai si lasati vizibil doar layerul cu cel mai mare contrast, respectiv 'Red', urmnd s duplicai acest layer (clic dreapta...).

n fereastra 'Duplicate Channel' denumii noul layer 'Blur map' dup ce ai ales ca destinaie un document nou.

Acum vei avea inc o imagine numit 'Blur map' deschis pe Desktop. Dispersia umbrei poate fi aplicat oricrui document photoshop, cu excepta celor bitmap.

Acum dac dorii s netezii gradaia, dar pstrnd detaliile alegei linia de comenzi: Filter > Noise > Despeckle. Repetai operaiunea de patru ori (Ctr+F) Imaginea este mult mai neteda ;i mai blnd. Salvati aceast imagine (Blur map).

Acum v ntoarcei la modul RGB (Ctr+~) pe documentul iniial. Deschidei documentul pe care se afl obiectul pe care dorii s-l lipii pe imaginea dvs. i a crui umbr urmeaz sa fie dispersat pe imaginea iniial. Obiectul pe care-l aducei (Copy+Paste) trbuie s aib backgroundul transparent. Scalai i poziionai obiectul n poziia dorit, innd cont i de locul unde vei avea umbra aruncat. Pentru 'Transform' putei folosi un shorcut (Ctr+T).

Pentru a crea umbra, avei nevoie de un nou layer, situat ntre cele dou existente. Cu ajutorul lasoului, avnd n vedere parametrul 'Feather' pe care+l stabilii dup ce ai conturat forma umbrei. Pentru aceasta urmai linia de comenzi: Select > Feather i dati valoarea dorit.. Umplei selecia cu 50% Gray dup care alegei Filter > Blur > Gaussian blur, pentru a netezi umbra.

Avnd layerul cu umbra selectat, alegei Filter > Distort >Displace, si dai valoare '0' la scalare pe vertical i 30 la cea vertical. Putei experimenta diverse alte valori. Va aprea csua de dialog care te ntreab ce document foloseti . Cutai 'Blur map' i dai Ok i ateptai rezultatul. Vei oserva cum sa mulat imaginea n interioril seleciei dvs. Acum pentru a obine o imagine ct mai realist, alegei modul Multiply (din caseta Layers) care va uni layerele, umbrind culorile de pe imaginea iniial

Urmeaz s facei cateva corecii alegnd: Adjustement > Hue/Saturation iar n csua de dialog activai Colorize i Prewiew urmnd sa corectai valorile.Se poate aplica si imaginilor albnegru (grayscale), cu excepia celor bitmap.

Cam asta este tot.

Prelucrarea unei fotografii digitale n Adobe Photoshop CS2n general imaginile realizate cu o camera foto digital cu performane reduse, sau a imaginilor scanate este necesara repararea lor n Photoshop.

Deschidei imagine pe care dorii s o prelucrai, urmnd s alegi Image >Image Size i s modificai rezoluia la 300px. Pentru a vizualiza mai bine eventualele greeli descchidei caseta Channel i lsai viyibil doar canalul Blue, sau putei folosi Ctr+3

Dup ce ai denumit layerul baz dai click dreapta i alegei Duplicate Layer pe care-l numii Blur.

Alegei Filter > Blur > Gaussian Blur , pentru a realiza o estompare a rezoluiei imaginii, n special pe canalul Red, acesta fiind cel mai sensibil.

n caseta de dialog dai valoarea care s realizeze att o uoar estompare dar s pstreze totui imaginea de ansamblu. Dai OK. n casela Layers alegei modul Color care nu schimb culoarea de baz ci face un mixaj prin amestecul luminii reflectate cu suprafeele umbrite.

Duplicai layerul Blur i daii numele Focus. Schimbai Color mode n Normal urmnd sa modificai opacitatea la o valoare de aprox. 30%. Acum avei o imagine cu un aspect mai moale

Duplicai layerul baz i numii noul layer Nuane. Tragei de acesta i aducei-l pe prima poziie. Creai un layer nou pe care-l punei pe ultima poziie, dup care Select All (Ctr+A) i umplei cu alb. Acest layer va va ajuta s vizualizai modificrile pe care le vei face pe layerul Nuane. Lsai vizibile doar layerele Nuane i cel alb.

Dublu-click pe layerul Nuane, pentru a deschide csua Layer Style.

n cmpul Blend If: alegei canalul Gray, urmnd ca pe irul This layer s mutai cursorul din dreapta la o valoare aprox. de 98. Cu Alt+Click creai un nou cursor cu o valoare de aprox. 22.

Schimbai canalul de amestec pe Red unde mutai cursorul din dreapta la o valoare aprox. de 160 i creai unul nou la o valoare aprox de 72, dup care v ntoarcei pe canalul gray i dai OK.

Nu v mai rmne dect sa facei vizibile toate layerele. n cazul n care rezultatul nu v satisface, ntoarei-v pe layerul Nuane i Focus pentru c valorile folosite aici sunt orientative, ele trebuind a fi stabilite pentru fiecare imagine n parte, n funcie de ceea ce se dorete a fi obinut.

Cam asta este !

Adugare unui efect 3D unui text n Adobe Photoshop CS2

Avnd un layer de culoare alb pentru background, creai un nou layer pe care numii-l text. Deschidei paleta Channel i creai un nou canal.

Numii acest canal masc. Alegei o culoare ce va acoperi partea luminoas a textului. n cazul n care avei un background colorat, dati valoare i opacitii culorii.

Pe acest canal, scriei un text. El poate fi editat,mutatscalat, chiar dac v aflai pe un canal ce conine doar o selecie. Facei o dublur canalului masca pe care numii-o plaster.

Alegei Filter > Sketch > Plastern acest exemplu, img balance 16; Smoothness 8; light:buttom-left.

V ntoarcei n paleta Layers i duplicai layerul text Numii noul layer text3D

Acum va trebui s ncrcai selecia. Pentru aceasta urmai Select > Load Selection i alegei canalul plaster.

Umplei selecia cu o culoare nchis ca tonalitate. Putei s expandai aceast selecie prin: Select > Modify > Expand

Pentru a salva selecia alegei: Select > Save Selection Evaluai rezultatul. Putei folosi i: Filter > Sharpen > Unsharp Mask

Adobe Photoshop CS3 Scrierea unui text pe o curb Fit Text To Path

Acest tutorial prezint cteva modaliti de lucru cu Shape i Path n Photoshop, aranjnd, sau fcnd un text s urmeze o anume cale, direcie.

S ncepem cu desenarea unei linii curbe, folosind Pen Tool.Pentru cei ce nu sunt famializai cu acest instrument, dai un click n punctul de start al curbei urmat de un alt click undeva unde fie dorii s se termine, fie este doar un nod de arcuire. n acest punct tragei de mouse i vei observa arcurea liniei.

Dup ce curba a fost desenat, cu ajutorul instrumentului Direct Selection Tool putei muta nodurile, trage de manetele ancorei pentru a modifica arcuirea, pn ce obinei forma de care avei nevoie.

Acum luai din nou instrumentul Pen Tool i avnd forma selectat dai click pe butonul ce transform forma pe care o avei ntr-o cale, butonul Path aflat n bara principal.

Dac nu o avei deschis, deschidei din Window fereastra Path, urmnd s luai instrumentul pentru text i s dai click pe cale n locul n care dorii s nceap scrierea textului, dup care scriei textul dorit. Nu uitai s va uitai i la indicatorii de aliniere a textului

Acum putei s v ntoarcei n caseta Layer, s facei invizibil layerul ce conine calea, s aplicai ce stil doriti pe layerul ce conine textul. n final facei un New Layer lsnd vizibile layerul text i cel nou, unindu-le (Merge visible)

S ncercm i Line Tool.Selectai instrumentul i tragei o linie n document.

Pentru a putea arcuii acest linie, avem nevoie de cel puin nc un nod (ancor), pentru aceasta lum instrumentul Add Anchor Point Tool i dm click undeva pe linie.

Pentru a putea deplasa acest nod, avem nevoie de instrumentul Direct Selection Tool (tasta A). Pe lng deplasarea nodului putem trage i de manetele de arcuire, pn vom obine ce ne dorim.

Mergei n fereastra Path, urmnd ca dup ce ai luat instrumentul de scriere s dai click undeva pe cale i s scriei textul. Dnd click pe text obsevai c vor aprea doi marcatori pe care putei s-i tragei pn ce textul se poziioneaz n mod convenabil. Textul putnd fi poziionat i pe cealalt parte a cii (la interior)

S mcercm o SPIRALPentru a desena spitala, avem nevoue pentru nceput de in dreptunghi, nu foarte lat, plasat n partea stng a documentului, asupra cruia vom aplica efectul Twirl.. din Filter >> Distort

Atenie! Dreptunghiul NU trebuie s fie selectat pentru aplicarea filtrului. Dai valoarea maxim (999) I OK

Pentru a mri numrul spirelor folosii Ctr+F pentru repetarea filtrului

Pentru a selecta numai spirala, innd Ctr apsat dai clic pe imaginea layerului.

Deschidei fereastra Path iar n partea inferioar gsii butonul Make work path from selection. Acum avei calea, urmnd s scriei textul

i n acest caz cu ajutorul instrumentului de selectie direct putei s mutai textu, trgnd de limitatorul de text. Vei avea nevoie probabil de puin timp pentru a va obonii cu modul de distribuire a textului pe cale.

La fel ca i n exemplele anterioare, v ntoargei n fereastra Layer unde putei interveni n orice mod dorii asupra textului.

Optimizarea i prelucrarea unei fotografii digitale de dimensiuni i rezoluie reduse, n vederea folosirii sale n compoziii grafice Adobe Photoshop CS2 De cele mai multe ori imaginile realizate cu o camer foto digital cu performane reduse, importate de pe internet, sau cele scanate, necesit operaiuni de retuare 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 gsim la o rezoluie acceptabil. Ea trebuie prelucrat n aa fel nct s poat fi pregtit n vederea tipririi.

Aceasta este imaginea de baz. Dimensiunea sa este de 264 X 279 pixeli, cu o rezoluie de 72 X 72 dpi.

Deschidei imaginea pe care dorii s o prelucrai, urmnd s alegei Image >Image Size i s modificai rezoluia la 300px. Pentru a vizualiza mai bine eventualele greeli deschidei caseta Channel i lsai vizibil doar canalul Blue; sau putei folosi Ctr+3.

Pentru a vizualiza mai bine eventualele greeli deschidei caseta Channel i lsai vizibil doar canalul Blue; sau putei folosi Ctr+3.

Dup ce ai denumit layerul baz dai click dreapta i alegei Duplicate Layer pe care-l numii Blur.

Alegei Filter > Blur > Gaussian Blur , pentru a realiza o estompare a rezoluiei imaginii, n special pe canalul Red, acesta fiind cel mai sensibil.

n caseta de dialog dai valoarea care s realizeze att o uoar estompare dar s pstreze totui imaginea de ansamblu. Dai OK.

n casela Layers alegei modul Color care nu schimb culoarea de baz ci face un mixaj prin amestecul luminii reflectate cu suprafeele umbrite.

Duplicai layerul Blur i daii numele Focus. Schimbai Color mode n Normal urmnd sa modificai opacitatea la o valoare de aprox. 30%. Acum avei o imagine cu un aspect mai moale

Duplicai layerul baz i numii noul layer Nuane. Tragei de acesta i aducei-l pe prima poziie. Creai un layer nou pe care-l punei pe ultima poziie, dup care Select All (Ctr+A) i umplei cu alb. Acest layer v va ajuta s vizualizai modificrile pe care le vei face pe layerul Nuane. Lsai vizibile doar layerele Nuane i cel alb.

Dublu-click pe layerul Nuane, pentru a deschide csua Layer Style.

n cmpul Blend If: alegei canalul Gray, urmnd ca pe irul This layer s mutai cursorul din dreapta la o valoare aprox. de 98. Cu Alt+Click creai un nou cursor cu o valoare de aprox. 22.

Schimbai canalul de amestec pe Red, unde mutai cursorul din dreapta la o valoare aproximativ de 160 i creai unul nou la o valoare aproximativ de 72; dup care v ntoarcei pe canalul gray i dai OK.

Nu v mai rmne dect sa facei vizibile toate layerele. n cazul n care rezultatul nu v satisface, ntoarcei-v pe layerul Nuane i Focus pentru c valorile folosite aici sunt orientative, ele trebuind s fie stabilite pentru fiecare imagine n parte, n funcie de ceea ce se dorete a fi obinut.

Interpretarea imaginii prelucrate anterior

Imaginea optimizat poate fi dus mai departe trecnd la o alt etap, i anume cea a interpretrii, pentru o anumit destinaie. n cazul nostru este vorba de o copert de CD. Putei folosi: Filter > Dust&Scratchnes i s mai reglai din radius.

Duplicai layerul i alegei: Filter > Blue > Gaussian Blur unde dai valoarea 15.

Adugai o masc (clic pe Add vector mask din partea inferioar a paletei layers. Alegei un gradient circular i umplei masca cu el. Nu uitai s dai click pe masc.

Urmeaz s alegei opiunea Hue/Saturation din Image/Adjustment i s ajustai valorile. Aici am dat pentru Hue=38 i pentru Saturation=22. Bifai opiunea Colorize

Copiai imaginea de pe layerul 2 (gaussian) Ctrl+C. i dai click pe layer innd Ctrl apsat pentru a nu avea nici un layer selectat, dup care dai Paste Ctr+V. Schimbai Set blending mode n Multiply.

Din partea inferioar a paletei Layers dai clic pe Brightness/Contrast i facei coreciile pe care le dorii.(n funcie de imaginea pe care o prelucrai)

Acum avei nevoie de o imagine ca aceasta, care s sugereze zgrieturile de pe o fotografie veche. Copiai aceast imagine, deschidei-o n Photoshop, copiai-o i lipii-o in documentul pe care l prelucrai. Avnd layerul cu acest imagine selectat i alegei: Edit > Define patern...

Schimbai Set blending mode n Lighten. Putei ncerca i Soft light sau orice alt combinaie care va avantajez.

acesta este imaginea final, prelucrat n acest exerciiu

*i un exemplu de ajustri diferite a parametrilor

Crearea unui text cu efect n Adobe PhotoshopCSPe un document 800x800px scriei textul dorit, dup care cu ajutorul instrumentului de selecieMagic Wand ,avnd toleran (0), selectai fundalul. Avnd Ctr apsat adugai seleciei i golurile literelor. Urmeaz s inversai selecia Ctr+Shift+I

Avnd literele selectate, deschidei fereastra Channel urmnd ca din partea inferioar a ferestrei s alegei Save selection as channel, obinnd canalul Alpha 1 pe care urmeaz s l prelucrati. Lsai vizibil doar acest canal.

Filter > Blur > Gaussian Blur Aplicati acest filtru n mod repetat, de 6 ori dnd n csua Radius valori ca: 9; 6; 6; 3; 3; 1. Urmeaz s copiai acest canal ntr-un document nou. Ctr+A > Ctr+C Ctr+N >Ctr+V

Dac ai 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 aducei n documentul initial (text_sticla.psd) o imagine, ceva n genul acesta. Important este dimensiune ei, trebuind s aiba aceiai dimensiune cu documentul tu. (800 x 800 px) *Deschidei imaginea, scalai-o, copiai-o i lipiti-o n doc. cu text.

Imaginea va arta cam aa, datorit faptului ca mai este vizibil canalul Alpha 1. Putei sa-l facei invizibil, pentru c mai mult ncurc Avnd activat layerul cu imagine Filter > Distort > Glass....

n fereastra de proprieti alege Distortion 20 Smoothness 8 Scaling 94% Bifai csua Invert n partea dreapt a csuei texture apas pe sgeat i alege: Load texture urmnd s ncarci documentul ce conine canalul Alpha 1 (text_sticla_bump.psd)

innd Alt apsat plimbai cursorul n caseta layers pe layerul text pn ce cursorul se va schimba n dou sgei intersectate. Dati clic. Acum layerul cu imagine a devenit masc pentru textul tu.

Copiati layerul text- (Ctr+A) i dai Paste (Ctr+V) obinnd un nou layer n caseta blending mode alegei 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 vectori CDR formatul nativ al programului Corel CDT fisier sablon al programului Corel CDX format de metafisier Corel care utlizeaza un algoritm de compresie intern de marca pentru a reduce dimensiunea fisierului CGM format de fisier Computer Graphics Metafile CMX Corel Metafile Exchange. Salveaza desenele sub forma de grafica vectoriala pentru utilizare in aplicatile Corel CPT Corel Photopaint CPX Corel Presentation Exchange. Format de fisier care utilizeaza un algoritm intern de compresie, de firma, pentru a reduce dimensiunea fisierului DOC Microsoft Word EPS Encapsulated Postscript. Imagine needitabila in aplicatia tinta GIF - Fisier bitmap. Accepta comprimare fara pierderi, succesiune de cadre distincte HTML limbaj de generare de scripturi care permite afisarea unui document in internet NAP fisier pentru imagini vectoriale PCT pentru Macintosh PCX fisier bitmap Paintbrush PDF document Adobe Portable - comprimari PIC fisier Lotus Pic PRN pentru imprimanta PostScript PSD fisier photoshop TIFF la scanari. Cel mai bun descriptor de imagine tip bitmap JPG vizualizari comprimate AI Adobe Illustrator WMF 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.

Cteva 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 unuiparagraf 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 pstreaz 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 intradevar 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 lam 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/

ProgramareDupa 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

HTMLHTML 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 se boldeaza un text . opreste actiunea marcajului precedent . Pentru a sublinia un cuvant sau o fraza puneti inaintea unei fraze si 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 : Legatura interna Legaturi externe Pentru a crea o legatura catre o alta pagina dintr-un alt site folositi un tag ca acesta : Legatura externa 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 HTMLCel mai simplu document HTML va avea urmatoarea structura : Titlul paginii Web Toate fisierele text, sunete si imagini ale paginii dvs. Definiia unei agenii de publicitate: o echip de experi care lucreaz pentru clieni, denumii conturi ( accounts). Termenul nu are nimic comun cu contabilitatea. Un cont este pur i simplu o firm care folosete serviciile ageniei pentru a-i face reclam. Agenia ocup poziia de mijloc n trio-ul lumii reclamelor clientul, agenia 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 agenii de publicitate: s planifice, s creeze i s execute campanii publicitare pentru clieni. Gradul de implicare variaz n funcie de tipul de agenie. Unele ofer servicii complete; altele cumpr doar spaiul publicitar; altele fac doar munc de creaie; iar altele ofer servicii speciale Personalul ageniei de publicitate: 1. Directorul de conturi account director rspunde de un grup de conturi clieni. Are ca subordonai pe responsabilii de cont, care se ocup de unul sau mai multe conturi. 2. Responsabilul de cont account executive meninerea legturii ntre agenie i clieni. Trebuie s n]eleag nevoile clientului, afacerea sa i ramura industrial respectiv. n acelai timp, va prezenta clientului propunerile, ideile i munca ageniei. E necesar s cunoasc domeniul reclamelor i s\ poate colabora cu oricine din agenie. 3. Responsabilul cu planificarea media media planner la ageniile mari planificarea i cumprarea spaiului publicitar sunt activiti separate. La o agenie mai mic, o singur persoan se va ocupa de amndou. Dup ce a ncheiat studierea mijloacelor de comunicare i calculele, responsabilul cu planificarea ntocmete planul media. Planul va fi inclus n prezentarea fcut clientului, privind ntreaga campanie. 4. Responsabilul cu achiziia media buyer negociaz cumprarea spaiului publicitar i a timpului de emisie.i demonstreaz abilitatea prin obinerea celor mai bune poziii 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 vnzare la un minimum de cuvinte necesare. Copywriter-ul folosete cuvintele, punctuaia, corpul de liter, aa cum lucreaz un pictor cu formele i culorile. 6. Directorul artistic Art director ...conduce atelierul de creaie. ntr-o agenie mare, el are o echip de redactori artistici, machetatori i tehnoredactori. ntr-o agenie mic, directorul artistic va executa toate aceste sarcini de creaie.7. Redactorul artistic Visualiser ...omologul copywriter-ului, pe partea creativ. Lucreaz mpreun cu echipa de creaie, care se ocup de unul sau mai multe conturi. Realizeaz ciorne cu mai multe versiuni ale reclamei, pn la exprimarea satisfctoare a ideilor. Apoi completeaz schiele cu textul scris de mn i stabilete n linii mari amplasarea, dimensiunea i culoarea ilustraiilor. De obicei, clientului i se prezint schiele vizuale fr 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 schia vizual ntr-o reprezentare msurat a reclamei. Poate servi ca model tipografului. Pe machet se vor marca instruciunile privind caracterul i corpul de liter. Macheta original este adaptat pentru diverse mrimi ale spaiului publicitar. 9. Tehnoredactorul ...ncadreaz textul n spaiu. Va lua textul i macheta, va selecta caracterul i corpul de liter necesare i va da instruciuni culegtorului de text. 10. Productorul de televiziune ...concepe spoturile publicitare prezentate sub forma unui scenariu vizual storyboard 11. Managerul de producie ...organizeaz producia de reclame n toate compartimentele ageniei. Trebuie s respecte programarea stabilit, ca reclamele s fie livrate la timp ctre media. Urmrete evoluia lucrrilor.Despre ilustraii 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. Cnd 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 dect desenele, sunt mai credibile [i mai bine memorate. Totu[i, fotografiile sunt uneori prost reproduse `n ziare `nct, `n acest caz, ob]ii o ilustrare mai vie utiliznd 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 ct 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 dect 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. Cnd face]i reclam\ la produse pentru g\tit, atrage]i mai mul]i cititori dac\ ar\ta]i mncarea gata preg\tit\ dect dac\ fotografia] ingredientele.

of 70/70
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
Embed Size (px)
Recommended