Passos que s'han de fer per allotjar un lloc web
- Primer demanar domini amb una empresa que registri: Nominalia, CDMON.
- Demanar hosting a una empresa allotjadora. Sync.es per exemple, dient-li el domini que farerm servir.
- Passar les DNS del hosting a la empresa registradora.
Etapes d'un projecte
- Esquema de la informació. Fer un esquema d'arbre amb les seccions, les subseccions, les sub-subseccions,...
- Diagrama de flux de la navegació. Fins on puc anar des de cada secció.
- Plantejament d'interfície tenint en compte els dos passos anteriors.
- Estudi de la usabilitat. Analitzar si satisfem les 3 necessitats bàsiques que té tot usuari: saber on es troba, saber què pot fer i saber què hi ha.
- Estudi de la comunicació visual. A quí ens dirigim, com transmetem el missatge visual,...
- Adquisició i producció de material gràfic i texts que farem servir.
- Confecció del Layout de la pàgina maestra d'acord amb els passos anteriors.
- Producció de totes les pàgines i enllaçat.
- Control de qualitat. Comprovació d'errors, que tots els enllaços funcionin,...
- $
- Pujar la pàgina al servidor.
ACTIONSCRIPT3 - PROJECTE CUB
Per entendre les 3D del FLASH(que en realitat són 2.5D ja que no em consta que hi hagi volums encara) us estic preparant un tutorial que abordarà el tema des de dos punts de vista. El d'animació i el de programació. La excusa per fer això és intentar fer un cub. a base de 6 cares quadrades.
Si algú s'ho vól plantejar com a repte ho pot començar a fer.
Nota: Corretgits alguns errors d'ilustracions
Les animacions que no es veien bé a la part d'Autoedició>Flash s'han corretgit. M'estic referint per exemple als articles que es parlava dels anidaments de símbols, les interpolacions de moviment i les interpolacions de forma. Cal que corretgeixi també algun error ortogràfic com per exemple excés de "elas geminades" i també la maquetació ja que amb la nova plantilla que vaig aplicar al blog que pretenia donar més amplitud ha fet que les maquetacions dels articles s'hagin desquadrat una mica. A poc que pugui les aniré corretgint.
AS3 - ActionScript 3 - PRELOADERS - Videotutorial de Batatastudio
De la mà de Batatastudio ens arriba aquest videotutorial sobre com fer un preloader en ActionScript amb AS3.
Us recomano que llegiu el seu canal per anar posant-vos al dia a les noves versions de Flash. Clica aquí.
Action Script 3 - Obligats a re-aprendre Action Script
Al món d'Internet cal actualitzar-se contínuament. I generalment ens serveix tot el que haguem après anteriorment. Hi ha una regla tàcita als llenguatges d'Internet, que gestiona el W3C, que consisteix en que tot el que valia anteriorment ha de valer en versions posteriors d'aquell llenguatge. Si hem invertit temps, diners i esforç en aprendre un llenguatge com a mínim ens serveix per un temps determinat i només cal que ens anem actualitzant de tant en tant.
Però no és el cas del Flash. Tal i com va succeïr amb la transició d'ActionScript1 cap a ActionScript2 novament hi ha ruptura traumàtica. El que valia a al AS1 no va valer al AS2. I tampoc no tot el que va valer al AS2 valdrà al AS3. Cal pensar que Action Script no és un llenguatge obert. És un llenguatge propietari i com a tal està a mercé de la voluntat dels seus propietaris que tenen un afany legítim comercial. Tot llenguatge propietari implica que hi ha poca comunitat de gent desenvolupant-lo, per tal de repartir els diners entre menys, i fa que es pensi més a poc a poc en el seu desenvolupament. Amb plaços d'entrega forçats per vendre les noves versions de flash es va avançant a cops. Es fan millores sí. Però amb canvis molt radicals. És per això que hi ha una tendència darrerament a marxar cap al AJAX amb frameworks com Script.Aculo.Us, JQuery, Mootols, que permeten fer coses similars a les que ja feiem amb Flash, en quant a interactivitat, però amb les bondats de ser més permeables a la indexació de Google, i per altra banda permetent actualitzacions de continguts més àgils. Les principals marques ja no fan les webs exclusívament en Flash. Ajax(o el que és el mateix Javascript i més coses) cada dia s'imposa més. Si no mireu la pàgina de Coca Cola.
Un dissenyador híbrid, com ho som molts, està disposat a introduir-se en el món de la programació orientada a objectes fins a cert punt. I en qualsevol cas cal que es vagi actualitzant de mica en mica. I aquests canvis tant radicals, la veritat, no són massa populars. Els de Adobe són conscients de que això no desperta masses simpaties i estàn preparant un programa que es diu Flash Catalyst que permetrà dissenyar interfícies webs interactives sense tocar gens el codi. Bé, aquesta és la idea que volen vendre. Però això en cas que sigui cert, com ha passat amb altres falàcies comercials, tornarà més inútils encara als dissenyadors de ment estreta que es conformaven amb el que es pot aconseguir únicament amb el Dreamweaver.
Com en tot cal que hi hagi un equilibri. A veure si a partir d'ara fan evolucionar el ActionScript d'una manera una mica més racional, sense ruptures dràstiques. Comencem a estar farts de tenir que aprendre ActionScript des de cero cada vegada que decideixen tocar-lo.
Us aniré posant enllaços d'adaptació per pasar-vos al AS3.
ACTION SCRIPT - Guía d'introducció ràpida
Coses que s'han de saber sobre ActionScript:
- ActionScript és un llenguatge de programació orientat a objectes[POO].
- És el llenguatge que ens serveix per programar interactivitat dins del flash. La interactivitat és la activitat que es produeix quan un programa o màquina reacciona davant d'un estímul nostre.
- La interactivitat que podem definir amb ActionScript amb el flash succeeix al costat client(navegador).
- Per posar accions ens cal fer servir la finestra "Acciones". Per treure-la podem anar al menú Ventana > Acciones. Això ens mostra la finestra "Acciones", la qual conté al costat esquerre una col·lecció d'accions distribuïts en llibres i subllibres.
- Quan vulguem posar una acció d'ActionScript ho podem fer escrivint o fent doble click sobre l'acció que veiem al costat esquerre de la finestra Acciones.
- Amb la finestra Acciones podem treballar en Mode Expert o amb l'Assistent d'Script.
- Si treballem amb l'Asssistent d'Script premut ens apareixen camps per farcir amb paràmetres. L'assistent d'Script ens ajudarà fins que sapiguem la sintàxi del llenguatge ActionScript. Però quan ens limiti per treballar és millor sortir d'aquest mode de treball.
- Podem posar accions d'ActionScript[A l'ActionScript 2.0] a tres llocs possibles: Clips de pel·lícula, botons i fotogrames.
- Abans de posar accions a un fotograma ens cal seleccionar el fotograma.
- Abans de posar accions a un clip de pel·lícula ens cal seleccionar el clip de pel·lícula.[No ho hem fet, no ens donarà temps probablement].
- Abans de posar una acció a un botó cal seleccionar el botó.
- Quan vulguem posar una acció a un botó cal fer servir la sintaxi:
on (release) {
accions; }
Entre els parèntesi posem "events de ratolí"(maneres d'activar el botó. Com a valors possibles tenim: press, release, releaseOutside, rollOver, rollOut,...). Entre les claus posem accions. Entre les claus podem posar tantes accions com calgui. - A vegades ens cal aplicar accions que fan referència a instàncies concretes, així que el primer que necessiten aquestes instàncies és tenir nom.
- Els clips de pel·lícula ens donen la opció de posar-los un nom d'instància mentre que els símbols gràfics no.
- Quan vulguem aplicar una acció a una instància en concret que té nom cal que enrutem correctament fins arribar a la instància desitjada. Per això ens cal conèixer una mica d ela terminologia de prefixes:
a. this [Per referir-nos a la línia de temps en la que ens trobem]
b . _root [per referir-nos a la línia de temps principal]
c. _parent [per referir-nos a la línia de temps que hi ha per sobre.]
FLASH -VIDEOTUTORIAL - ANIMACIÓ PERSONATGES
Els de conecta tutoriales tenen aquest vídeo interessant sobre animació de personatges al youtube.
Disseny - Accessibilitat (Juglar)
Juglar ens posa una llista de webs on podem trobar informació sobre Accessibilitat. Clica aquí.
Programació - Jquery
JQuery és una de les famoses llibreries de Javascript que s'han posat de moda els darreríssims anys, com la llibreria Script.Aculo.Us o Mootools. Aquestes llibreries són un conjunt de funcions prefabricades i reutilitzables que ens permeten controlar millor el DOM d'objectes d'un document i la seva interactivitat. No és en sí un llenguatge de base (el llenguatge de base és el javascript) si no una mena de meta-llenguatge per controlar al javascript d'una manera una mica més còmode, tot i que al començament costa d'entendre. La seva corva d'aprenentatge és dura al començament. Per poder treure-li el màxim profit a aquestes llibreries cal controlar molt bé el CSS i conèixer suficientment el javascript.
JQuery per principiants.(anglès)
En anglès un videotutorial per principiants sobre la llibreria Jquery.
Smooth scrolling. (Italiano).
Photoshop - Videotutoriales - Blanquejar dents
Ivanciko ens brinda al seu canal de youtube aquest altre videotutorial en que ens explica com blanquejar dents d'una fotografia. Això ho farà de forma molt senzilla amb màscara ràpida per seleccionar només les dents i canviarà la coloració de les dents amb Tono-Saturación(Imagen>Ajustes>Tono-Saturación).
Us poso l'enllaç al seu canal de youtube per si us voleu suscriure. Val la pena.
Photoshop - Videotutoriales - Treure ulleres
En aquest videotutorial de "ivanciko" ens explica com corregir ulleres, granets, d'un retrat.
És un interessant exemple d'ús d'eines que hem fet servir al curs de photoshop però de forma combinada. Les eines i tècniques que fa servir són: sobre-exposar, dit de desenfocar, pincell corrector, seleccionar, desenfoque gausiano, mode de fussió "luz suave",
Photoshop - Videotutoriales - Retoc de retrat
He trobat un videotutorial al youtube molt interessant fet per Conecta Tutoriales en el que es combinen diverses tècniques de selecció, modes de fussió, màscara ràpida, canals, filtre liqüar... coses bàsiques que haureu fet amb mí els alumnes de photoshop però que aquí les expliquen ja de forma combinada.
Ajax - Shadowbox - Interessant clon de Lightbox
http://www.shadowbox-js.com/
És interessant aquest clon de lightbox que a més admet flash i video.
Doneu-li un cop d'ull.
DW - Com penjar la web? - Configurar el client FTP del DW
Voleu penjar la web, oi? Cap problema.
Ja heu acabat la web i la voleu pujar al vostre hosting. Doncs si feu servir el DW us explicaré de quina manera en un tutorial pautat explicat pas a pas.
Tan sols heu de configurar el gestor d'arxius i client FTP del DW seguint els passos que us indicaré. Clica aquí per anar directe a aquest tutorial pautat de DW que es troba dins de la secció d'autoedició.
Si no fèssiu servir el client FTP del DW podeu fer servir el Filezilla-FTP-Client en un procés similar. Només haureu de definir l'adreça del servidor FTP, un nom d'usuari i un password. Però un Filezilla-FTP-Client no gaudeix de les mateixes comoditats que té el client integrat d'FTP del DW.
DW - Comportaments - Menús emergents
A la secció d'Autoedició us poso un tutorial per fer Menús emergents aprofitant-nos de la col·lecció de javascripts que incorpora DW. Clica aquí per anar al tutorial. I clica aquí per anar a veure la pàgina avia2.html on es troba l'exemple real.
FLASH - que es redimensiona de forma líquida
Estic cercant com fer que els arxius swf quan els poso a la pàgina s'adaptin a qualsevol resolució de forma líquida. Una vegada ho vaig fer. Però no ho recordo. Ja us diré com quan el trobi. De moment he trobat possibles solucions a:
- Liquid Flash. Està en anglès. Clica aquí.
- Uninjipe - Flash a ventana completa. Clica aquí.
Dreamweaver - Les plantilles - Introducció.
Introducció.
Les plantilles del Dreamweaver són el recurs del programa que més m'agrada particularment ja que guanyo temps evitant processos repetitius i mecànics a l'hora de produir les diferents pàgines d'un lloc web. Per altra banda també em permet estalviar temps en el manteniment de tot el lloc web ja que quan haig de fer canvis globals que afecten a totes les pàgines del meu lloc web l'únic que haig de fer és modificar la plantilla i actualitzar. No importa que hi hagi centenars de pàgines descendents d'aquella plantilla ja que les modificarà totes. Per saber-ne com es fan servir les plantilles de DW clica aquí.
FLASH - SwfObject - Posar un Flash sense que surti l'avís de l'ActiveX
Us poso una adreça molt interessant on us expliquen com posar un flash a una pàgina sense que us protesti el navegador amb aquell cartellet que us demana que doneu permís.
SwfObject és un javascript que escriu dinàmicament la presència del flash a la pàgina i evita que l'usuari hagi posar el flash en marxa hagi de donar permís. Us ho explica Unijimpe en castellà. Clica aquí.
CSS - Com situar una capsa "footer"
Si fem servir models xhtml1.0 transitional o xhtml1.0 strict hem perdut la capacitat de posicionar capses a la part inferior del navegador. Dona molts mals de cap habitualment per que les pàgines queden com penjant de dalt.
Hi ha una solució, CSS STYICKY FOOTER per aconseguir situar correctament la capsa del peu d'una web si clilqueu aquí.
Comparatives de suport CSS entre els diferents navegadors
Podeu trobar un interessant article sobre la futura suportabilitat de l'estàndard CSS3. Cliqueu aquí .
L'anterior link està basat en l'aplicació online següent: Clica aquí.
També pots veure una comparativa a la Viquipèdia en anglès tot clicant aquí.
Humor - Institut Tortell Poltrona
Assistim a algunes classes de l'Institut Tortell Poltrona, on veurem noves maneres d'educar l'alumnat amb manca d'atenció.
Un altre sistema educatiu és possible!
No existeix la línia recta ni el camí més curt al Disseny Web
Si hi ha una cosa que em trobo quotidianament quan ensenyo disseny web és la pregunta: "Què és millor fer?". Malauradament no puc respondre amb més concrecció que amb la paraula "depèn". Això desconcerta encara més a l'alumne que tot just comença a rebre coneixements partint de zero.
Però fins i tot es desconcerta més quan ja té unes habituds fixades per que provenen del disseny gràfic tradicional. Sovint suposa més esforç fer canviar el xip a algú que ja té el costum de fer les coses de determinades maneres. S'ho ha de replantejar tot de nou. S'ha d'habituar a no dependre dels programes que treballen en mode wysiwyg per que no són miraculosos, precísament per la complexitat que té el mitjà. Un Photoshop, Image Ready, un Fireworks, un Golive o un Dreamweaver quan generen codi HTML, Javascript i/o CSS només ens ajuden a acostar-nos a l'objectiu, però no culminen la feina. Al final has de retocar el codi per que funcioni, per afinar més bé els detalls o per fer que es vegi bé als navegadors.
Però el mitjà d'internet és més complexe. I a més és canviant. Evoluciona molt depressa. Canvien els estándards, canvien els navegadors, ...
S'ha de comptar que els usuaris ens veuràn amb diferents navegadors, dels quals hi ha millors i pitjors i no necessàriament els que fa servir la majoria de visitants són els millors navegadors. Justament funcionen una mica pitjor els majoritaris com Internet Explorer i Safari ja que no acostumen a seguir tant les recomanacions del W3C. Però pel fet que aquests navegadors no segueixen els estàndards no vól dir que no els haguem de tenir en compte. Continuen sent el target dels clients que ens contractin per fer la plana web.
Per altra banda les pàgines web es poden fer de múltiples maneres diferents. Hi ha qui pot considerar que pot anar més ràpidament especialitzant-se en fer les pàgines només en flash. El desitjo bona sort. Però no és una bona idea ser especialista abans que generalista. Voler córrer en el procés d'aprenentatge farà que més tard a l'hora de la veritat si encara no t'has topat amb els problemes t'hagis d'aturar i fins i tot trobar-te amb impediments que t'impedeixin continuar.
El procés d'aprenentatge, en qualsevol matèria sofisticada on hi intervenen moltes variables a tenir en compte, i on a més aquestes variables varien molt depressa, resulta complex. Però un cop t'has pujat al "vehicle" i comences a caminar per dins ve un altre problema, el de conduir-lo.
A l'ofici et vas trobant circumstàncies noves contínuament i has de adaptar-te contínuament als nous reptes. Només amb la experiència guanyes capacitat de reacció. És per això que convé que tinguis recursos i més recursos per variar la estratègia quan et falla una cosa.
PNGs amb fons transparent
Així com els navegadors moderns fa temps que saben representar correctament PNGs amb fons transparent, l'Internet Explorer 6 i el 5.5 no. Lo pitjor és que el Internet Explorer 6 ha durat 7 anys.
Ara, en poc temps, hem vist com ens ha aparegut l'Internet Explorer 7 i el 8 més recentment(a data d'avui, quan escric aquestes línees). I aquests ja suporten la característica de representar PNGs transparents.
Bé, però com que encara no tothom s'ha actualitzat a aquests navegadors us poso els hacks als quals havíem de recòrrer per poder representar-los.
Aquestes solucions no recordo que em donguèssin satisfacció plena. Però segurament cercant una miqueta trobaràs altres possibles solucions. Esperem però que vagi desapareixent d'infame nom Internet Explorer 6.
El que no recordo en aquest moment, i s'hauria de confirmar, és si tot això li afecta a PNG-8 que és la versió de PNG més similar a GIF.
Tenir instal·lats diferents versions Internet Explorer
Si teniu windows XP i Internet Explorer 7 i voleu comprobar com es veu una pàgina en diferents versions anteriors del navegador Internet Explorer podeu fer servir aquest programa que us instal·la a una mateixa màquina les versions anteriors.
http://tredosoft.com/Multiple_IE
Si teniu Linux suposo que amb l'emulador WINE també podreu probar-ho. I si teniu MAC i teniu algun emulador de windows també el podreu instal·lar.
Emulador de navegadors ONLINE
Aquí teniu un enllaç força interessant per que pugueu comparar com es veu una pàgina entre els diferents navegadors. Cliqueu aquí.
Recordeu que és necessari, com a dissenyador web, mirar com et poden veure amb els diferents navegadors i les seves versions.
Benvinguts
Als que comenceu el nou curset us desitjo que us sigui
de molt profit i d'inspiració per la vostra vida.
Penseu que aquest curs no és culminant si no iniciàtic.
Això vól dir que teniu tota la vida per aprofundir tot el
que cal, que és molt.
Feu tot el que estigui a les vostres mans per aprendre,
no ho delegueu en ningú altre. El vostre cervell és vostre;
és particular, no col·lectiu.
Gestiona els teus apunts i anota els teus dubtes
per quan sigui possible preguntar-me'ls.
Practiqueu molt. Estigueu atents a classe. Pregunteu-me.
Feu-me aportacions positives si ho veieu necessari.
Ànims i esperit constructiu(I avui dia més que mai).
Diferències entre vincular i importar una pàgina
Clica aquí per veure una explicació força bona de la diferència entre vincular i importar fulles d'estils.
XTHML + CSS DE UNA VEZ
Belén Albeza ens brinda aquesta magnífica obra didàctica de la que n'és l'autora. Felicitats Belén.
XHTML + CSS DE UNA VEZ
FLASH -TUTORIALS DE FLASH
Mireu aquesta web en que hi ha tutorials sobre photoshop.
http://www.tutoriales-flash.com/
Recursos bibliogràfics online - GOOGLE LIBROS
Disposeu de un servei que ofereix Google, molt bó,
que és una llibreria virtual. La podeu trobar aquí.
Orientació - Us recordo que podeu fer preguntes
Us recordo que a través de l'apartat [Exercicis] podeu fer preguntes.
Orientació - Videotutorials sobre CSS
Us estic punxant a l'apartat de HTML i CSS video-tutorials. La idea és que tingueu explicacions alternatives a les meves. I tenint en compte que esteu a l'atur no és bona idea que us gasteu diners en llibres quan encara no sabeu quins us fan més servei.
He trobat dos pàgines web força interessants sobre CSS.
Orientació CSS
Teniu en paper els apunts de CSS que us vaig donar. I hem començat ja a explicar els rudiments de com funciona. Tanmateix us recordo que també disposeu de més material a la pestanya "HTML i CSS".
Allà teniu una llista d'atributs CSS separats per temes. De tal manera que pogueu fins i tot copiar i enganxar per anar-vos familiaritzant amb la sintàxi.
Photoshop - Videotutorials
Hola, us estic punxant videotutorials a la secció d'autoedició que he trobat al youtube. N'hi han més. Per trobar-ne més només heu de buscar al youtube les paraules:
Videotutorial Photoshop
I si volguèssiu una cosa en concret de photoshop com per exemple pinzell corrector podríeu posar:
pincel corrector + Photoshop + Videotutorial
Us animo a que aneu mirant aquests exemples de tutorials que teniu a l'abast i de forma gratuïta i il·lustrada.
Orientació - Aprenentatge - Els beneficis de prendre l'aire
Mireu quin article he vist. Un article que diu que sortir a la natura és tant bo pel cervell com fer meditació.
Washington, 16 dic (EFE).- Investigadores de la Universidad de Michigan (EE.UU.) han descubierto que la memoria y la atención mejoran un 20 por ciento después de pasar una hora en contacto con la naturaleza o simplemente dando un paseo por un parque. Seguir leyendo el arículo
Foto y Vídeo relacionado
La investigación, publicada en la edición de diciembre de Psychological Science, confirma la teoría popular de que es bueno salir a tomar el aire o dar una vuelta para despejarse.
Los autores del estudio, Marc Berman, John Jonides y Stephen Kaplan, de la facultad de Psicología de la Universidad de Michigan, consideran que los resultados obtenidos pueden ayudar a las personas que padecen de fatiga mental.
Caminar en un parque, no importa si hace calor o hace frío, o incluso ver fotografías de la naturaleza puede ayudar a mejorar la memoria y la atención.
Berman señaló que "interactuar con la naturaleza puede tener efectos similares a la meditación", algo que probaron con un experimento en el que pusieron a prueba su teoría de que esa actividad mejora los procesos cognitivos.
Los participantes en el ensayo tuvieron que caminar por el campus universitario, por el jardín botánico, por un parque de la ciudad e hicieron rutas urbanas.
El estudio revela que los que caminaron en el parque mejoraron su memoria de corto plazo en un 20 por ciento, pero no mostraron mejoras cuando caminaron por la zona urbana.
Según los científicos, las distracciones y el bullicio de la ciudad estimula a la gente, pero parece que consume atención y memoria, mientras que la naturaleza tiene un efecto calmante y regenerativo en las personas.
De hecho, según los investigadores, estar en contacto con la naturaleza también puede tener beneficios en el tiempo de recuperación de pacientes con cáncer y ayuda a mejorar la memoria y la atención.
"Encontramos los mismos beneficios cuando había 26 grados y era un día soleado de verano, que en días de enero con una temperatura de menos 4 grados", apuntó Bergan, "la única diferencia fue que los participantes disfrutaron más las caminatas de primavera y verano que en los días fríos de invierno".
Otra de las teorías que han constatado es que mostrando imágenes urbanas y de naturaleza el efecto es el mismo: la naturaleza relaja y favorece la concentración.
Ja ho sabeu doncs. A sortir al carrer a prendre l'aire. A part, el contacte amb el Sol o simplement la llum del dia afavoreix regular el metabolisme i els cicles cardians. També ajuda a alleugerir la depressió i a millorar les defenses.
I si apreneu tècniques de meditació podreu controlar el vostre cervell i millorarà la vostra concentració. En realitat les tècniques de meditació i relaxació són força "xorres", el que passa és que o bé no en sabem o bé no ho apliquem. Suposo que és qüestió de proposar-s'ho.
Per altra banda contràriament al que popularment es pensa la concentració en realitat és l'estat de mínim esforç mental. Fatiga menys estar concentrat que dispers per que porta implícit treure del cap el que molesta. I el cap el tens mé enfocat a resoldre els problemes concrets que interessen. Vas més al gra. El problema és que per arribar a l'estat de concentració òptim cal invertir una mica de temps. Bé, però després el recuperem per que el rendiment d'1 hora de feina concentrat equival a més de 3 hores dispers. Per tant, dedicar mitja hora a relaxar-se i concentrar-se abans de començar és una bona inversió de temps. Guanyes la meitat de temps.
Orientació - Reflexioneu-hi sobre com heu fet els diferents exercicis
Quan aprenem quasi és més important el procés en sí que el producte final.
Expliqueu quines eines, opcions, menús, tècniques heu fet servir per cada exercici. Heu fet servir màscares? Heu fet servir la eina text?
Expliqueu breument de què anava cada pràctica i el procés com heu arribat al producte final.
Reflexioneu-hi i re-editeu les vostres entrades.
Orientació - Exercicis - Llista de tasques pendents
Tinc el plaer de comunicar-vos que ja podeu pujar els vostres exercicis al blog d'exercicis. Recordeu que per poder accedir a l'àrea d'administració heu d'anar a http://blogger.com i ingressar amb el vostre compte de google.
Per poder accedir al blog d'exercicis com a coautores heu de tenir compte als serveis de google i us he hagut de convidar jo.
Us recordo la llista de tasques:
- Composició nadalenca abstracta.
- Composició nadalenca concreta.
- Esquema d'etiquetes HTML amb els atributs i valors d'atribut.
- Llista d'abreviatures de teclat que t'enrecordis.
Tanmateix us posaré deures per les vacances per que no us oxideu i torneu ben àgils.
Aneu visitant el blog de tant en tant per que us aniré posant més informació.
Orientació - Notícies - Campus habilitat amb els vostres comptes
Us he habilitat el campus amb el nick i el password que hem vau donar. Tot i que encara no hi ha res comproveu que podeu entrar.
Al Campus vull provar de posar exàmens i exercicis tipus test, entre d'altres coses, per que pugueu posar-vos a prova. Això és un experiment. Ho testarem.
Ara m'hi posaré amb el fòrum on podreu plantejar preguntes i respostes entre vosaltres.
Orientació - Els exercicis es troben a la pestanya EXERCICIS
Els exercicis els podeu trobar a a partir d'ara a la pestanya "EXERCICIS"
que la podeu trobar a dalt. També podeu arribar-hi clickant aquí.
Photoshop - Exercicis - 16 Desembre 2008
Bon dia!
A) Fent servir l'ajuda del photoshop descriu per escrit en pasos com:
- Es crea un motiu.
- Es crea un pinzell.
- Es crea una forma personalitzada.
- Amb quines eines puc bellugar píxels, seleccions i traçats.
- Descriu com puc redimensionar, posar en perspectiva, girar, voltejar,... una selecció.
- Descriu com puc redimensionar, posar en perspectiva, girar, voltejar,... un traçat.
- Descriu com puc redimensionar, posar en perspectiva, girar, voltejar,... una col·lecció de píxels.
C) Aprèn a fer fletxes amb photoshop amb el tutorial següent: Clica aquí. A continuació obté la figura següent:
D. Fes el següent gràfic.
E) Fes una bola de foc amb el següent tutorial. Clica aquí.
F) Fes aquest taulell d'escacs en perspectiva i dibuixa un caball que faci ombra sobre el tauell.
Orientació - Es responen preguntes gratuïtament
El meu combustible són les preguntes. Així que podeu preguntar-me, suggerir-me, donar-me idees,.... Pots fer comentaris a sota de cada article.
Ajuda'm a ser millor profe.
Sóc interactiu! :)
Recordeu però que per generar dubtes s'ha de processar. Mira't els apunts, tant els de paper com els d'aquest blog i intenta fer els exercicis de nou.
La millor manera de generar dubtes és experimentar, analitzar, investigar,... amb esperit científic i empíric. Fixa't quan passen les coses, quan funcionen i quan no. Llença hipòtesis del perquè funcionen o per què no funcionen les coses i analitza si són correctes aquelles hipòtesis.
Gestiona els teus inputs. Posa't a prova. Tingues esperit constructiu. Juga i aprèn però amb atenció. Relaciona els conceptes, processa la informació.
Ets el propietari del teu cervell, gestiona'l tu amb responsabilitat. No ho pot fer ningú més que tu.
I si no te'n surts sol/a després d'haver-ho intentat sempre pots preguntar-me.
Dreamweaver - Orientació - Què farem amb Dreamweaver?
Dreamweaver és el programa ideal per editar pàgines web de forma professional ja que inclou diferents aspectes que fan d'ell un programa molt versàtil i complert tant per a dissenyadors com per a desenvolupadors i programadors.
- Edició. Permet editar webs tant en mode WYSIWYG com en mode codi.
- Gestió d'arxius. Permet gestionar els arxius d'un lloc web. El seu gestor fa de client FTP i a més és intel·ligent ja que se n'adona quan arxiu canvia de lloc i actualitza automàticament totes les URL que portin cap aquell arxiu.
- Llenguatges. Dreamweaver treballa amb diferents llenguatges com HTML, XHTML, XML,PHP, CSS, Javascript, ASP,... Aprofundirem en HTML, XHTML, CSS i us presentaré des del Dreamweaver Javascript.
Flash - Orientació - Què farem amb FLASH?
Flash és un programa força versàtil. El seu ús pot ser tant per realitzar continguts multimèdia orientats tant a CD com a webs.
- Dibuix Vectorial. Aprendreu les tècniques per dibuixar i modelar els diferents objectes vectorials.
- Animació. Aquest és l'aspecte més potent del Flash. La majoria dels banners publicitaris d'avui dia es fan amb Flash.
- Multimèdia. Un altre dels punts forts del Flash és que permet incorporar so i vídeo. I naturalment imatges de mapes de bits.
- Interactivitat. Mitjançant un llenguatge de programació que es diu ActionScript es poden desenvolupar rutines interactives. Assentarem les bases per entendre aquest llenguatge i també per fer la major part de les coses que trobem a les pàgines web interactives.
Photoshop - Orientació - Què farem amb Photoshop?
Photoshop és una eina d'edició de mapes de bits, és a dir: serveix per editar píxels. Però l'ús que farem d'aquest programa no queda restringit a això només. Photoshop ens permet fer més coses. A continuació us explico quins son els aspectes que treballarem a Photoshop:
- Generació de grafisme a photoshop.
- Per a això cal desenvolupar tant les habilitats d'edició de píxels com les habilitats d'edició vectorial del propi photoshop. Les possibilitats són infinites. I dominar-les ens ajudarà a expressar-nos millor visualment i a fer treballs més fins.
- Retocs i ajusts fotogràfics.
- Aquí trobarem la part més tècnica de Photoshop i de fet és el punt més fort d'aquest programa. Photoshop es va crear precisament amb aquesta finalitat. Per cert la majoria d'eines de retoc fotogràfic del photoshop es basen en les tècniques de retoc prèvies a la informàtica que s'utilitzaven als laboratoris. El retoc fotogràfic de laboratori és una cosa força antiga. A la URSS, a la època de Stallin, ja es practicava el retoc fotogràfic per treure de la foto a algú. Hi ha hagut verdaders artistes de la falsificació fotogràfica des que existeix la fotografia.
- Animacions. Gifs animats.
- Tradicionalment, des de la versió Photoshop 5.5, trobàvem aquesta funció al programa que acompanya al Photoshop, l'Image Ready. Aquest programa és el germà bessó del Photoshop. Els gifs animats servien per fer banners publicitaris. Avui dia es fan més en Flash. Però encara es fan servir els gifs animats tant per banners com per altres coses.
- Creació de pàgines web a partir de mapes de bits.
- Amb photoshop i amb Image Ready podem generar pàgines web a partir d'una imatge de mapes de bits. Nosaltres podem composar la interfície d'una pàgina web dibuixant-la en el propi photoshop. És per això que ens cal aprendre les habilitats de grafisme.
Photoshop - Orientació - Què hem fet fins ara i per què?
Fins ara hem fet els fonaments del Photoshop.
- Hem començat a conèixer la interfície del programa.
- Hem desenvolupat les habilitats per seleccionar píxels.
- Hem desenvolupat les habilitats del dibuix vectorial.
- Hem desenvolupat la mecànica dels pinzells.
- Hem conegut algunes abreviatures de teclat.
- Hem començat a conèixer les eines i algunes opcions de menú.
- Generar grafisme.
- Fer retoc fotogràfic.
- Fer gifs animats.
- Crear pàgines web a partir de mapes de bits.
Booleans - 3a part - Combinar traçats vectorials
Sovint necessitarem obtenir un traçat vectorial que sigui fruit de la fusió, la resta, la intersecció o la exclusió d'altres traçats vectorials més primitius. Per aconseguir-ho es molt fàcil.
És fa el mateix que a l'article anterior però amb una variació. En comptes d'obtenir una selecció de píxels farem el següent.
- Seleccionem les formes vectorials que vulguem combinar.
- Premem el botó [Combinar] que es troba al panell propietats, a dalt.
El resultat que obtenim és el traçat resultant d'haver combinat els anteriors(fixa't el que passa).
Booleans - 2a Part - Seleccions a partir de traçats amb booleans
En aquest article veurem com obtenir seleccions booleanes a partir de traçats.
Per poder explicar-ho cal tenir en compte però que aquests botons s'han de seleccionar just abans de crear un traçat. Però per entendre millor com funciona la cosa estudiem els casos següents:
Quan fem servir eines de creació de traçats vectorials també ens apareixen al panell contextual de propietats, a dalt, els botons per fer traçats booleans. Però quin sentit tenen?
FENT UN PRIMER TRAÇAT.
Contemplem però a continuació dos casos en que fem un primer traçat.
- Suposem que escollim la primera opció(
). Observeu com queda la finestra traçats:
La part de dins del traçat a la miniatur queda de color blanc. I si obtenim la selecció a partir d'aquest traçat amb el botó
la selecció resultant és:
La selecció que hem obtingut és justament l'àrea blanca de la miniatura de traçats. - Veiem què passa si escollim la opció de booleans
abans de crear un nou traçat.
Podem observar a la miniatura del traçat que el que queda blanc és el que hi ha per fora del traçat. I en conseqüència el que n'obtenim és la selecció inversa.
- Us deixo a vosaltres que estudieu què passa amb les opcions booleanes que queden. Observeu què és el que queda blanc a la miniatura i quina selecció se n'obté.
CONCLUSIÓ:
La selecció que obtenim a partir d'un traçat és el que a la miniatura del traçat és de color blanc.
La selecció que obtenim a partir d'un traçat és el que a la miniatura del traçat és de color blanc.
Nota: A partir d'ara nosaltres direm que la part blanca és l'interior del traçat.
FENT UN TRAÇAT ON JA HI HA UN TRAÇAT PREVI
La gràcia dels booleans justament la trobem quan combinem més d'un conjunt. Estudiem a continuació els següents casos en que afegim un nou traçat a un traçat existent fent servir els diferents modes booleans. Partirem del següent traçat:
Ens hem d'assegurar que aquest primer traçat ha estat fet en positiu, és a dir, que l'hem creat amb
i que a la miniatura per dins està blanc .A continuació afegirem un altre traçat i veurem el què succeeix si aquest segon el posem amb les diferents modalitats booleanes.
- Estudiem què passa si afegim uns altres traçats posant-los en el mode .
Podem observar a la miniatura que la zona blanca és la suma de les àrees. I si obtenim la selecció el resultat anirà com ja sabeu per on està pintat de blanc a la miniatura. - Estudiem ara el cas en que afegim altres traçats però ara en el mode .
El resultat que obtenim és que el nou traçat ha restat un tros a l'altre. I la selecció resultant que obtindriem per tant és la part blanca. 
Si afegim un nou traçat amb el mode booleà d'interescció el que obtenim és:
Aquest és el mode de "exclusió" i el resultat són les àrees no comunes dels dos traçats.
CONCLUSIÓ: Les seleccions compostes que obtenim, les zones blanques, són respectivament la unió, la resta, la intersecció i la exclusió dels diferents traçats.
EXERCICIS:
- Proveu això i obtingueu les seleccions.
- Obtingueu en diferents capes les formes següents fent servir un únic calaix de traçats cada cop:
- Inventeu-vos amb aquests mètodes booleans obtenir seleccions d'unes quantes figures nadalenques.
Booleans - 1a Part - Seleccions Booleanes
Fins ara coneixeu com afegir selecció amb MAYS i com restar selecció amb ALT.
Però a més d'afegir o restar seleccions de píxels existeixen més opcions. Aquestes opcions les trobem a la barra de propietats contextuals quan escollim qualsevol eina de selecció i són aquestes:
Els quatre botons serveixen respectivament per:
- Fer una selecció nova.
- Afegir selecció a la que ja tinguem en aquell moment. Cosa que ja sabíeu fer amb MAYS.
- Restar selecció a la que ja tinguem en aquell moment. Cosa que ja sabíeu fer amb ALT.
- Intersectar amb la selecció que ja tinguem en aquell moment.
Booleans - Àlgebra booleana
Wikiexplicació sobre l'Àlgebra Booleana
L'àlgebra booleana es fa servir en programes d'autoedició per fusionar, restar, intersecar, excluir,..., com Photoshop per exemple, i també a programació.
Photoshop - 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)
Més exercicis de photoshop
- link de tutorials photoshop. Aquí trobareu tutorials per continuar practicant amb photoshop.
- Cartells de pel·lícula. Podríeu fer també cartells de pel·lícules inventades. A internet teniu tot el material. En aquest cartell que us he simulat he fet servir fotos que m'he trobat per internet, entre les quals està Roberto Dueñas, Tom Cruise, Kevin Bacon, Jodie Foster, Harrison Ford, ... He fet servir els modes de fusió de capes(multiplicar, trama,...), Rasterització de text, deformació de text, perspectiva,... és a dir: coses que vosaltres ja heu tocat. Doncs ara és l'excusa per posar-vos a prova i continuar combinant les diferents eines que coneixeu. La base dels crèdits l'he agafada d'una altra peli. Eren lletres blanques sobre fons negre i he aplicat el mode de fusió tramat de tal manera que es veu a través del seu fons negre.
També podrieu, de pas, mirar cartells de pelis per inspirar-vos i recrear-los a la vostra manera. Analitzeu en aquests cartells les tècniques visuals que han fet servir i quins recursos tècnics de photoshop han pogut fer servir. - Fons de pantalla de la teva pel·lícula de culte preferida. Amb imatges que et trobis per internet sobre la teva peli preferida fes un colage de 1024x768. Per inspirar-vos mireu quin fons he fet de la peli Minority Report. Vosaltres teniu suficients coneixements per fer-ho també. Només cal que combineu les coses que sabeu. Si més no intenteu-ho. Si no us ensurtiu feu-m'ho saber.
- Un cop hagis fet un fons de pantalla de la teva peli de culte, per què no fas amb Image Ready la interfície de la web de culte d'aquesta peli?
- Anàlisi de webs tenint en compte criteris d'usabilitat, de comunicació visual i de composició. [Espereu que us acabi l'article d'usabilitat i que us digui quins ítems i quines webs us diré].
- Aquests dies hem estat fent exercicis de maquetació i composició amb el Image Ready i el Photoshop fent servir guies i sectors. Espereu d'aquí a uns dies que us faré un encàrreg per que practiqueu.
Photoshop - Exercici Aneuet
OBJECTIU: Fent servir els vostres coneixements de selecció i de màscares de capa aconseguiu a partir de les imatges següents ficar l'aneguet a dins de l'aigua:
Photoshop - Modes de fusió
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.
- 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..
- Disoldre: Tampoc no és un mètode de fusió. Sustitueix els colors superiors pels inferiors però de forma aleatòria.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- 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.
- Aclarir: Segueix una dinàmica completament inversa a la d'enfosquir, aconseguint l'efecte contrari.
- 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.
- Exclussió: Similar a diferència però amb menys saturació i contrast.
- 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.
- 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à. - Color: Les components del color dels píxels superiors predominaràn sobre els inferiors, dels que només es tindrà en compte la brillantor.
- 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.
- Subexposició lineal: Ilumina el color base per reflexar el color de fusió augmentant la brillantor. Fusionar amb negre no produeix canvis.
- 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.
- 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.
- 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.
- 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.
Photoshop - Exercici sobreexposar
Exercici:
Fes que aquest dia ennuvolat es converteixi en un dia clar amb les eines de sobreexposar.
Teoria del color
Existeixen diverses teories del color des dels grecs. Totes elles establien tota una sèrie de regles per definir entre d'altres coses l'objecte de l'ús dels colors i com mesclar-los. Les diferents teories del color han tingut també diferents motivacions. Es feien en funció del gremi des d'on s'estudiava o cap el que anaven dirigides.
Per exemple existeixen teories del color pictòriques destinades a reglamentar i ajudar als pintors en funció dels pigments existents. També existeixen teories del color més orientades a la psicologia de la percepció i altres que estàn realitzades des del punt de vista de la física(òptica i termodinàmica).
Una de les conclussions que va extreure Newton, amb el seu famós experiment en que va fer passar un feix de llum a través d'un prisma de vidre de costats no paral·lels, és que la llum es pot descomposar en feixos de llum de colors. 
La visió de la ciència no ha despertat massa entusiasme entre els artistes(pintors), acostumats a la mescla de pigments, ja que per aquest gremi ha estat poc aplicable mesclar colors llum ja que no disposaven de mitjans tecnològics encara per controlar la llum. Però gràcies a la informàtica la representació de gràfisme mitjançant monitors(que són uns artilugis que emeten "colors llum") ha canviat aquesta visió. Justament ara els video-artistes o els artistes en format web estàn fent servir el model tradicionalment més proper a la ciència.
PREGUNTA:
Si de lluny de la pantalla vosaltres veieu al monitor(o un televisor) moltíssims colors, com és que si us apropeu amb una lupa al monitor(o televisor) els colors es redueixen al Vermell, Verd i Blau?
La resposta és que tota la resta de colors que nosaltres veiem al monitor es "generen" en la nostra percepció a partir d'aquests tres.
Si de lluny de la pantalla vosaltres veieu al monitor(o un televisor) moltíssims colors, com és que si us apropeu amb una lupa al monitor(o televisor) els colors es redueixen al Vermell, Verd i Blau?
La resposta és que tota la resta de colors que nosaltres veiem al monitor es "generen" en la nostra percepció a partir d'aquests tres.
A la introducció hem estat parlant dels sistemes de color additius i sustractius. Recordeu que volien dir?
- Aditiu vól dir "que suma".
- Sustractiu vól dir "que resta".
Què és el que resta o suma? Resposta: La llum.
Llavors: quan tingueu un sistema de colors que al mesclar els seus colors primaris tendim cap al color blanc es tracta de colors aditius. I si al mesclar-los ens allunyem del blanc llavors el sistema de colors l'hem d'anomenar sustractiu.
MODEL RYB(Vermell, Groc, Blau)
Quan anàveu al col·legi de petits segurament us feien fer manualitats i vau començar a mesclar colors. Allà us vau adonar principalment de dues coses:- Que a mesura que anàveu mesclant els colors la cosa cada cop estava més negra.
- Al mesclar vermell i groc obtenieu el taronja. Al mesclar el blau i el groc obtenieu el verd. Al mesclar el blau i el vermell obtenieu el propre. És a dir que a partir de la mescla dels colors vermell, blau i groc obtenieu la resta de colors de l'arc de Sant Martí.
MODEL CMYK(Cyan, Magenta, Groc)
Més tard, si vau continuar fent una mica més d'arts plàstiques resulta que si anàveu a la botiga havieu de comprar tèmperes de colors cyan, magenta, groc i negre. Us vau adonar entre d'altres coses que el cyan no és el mateix blau i que el magenta és una mica rosa cosa que segurament us va sorprendre. Però també, al mesclar-los vau veure que obtenieu altres colors.
El sistema CMYK és el que es fa servir en arts gràfiques per imprimir. I també es fa servir a les vostres impresores.
MODEL RGB(Vermell, Verd i Blau)
Així com els anteriors el RYB i el CMYK són colors sustractius aquest altre és aditiu. Potser no és tant intuitiu que els anteriors ja que al principi xoca que al mesclar vermell i verd obtinguem groc. És a dir que al mesclar-los tendim cap a blanc. Aquest sistema és el que ens interessa per fer disseny de pàgines web. Farem servir aquests.
DIMENSIONS DEL COLOR
El color té tres components:
- Matiç. El que ens fa distingir els colors vermells dels blaus. Sovint els representen en un cercle cromàtic.
- Brillantor o tó. (trobareu també que li diuen tó al matiç; simplement és un abús del llenguatge i està equivocat).
- Saturació: La vivacitat dels colors, anant des d'escala de grisos fins a colors ben llampants.
Podriem dir que el color és tridimensional. Al só li passa una cosa semblant. El só té tres components: volum, nota(freqüència) i timbre.
COLORS PRIMARIS
Aquells colors a partir dels quals podem obtenir la resta o quasi la totalitat de la resta se'ls hi diu colors primaris. I als obtinguts per la mescla de primaris se'ls hi diu secundaris. Cada un dels sistemes de colors que hem citat tenen els seus colors bàsics o primaris.
La designació d'uns matiços en concret com a primaris és arbitrària. Tres colors del cercle cromàtic suficientment separats entre sí podrien fer el mateix paper.
- Físics i monitors fan servir RGB.
- Artistes fan servir: RYB.
- Arts Gràfiques i impresores: CMYK
- Psicòlegs fan servir: Blau, verd, vermell i groc, cadascún dels quals provoquen una reacció que no implica a les demés.
L'artista utilitza els colors, el físic les llums de color i el psicòleg s'interessa per les dues coses.
Colors Complementaris:
Aquells colors que al mesclar-los obtenim el color blanc. Per exemple: #ffff00 (groc) + #0000ff (verd). Bé, això no és exactament així ja que només funcionaria si són colors aditius.
Mireu aquesta adreça següent que us defineix els colors complementaris en funció del cercle cromàtic:
http://www.xtec.es/~aromero8/acuarelas/complementarios.htm
Allà, com veureu, ens diu que els complementaris estàn disposats en els costats oposats del cercle cromàtic, per una banda, i que al mesclar-los obtenim un color gris fosc tirant cap a negre, és a dir que es neutralitzen.
[To be continued...]
El color no és una propietat dels objectes sino de la percepció d'aquests que fem amb la vista-cervell...
Fisiologia del color, Filtres(els pigments es comporten com a filtres que només deixen passar...), semàntica del color,...
Photoshop - Dibuix Vectorial - 1a Part
Curvas de Bezier
Wikiexplicació:
Curvas de Bézier. Es un sistema que se desarrolló hacia los años setenta del siglo XX, para el trazado de dibujos técnicos, en el diseño aeronáutico y de automóviles. Su denominación es en honor a Pierre Bezier quien ideó un método de descripción matemática de las curvas que se comenzó a utilizar con éxito en los programas de CAD... (Segueix).
Hem vist que una de les formes per aconseguir sel·leccionar és a partir de traçats vectorials. Hem estat aprofundint aquests darrers dies en el dibuix vectorial des de Photoshop ja que això ens permet gaudir d'una altra forma més de sel·lecció. Sent la sel·lecció molt important a la hora de treballar a Photoshop. Una altra raó no gens menys important és que ens dona una mica més de joc a la hora de fer les nostres composicions en Photoshop.
En aquest aspecte aprofundirem en els aspectes vectorials del photoshop.
CONTROLANT EL DIBUIX VECTORIAL A PHOTOSHOP
EINES
A photoshop disposem de les següents eines per fer i controlar el dibuix vectorial:
Aquestes eines serveixen per sel·leccionar, en el cas de la fletxa negra traçats sencers i en el cas de la fletxa blanca en nodes d'aquests traçats. La fletxa blanca també permet controlar els agafadors dels nodes de les corves. I en funció de com s'inclinin i s'estirin aconseguim deformar les corves fins ajustar-les. Lo principal és que aconseguiu controlar el modelatge vectorial amb aquestes dues formes. Us recomano que practiqueu tot el que pogueu amb aquestes eines fins trobar-li la lògica i fins que guanyeu l'habilitat suficient.
Aquestes eines en realitat serveixen per crear formes vectorials predefinides igualment editables posteriorment amb les eines de control vectorial anteriors. Photoshop també disposa d'unes biblioteques de formes personalitzades. Si es vól també pot crear les seves formes personalitzades. D'aquesta manera disposariem de la forma vectorial d'un logo per poder-la fer servir sempre i quan ens calgués.FINESTRA TRAÇATS
La finestra traçats ens permet fer vàries gestions dels traçats i les màscares vectorials que fem servir en un arxiu de photoshop. En aquest exemple en concret es veuen dos traçats i una màscara vectorial o forma.A sota existeixen uns botons que permeten entre d'altres convertir un traçat en una sel·lecció, farcir de color en una capa la zona interna d'un traçat o pintar el contorn.
També hi ha un botó que permet convertir una sel·lecció en un traçat.
Una recomanació. Sempre que volgueu conservar un traçat convé que l'aneu anomenant si no voleu que desaparegui en iniciar un nou traçat, ja que l'anomenat "traçat de treball" es substitueix pel següent la propera vegada que es fa servir una ploma de Bezier. Aneu afegint traçats. Tants traçats com us calgui en el vostre treball.
Per últim cal que feu servir correctament el panell propietats.
Subscriure's a:
Missatges (Atom)
Subscriu-te a
Entrades
Comentaris