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 cu
6/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 de
jos), 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 Setup

pentru 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

 Exemple de prelucrare a unei imagini, în vederea transmiterii
de mesaje diferite în publicitate, prin folosirea în principal a
programului Adobe Photoshop. Imaginile au fost interpretate cu
ajutorul filtrelor, saturaţiei de culoare, contrastelor şi a luminozităţii.
Din meniul “image” s-a folosit opţiunea „mode”, pentru canalele
grayscale, RGB şi CMYK.
Textul a fost prelucrat în programul Corel Draw.

Propunere de afiş pentru un magazin axat exclusiv pe comercializarea de

rochii de mireasă unicat
Propunere de afiş pentru filmul artistic românesc “Glissando
Copertă pentru un pliant al unei şcoli de pictură.
 eau de perfume

Reclamă fluturaş pentru un produs cosmetic, parfumul “Blanca” . Acesta

este destinat femeilor peste 30 de ani, şi este un parfum uşor, de zi, cu aromă
de flori de câmp
Propunere pentru o copertă de carte.
Propunere pentru un ambalaj de joc de cărţi
Afiş pentru un concert simfonic.
Fluturaş reclamă pentru un medicament destinat eliminării stresului.
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.
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.