Modelatge Ferrari

Calca i converteix en vectorial aquest Ferrari. Més endavant l'animarem.



http://www.new-dream.de/image/wallpaper/auto/ferrari/ferrari-02.jpg

Farem un exercici amb aquesta foto.

Més Exercicis per practicar dibuix vectorial en Flash

1. CONTROL DE LA GEOMETRIA NUMÈRICAMENT. POLIGONS, TRIANGLES,...
2. COMPOSICIÓ DE PUNTS DE LLUM I OMBRES. L'exercici de la bola.
3. CONTROL DE LES CAPES: Exercici de la broxeta i de les anelles olímpiques.
4. CONTROL DE L'ALINIAMENT I LA DISTRIBUCIÓ: Exercicis de foradaments concentrics d'objectes geomètrics. Exercici de construcció del monestir de Ripoll. Exercicis de logotips.
5. TEXTURITZACIÓ. Fabricació d'una textura matxembrada per aplicar al Monestir de Ripoll.
6. MODELATGE D'OBJECTES PER CALC. Exercici de modelatge de Ferrari. [Tècniques de contacte, tall i de ploma]
7. SIMULACIÓ DE VOLUMS: Exercici de composició de degradats al Ferrari.
8. [Continuarà amb lo que farem d'elements de biblioteca].

Exercicis per practicar dibuix vectorial en Flash

Dos tipus d'objectes vectorials a Flash

A flash hi ha dos tipus d'objectes vectorials:

1. Els farcits.
2. Els traçats.

---

1. Eines exclusives dels farcits:

2. Eines exclusives dels traçats:

TÈCNIQUES PURES DE MODELATGE VECTORIAL EN FLASH ( *)

En aquesta primera part cal que aprengueu a dibuixar en Flash. Tant si ja coneixieu altres programes de dibuix vectorial com si no bàsicament és un començar de zero ja que la manera de modelar en Flash és lleugerament diferent dels altres programes. Resulta que Flash té menys botons i està concebut amb una altra filosofia diferent de les altres aplicacions. El modelatge en Flash és molt directe i les estratègies són diferents.

Jo mateix m'he acostumant tant a dibuixar en Flash que m'estimo més fer servir aquest programa per dibuixar vectorialment que no pas els altres com poden ser Freehand, Ilustrator o CorelDraw. Ho faig sempre i quan no em sigui necesari l'ús d'algún efecte especial d'aquests altres programes.

Si controleu força aquests altres programes sempre podreu importar a Flash (Amb Arxiu > Importar) en formats compatibles com *.ai d'adobe ilustrator, etc... I a l'inrevés. Si apreneu a dibuixar en Flash i us resulta còmode total o parcialment sempre podeu començar en Flash i continuar en aquests altres programes exportant des de Flash amb Arxiu > Exportar i escollint el format de sortida compatible amb aquests altres programes.

Cal però que siguin objectes vectorials lo més simples possible que pogueu els que exporteu o importeu ja que moltes vegades els programes de destí no són completament compatibles degut a efectes especials o altres. De tota manera heu de saber que efectes especials com lents, ombres i coses per l'estil d'aquests altres programes de dibuix vectorial moltes vegades són incompatibles. Per la qual cosa sovint per poder fer servir el grafisme generat en aquests altres programes és possible que us calgui passar a mapa de bits.

Tant si en sabeu de dibuixar en altres eines com no és "obligatori" saber dibuixar en Flash. No us faci mandra que serà contraproduent si no ho feu així.

---

Aquestes tècniques pures cal que quedin ben clares:

1. Tècnica de dibuixar. Amb la ploma de bèzier, amb el llapis i amb el pincell.
   
2. Tècnica de connectar(gràcies al magnetisme amb flash). Tant podem connectar nodes d'un objecte vectorial com els mateixos objectes vectorials.
   
3. Tècnica de tallar.
4. Tècnica de foradar. Superposant dos farcits de diferent color, desel·leccionant.
   
5. Tècnica de fussionar. Superposant dos farcits del mateix color.
   
6. Tècnica de deformar. Principalment amb fletxa negra(eina de sel·lecció) i fletxa blanca(eina de subsel·lecció). També podem deformar amb panell de Transformar, per una banda, i amb la eina Transformació Lliure on podem escalar, rotar, sesgar, distorsionar i fer una envoltura.
   
7. Tècnica del pivot extern. Requereix de l'ús del panell "aliniament".
   

La resta de recursos de modelatge depenen d'aquestes.

TUTO - MARQUES D'AIGUA AMB PHOTOSHOP

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.

TUTO - ROLLOVERS DIRECTES - PHOTOSHOP I IMAGE READY

Alex, perquè quan faig l'exercici de les fotos superposades amb 2 parts de la imatge únicament, no se m'obre la imatge del damunt dues vegades com quan ho faig amb 4 parts, que se m'obre quatre vegades?. Sinó m'he explicat bé ho tornaré a repetir.
Mercès

Intro
A classe hem fet dos exercicis de Rollovers. El segon que vam fer del quadrat amb els quatre sectors us el poso en aquest post i us afegiré la part que queda de rollovers indirectes que a versions anteriors de Image Ready ja es podia fer.

Recordeu que la paraula Rollover vól dir en anglés "lliscar per sobre"("deslizar por encima"). És una de les formes de generar interactivitat en funció de on posa el ratolí l'usuari i què fa amb ell.

---

ROLLOVERS DIRECTES

1. Creem un document nou[Archivo > Nuevo] de 700x350 amb fons transparent. [És una bona mida per que càpigue en el forat estàndard dels navegadors, ja sabeu que és millor que no sobrepassi les mides: 780x430]. Podem començar al photoshop i passar-lo després a l'ImageReady o començar directament amb ImageReady.
   
   
2. Pintem la única capa que tenim amb el bot de pintura a fí que s'ompli d'un color de fons i que tota la capa sigui plena de píxels.
3. Posem guies als centres vertical i horitzontal i als costats aprofitant que aquesta capa està ocupada ja que hi ha magnetisme.
   
4. Amb la calculadora trobarem la tercera part de l'amplada, o sigui que fem 700/3 i obtenim: 233.
   
5. Creem una altra capa per sobre de la que teniem inicialment.
6. Fem una sel·lecció quadrada de 233px per 233px
   
   i l'arroseguem fins que s'enganxin els seus centres vertical i horitzontal amb les guies aprofitant-nos del magnetisme que hi ha a photoshop. I també aprofitant-nos del magnetisme de les guies amb les sel·leccions posarem una guia horitzontal amb l'extrem superior del quadrat i una guia inferior amb l'extrem inferior.
   
7. Aquesta sel·lecció la guardarem per si la necessitem més endavant. La podem guardar com a quadret. [Sel·lecció > Guardar Sel·lecció].
   
8. A continuació obro dues fotos que siguin més grans de 233px tant d'ample com d'alçada.
   
9. Amb la eina de sel·lecció quadrada farem una sel·lecció quadrada tot mantenint les proporcions i enquadrem la zona que volem.
   
   Quan ja sabem quin troç de la imatge volem fem Imagen > Recortar.
   
   
   
10. Amb la eina "mover" arroseguem les dues imatges fins al llençol de la imatge en la que estem treballant, la de les guies.
    
11. Anirem a la capa d'una de les dues imatges i farem Edición > Transformación libre. Col·locarem cada imatge enganxada a les guies i redimensionarem fins que encaixin dins les guies. (En el cas d'aquest exemple poseu a la Marilyn en una capa damunt d'Einstein).
12. Un cop col·locades les imatges passarem a dividir la imatge de la Marilyn en 4 peces, que col·locarem en capes diferents. Per poder separar aquests 4 troçets haurem de fer sel·leccions aprofitant-nos del magnetisme. Fixa't a la figura següent com faig la sel·lecció.
    
    Fixeu-vos que ho faig començo a sel·leccionar des de fora i m'aprofito del magnetisme amb les guies.
    
13. Anant tota la estona a la capa de la Marilyn farem la operació de sel·leccionar i extreure cada quart de la següent manera: Capa > Nueva > Capa Vía Cortar. Observeu que cada cop que feu això es crea una capa nova que contindrà un quart de la Marilyn. Si ho feu 3 cops ja es suficient ja que la quedarà ja tindrà precísament un 4t de Marilyn.
14. A continuació amb la eina sectors aprofitant-nos de nou del magnetisme de les guies farem 4 sectors, un per cada quart.
    [Assegureu-vos que els sectors estàn ben alineats amb les guies. Us recomano que us apropeu amb la lupa i si no encaixen perfectament amb la eina de sel·leccionar sectors sel·leccioneu sectors i amb els agafadors acabeu de posar ben alineats tots els sectors i que no s'hagin creat "mini-sectors" que de llun no es veuen.]
    
15. Si no estiguessim encara treballant amb ImageReady li donem al botó de passar a Image Ready, que és on farem lo dels Rollovers.
    
16. A continuació heu de tenir a mà els panells Capes i Contenido de web.
    
    Fixeu-vos que jo he canviat els noms a les capes i als sectors de la paleta contenido de web per aclarar-me millor, per una banda i per a que ImageReady no generi arxius d'imatge amb accents, cosa que faria que ens surtíssim de ASCII.
    
17. Amb el botó de la finestra Contenido de web afegirem un estat de rollover per cada sector fins a obtenir
    
    [Apretar per veure millor els detalls]
    Observeu que se'ns han creat estats "Sobre" a cada sector.
    
18. A continuació anirem per cada un dels estats "sobre" de cada sector i ocultarem o mostrarem la capa del quart que li correspón al sector on estem.
19. Un cop fet això ja podem fer Guardar Optimizada Como i generarem així l'HTML i les imatges. Us recomano fer-ho en una carpeta nova.
20. Guardeu també l'axiu de projecte PSD d'aquesta imatge des de ImageReady.
    

NOTA: A l'ImageReady del Photoshop 7 es podia també mostrar i ocultar capes que no fossin del mateix sector sense haver de fer res. A la versió CS2 això ho han canviat. A continuació aprofitant aquest exercici explicarem com fer per aconseguir a la versió CS2 "ROLLOVERS INDIRECTES", és a dir, de sectors que no són els que l'usuari estigui passat per sobre amb el ratolí, sinó uns altres.
És a dir: lo que posaré a continuació no es va arribar a fer a classe el divendres passat. És nou a partir d'aquest punt.

ROLLOVERS INDIRECTES
(Rollovers que afecten a sectors que no són els que l'usuari activa).
Si volem activar altres sectors al mateix temps que el que estem tocant hem de fer lo següent.

21. Ens posem a l'estat "Sobre" de la finestra Contenido de Web. I ens fixem en una petita espiraleta que hi ha
    
    Fixeu-vos que si us poseu uns segons a sobre us surt un cartellet que diu...
    
22. Doncs feu lo que diu. Convertirem en sectors remots els altres sectors, o els desitjats, arrosegant aquesta espiraleta a cada un d'aquests sectors, com si fós un "metre enrotllable".
23. Un cop hem convertit els altres sectors, o els que hem volgut, en sectors remots podem mostrar u ocultar capes que afectin a aquests sectors. De tal manera que podriem fer que si l'usuari passa per sobre de la cantonada dreta inferior de la Marilyn podriem ocultar les 4 capes de la Marilyn deixant veure sencer a l'Einstein.
24. Per últim per evitar que ImageReady ens fabriqui les imatges de les cel·les-sectors, de la part del fons anirem al panell sector i direm sense imatge i a l'apartat Fondo posarem el color frontal si és que és del mateix color que el que tenim com a fons de la imatge o si no ho averiguem i ho posem nosaltres manualment, sabent el valor hexadecimal del color. Això ho farem sector per sector.
    

Aquesta seria una entre d'altres possibles utilitats dels Rollovers indirectes amb Image Ready. Veureu que en Dreamweaver també ho podrem fer. Aquí ha intervingut lo que en ImageReady es coneix com a sectors remots que són aquests que hem associat a un estat "sobre" d'un dels sectors tot estirant de la espiraleta.


Baixeu-vos els arxius de l'exemple aquí.

TUTO - BARRA DE NAVEGACIÓ (IMAGE READY)

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