APUNTS DISSENY WEB

APUNTS DISSENY WEB:Blog de "batalla" diari per als meus alumnes de disseny de pàgines web. "Quien la sigue la consigue"

dimecres, de gener 25, 2006

Exercici de construcció d'una barra de navegació en Flash

Farem una barra de navegació interactiva en Flash i ho col·locarem a una pàgina web HTML.

Intervenen les comandes d'Action Script :
  • de control de pel·lícula: play(); stop(); gotoAndPlay();......
  • afegirem la comanda getURL.

Com fer una marca d'aigüa a una foto




Per posar una marca d'aigua a una foto ho podem fer de la següent manera:

  1. Col·loquem el logo en una capa per sobre de la imatge i li donem un estil de capa bisel y relieve.

  2. A la capa amb el logo, o marca d'aigüa, li treiem el relleno.

Es veu que el paràmetre relleno de la paleta capas afecta a la opacitat de la imatge però no pas a la opacitat dels estils o efectes de capa.

dimarts, de gener 24, 2006

Eines que fan servir pincells

Algunes eines fan servir la forma i les dinàmiques del pincell i habilitats de pincell. Són les següents:

  1. PINCELL
  2. BORRADOR
  3. PINCELL HISTÒRIC
  4. PINCELL ARTÍSTIC
  5. TAMPÓ DE CLONACIÓ
  6. TAMPÓ DE MOTIU
  7. PINCELL CORRECTOR
  8. ENFOCAR
  9. DESENFOCAR
  10. ACLARIR
  11. ENFOSQUIR
  12. DIT

El color en Photoshop

Com es fa servir l'eina color en Photohsop?



Us heu de fixar en aquesta part de la barra d'eines. Veieu aquests quadrets? Al color del quadre de davant se li diu color frontal i al de darrera color de fons. La doble fletxa serveix per intercanviar-los.



Els quadradets de blanc i negre serveixen per posar com a colors frontals i de fons el blanc i el negre.



Si donem un click sobre el quadre de color frontal o de color de fons ens apareixerà la següent finestra:



Si pitxem sobre la casella sólo colores web veureu que el continu de colors deixa de ser tant continu i només es mostren els colors de seguretat.



En aquesta finestra que ens surt podem veure com coexisteixen diferents sistemes de colors. Fins i tot ens apareix a baix de tot un camp de text on hi ha el color expressat en format hexadecimal. Ens anirà molt bé per fer pàgines web. La resta de camps per especificar els colors són els següents:

  • RGB: amb valors dels canals de llum R,G,B en vermell, verd i blau.
  • CMYK: amb valors dels colors matèria o pigment. Aquest serveix per treballs en arts gràfiques.
  • HSB: Amb les components del color. Aquest sistema de colors també el teniem en Flash, amb un petit canvi de noms.
  • Lab:

Per més informació aneu a l'auda del photoshop i busqueu: Model HSB, RGB i CMYK

EINES DE PHOTOSHOP FETES FINS ARA

EINES DE SEL·LECCIÓ
  1. Sel·lecció quadrada.
  2. Sel·lecció el·líptica.
  3. Sel·lecció filet vertical
  4. Sel·lecció filet horitzontal
  5. Llaç
  6. Llaç poligonal
  7. Llaç magnètic
  8. Eina moure(herramienta mover)
  9. Vareta màgica
  10. Eina Parxe
  11. Llapis corrector
  12. Tampón
  13. Borrador
  14. Bot de pintura
  15. Eina degradat
  16. Eina ploma
  17. Comptagotes

Continuaré...

Exercici del logo sartén vectorial

Importeu un logo vectorial en format AI i fent servir màscares de capa i efectes de capa aconseguiu el logo següent.

Exercici de reparació d'imatge


Amb les eines de sel·lecció i de clonació repareu la imatge envellida(es troba a la carpeta muestras del photoshop)

Exercici de "l'aneuet a dins de l'aigüa"




OBJECTIU: Fent servir els vostres coneixements de sel·lecció i de màscares de capa aconseguiu a partir de les imatges següents ficar l'aneuet a dins de l'aigüa:

FINESTRA "CAPAS" DE PHOTOSHOP, algunes opcions




  • Renombrar "FONDO"
    Quan obriu una imatge amb el photoshop per defecte la posa en una capa anomenada FONDO que esetà bloquejada. Si volguèssim desbloquejar-la com per exemple per canviar-la d'ordre amb altres capes, només ens cal canviar-li el nom. Canvieu-li el nom fent doble click sobre la capa Fondo i veureu com se'n va el candau.
  • Afegir capa( )
  • Eliminar capa ()
  • Duplicar capa
  • Màscara de capa():
    A l'igual que Flash les màscares de capa serveixen per definir allò que volguem que es vegi d'una capa i ocultar la resta. Però a diferència de Flash aquest cop admet graus de transparència. Quan apliquem una màscara a una capa es situa una miniatura al costat de la imatge. Fixeu-vos en la capa 2 de la següent figura. Les zones blanques de la màscara de la capa 2 es representaràn com a opaques mentre que les negres seràn zones transparents de la imatge. I les zones grises serveixen per definir semitransparències.

  • Continuaré....

Opcions de sel·leccions

Existeix a Photoshop la possibilitat de guardar la forma de qualsevol sel·lecció per poder recuperar-la quan ens calgui Carregant la sel·lecció guardada.

GUARDAR SEL·LECCIÓ
  • Sel·lecció > Guardar sel·lecció, posant-li un nom.

CARREGAR SEL·LECCIÓ

  • Sel·lecció > Carregar sel·lecció

INVERTIR SEL·LECCIÓ

  • Sel·lecció > Invertir sel·lecció

dilluns, de gener 23, 2006

MÈTODES DE SEL·LECCIÓ A PHOTOSHOP

La sel·lecció en Photoshop és molt important ja que és l'única manera que tenim per poder fer coses amb els píxels. Fixeu-vos si és important que Photoshop disposa de la seva pròpia línia de temps. Per a això disposem de diversos mètodes i eines:

EINES DE SEL·LECCIÓ.
  1. Sel·lecció quadrada, elíptica, filet vertical i filet horitzontal:


    Amb majúscules les formes de sel·lecció rectangulars i el·líptics surten quadrats i circulars perfectes.



    A dalt, quant teniu aquestes eines sel·leccionades us surten aquests paràmetres contextuals en concret. Passo a definir algunes coses, segons l'ajuda de Photoshop.
    • Calado: Desenfoca los bordes ya que crea un límite de transición entre la selección y los píxeles circundantes. Este desenfoque puede provocar cierta pérdida de detalle en el borde de la selección.
      Puede definir un valor de calado para las herramientas Marco, Lazo, Lazo poligonal o Lazo magnético conforme utiliza la herramienta, o puede añadir calado a una selección existente. Los efectos de calado se hacen aparentes al mover, cortar, copiar o rellenar la selección.
    • Estilo: Ens permet escollir entre:
      • Normal
      • Proporciones fijas
      • Tamaño fijo(on es pot definir en píxels i cm la mida de la sel·lecció quadrada)
    • Boleanos: Equivalent a les opcions que fem amb ALT i MAYS

  2. Llaç, llaç poligonal i llaç magnètic:


    Amb l'ajut de les tecles: ALT i MAYS podem respectivament "restar sel·lecció" i "sumar sel·lecció".

  3. Vareta màgica:
    Sel·lecciona píxels del mateix color que el píxel de la imatge on toqueu. I depenent de la tolèrància que poseu agafarà colors de píxels veïns que s'hi semblin.

  4. Màscara ràpida:
    + pincell + borrador : Us permet preservar la zona que pinteu amb el pincell. Després heu de tornar al mòde estàndard apretant el botó de l'esquerra. [Exercici de l'aneuet].
  5. SEL·LECCiÓ > GAMA DE COLORS:



  6. A partir de traçats:
    Eina ploma i Finestra Traçats.


L'ajuda de photoshop


Si teniu curiositst feu servir l'ajuda de photoshop.

La trobareu al menú Ayuda > Ayuda de Photoshop

Veureu que us dona la possibilitat de fer cerques en aquesta ajuda. Per exemple podrieu buscar la paraula PNG, i us dirà:

PNG
Desarrollado como una alternativa de patente gratuita al formato GIF, el formato de gráficos de red portátiles (PNG) se utiliza para una compresión sin pérdidas y para la visualización de imágenes en Internet. A diferencia del formato GIF, PNG admite imágenes de 24 bits y produce transparencia de fondo sin bordes irregulares; sin embargo, algunos navegadores Web no admiten imágenes PNG. El formato PNG admite imágenes RGB, de color indexado, en escala de grises y de mapa de bits sin canales alfa. PNG mantiene la transparencia en imágenes en escala de grises y RGB.
GIF
El formato de intercambio de gráficos (GIF) es el formato de archivo que se utiliza habitualmente para mostrar gráficos e imágenes de color indexado en documentos HTML a través de la World Wide Web y otros servicios en línea. GIF es un formato comprimido con LZW diseñado para minimizar el tamaño del archivo y el tiempo de transferencia electrónica. El formato GIF preserva la transparencia en imágenes de color indexado; sin embargo, no admite canales alfa.
JPEG:

El formato JPEG (Join Photographic Experts Group) se utiliza habitualmente para mostrar fotografías y otras imágenes de tono continuo en documentos HTML a través de la World Wide Web y otros servicios en línea. El formato JPEG admite los modos de color CMYK, RGB y Escala de grises pero no canales alfa. A diferencia del formato GIF, JPEG retiene toda la información de color de una imagen RGB pero comprime el tamaño del archivo descartando datos selectivamente.

Una imagen JPEG se descomprime automáticamente al abrirla. Un nivel de compresión alto produce una calidad de imagen inferior y uno bajo una mejor calidad de imagen. En la mayoría de los casos, la opción de calidad máxima produce un resultado idéntico al original.


Afortunadament porta una eina didàctica inclosa molt bona. Feu-ne ús.

INTRODUCCIÓ DE PHOTOSHOP

El programa Photoshop ens permet editar gràfics en forma de mapes de bits, o sigui, matrius de píxels; a diferència de Flash que ens permetia editar gràfics vectorials. Moltes vegades editar mapes de bits és equivalent a dir: "fer retoc de fotografies digitals".

I si a Flash el que sel·leccionàveu eren objectes vectorials i vectors ara el que sel·leccionarem amb un editor de mapes de bits(= editor de píxels) són píxels.



  • Però perquè sel·leccionarem píxels?
    Fer canvis en aquells píxels.
  • Quins canvis podem fer als píxels?
    • Aclarir
    • Enfosquir
    • Colorejar
    • Suprimir
    • Enfocar
    • Desenfocar
    • Copiar
    • Enganxar
    • Extreure
    • Transformar
    • Voltejar
    • Canviar la opacitat
    • Enmascarar
    • ...

Tots els mètodes de sel·lecció per tant són molt importants en Photoshop.

dijous, de gener 19, 2006

Operacions amb símbols

  1. Si volguèssim fer variacions d'un símbol hauriem de duplicar-lo a la finestra biblioteca. D'aquesta manera aconseguim tenir a la biblioteca una altra definició similar, a partir de la qual poguem fer variacions. Per fer això cal fer: Botó dret sobre el símbol de la bibliotecta i escollir Duplicar.
  2. Si volem sustituir un símbol que s'estigui fent servir per un altre el sel·leccionem a l'area de treball on estigui i a la finestra propietats fem:
    i escollim per quin símbol el volem sustituir.

dimecres, de gener 18, 2006

Crear una pel·lícula per escenes











[Continuaré...]
Les escenes serveixen per ... També més endavant quan comencem ActionScript...


Amb aquesta finestra podem
  1. Afegir escenes noves.
  2. Duplicar escenes ja existents. Així podem fer variacions.
  3. Eliminar escenes.
  4. Canviar l'ordre de les escenes.
  5. Renombrar-les.

COMPOSICIÓ DE MOVIMENTS

Els símbols tenen la seva pròpia línia de temps. Gràcies a això podem composar moviments. Fins i tot d'aquesta manera és possible combinar interpol·lació de forma i de moviment cosa que abans no podiem.

Però per a això cal que domineu l'anidament de símbols uns a dintre dels altres. Amb els diferents exemples que veieu aquests dies amb els exercicis de composició de moviment esteu començant a entendre a on animar les coses. Recordeu que anidar és sinònim de ficar(= en castellano meter). Veieu l'article que explica com anidar per tant.

Per composar moviment cal anidar símbols uns a dintre dels altres. D'aquesta manera estem ficant línies de temps unes a dintre de les altres.

dimarts, de gener 17, 2006

ANIDAR UN SÍMBOL DINTRE D'UN ALTRE

Anidar vól dir ficar. Anidar símbols vól dir ficar uns a dintre dels altres.

MÈTODE A _ Des de lo global fins a lo local.



  1. Crear un nou símbol. Diguem-li GLOBAL.
  2. A dins del símbol GLOBAL, editant(o sigui ficant-nos a dins de GLOBAL), crear un altre símbol, diguem-li LOCAL. (o sigui que dintre de GLOBAL fabriqueu el LOCAL).

[NOTA: Aquest mètode seria l'equivalent a crear una carpeta A i dintre de la carpeta A crear una altra carpeta B]



MÈTODE B _ Des de lo local fins a lo global _ embolcallant




  1. Crear un nou símbol.
  2. [Opcional] Dibuixar i/o afegir altres símbols.
  3. Ho sel·leccionem tot i ho convertim en símbol.
[NOTA: A Windows no tenim equivalent. Seria com crear una carpeta i embolcallar-la amb una altra].



MÈTODE C _ Crear per separat i ficar un a dintre de l'altre.


  1. Crear dos símbols per separat.
  2. Extreure(cortar) un dels dos símbols i enganxar(pegar) a l'interior de l'altre.

[NOTA: A Windows seria com crear dos carpetes per separat i després ficar arrossegant la carpeta B dins de la A].



UTILITAT DE L'ANIDAMENT DE SÍMBOLS

  • Empaquetar símbols junts de tal manera que quedin lligats i que poguem otorgar-li un moviment al paquet sencer(com per exemple traslacions d'un cotxe).
  • Anidar instàncies per programar amb Action Script.
  • Composar moviments.

EDITAR SÍMBOLS

Podem accedir a la línia de temps de cada símbol i editar-lo per dins i us en indico 5 formes possibles per accedir-hi a l'interior:


  • Doble click sobre el símbol a l'àrea de treball(que podria ser l'escenari si estigués allà mateix).
  • Botó dret sobre el símbol a l'àrea de treball > Edició a l'àrea de treball.
  • Botó dret > sobre el símbol a l'àrea de treball Edició en context a l'àrea de treball.
  • Botó dret sobre el símbol a la biblioteca > Edició a la biblioteca.
  • Doble click sobre el símbol a la biblioteca.

Per què cal accedir-hi a l'interior dels símbols per editar-lo?
Doncs per que, entre d'altres coses, els símbols estàn agrupats i no ens permeten deformar-los.


Observacions i consideracions:

Si estem a dins de la línia de temps d'un símbol i volem tornar a l'escenari o a un símbol més global cliquem a on posa el nom de l'escena o al símbol que englobava a aquest. En el cas de l'exemple si volguèssim sortir del clip "quadres" cap al clip "CAP DE PLOMA" hauria de clickar a "CAP DE PLOMA".

CREACIÓ DE SÍMBOLS

MÈTODE A (A partir d'un objecte dibuixat)
  1. Dibuixem l'objecte i el sel·leccionem.
  2. INSERTAR > CONVERTIR EN SÍMBOLO.
  3. Escollim el tipus de símbol i el nomeneu.
  4. Col·loquem l'objecte respecte de la creu en cas que volguem que pivoti respecte a on està la creu.
  5. Si s'ha d'animar la línia del símbol l'editem i l'animem per dins.


MÈTODE B (Des de zero)
  1. INSERTAR > Nuevo Símbolo
  2. Escollim el tipus de símbol
  3. Dibuixem per dins del símbol
  4. Col·loquem l'objecte respecte de la creu per que faci de pivot més tard.

Els símbols

A Flash podem crear uns elements que es guarden a una biblioteca que ens poden fer servir per poder reutilitzar cada vegada que volguem a baix cost d'informació ja que tots els elements de biblioteca que col·loquem sobre l'escenari són representants de la mateixa definició a la biblioteca.

Alguns d'aquests elements de biblioteca que podem crear a Flash es diuen símbols i n'hi ha de tres tipus:
  1. Clips de pel·lícula(MovieClips). Els quals "tenen vida pròpia".
  2. Símbols gràfics. Es sincronitzen amb la línia de temps en la que es troben.
  3. Botons.
Aquests símbols es poden anidar els uns a dintre dels altres. A més, com que tenen una línia de temps pròpia podem així definir moviments uns a dintre dels altres; és a dir:

podem fer composició de moviments.

D'aquesta manera és possible combinar interpol·lacions de moviment(amb guia o sense) amb interpol·lació de forma.

dijous, de gener 12, 2006

INTERPOL·LACIÓ DE FORMA

Amb flash a més de les interpol·lacions de moviment podem també fer interpol·lacions de forma, és a dir:"morphings vectorials". El reproductor de flash "sabrà" modificar els vectors que no deixen de ser informació matemàtica. Una altra cosa ben diferent és que nosaltres sapiguem donar-li les instruccions a Flash adequadament i correctament per tal que faci la interpol·lació de forma.

Exemple:


Per fer interpol·lacions de forma es pot fer, de forma similar al que passava amb les interpol·lacions de moviment, mitjançant dos mètodes.










MÈTODE A:




  1. Dibuixar un objecte a un fotograma.
  2. Sel·leccionar el fotograma clau on està el dibuix
  3. Anar a la finestra Propietats, desplegar la persiana Animar i escollir la opció "forma".
  4. Més a la dreta insertar un fotograma clau.


MÈTODE B:



  1. Dibuixar un objecte a un fotograma clau.
  2. Insertar un fotograma clau més a la dreta.
  3. Sel·leccionar tots els fotogrames des del primer fotograma clau fins el darrer.
  4. Anar a la finestra propietats, desplegar la persiana Animar i escollir la opció "forma".

Què es pot fer amb interpol·lacions de forma:

  1. Canviar de forma
  2. Canviar de posició
  3. Redimensionar
  4. Girar
  5. Canviar de color
  6. Animar degradats

Què no es pot fer amb interpol·lacions de forma:

  1. No es pot agrupar el farcit. Quan es fa això es trenca la interpol·lació de forma i no funciona correctament.

dimecres, de gener 11, 2006

MÀSCARES

Les màscares en Flash serveixen per deixar veure a través d'elles. Fan la funció de "forats".



Quan hi ha màscares al Flash han d'haver-hi també coses enmascarades, és a dir: coses que es vegin a través d'elles. Dit d'una altra manera, hi haurà capes màscares i capes enmascarades.




Per fer una màscara:

  1. Es dibuixa a una capa un farcit amb la forma del forat desitjat. Aquesta forma serà la que farà de màscara. Li posarem com a nom "MASQUI"
  2. Creem una capa buida i la posem a sota d'aquesta capa. L'anomenarem "enmascarada".
  3. La capa de la màscara, "MASQUI" la convertirem en màscara fent: botó dret i a continuació sel·leccionant la opció "màscara".
  4. [Observar que la capa "enmascarada s'ha subordinat a la capa MASQUI i les dues s'han bloquejat amb candaus."]

[ADVERTÈNCIES]

  • Les màscares s'han de fer de "farcits". Si hi ha traçats a les capes màscara no s'enmascararà res.
  • Les màscares, a diferència de les guies, sí es poden agrupar. Fins i tot es poden animar.

dimarts, de gener 10, 2006

GUIES DE MOVIMENT: INTERPOL·LACIÓ DE MOVIMENT SEGUINT UNA TRAJECTÒRIA DEFINIDA




  1. A una capa dibuixar un objecte.
  2. Afegir una capa guia i dibuixar un traçat en aquesta capa
  3. A la capa de l'objecte "Crear interpol·lació de moviment", crear fotogrames clau i col·locar l'objecte allà on volguem per a cada fotograma clau.
  4. Si voleu que l'objecte s'orienti segons traçat sel·leccioneu els fotogrames clau i a PROPIETATS sel·leccioneu la casella ORIENTAR SEGONS TRAÇAT

[ADVERTÈNCIES]

  • A la capa guia que només hi hagi traçat. Que no hi hagi cap farcit.
  • No agrupeu el traçat a la capa guia.
  • No feu cap interpol·lació de moviment a la capa guia(que no deixa de ser una forma d'agrupar).


Exemple:




type="application/x-shockwave-flash" width="360" height="120">

CANVIS QUE ES PODEN FER A UNA INTERPOL·LACIÓ DE MOVIMENT

Haviem dit el que no podiem fer en l'article anterior. Ara diguem el podem fer.

CANVIS QUE ES PODEN FER A INTERPOL·LACIONS DE MOVIMENT. (Recordeu que heu d'estar a fotogrames clau per a poder efectuar aquests tipus de canvis)

Tocant l'objecte [Modificant paràmetres de la finestra propietats]

  1. Canvis de posició
  2. Redimensions [Eina transformació lliure]
  3. Canvis d'orientació [Eina transformació lliure]
  4. Canvis d'opacitat(alpha)
  5. Canvis de brillantor.
  6. Canvi de "tint"

Tocant el fotograma [Modificant paràmetres de la finestra propietats]

  1. Acceleracions
  2. Rotacions
  3. Orientar segons traçat[Sempre i quan hagueu fet una capa guia amb un traçat que fes de trajectòria]

ADVERTÈNCIES SOBRE INTERPOL·LACIÓ DE MOVIMENT

  1. Quan fem una interpol·lació de moviment els objectes, si és que no ho estaven, s'AGRUPEN. Per tant:
    • No es poden colorejar
    • No podem editar els nodes, "usea" no podem deformar els objectes.
    • Un cop fet un objecte, en principi, ja no el podem canviar. L'heu de dibuixar bé abans de crear la interpol·lació.
  2. Si intentem fer canvis a un objecte en un "fotograma no clau" accidentalment se'ns pot crear un fotograma clau. Per tant. NOMÉS FEU CANVIS ALS FOTOGRAMES CLAU.
  3. Si desagrupem un objecte que estigui a una interpol·lació de moviment LA INTERPOL·LACIÓ ES TRENCA.
  4. Si afegim un objecte a un fotograma clau d'una interpol·lació de moviment LA INTERPOL·LACIÓ ES TRENCA.

FOTOGRAMES CLAU SERVEIXEN PER...

INDICAR(ESPECIFICAR) CANVIS

REGLA NEMOTÈCNICA _ NO OBLIDAR

MOVIMENTS INDEPENDENTS EN CAPES DIFERENTS.

INTERPOL·LACIÓ DE MOVIMENT(instruccions)

PROCEDIMENTS PER FER INTERPOL·LACIÓ DE MOVIMENT

MÈTODE A:
  1. Dibuixar l'objecte que volguem animar amb interpol·lació de moviment.
  2. Sobre l'únic fotograma clau(el primer) fer botó dret -> Crear Interpol·lació de moviment.
  3. En un fotograma més a la dreta de la mateixa capa fer botó dret ->Insertar Fotograma Clau.
  4. Amb el dial (aquella agulla de color vermell) col·locat en aquest fotograma clau que acabem de crear desplaçarem l'objecte per l'escenari.

MÈTODE B:

  1. Dibuixar l'objecte que volguem animar amb interpol·lació de moviment.
  2. En un fotograma més a la dreta de la mateixa capa fer botó dret ->Insertar Fotograma Clau.
  3. Sel·leccionar tots els fotogrames inclosos els fotogrames clau i fer botó dret -> Crear Interpol·lació de moviment.
  4. Amb el dial (aquella agulla de color vermell) col·locat en aquest fotograma clau que acabem de crear desplaçarem l'objecte per l'escenari.

dilluns, de gener 09, 2006

HABILITATS i PROCEDIMENTS D'ANIMACIÓ EN FLASH FETS FINS ARA

Repaseu lo que hem fet i xequejeu:

  1. Introducció sobre l'animació en Flash. Hem explicat que, a l'igual que Flash redueix pes dels gràfics vectorials gràcies a que defineix matemàticament les corves, també pot reduir pes a la pel·lícula al definir matemàticament les animacions.
  2. Heu vist un exemple d'interpol·lació de moviment on amb dos fotogrames clau l'objecte es deslplaça d'un punt a un altre. Aquí lo que esteu fent vosaltres és indicar la posició on han d'estar els objectes en diferents fotogrames clau i el reproductor de l'usuari interpol·larà les possicions intermitjes entre diferents posicions. És a dir que només amb la informació dels fotogrames clau ja definim el moviment. Ho farem amb més detall més endavantj, només ha sigut una introducció per veure què és una interpol·lació en Flash.
  3. Manipulació de fotogrames:
    • Insertar fotogrames generant així intervals de fotogrames o "blocs de fotogrames".
    • Allargar i/o escurçar intervals de fotogrames.
    • Insertar fotogrames clau. I fotogrames clau buits.
    • Sel·lecció de fotogrames
      • Doble click sobre un interval de fotogrames
      • 1 click en el primer fotograma que desitjem sel·leccionar i (1 Click + MAYS) en el darrer fotograma que volguem sel·leccionar. Això es pot fer inclús amb fotogrames que estiguin en diferents capes
      • Arrossegant el cursor.
      • ...
    • Desplaçament de fotogrames
      • Fent doble click i arrossegant cap a la dreta o l'esquerra en la mateixa capa.
      • Fent doble click i arrossegant cap amunt i cap avall canviant de capa.
      • Copiant fotogrames i enganxant-los en una altre lloc.
    • Copiar fotogrames
    • Extreure fotogrames
    • Tallar fotogrames
    • Eliminar fotogrames
    • Esborrar fotogrames(una mala traducció, hauria de dir: esborrar continguts de fotogrames)
    • EXERCICI D'ANIMACIÓ FOTOGRAMA A FOTOGRAMA. Un bitxo caminant. Us recomenava fer servir referències per que les potetes seguissin un moviment més natural fixant-se als punts on trepitjéssin.

ANIMACIÓ EN FLASH _ Introducció

Si el grafisme vectorial en flash ha suposat una revolució en els gràfics vectorials a internet, per la seva estandarització per una banda i la reducció de pes per l'altre, l'animació streaming que permet flash ha permés afegir al web la component de moviment i de temps; o sigui: ha permés desenvolupar animacions per les pàgines web.

Abans els banners publicitaris de les pàgines web es feien en format de gifs animats que eren seqüències de mapes de bits. Us ensenyaré a fer-ne gifs animats. Ara els banners publicitaris gràcies a les possibilitats multimèdia i a la reducció de pes que permet flash es fan sobretot en flash.

Ara, amb les animacions en Flash, es pot arribar a complicar una mica més. En tot cas és un recurs més per poder realitzar la funció principal del Disseny de pàgines web que és la de comunicar.

Comunicar amb imatges estàtiques ja té la seva dificultat i el seu "intringulis". No és pas banal i el disseny gràfic tradicional ha tractat de desenvolupar la comunicació visual durants segles mitjançant tot el que se sabia de psicologia de la percepció per una banda i de les expressions culturals i artístiques per l'altra.

Amb l'aportació de les animacions de Flash podem arrissar encara més el rínxol. Podem aportar-li moviment al missatge visual. Per fer això convindrà aquí desenvolupar quasi quasi, habilitats "cinematogràfiques". Si heu fet alguna cosa d'edició de vídeo i teniu coneixements de cinema, animació, etc... les podeu integrar aquí.

En aquest capítol desenvoluparem aquestes i més habilitats. Convé que tingueu
present que sovint a la gent li costa una mica animar. Així que estigueu amb els
ulls, les orelles i la ment ben oberts quan expliqui. Lo que farem no s'hi
sembla gaire a res que hagueu fet abans. Torna a ser començar de zero. Les
primeres operacions que veurem fan referència al
control dels
fotogrames
.


[continuaré aquest article...]

RECAPITULACIÓ I SITUACIÓ

Fins ara porteu fets dos àrees importants en el disseny de pàgines web:

  1. Codificació HTML.
  2. Tècniques de dibuix vectorial.

Per altra banda heu començat a fer integració d'elements gràfics a una pàgina web com a fons de cel·les, taules i body i com a imatges en primer plà.

  • En quant a la codificació heu desenvolupat habilitats analítiques per corretgir i detectar errors a dins del codi HTML.
  • Al mateix temps heu conegut uns quants conceptes importants com URL, FTP, servidor, client, llenguatges d'internet, etc...
  • Heu penjat pàgines i documents al servidor fent servir el protocol FTP.
  • Heu començat a modelar en vectorial. Més endavant això us ha de permetre expresar-vos visualment.

dimecres, de gener 04, 2006

STREAMING, què és?

Se li diu Streaming a aquella tecnologia d'internet que permet que es vagin descarregant pel·lícules i aplicacions a través de la xarxa d'internet al mateix temps que ja es van veient.

Algunes animacions en flash i alguns trailers de pel·lícules utilitzen aquesta tecnologia i permet que mentre es van descarregant es van ja visionant. Això és Streaming.

Per més informació visiteu el següent link:
http://www.desarrolloweb.com/articulos/482.php?manual=15

dimarts, de gener 03, 2006

DISSENY DE PÀGINES WEB ÉS DISSENY DE MISSATGES VISUALS

  1. En primer lloc el disseny de pàgines web és DISSENY.
  2. I en segon lloc el format de sortida és el medi electrònic a través d'internet.

Analitzem la primera part. Disseny de pàgines web com a DISSENY. Ja us vaig comentar que una definició que vaig trobar que em semblava molt encertada era:

"El disseny és una construcció funcional destinada a solucionar un problema o optimitzar o millorar alguna funció o algun objecte."



El bon disseny és altament funcional. No s'ha de confondre disseny amb art. A vegades es parla d'objectes de "disseny" despectivament quan es tracta d'objectes inútils on prima la funció estètica. Bé, això té més d'art, i s'ha de valorar com a tal, que no pas de disseny. El bon disseny cerca el contrari, cerca ser molt útil. ( Amb ironia us puc dir que el got del Fòrum de les Cultures era un "bon disseny" ja que perseguia la funció de caure's per tal que el client demanés una altra refresc. Ara bé, queia molt fàcilment. Era molt inestable. Per cert que aquest got l'havies de pagar, el compraves, i si el tornaves et tornaven els diners).

Tipus de disseny

Hi ha molts tipus de disseny: el disseny industrial, el disseny d'interiors, el disseny gràfic, el disseny d'aplicacions multimèdia, l'arquitectura, enginyeries diverses, etc ... Les funcions que té cada tipus de disseny varien.

Comunicació Visual, funció principal del disseny gràfic i del disseny de pàgines web

En el cas del disseny de pàgines web i el disseny gràfic tenen en comú com a funciò principal: la comunicació visual. Això a la publicitat li va molt bé. El disseny gràfic, com a disciplina que des de sempre ha treballat intel·ligència visual aplicant les teories psicològiques de la percepció i els significats culturals i socials(que s'han anat sumant a través de l'evolució i desenvolupament de l'art), és una de les armes dels publicistes.

Classificacions, etiquetes, prejudicis,...

Hi ha qui ha considerat que el disseny de pàgines web és una subclasse de disseny gràfic. En realitat no és certa aquesta afirmació.

El disseny gràfic, que porta segles existint i desenvolupant-se, s'ha especialitzat molt en el món de les anomenades ARTS GRÀFIQUES, és a dir: tots aquells mètodes i tècniques de maquetació i d'impressió que desenvoquen en suport sòl·lid de paper. Un dels punts forts més importants del disseny gràfic ha estat el desenvolupament i aplicació de la comunicació visual.

El disseny de pàgines web va nèixer de forma independent des del moment en que Tim Berners Lee va inventar al CERN el llenguatge HTML(llenguatge d'instruccions que codifica les pàgines web per a que els navegadors les poguin representar) amb finalitats de compartir informació entre científics. Amb HTML al principi hi havia un mínim disseny que permetia estructurar una mica el text. Posteriorment es va veure que era insuficient des del punt de vista gràfic per comunicar. I van desenvolupar tota una sèrie de tecnologies per potenciar el missatge i integrar més grafisme a les pàgines web, podent col·locar mapes de bits(=imatges en formats jpg, gif,gifs animats, ....) i les opcions de format de text a partir de més etiquetes HTML i el posterior desenvolupament dels llenguatges d'estil CSS.

El disseny de pàgines web hereta del disseny gràfic la seva gran tradició i evolució editorial de segles i tota la teoria de comunicació visual i imatge.

Aquests noves possibilitats ja van permetre representar de forma similar el que s'havia estat fent en el món editorial de les arts gràfiques amb una tradició molt més antiga. És a dir que tot i que el mitjà i la plataforma era diferent els missatges visuals es representaven, s'ordenaven i estructuraven de forma similar. La tecnologia ara permetia fer quasi el mateix que s'havia estat fent durant segles en format editorial de paper. Tota la teoria del disseny gràfic i de la comunicació visual es podien aplicar ara al format de les pàgines web.

El disseny de pàgines web ha agafat en prèstec del disseny gràfic tradicional
els sistemes d'autoedició i la comunicació visual.

Les noves aportacions que el disseny de pàgines web aporta a la nova era del coneixement.

Al disseny de pàgines web hi ha aspectes que en disseny gràfic no s'hi troben:

  • Hypertext: Els documents s'interconecten entre si.
  • La interactivitat, que pot ser en costat client o en costat servidor, i permet a l'usuari interactuar amb programes. Hi ha una reacció estímul-resposta. L'estimulador és l'usuari i el que respon el programa.
  • El moviment, que perceptualment crida més l'atenció. En els nostres "circuïts" i la nostra "programació animal" tenim la subrutina de veure els perills o les preses de menjar si es mouen. El moviment en les pàgines web el veiem sovint en els banners publicitaris. El moviment va arribar a les pàgines web quan van incorporar les tècnologies Streaming i l'animació programada(Flash) que van començar a permetre un millor aprofitament de l'ample de banda reduït.

Un bon dissenyador de pàgines web ha de controlar la suma de vàries coses:

  • Autoedició digital
  • Comunicació visual
  • Animació
  • Realtizació de vídeo i so(autoedició multimèdia)
  • Maquetació
  • Programació(aplicacions de costat client i costat servidor)



PREJUDICIS I IRREALITATS:

Hi ha hagut molt perjudicis des de sectors molt snobs d'agències de publicitat considerant al disseny web com un disseny menor i als dissenyadors de pàgines web com a intrusos. Els dissenyadors de pàgines web que provenen de la programació al mateix temps veuen als dissenyadors gràfics com a intrusos que només saben fer servir els programes d'autoedició. Jo crec que tots dos tenen les seves raons i cap dels dos. Tots dos són intrusos i no. És a dir que tenen en comú l'ús de l'autoedició digital i haurien de tenir el de la comunicació visual.

El problema és que molts "dissenyadors de pàgines web", sobretot els provinents de l'àmbit de la programció, són ignorants en l'àmbit de la comunicació visual. Es podria dir que són analfabets visuals en desconèixer la sintàxi visual. Al mateix temps molts "dissenyadors gràfics" que es posen a dissenyar pàgines web són ignorants en l'àmbit de la informàtica. Són analfabets funcionals en un grau mig. Jo a això li dic d'una altra manera. Ambdós són:

Dissenyadors incomplerts.

En qualsevol cas no em negareu que un dissenyador ha de conèixer el medi pel qual treballa i les seves limitacions. Un arquitecte ha de conèixer els materials i les tècniques de construcció, un dissenyador gràfic per paper ha de conèixer els formats i les tècniques d'impressió. Al mateix temps un dissenyador de pàgines web ha de conèixer molt bé com funciona el medi electrònic i internet.

De la mateixa manera que un dissenyador de pàgines web no es pot considerar un dissenyador gràfic si no coneix el món editorial, les tècniques d'impressió, les seves limitacions, el paper, etc... no es pot dir que un dissenyador gràfic que no conegui el medi electrònic i internet sigui un dissenyador de pàgines web.



DISSENY VISUAL / DISSENYADORS VISUALS

Sigui com sigui tant dissenyadors gràfics com dissenyadors de pàgines web han de ser bons comunicadors visuals per que aquesta és la seva funció principal. Si no és així, per molt que coneguin bé el seu medi sempre seràn dissenyadors incomplerts.

En les etiquetes i classificacions que moltes vegades necessitem posar per entendre les coses hauriem d'establir una etiqueta per englobar a aquests tipus de dissenyadors que fan servir la comunicació visual:

Jo proposo utilitzar el terme de Disseny Visual i el de Dissenyadors Visuals.

"Internet un món canviant que obliga a reciclar-se"




Canvien els programes, canvien els llenguatges de codificació i programació, canvia el medi electrònic, canvia la societat, canvia el marketing, etc.... Això fa que Internet canvïi.


  • Si al principi(fa + de cinc anys), els banners s'animàven com a gifs animats sobretot ara les animacions es fan sobretot en Flash.
  • Si fa cinc anys la majoria d'internautes tenien monitors de menys de 17" polçades ara el més habitual és que la majoria en tinguin. Cosa que implica que si abans la major part d'usuaris tenien resolucions de 800x600 ara hi ha un 65% d'usuaris que tenen resolucions de 1024x768.
  • Si abans la profunditat de color era de 216 colors("safe colours") ara les noves targetes són capaçes de reperesentar mitjançant la codificació de 24bits més de 16 milions de colors diferents(TRUE COLOR= Color verdader).
  • Si abans els ordinadors eren més lents ara són més ràpids.
  • Si abans la versió d'internet explorer era la 5 i no sabia interpretar etiquetes com IFRAME ara les darreres versions dels principals navegadors en permeten.
  • Si abans posar un "IFRAME" no donava problemes des de l'arribada del Service Pack 2 de Windows, moltes opcions han estat "capades".
  • En un futur els navegadors represantaràn bé, cosa que encara no ho aconsegueixen massa bé, els PNG-24 amb graus de transparència. Ara mateix s'ha de tirar de CSS.
  • Abans l'HTML era més simple. Ara l'HTML és més complexe. La darrera versió és HTML4.1. L'HTML en l'actualitat està evolucionant cap a XHTML convinant els aventatges dels dos llenguatges marcadors HTML i XML(descriptor el primer i semàntic el segon).
  • Si abans la versió de PHP era la 4.0 ara és la 5.0.
  • Etc, etc....

Tot això fa veure que Internet és un mitjà canviant que evoluciona. Si aquest mitjà evoluciona un dissenyador web es veu obligat a evolucionar per anar adaptant-se als canvis. És per aquesta raó que és molt important que continuï reciclant-se i evolucionant. Per aquesta raó és tant important saber trobar la informació. Per sort a Internet hi ha molta informació. El problema és que moltes vegades hi ha molta palla. Per tant cal desenvolupar instint d'investigació per trobar les coses. És a dir: els problemes que us aniràn sorgint no són de solució inmediata. Cal pensar i reflexionar per trobar les solucions.

En aquest sentit cal saber autoaprendre.

LOGOS_PRACTICAR