TUTO-BARRA DE NAVEGACIÓ (AMB IMAGEREADY) de 2n nivell amb HOTSPOTS

Bon dia. Estic treballant en l'exercici de les tres pestanyes posant concepctes diferents, el que vàrem fer quan l'escola nàutica. He fet els tres index de colors diferents, però no ser com fer per agrupar-los i que canvii el color. Bé, el cert és que estic mig clavat a les capes, no sé si el text i la pestanaya han d'anar en una mateixa capa ni com posar-les juntes. Es possible d'explicar aquí al blog el procès?

Mercès.

Josep

---

[Dintre de les pràctiques més avençades estem desenvolupant ja les anomenades "meta-habilitats" en les que combineu totes les tècniques més bàsiques que heu estat fent fins ara.]

La dificultat d'aquest tutorial és de nivell mitjà. Per poder fer-lo cal controlar molt bé:

1. Sel·lecció


2. Guies


3. Capes


4. URL


5. HTML


6. ...

L'altre dia vàreu fer una barra de navegació horitzontal de dos nivells. Aquest cop en contes d'utilitzant sectors ho vau fer amb "hotspots" que traduït vól dir "manchas calientes", nosaltres li podem dir "zones interactives". A continuació us posaré els passos per si no us enrecordeu de com ho vam fer per intentar-ho de nou.

1. Crearem un document nou. Les seves dimensions han de estar inscrites en aquell rectangle límit que vam comentar. No hem de sobrepassar els 780x430px (que com ja sabeu és la mida de la finestra que queda al navegador si l'usuari està fent servir una resolució de pantalla 800x600). Per altra banda la barra de navegació. Posem per exemple una mida de: 650x40px.
   
   
2. A continuació posarem guies per marcar referències. Una horitzontal a y=20px i les altres verticals distribuïdes de tal manera que ens serviràn de referència per fer les tres pestanyes, les quals han d'estar separades entre sí igual distància. L'amplada de les pestanyes no té per que ser igual en totes. Depenent del text que tinguin poden ser més amples o menys. Però el que sí ha de ser igual és la distància que les separa. Hem fet servir el recurs de fer sel·leccions quadrades amb "Tamaño fijo" aprofitant que les guies es peguen magnèticament per aconseguir posar les guies amb més precisió.
3. Amb la eina "rectángulo redondeado" amb un radi de curvatura, posem, de 10px i la paleta "Trazos" a la vista anirem creant 4 traços: un per fer la forma de la barreta i els altres per fer les pestanyes. Cada cop que facis un traç posa-li nom i desel·lecciona'l a la paleta "Trazos" fins que no estigui assenyalat de blau(pica fora de qualsevol traçat que tinguis en aquesta paleta). Així aconseguim que no es faci només un sol traçat. Ens interessa que siguin traçats diferents.
   
4. Amb Ctrol sobre el traçat barreta convertint així aquest traçat en sel·lecció. A continuació fes Ctrol+MAYS(SHIFT) sobre el traçat d'una de les pestanyes i obtindràs una sel·lecció que serà la suma de la barreta i la pestanya. Un cop tens aquesta sel·lecció amb aquesta forma pinta sobre una capa nova. Repeteix aquesta operació obtenint com a resultat 3 capes, les quals estàn pintades amb la suma de barreta i cada pestanya.
5. En capes per sobre Col·loca el text que va a cada pestanya i també els textos de les subseccions de cada pestanya.
   

Animació del procés fins aquí:
Clicka aquí per veure l'animació del procés.

Vista de la finestra capes just abans d'escriure els textos:


I havent escrit els textos de les pestanyes.



Fixeu-vos a continuació que he afegit els textos de les seccions en capes diferents i les he empaquetades amb carpetes. [Cliqueu sobre la imatge per ampliar]. Us recordo que les carpetes també tenen un ull cosa que ens permet fer visibles o ocultar de cop totes les capes que estiguin a dins.

Fixeu-vos que en

6. Si haguèssim treballat en photoshop fins ara i no estiguèssim a ImageReady encara pasem a aquest programa apretant al botó inferior de la barra d'eines.
   
7. Si estàs al ImageReadyCS2 tingues a mà les finestres Contenido de Web i Mapa de Imágenes.
   
8. Posa zones calentes (o "HotSpots") sobre les pestanyes amb la eina "Mapa de imágenes".
   
   [Cliqueu a la imatge per ampliar i veure l'animació del procés].
   
   
   Mireu a continuació quin aspecte té la finestra Contenido de Web un cop hem creat aquestes "zones calentes". [Convindria que canvièssim de nom a aquestes zones per identificar-les més ràpidament i per treure l'accent de la paraula "Mapa de imágenes" que no és convenient de cara al pas que fa cap a pàgina web el ImageReady ja que posaria caràcters en el HTML que se surten de ASCII, que com ja sabeu no és recomenable que sigui al codi font d'una pàgina segons W3C encara que tinguem la sort de tenir nosaltres un navegador tolerant. No sabem mai si el navegador que tingui l'usuari serà tant tolerant.]
   
   
   
   
9. A continuació anirem a la finestra capes i posarem l'ull a la carpeta de la primera secció que hem fet, en aquest cas la categoria "cursos". Tanmateix tancarem els ulls de les altres carpetes: la de sortides i la de botiga.
10. Un cop només veiem la carpeta de la categoria principal cursos posarem més "hotspots" a cada una de les subseccions d'aquesta categoria.
    
    Observeu què li passa a la finestra Contenido de Web.
    
    Han aparegut més "hotspots"(que he resaltat en blau).
    
    
    
    
    
    
11. A continuació a la finestra Contenido de Web tancarem els ulls de les hotspots assenyalades en blau a la figura anterior. Per altra banda a la finestra capes tancarem l'ull de la categoria general cursos i obrirem l'ull de la categoria general sortides.
    
    
12. Repetirem el procés des del punt 10 fins el punt 11, i creant hotspots, però aquest cop amb les subseccions de la categoria sortides. Tornarem a tancar els ulls d'aquestes hotspots a la finestra contenido de web, tancarem l'ull de la carpeta sortides, obrirem l'ull de la carpeta botiga i repteriem el procés des del punt 10 fins el punt 11 però aquest cop amb la categoria general botiga.
    
    
    
    
13. Un cop ja hem creat totes les hotspots amb la eina que les crea () sel·leccionarem amb la eina de sel·leccionar hotspots () una per una i a la finestra Mapa de Imagen:
    
    anirem omplint els camps per que aquestes hotspots facin de link. [Recordeu que les hotspots són zones d'una imatge en les que podem posar links. El camp Destino és l'atribut "target" de les etiquetes A, les dels links. En aquest cap definim on volem(en quina finestra, frame o iframe nomenada prèviament) que es representi el URL. Aquí és on intervindrà el que sabeu de HTML. Si encara no ho enteneu no us amoineu per que al Dreamweaver ho acabareu de veure.] Podem posar a les pestanyes principals les seguents URL per exemple: cursos.html, sortdies.html i botiga.html.
14. Tanmateix a les altres hotspots que hem creat i que corresponen a les subseccions hem de posar les URL en aquesta finestra. Amb això ja us espavilareu vosaltres amb el que sabeu de HTML ja que si feu servir URLs relatives en cada document aquestes URL podràn variar. [No us hi "mateu" amb això encara ja que amb Dreamweaver això serà molt més fàcil de fer ja que també permet crear "hotspots" de mapes d'imatge. Simplement que sapigueu que a ImageReady i lo que sabeu d'HTML ho podeu fer].
    
1. Un cop hem posat totes les URL a totes les hotspots ens dispoem a guardar optimizada como per obtenir tres imatges amb mapes d'imatge, o sigui amb Hotspots. Però per poder fer això abans hem de fer cada cop el següent:
   1. Intercanviar l'ordre de les capes pastibarra1, pastibarra2, pastibarra3
      per a obtenir colors diferents per cada categoria principal. I també deixarem cada cop un ull per carpeta a la finestra capas a fí que només es vegin els textos de les subseccions.
      
   
   
   
   
   [Cliqueu aquí per veure l'animació]
   
   
   2. I a la finestra Contenido de Web cada cop posarem els ulls de les hotspots que volguem que es vegin en funció de la categoria principal que estem.


15. Al final fent Guardar Optimizado como hem hagut d'exportar tres documents per les categories principals almenys que els haurem anomenat respectivament: cursos.html, sortides.html i botiga.html

PHOTOSHOP _ MODES DE FUSSIÓ DE CAPES

Els modes de fusió no són opcions exclusives de les capes, també apareixen aquestes opcions amb eines com el bot de pintura, el pincell, etc... Tot i així ho explicarem amb les capes.

1. Normal: Aquest és el mode per defecte. No és un mètode de fusió pròpiament dit. Simplement deixa veure el que hi ha a capes inferiors a través dels píxels transparents o semitransparents de la capa que té aquest mode en cas de tenir-ne transparents, és clar..
2. Disoldre: Tampoc no és un mètode de fusió. Sustitueix els colors superiors pels inferiors però de forma aleatòria.
3. Multiplicar: (Sempre obtenim imatges més fosques)Tots els colors tenen una correlació amb la escala de grisos. Els televisors en blanc i negre feien aquesta correlació. Un groc en una tele en blanc i negre corresponia a un tó clar i un vermell a un gris fosc. El mode multiplicar generarà una imatge de colors mesclats, que serà més o menys fosca, en funció de la correlació dels píxels de la capa activa amb la escala de grisos. D'aquesta forma, quan més s'apropi al negre més fosc serà el resultat, i quan s'allunyi, menys s'enfosquirà. De fet si els píxels són blancs no es produirà cap modificació, mentre que si són blancs no es produirà cap modificació. Els píxels inferiors també influeixen a la imatge. Si aquests són foscos o negres, el color dels superiors quasi no serà apreciable.
   
4. Trama: (Sempre obtenim imatges més clares) L'invers de multiplicar. Si el píxel superior és clar(en la seva correlació amb la escala de grisos), el resultat serà una imatge aclarada i si el píxel és molt fosc no farà res. Amb trama el color dels píxels superiors no serà dominant en aquelles zones on els inferiors siguin més clars.
   
5. Superposar: (=multiplicar+trama). Aquest mode de fusió utilitza les funcions de multiplicar i de trama segons els colors inferiors. Respecta les llums i les ombres de la imatge, ja que, si el color inferior és molt fosc, els superiors afectaràn poc o res als inferiors. I si és clar igualment. Aquest mode és ideal per donar color a imatges en grisos, o per a que la capa actui com un vel parcialment transparent.
   
6. Llum suau: La opció llum suau genera una fusió de píxels en la que els superiors enfosqueixen o aclareixen la imatge segons la quantitat de color en la seva correlació amb la escala de grisos. Els píxels de menys d'un 50% de gris aclariran la imatge i els més foscos la enfosquiràn.
   
7. Llum intensa: Funcionament similar al de llum suau; els píxels inferiors s'aclareixen o enfosqueixen en funció del grau de foscor dels superiors. A la llum intensa, el tó d'aquests píxels superiors prevaleix de forma molt més acusada sobre els inferiors, de fet, si son blancs o negres generaràn blancs o negres purs.
   
8. Llum linial: Subexposa o sobreexposa els colors augmentant o disminuint la brillantor, depenent del color de fusió. Si el color de fusió(origen de la llum) és més clar que un 50% de gris, la imatge s'aclarirà augmentant la brillantor. Si eel color de fusió és més fosc que un 50% de gris, la imatge s'enfosquirà disminuint la brillantor.
   
9. Sobreexposar:Amb el mode sobreexponenr, els píxels inferiors s'aclareixen en general però especialment si els superiors són clars en la seva correspondència en l'escala de grisos. D'aquest mode, el negre no modifica la imatge, mentre el blanc genera blancs purs.
   
10. Subexpsar: La opció Subexposar produeix l'efecte invers a sobreexposar. El resultat serà: una imatge més fosca quant més ho sigui el píxel superior; i menys quant més clar, de manera que el blanc no produeix canvis. A l'igual que a sobreexposar, si els píxels inferiors són negres o blancs els superiors no afectaràn a la imatge.
    
11. Enfosquir: El mode enfosquir és una altra forma d'aconseguir que les imatges mostrin les zones més fosques; prevaleixeràn els pixels més foscos de tots. Si el píxel superior és més fosc que l'inferior, tindrà predomini a la imatge i viceversa. En ocasions, superiors e inferiors tindràn un valor de brillantor similar, per la qual cosa el resultat serà una mescla d'ambdos.
    
12. Aclarir: Segueix una dinàmica completament inversa a la d'enfosquir, aconseguint l'efecte contrari.
    
13. Diferència: El color dels píxels inferiors serà modificat en quant a la seva composició ja que se'ls sustraeix el superior. Si els píxels inix cap canvi; si són blancs, els colors dels píxels superiors quedaràn invertits.
    
14. Exclussió: Similar a diferència però amb menys saturació i contrast.
    
15. To(que en photoshop vól dir Matiç): Fa prevalèixer els matiços dels píxels superiors deixant els valors de brillantor i de saturació als inferiors. Així, si el color dels inferiors és molt lluminós o molt saturat, el tó dels superiors no afectarà a la imatge. Tampoc si és blanc i negre.
    
16. Saturació: En aquest cas, predominarà la saturació del color dels píxels superiors, és a dir que en realitat provoca una saturació o apropament cap al gris dels colors inferiors segons com siguin els superiors. Amb aquest mode, si el color superior és molt saturat, ll'aspecte serà el d'una imatge molt saturada; si és poc saturat, la imatge també ho serà. Ja que només té en compte la saturació dels píxels superiors, els inferiors conservaràn les seves tonalitats i brillantors.
    
    Si els píxels superiors són blancs o negres, els inferiors patiràn una conversió al gris. Si els inferiors són blancs o negres, la imatge no es modificarà.
    
17. Color: Les components del color dels píxels superiors predominaràn sobre els inferiors, dels que només es tindrà en compte la brillantor.
    
18. Lluminositat: Els píxels inferiors seràn més clars o més foscos, preservant el seu matiç i saturació, i depenent del grau de lluminositat de les superiors.
    
19. Subexposició lineal: Ilumina el color base per reflexar el color de fusió augmentant la brillantor. Fusionar amb negre no produeix canvis.
    
20. Llum focal: Sustitueix el color, depenent del color de fusió. Si el color de fusió és més clar que un 50% de gris, els píxels més foscos se sustituiràn. Si el color de fusió és més fosc que un 50% de gris, seràn els píxels més clars els sustituits.
    
21. Llum forta: Multiplica o trama els colors, depenent del color de fusió. Si el color de fusió és més clar que un 50% de gris, la imatge s'aclarirà com si es tramés. Si el color de fusió és més fosc que un 50% de gris, la imatge s'enfosquirà com si es multipliquès. Això resulta útil per afegir ombres a una imatge.
    
22. Mescla definida: Aques mode de fusió acoloreix, amb el color frontal, els píxels amb més del 50% de gris. Els inferiors al 50% no varien.
    
23. Sobreexposició lineal: Busca la informació de color de cada canal e ilumina el color base per reflexar el color de fusió augmentant la brillantor. Fusionar amb negre no produeix canvis.
    
    

Significat cultural dels colors

Negre:

Nit mort patiment clasico, elegante sofisticat dol , futur negatiu, mal trist apagat tetric rebeldia no pagar impostosbuidor


Blanc

Pureza Virginitat pulcritud honestidad buidor divinitat fred necedad dia llum bondad sumiso

Vermell

Perill Sexe Sang Passio Erotismo Comunismo competitivitat agresivitat vida foc calor guerra emergencia cridaner intensitat accio violencia excitacio vergonya

Blau celest

netedat cel espiritualitat infantesa llibertat fred transparencia equilibri tranquilitat aigua


Blau fosc

Mar fred dretes noblesa monarquia llinatge masculinitat

Verd:

Esperanza natura, ecologismo, exercit diners

Rosa

Flor Femeni, infantil gust maduixa homosexualitat escandalos hortera


Groc

Or diners Hortera alegria mala sort luxe calor sol esportivitat agresivitat perill malatia veri foc llum precaucio cridaner orient

Taronja

Alegria força gust de toronja energia budismo sol naixent y posta de sol

Marro

Amistat Tardor fusta terra bruticia

Purpura

Realeza Esglessia dol Feminismo

Tècniques Visuals

Conèixer com fer servir les eines d'autoedició per fer pàgines web en particular i disseny visual en general està bé per fer una composició visual, per transmetre un missatge visual. És l'equivalent a saber agafar el llapis si ets dibuixant o el pincell si ets pintor.

Però no només saber la tècnica de les eines és suficient. Un dissenyador visual també disposa, entre d'altres recursos, d'un paquet de tècniques visuals(recursos dels missatges visuals), les quals de ben segur identificareu en els cartells del metro, autobusos, revistes, diaris, televisió, etc... que comentarem tot seguit[Aquestes tècniques serien similars als recursos que tenen els guionistes de telesèries per provocar efectes en el públic. Com quan et fan estar predisposat per sentir simpatia per un personatge i després resulta que és el dolent. Així es provoca en l'espectador un daltabaix més fort].

Ja us he presentat anteriorment els conceptes nivellació-agudament. Aquests són uns conceptes oposats entre sí en els quals, la tendència de nivellació és la que porta cap a l'equilibri i la tendència cap a l'agudament és la contrària, sent aquesta darrera la més provocativa, la que ens treu de la regularitat de la homogeneitat, la que segons com es faci servir, cridarà més
l'atenció, posarà un accent o produrià un efecte convenient pel context de l'anunci, cartell o missatge .

Us presento a continuació aquestes tècniques visuals expressades per parelles d'oposats que a partir d'ara us canviaràn la vida:

1. Contrast-armonia:
   El contrast és una manera de valorar la diferència entre les coses. Quant més contrasten dues coses entre sí vól dir que es distingeixen més l'una de l'altra. I quan més s'integren entre sí vól dir que s'armonitzen, fins al punt que poden fer-se indistingibles entre sí. [A hores d'ara ja heu vist a photoshop en què consistien els ajustos de brillantor i contrast, corves i nivells. Heu vist també, amb l'ajust nivells que podiem fer que la part més clara de l'histograma la podiem convertir en el color blanc i la més fosca en negre. És a dir que podiem accentuar la separació de tons a una fotografia].
   
   A l'estat visual més elemental la llum és tonal, i oscil·la des de la brillantor fins a la foscor passant per una sèrie de gradacions, de grisos intermitjos. En el procés de visió depenem de la observació de la "yuxtaposición" d'aquestes gradacions de tó per veure els objectes. Dit en un altre idioma, que nosaltres distingim les formes dels objectes més foscos si els posem davant d'altres de més clar que contrastin[no apreciariem una samarreta negra tant bé si la penjessim davant d'un fons negre. O sigui que la confondriem. En aquest cas la samarreta negra s'integraria armònicament amb el fons. Si volem que es vegi bé que es tracta d'una samarreta caldria que tant fons com objecte fossin de tons lo més diferents possible; un molt clar i l'altra molt fosc].
   
   Si el grau de contrast, que és el grau de distinció de diferents objectes, ens permet definir més clarament les formes podrem identificar millor els objectes i els seus patterns(patrons), permetent apreciar si estàn nivellats o no, si estàn en equilibri, etc...
   Podriem considerar diferents tipus de contrasts:
   
   
   
   1. Contrast de tons.
   
   
   2. Contrast de colors(matiços contra els seus complementaris, els que es troben al costat contrari del cercle cromàtic).
   
   
   3. Contrast de contorns(formas angulares contra formas suaves).
   
   
   4. Contrast d'escala(formes petites contra formes grans).
   
   
   5. Contrast d'orientació(aliniament de formes en direccions diferents, sent les direccions perpendiculars la que més contrasten).
   
   
   
   



2. Equilibri-Inestabilitat:
   Després del contrast aquesta dualitat és la més important. Es basa a la intensa necessitat de l'ésser humà per l'equilibri. És una estratègia de disseny en la que hi ha un centre de gravetat entre dos pesos. El desequilibri dona lloc a formulacions molt provocadores e inquietants.
   
   



3. Simetria-Asimetria.
   Lligant amb lo anterior es pot arribar tant de forma simètrica com asimètrica a l'equilibri. La simetria és l'equilibri axial. Pot resultar estàtic e inclús avorrit. [ L'equilibri per asimetria es pot aconseguir variant elements i posicions de manera que s'equilibrin els pesos ]. Complicat però interessant i ric en la seva varietat. Veure l'article de comunicació visual amb l'exemple de les pomes.
   
   



4. Regularitat-Irregularitat.
   La irregularitat és equivalent a lo inesperat e insòlit sense ajustar-se a un plà desxifrable. No obeeix aparentment a un patró. La regularitat consisteix en afavorir la uniformitat d'elements seguint un mètode respecte al qual no es permeten desviacions.
   
   


5. Simplicitat-Complexitat.
   L'ordre contribueix considerablement a la síntesi visual de la simplicitat, técnica visual que imposa el caràcter directe i simple de la forma elemental, lliure de complicacions o el·laboracions secundàries. La formulació oposada és la complexitat que implica una complicació visual degut a la presència de numeroses unitats i forces elementals, que donen lloc a un difícil procés d'organització del significat.
   


6. Unitat-Fragmentació.
   Les tècniques d'unitat i fragmentació són semblants a les de la simplicitat-complexitat i entranyen estratègies de disseny semblants. La unitat és un equilibri adequat d'elements diversos en una totalitat que és percepctible visualment. La col·lecció de numeroses unitats s'ha d'ensamblar tant perfectament, que es percebi i consideri com un objecte únic. La fragmentació és la descomposició dels elements i unitats d'un disseny en peces separades que es relacionen entre sí, però conserven el seu caràcter individual.
   
   
7. Economia-Profusió.
   La presència d'unitats mínimes de medis visuals és típica de la tècnica de la economia, que contrasta amb la oposada de la profussió. En molts aspectes. La economia és una ordenació visual frugal en la utilització d'elements.
   
   
8. Reticència-Exageració.
   La reticència i la exageració són les contrapartides intel·lectuals del dipol economia-profussió i serveixen per fins similars tot i que en contextes diferents. La reticència és una aproximació de gran comediment que persegueix una resposta màxima de l'espectador davant elements mínims. La exageració, per ser visualment efectiva, ha de recòrrer a la extravagància eixamplant la seva expressió molt més enllà de la veritat per intensificar i amplificar.
   
   



9. Predictabilitat-Espontaneitat.
   La predictivilitat, com tècnica visual, suggereix un ordre o plà molt convencional. Sigui a través de la experiència, de la observació o de la raó, hem de preveure a priori el que erà tot el missatge visual, basant-nos en el mínim d'informació. La espontaneitat, en canvi, es caracteritza per una falta aparent de plan. És una tècnica de gran càrrega emotiva, impulsiva i desbordant.
   
10. Activitat-Passivitat.
    L'activitat com tècnica visual ha de reflexar el moviment mitjançant la representació o suggestió. La postura energètica i viva d'una tècnica visual activa resulta profundament modificada a la força inmòvil de la tècnica de representació estàtica que produeix, mitjançant un equilibri absolut.
    
11. Sutilessa-Audàcia:
    La sutilessa és la tècnica que escolliriem per establir una distinció afinada, fugint de tota obvietat o energia de propòsits. Indica una aproximació visual de gran delicadessa i refinament i s'ha d'utilitzar de forma molt intel·ligent per aconseguir solucions enginyoses. La audàcia és, per la seva natura, una tècnica visual òbvia. El dissenyador la utilitza per aconseguir una visibilitat òptima.
    
12. Neutralitat-Accent:
    La neutralitat pot ser molt eficaç per vèncer la resistència o beligerància de l'espectador. L'atmosfera de neutralitat és perturbada en un punt per l'accent, que consisteix en reforçar intensament una sola cosa contra un fons uniforme.
    
13. Transparència-Opacitat:
    
14. Coherència-Variació.
    La coherència és la tècnica d'expressar la compatibilitat visual desenvolupant una composició dominada per una aproximació temàtica uniforme i consonant. Si la estratègia del missatge exigeix canvis i el·laboracions, la tècnica de la variació permet la diversitat i la varietat. Però la variació reflexa en la composició visual l'ús d'aquest mateix fenòmen en la composició visual, en el sentit que les mutacions estàn controlades per un tema dominant.
    
15. Realisme-Distorsió.
    
    
16. Plana-Profunda.
    Aquestes dues tècniques visuals es regeixen fonamentalment per l'ús de la perspectiva i es veuen reforçades per la reproducció fidel de informació ambiental, mitjançant la imitació dels efectes de la llum i ombres pròpies del "claroscuro" i/o també l'anomenat "esfumato" o difuminat que es va inventar al renaixement per simbolitzar la llunyania amb una mena de boirina.
    
    
17. Singularitat-Iuxtaposició.
    La singularitat consisteix en centrar la composició en un tema aïllat e independent, que no conta amb el recolçament de cap altre estímul visual. El principal efecte d'aquesta tècnica és la transmissió d'un ènfasi específic. La iuxtaposició expressa la interacció d'estímuls visuals situant al menys dos claus juntes i activant la comparació relacional. [Com quan a la tele posen un quadret mostrant les reaccions d'una persona mentre que a la resta de la pantalla es veu per exemple una peli que ha fet].
    
18. Secuencialitat-Aleatorietat.
    Una disposició seqüencial en el disseny està basada en la resposta compositiva a un plan de presentació que es disposa en un ordre lògic. La ordenació pot respondre a una fórmula, però per lo general entranya una sèrie de coses disposades segons un esquema rítmic. La tècnica aleatòria dona la impressió d'una falta de planificació, d'una desorganització planificada o d'una presentació accidental de la informació visual.
    
19. Agudessa-Difusivitat.
    L'agudessa està intimament lligada a la claritat de l'estat físic i a la caredat d'expressió nítida i fàcil d'interpretar. La difusitat és tova, no aspira tant a la precisió, però crea més ambient, més sentiment i més calor.
    
20. Continuitat-Episodicitat.
    La continuitat es defineix per una sèrie de connexions visual ininterrumpudes, que resulten particularment importants en qualsevol declaració visual unificada. Al cinema, l'arquitectura i el grafisme, la continuitat no tan sols és el conjunt de pasos ininterrumputs que porten d'un punt a un altre, sino també la força cohesiva que manté unida una composició d'elements diversos. Les tècniques episòdiques de la expressió visual expressen la desconnexió o, si més no, conexions molt febles. És una tècnica que reforça el caràcter individual de les parts constitutives d'un tot, sense abandonar completament el significat global.
    

Fonaments de la Comunicació Visual

Els estudis lingüistics de Noam Chomsky sembla que indiquen que la estructura del llenguatge és biològicament innata. [Per això aprenen a parlar relativament ràpid els nens? Bé, com a mínim fan veure que t'entenen- ;)] L'alfabetitat verbal, s'ha d'aprendre. S'han d'aprendre les regles d'escriptura, la sintàxi de les paraules, la semàntica, la gramàtica,... Però com aprenem alfabetitat visual ?

Resulta que l'alfabetitat visual no gaudeix d'unes definicions de sintaxi ben estipulades, ben reglamentades, ben definides tal i com passa amb la alfabetitat verbal. A la comunicació visual no hi ha regles tant definides com passa als llenguatges verbals i escrits.

Per la qual cosa la comunicació visual s'ha de recolçar en dos potes importants:

1. EL CONTEXT CULTURAL
   Tot el conjunt de senyals, símbols, icones, pictogrames,... Significat dels colors a cada cultura(diferents blancs als esquimals, diferent iconografia, diferents verds als amazonencs?, ... ).
2. LA PERCEPCIÓ VISUAL
   Que té aspectes biològics, fisiològics i psicològics a tenir en compte.

1. EL CONTEXT CULTURAL

El context cultural fa referència a tot el conjunt de valors, tradicions i simbologia d'una societat adquirits amb el pas del temps. És per això que a les escoles de disseny ensenyen història de l'art. Quan s'analitza un quadre s'intenta desxifrar les claus i els significats dels elements que componen el quadre. Per exemple quan en un quadre apareix un triangle amb un vertex cap amunt això significa "trinitat" que és un símbol religiós a la cultura cristiana. Bé, parlant de claus, penseu en el Codi da Vinci. La novel·la, a part de la temàtica i l'argument posa de manifest com a mínim que els artistes no fan les coses per que sí. Les fan amb un significat. L'art pictòric porta molt de temps transmetent i comunicant idees, sentiments i conceptes al públic. El que passa és que aquest art pictòric comunica conceptes en la clau dels autors. Conèixer als pintors és el que et permet entendre lo que vól comunicar.

En disseny el significat de les coses tracta de ser lo més universal possible ja que obeeix a fins comercials o d'usabilitat en els quals l'ambigüitat és més un entrebanc que una altra cosa.

El "target" mig, o sigui el públic al que aniràn destinades les nostres pàgines web, pel qual dissenyarem viu en un context similar al nostre. I segurament haurà estat influït per la tv, lapublicitat en premsa, televisió i cinema, etc... És un públic que coneix i fa servir simbologies quotidianes com les senyals de trànsit, els pictogrames, els logotipus, les icones, els colors dels productes de supermercat, etc... Aquest és el contexte cultural pel qual ens movem.

Els símbols són unes unitats d'informació visual que tenen un significat. Hi ha una classificació de símbols com:

1. Senyals. Els quals s'han establert per convenció.
2. Icones. Els quals tenen una relació amb l'objecte o concepte representat.
3. Grafies i números. Definits pel llenguatge parlat i escrit.
4. Pictogrames. Pot combinar a tots els anteriors.

El context on estiguin ubicats aquests símbols pot afectar al significat d'aquests símbols.

---

[Wikyexplicacions:]

• símbol
• icona
• senyal
  
• Indicis. Pel fum sabem que hi ha foc.
  
• pictograma

Exercicis suggerits:

1. Busqueu tipus de senyals.
2. Busqueu símbols que signifiquin el mateix.
3. Significat cultural dels colors:
1. Vermell.
2. Verd.
3. Blau marí.
4. Blau celest.
5. Groc.
6. Rosa.
7. Negre.
8. Blanc.

---

2. LA PERCEPCIÓ VISUAL

L'altra pota en la que es basa la comunicació visual és la percepció visual, la qual fa referència a la nostra fisiologia i la nostra evolució animal, com a individus i com a espècie.

Quan som petits primer aprenem i comencem a relacionar-nos amb el medi ambient que ens envolta mitjançant el tacte però la visió va guanyant terreny a mesura que es va desenvolupant el cervell. I ho fa en detriment del tacte i els altres sentits.

En els animals, entre els quals ja sabem que estem inclosos, segons la espècie pot predominar més un sentit o un altre. Els gosos tenen l'olfacte molt desenvolupat i la visió no tant. Les formigues estàn cegues però tenen un sentit de l'olfacte que els permet seguir el rastre de l'autopista. Les àligues tenen uns ulls privilegiats amb una densitat de bastons als seus ulls que supera en molt la definició als nostres ulls. Semblaria que els caçadors tenen desenvolupada una visió estereoscòpica o binocular per poder calcular la distància a la presa. També una bona visió pot servir per vigilar si venen els perills, com en el cas dels suricatas. És evident que el sentit de la visió és un sentit molt important en la supervivència tant si es vól caçar com si es vól evitar ser caçat.

Els suricates es van rellevant per vigilar si venen els perills. Fins i tot s'arriben a posar a dos potes, com nosaltres per guanyar camp de visió. Mai no se sap si pot venir alguna bèstia terrestre.

Els éssers humans som primats superiors i compartim amb l'animal següent, un lemur de la illa de Madagascar, el fet de ser primats, omnívors, dit polçe i una visió binocular que serveix tant per caçar(insectes), recol·lectar, manipular amb les mans.

Els éssers avantpassats dels humans dels que procedim tenien una vida arborícola comú al d'aquest lemur, que és parent nostre com a primat i va continuar així fins que, sembla ser, un canvi climàtic provocat per una catàstrofe natural com algun supervolcà a l'Àfrica oriental, els arbres van menguar amb la qual cosa els avantpassats dels éssers humans van haver d'aventurar-se a camp obert. Van necessitar desenvolupar entre d'altres coses la bipèdia per tenir un punt de visió més elevat i així vigilar si hi havia perills.

Però tot i així el sentit de la visió binocular als arbres era necessari per calcular les distàncies a les branques per no caure i sobreviure. De no haver incorporat aquest sentit de la visió a la evolució no haurien pogut sobreviure i no podriem ara estar fent un curs de disseny de pàgines web.

---

Però a què anomenem visió? (Wiki-explicació).
El sistema de visió és un sistema de percepció del medi que ens envolta i és capaç de captar variacions en la llum(tonals, de matiç, saturació, enfoc,...). No nomes percebem amb els ulls, el cervell interpreta les senyals que rep dels ulls i li dona un sentit al que veu.

En una conversa amb una biòloga marina especialitzada en ulls de peixos li vaig demanar si es podria saber, a partir de la òptica dels ulls d'un peix com veu. La conversa, com podeu imaginar, va conduir cap al cervell. La visió no es pot explicar només en termes d'ulls, cal del component analític que és el cervell. Un ull és com una webcam, un perifèric del cervell.

L'acte de veure implica una resposta a la llum. Això vól dir que l'element més important i necessari de la experiència visual és de caràcter tonal. La resta dels elements visuals, més endavant enumerats i comentats, se'ns revelen mitjançant la llum, però resulten secundaris respecte a l'element tó, que és de fet el grau d'absència o presència de llum.

Els astigmàtics ens adonem també de la interpretació que fa el nostre cervell de la realitat quan canviem d'ulleres.

Doncs resulta que, com a animals, tenim en el nostre cervell tota una sèrie de "programes i subrutines" que analitzen la realitat buscant referències verticals, patrons, etc... Aquests programes que ens ajuden a sobreviure se sap com funcionen i això ens pot permetre composar els missatges visuals en funció d'això.

Si veiem un animal amb colors molt vius com els d'aquesta serp els nostres instints ens avisaràn que hi ha perill. La natura ha desenvolupat un sistema de símbols amb significats com "perill", "aquí hi ha menjar", "vull reproduir-me amb tu", etc...

En el nostre cervell encara tenim una part animal que sap reconèixer aquests símbols encara. Fins i tot a la nostra vida humana quotidiana els fem servir sense adonar-nos(El maquillatge de les dones, per exemple, és un reclam sexual. Els mascles d'algunes espècies, com la nostra, es veuen excitats pel color rosa que és un reclam sexual. Així mateix el blau excita a les femelles de moltes espècies animals. No és només un tòpic cultural, com podria semblar, sinó també un fet biològic conegut).

En el desenvolupament de missatges visuals haurem de tenir en compte aquests automatismes naturals i altres com:

Equilibri

Com a "micos" bípeds evolucionats que som la verticalitat és una necessitat. És per això que sempre busquem les referències vertical-horitzontal. I això ho fem sense adonar-nos, veient la tele tombats, quan ens aixequem del llit, quan caminem. Si no tinguèssim aquest automatisme ens aniriem caient continuament o ens hauriem caigut dels arbres. L'ésser humà necessita tenir els seus dos peus tocant a terra. Necessita equilibri que és el seu estat més reposat.

L'equilibri, és doncs, la referència visual més forta i firme de l'home, la seva base conscient per la formulació de judicis visual. La sensació intuitiva de equilibri és inherent a les percepcions de l'home i no hi ha un mètode de càlcul tan ràpid, exacte i automàtic comparable. I és el que fa que automàticament contrapesem per recuperar la verticalitat.

A l'expressió i interpretació visual aquest procés d'estabilització imposa a totes les coses vistes i planejades un "eix" vertical i una base horitzontal. Entre els dos s'estableixen els factors estructurals que mesuren l'equilibri.

Inclús en un cercle, que la veiem com una figura inestable, també li tendim a incorporar aquest
Necessitem estabilitzar o buscar-li "el sentit" a les coses per entendre-les, i per nosaltres aquest sentit és el d'aquests eixos.

Tensió
Quan trobem alguna cosa que s'allunya del sentit de l'equilibri ens provoca una tensió.

Entre les figures següents l'ull té una tendència(tensió) cap a la figura de la dreta per que s'allunya dels patrons programats d'equilibri de les referències dels eixos vertical-horitzontal.

L'equilibri és el repós i la tensió és l'estress.
Nivell i "agudament"
Col·locar el punt al centre geomètric d'un rectangle se'n diu nivellament i no provoca sorpresa, és totalment armoniosa, li veiem un sentit ja que es troba situat als eixos de simetria que li donen sentit al rectange.
En canvi si col·loquem el punt a la cantonada superior-dreta lluny del centre provoca un "agudament". Podem acusar una falta d'equilibri clara. Ni tan sols s'ajusta als eixos diagonals.

A la figura següent el punt no està ni nivellat ni agudat. En aquest cas l'ambigüitat visual queda enfosquida, no es veuen clares les intencions i això provoca una confussió. No es recomana fer servir aquest mitjà ja que provoca frustració. Les formes visuals no haurien de confondre tant, haurien d'armonitzar o contrastar, atreure o repel·lir, relacionar o xocar. Si no no queda clar el missatge.

Preferència per l'angle inferior-esquerre.
L'ull humà primer fa un escaneig seguint els eixos vertical-horitzontal i després respón a l'impuls perceptiu inferior esquerre.
Aquesta preferència sequndària no és tant fàcil d'explicar com la primària. No se sap el per què d'aquesta preferència però se sap que passa. Per l'ull lo que està en el costat inferior esquerra està més en repós que si s'allunya d'aquesta posició(=té menys tensió que si s'allunya).

Això fa que les coses que estàn a l'esquerra "pesen" menys, o produeixen menys tensió, que si estàn a la dreta, i les coses que es troben a la part inferior també pesen menys que les de la part superior.

En aquest exemple es veu com equilibrar els pesos en una composició tenint en compte la posició.

La complexitat, la inestabilitat i la irregularitat incrementen la tensió visual i, en conseqüènciea, atreuen la mirada.

Positiu-Negatiu

Si només veiem el quadrat en blanc aquest és l'objecte actiu. Però si posem un punt a dins ho serà el punt relegant al quadrat a un segon plà, es converteix en fons. No importa que el quadrat sigui negre. El que nosaltres veiem com a part activa li diem element positiu i el que veiem como a part pasiva és l'element negatiu.

A vegades el nostre sistema perceptiu ens pot enganyar i veure com a part positiva el que en principi no existeix.

---

Exercici: Mireu-vos el link de la pàgina que ha trobat el Cristian. Mireu les lleis de la Gestalt. Llei de Prägnanz, llei de tancamanet, llei d'atracció i agrupament

---

Buscar


Els psicòlegs que van desenvolupar la Gestalt van arribar a tota una sèrie de conclussions de la nostra manera de "veure el món".

La teoria de la Gestalt (Wiki-explicació)
ha estudiat en els éssers humans com percebem. I ha extret una sèrie de lleis que cal conèixer.

---

Elements de la comunicació visual.

• El punt. Unitat simple, irreductible mínima, de comunicació visual. Marcador de espai. Molta força visual d'atracció sobre l'ull. Dos punts serveixen per mesurar distàncies. Quan veiem multitud de punts es connecten entre sí. En gran quantitat i organitzats = simulació de tó o de color(trama) o bé si estàn alineats poden definir una corva.
• La línia. Punts molt pròxims. Útil per esborranys. Té moviment. Fluida, precisa, flexible, delimita, defineix dirècció. Mitjà per representació virtual del que encara no existeix. La línia pot adoptar formes diferents per expressar tarannàs molt diferents: delicada, audaç, ondulada, ...
• Contorn. =Unió de línies "articulades". Tres contorns bàsics: quadrat, cercle i triangle equilàter. A cadascún se li atribueix gran quantitat de significats en funció de la associació, la convenció i a través de les pròpies percepcions psicològiques i fisiològiques. Quadrat. Significats de torpeça, honestitat, rectitud,... Triangle. Acció, conflicte i tensió. Cercle. Infinitud, calidessa i protecció. A partir d'aquests contorns bàsics es poden construir la resta de formes físiques de la natura.
• Dirècció. Els contorns bàsics expressen tres direccions visuals bàsiques i significatives: el quadrat la horitzontal i vertical; el triangle la diagonal; el cercle la corva. Referencia vertical i horizontal: constitueix la referencia primària de l'home donant estabilitat tant a l'home com al que construeix. Referència diagonal. Inestable. Provocadora. Amenaçant. Subversiva. Forces direccionals corves tenen significats associats a enmarcats, repetició i la calor.
• Tó. Intensitat de claror o foscor. La llum no és uniforme, es reflexa sobre objectes brillants i cau sobre objectes que ja tenien una claredat-foscor relatives. Les variacions de llum, o sigui el tó, ens ajuden a distingir la complicada informació visual de l'entorn. =Veiem lo clar quan se superposa a lo fosc i viceversa.(CONTRAST). Entre la foscor i la llum existeixen a la natura múltiples gradacions.=comparació entre tons pot fer que un to es percebi diferent depenent de amb que el comparis. La perspectiva només amb la línia no és suficient per simular 3D. Un fons tonal o el reflex d'una llum reforça l'aparença de realitat i el tó és la única forma de representar perspectiva a formes esfèriques. La claredat-foscor és quasi tan important per la nostra percepció de l'entorn com les referències horitzontal-vertical. Ens permet apreciar la profunditat, el moviment sobtat, la distància i altres referències ambientals que ens ajuden a la supervivència. El valor tonal és una altra manera de descriure la llum.
• COLOR. Part simple i més emotiva del procés visual. Afinitat més intensa amb les emocions. No és imprescindible per la creació del missatge visual. Tot i així enriqueix molt el missatge gràcies a que el color està carregat d'informació i és una de les experiències visuals més penetrants que tenim en comú. Compartim els significats associats dels colors dels arbres, herbes, cel, terra,... és a dir de les referències del món real i també els significats simbòlics (referències culturals comunes) convencionals i desvinculats de l'entorn. El color ens ofereix un enorme vocabulari de gran utilitat en l'alfabetització visual. (Vermell=perill, amor, calidessa, vida,... sang,...). Existeixen moltes teories del color i no existeix un sistema unificat i definitiu de les relacions mutues dels colors. DIMENSIONS DEL COLOR:H,S,B... ; (67). Posimagen=... Complementaris es neutralitzen.
• TEXTURA. És comú al tacte però esta perdent-se aquest en benefici de la vista.
• ESCALA. Compara la mida relativa entre les formes. No pot existir lo gran sense lo petit. Es fa servir als mapes. La percepció de la escala d'una mateixa cosa pot variar segons l'espai de representació o l'objecte amb que la comparem. Proporcions famoses: La mida de l'home(Leonardo da Vinci); Secció aurea.
• Dimensión. La representació volumètrica en formats bidimensionales depen de la ilusió. Perspectiva.
• Moviment. Cine, tv, móbils de Calder. També es pot estar implícit amb imatges estàtiques...