disseny lliure ule

8/14/2019 disseny lliure ule

http://slidepdf.com/reader/full/disseny-lliure-ule 1/10

:: Context i història ::

El disseny és un concepte actual, que es basa en lacombinació entre allò estètic i allò pràctic. El disseny gràfic esbasa en la meteixa combinació, però enfocat exclusivament ales dues dimensions (no a objectes, sinó a paper i, en tempsactuals, pantalla).

La introducció dels tipus mòbils per Johannes Gutenberg (la imprempta) va fer els llibres mésbarats de produir, augmentant la seva difusió. Els primers llibres impresos (incunables) van marcarel model a seguir fins al segle XX. El disseny gràfic d’aquesta època es coneix com Estil Antic(especialment la tipografia que els primers tipògrafs van usar) o Humanista, com l’escola filosòficapredominant de l’època.

El disseny gràfic no comença a identificar-se com a tal fins a finals del segle XIX. Al segle XX vaestablir una reacció contra la decadència de la tipografia i el disseny de finals del segle XIX.

:: Píxels o vectors? ::

Les imatges digitals poden ser MAPA DE BITS o VECTORIALS.

Les imatges de bits estan formades per PÍXELS. Cada píxel guarda la informació de color de lapart d’imatge que ocupa.Aquest tipus d’imatges són les que creen els escànners i les càmeres digitals. Aquests tipusd’arxius ocupen molta més memòria que no pas els d’imatges vectorials. Quan un arxiu s’ampliamolt es distorsiona la imatge, mostrant-se el “mosaic de píxels” i una degradació en els colors. Al’ampliar excessivament la mida, la imatge perd nitidesa i ressolució.

Alguns conceptes bàsics

Imatge en alta ressolució Imatge en baixa ressolució Píxels (Zoom a la imatge debaixa ressolució)



Les imatges vectorials són gràfics formatsa base corves i línies a través d’elementsgeomètrics definits a través de VECTORS (coordenades).Les imatges vectorials no pateixen pèrdua de qualitat.

Les primeres serveixen, i fan la funció molt bé, per a pantalles

d'ordinador [per exemple per la web (quadradets)] i, les altres es podenestirar/ampliar sense pèrdua de ressolució [per a impressió].

:: Composició ::

La composició és la manera com s’ordenen els elements vistos dins de l’enquadrement. El resultatfinal de la composició es veu afectada pels referents culturals, el tamany i els colors delselements...

Distibució: No existeixen regles rígides respecte a la composició i menys respecte a on han decol·locarse els objectes dins del enquadrament. No obstant, es important que el/la dissenyador/aconegui alguns recursos l’eficàcia dels cuals està demostrada i que poden ser d’utilitat per ressaltarel motiu o transmetre diferents sensacions.

Proporció Àurea: Relació de mesures que es troben a la natura ique és repeteix matemàticament, per tant, ens resultenarmònicament eficaces a l’hora de compondre, distribuir i fixar eltamany dels elements. Des de l’antiguitat s’ha fet servir aquestamesura armònica com símbol de perfecció, ja que servia combase per reproduir el entorn natural sota un criteri matemàtic deproporcions.

Ordre de lectura: En la cultura occidental l’ordre de lectura visual és la mateixa que la de textos(de esquerra a dereta i de dalt a abaix).

Llei de la compensació de masses: Cal partir de que els elements tenen un pes visual. En lanostra ment pesa més aquell element que ens crida més l’atenció, ja sigui pel color, pel tamany,perquè es troba en el centre de l’enquadrament, o perquè el tenim en primer pla, més definit, i laresta en segon pla i borrós, per exemple. La compensació de masses és el joc de combinar elspesos dels diferents elements per a trobar l’equilibri. Es pot fer la composició que es vulgui sempreque els pesos quedin compensats.



guerrilhagrafica.info

:: Color ::

El color és la sensació causada per la llumquan aquesta interactua amb l’ull, el cervell ila nostra experiència. La percepció del colores veu altament influïda pels colorsadjacents en l’escena visual.

La teoria del color es refereix a ladescripció i gestió d’aquests colorsal monitor i a la impressió. La teoriadel color té relació amb totes lesàrees del procés de producciógràfica: presentació en pantalla(RGB)

(barreja de colors additiva ocolors llum), i impressió (CMYK)(barreja de colos substractiva ocolors pigment).

:: Llenguatge visual ::

El llenguatge visual és el cojunt de “normes” que utilitzem per a expressar-nos gràficament. Elllenguatge visual i la composició estàn molt lligats, ja que la composició d’una imatge és una de leseines del llenguatge visual.

L’expressió gràfica es un complement indispensable per a la realització de missatges amb sentit,que facin una síntesi de la idea a transmetre. Parteix de la necessitat de captar l’atenció de elsreceptors mitjançant un llenguatge conegut i llegible.

[…]- Més informació

- Manual de producción gráfica.Recetas.JOHANSSON,Kaj; LUNDBERG, Peter; RYBERG, Robert.Ed. Gustavo Gili, SA. ISBN: 84-252-1739-3 - www.Wikipedia.org

- http://www.blografico.com - http://www.alzado.org

- http://www.imprentaweb.com - http://www.pauloporta.com



Actualment fem servir els ordinadors per transmetre missatges visuals. Hi ha multiples programes.Per simplicitat, i per que apostem per un ús d’eines realitzades de manera col·laborativa i

oberta, aquest taller es basa en eines lliures (programari o software lliure). Perquè el model derelacions econòmiques i socials es reflecteix, també, en el programari que fem servir.

En aquest taller farem servir bàsicament dues eines:

:: Gimp ::

(www.gimp.org)Aquest programa és per al retoc de les imatges i treballarem sobre píxels.

Temari: [2]

[1]- Repàs (ràpid) d'eines

- Totes les eines actuen sobre la capa on us trobeu.

[2]- Exercici de selecció i retallar

- SELECCIÓ- deseleccionar >> [ctrl+majsc.+A]- selecció inversa >> [ctrl +i]

- SUMAR SELECCIONS >> prement [majúscules] mentre selecciones

- RESTAR SELECCIONS >> prement [control] mentre selecciones

- VARETA MÀGICA: només píxels contiguos (a dins d'un contorn)

- SELECCIÓ PER COLOR: igual que la vareta màgica però a tota laimatge, no només a un contorn.

- SELECTOR DE CONTORNS: que s'ajusta al contorn amb unmagnetisme.

- SELECCIONAR A TRAVÉS DE PINZELL:pintant (afegim a la selecció; esborrant (treiem de la selecció)

Retallar la imatge [amb totes les capes] o sols la capa actual.Prement [Crtl] >> es manté proporcionalitat.

Programes de disseny lliures



[3]- Adjusts de color [brillo-contrast, canals]

- BRILLO/CONTRAST: afegir o treure-li llum; el "contrast marca més diferència entre elscolors"

- UMBRAL: (molt adient per fer plantilles/serigrafia)

- RGB o CMYK

[4]- Capes [paper de ceba]

-FUSIONAR CAPES [Imagen>> Aplanar, etc], ocultar, lligar, opacitat, "modos" entrecapes...]

[5]- Guardar com...

FORMATS en què es poden guardar les imatges:

- TIFF: un tipus d’arxiu estàndard per a guardar imatges d’alta qualitat. Compatibleamb els sistemes operatius Windows, Linux, Mac, i conegut per molts programes de retoc i ediciógràfica. Si tenim algun dubte sobre com enviar un arxiu per a impressió o edició, optarem pelformat universal TIFF, per què es pugui obrir i editar sense problemes. Al emmagatzemar un arxiuen formato TIFF, es guarda amb 48 bits de color incloien’t-hi capes i canales alfa.

- RAW: només es troba disponible en càmeres digitals sofisticades.Conté els píxels en brut tal i com s’han adquirit. Normalment al funcionamient dels altres formatsque utilitzen las càmeres digitales (Tiff y JPEG) hi participa el sensor per a transmetre el senyalelèctric i convertir les dades d’analògiques a digitals, però en canvi els píxels que capta elprocessador de la càmera en el caso del RAW, els píxels no es processen ni es transformen, esmantenen en brut tal qual. A aquest procés se l’anomena també “negatiu digital”.

Inconvenients: pes de l’arxiu. No es pot imprimir ni visualitzar directament.

- BMP: l’utilitza el sistema de Windows. Pot guardar imatges de 24 bits (milions decolors), 8 bits (256 colors) i menys. Compressió sense pèrdua. Ús: imatges de poc pes...

- EPS (Encapsulat PostScript): Aquest arxiu l’ha desenvolupat la companyiaAdobe. Es poden guardar en aquest format, tant mapa de bits com imatges vectorials. Adequadoper realitzar intercanvi d’archivos entre programes de maquetació. Junt amb el format TIFF, és undels estàndards en el “mundillo” de l’autoedició. Un cop s’obre l’arxiu amb Gimp les dades de la

imatge i els gràfics vectorials que pugui contenir l’

encapsulat es rasteritzen, és a dir, esconverteixen a píxeles.Inconvenientes: Less dades guardades es trobaran dins d’una càpsula, encapsulats, així

que que si es volen modificar, s’han de tractar amb el programa que els va crear. Si es volimprimir un arxiu EPS directament, hem d’utilitzar una impressora compatible amb PostScript.

-PSD: És un format nadiu de photoshop . Guarda els arxius amb 48 bits de color ipermet emmagatzemar totes les capes, canals, etc. El PSD quasi no té compatibilitat amb altresprogrames.



guerrilhagrafica.i

Inconvenients: possible incompatibilitat entre diferentsversions del mateix programa (Phostohop)

- PDF (portable document format): Indiferent de la plataforma (linux, windows,mac, etc) s’utilitza cada vgada més i és considerat un altre format estàndard.

- JPEG (The Joint Photographers Experts Group): S’

aprofita de certes limitacionsen la visió humana per aconseguir altes taxes de compressió. És un dels pocs formats que sesoporta a internet (Web). Totes las càmeres digitas i escànners emmagatzemen les imatges enformat JPEG, no obstant i degut a que la compressió d’aquest format afecta a la qualitat d’imatge,es pot escollir diferents nivells de compressió: a menys compressió millor qualitat. A més altacompressió pitjor calidad (per exemple per a web, es pot arribar a comprimir fins el 10% del’original). Soporta 24 bits

* No guardar imatges en formato JPEG si s’han de modificar.* Cada vegada que obrim un arxiu o l’editem, la imatge pateix una compressió i pèrdua de

qualitat.* Abans d’editar una imatge en JPG, en guardarem inicialment una còpia en formato BMP o TIFF

amb la màxima profunditat de color (quantitat de bits d’informacó necessaris per a representar elcolor de un píxel).

- GIF: Aquest tipus d’arxiu va ser creat amb la finalitat d’obtenir arxius de mida moltpetita. El GIF és molt indicat per guardar imatges no fotogràfiques com ara: logotips, imatges decolors plans, dibuixos, etc... Guarda imatges de 8 bits, no 8 bits por cada color RGB, sinó queindexa solo 256 colores com a màxim(en total). Un gran aventatge d’aquest format és quepodemos fer transparàncies en la paleta de colores, fent que aquest color quedi invisible. Aquestformat permet crear animacions a través de fotogrames seqüencials.

- PNG: Podríem dir que està entre el GIF i el JPEG. Usa estàndards lliures decompressió, arribant a comprimir tant com el gif però amb més qualitat [24 bits de profunditat decolor (com el JPEG). El PNG no permet arxius animats, tot i que s’està treballant en formatsbasats en el png (mng y apng). També, igual que el JPEG, s’usa per web... però degut a que faservir estàndards oberts (i això sembla no agradar gaire a Windows) les versions antigues de

l’Explorer no las reconeix...Photoshop: Fa una mala selecció dels mètodes de filtrat i genera fitxers de major mida.


· Perfils http://www.jesusda.com/blog/index.php?id=147

· Perfils/Plugin pel GIMP (RGB > CMYK) http://www.blackfiveservices.co.uk/separate.shtml

· http://www.hachemuda.com/video-tutoriales-gimp/

· http://www.digitalfotored.com/imagendigital/formatosarchivos.htm

· http://tomy.fotolibre.net/comos/retoque-digital/calibracion-del-monitor-en-linux/



[5]



Actualment fem servir els ordinadors per transmetre missatges visuals. Hi ha multiples programes.Per simplicitat, i per que apostem per un ús d’eines realitzades de manera col·laborativa i

oberta, aquest taller es basa en eines lliures (programari o software lliure). Perquè el model derelacions econòmiques i socials es reflecteix, també, en el programari que fem servir.

En aquest taller farem servir bàsicament dues eines:

:: Inkscape ::

(www.inkscape.org)Aquest programa és vectorial.

En aquest programa es treballa amb objectes, que estan definits per un contorn i un "relleno" , totsdos estan basats en vectors.

Una imatge vectorial és una imatge digital formada per objectes geomètrics independents(segments, polígons, arcs, etc.), cadascún d’ells definit per diversos atributs matemàtics de forma,de posició, de color, etc. Per exemple un cercle de color roig quedaria definit per la posició del seucentre, el seu radi, el grossor de línia i el seu color.

Avantatges

* Depenent de cada cas concret, les imatges vectorials poden requerir menys espai al disc queno pas un bitmap. Les imatges formades per colors plans o degradats senzills són més factibles deser vectoritzades. Com menys informació es necessiti per a crear la imatge, menor serà la mida del’arxiu. Dues imatges amb dimensions de presentació distintes però amb la mateixa informacióvectorial, ocuparan el mateix espai al disc.

* No perden qualitat al ser escalades. En principi, es pot escalar una imatge vectorial de formail·limitada. En el cas de les imatges rasteritzades, s’arriba a un punt en el que és evident que laimatge està composta per píxels.

* Els objectes definits per vectors poden ser guardats i modificats en el futur.* Alguns formats permeten animació. Aquesta es realitza de forma senzilla mitjançant operacions

bàsiques com traslació o rotació i no requereix cap gran quantitat de dades, ja que allò que es fa ésreubicar les coordenades dels vectors en nous punts dins dels eixos x i y (i z en el cas de lesimatges 3D).

Inconvenients

* Els gràfics vectorials en general no són aptes per codificar fotografies o vídeos presos al "mónreal", tot i que alguns formats admeten una composició mixta (vector + imatge bitmap).Pràcticament totes les cámeres digitals emmagatzemen les imatges en format rasteritzat.

* Les dades que descriuen el gràfic vectorial han de ser processades, és a dir, l’ordinador ha deser suficientement potent per a realitzar els càlculs necessàris per formar la imatge final. Si elvolum de dades és elevat es pot realentir la representació de la imatge en pantalla, inclús traballantamb imatges petites.

Programes de disseny lliures



* Per més que es construeixi una imatge amb gràfics vectorials laseva visualització tant en pantalla, com en la majoria de sistemesd’impressió, en última instancia ha que ser traduïda a píxels.

La principal motivació d’Inkscape és proporcionar a la comunitat una eina de codi obert de dibuix

SVG que compleixi completament amb els estàndards XML, SVG y CSS2.

Temari:

[1]- Repàs d'eines

Fletxa de sel·lecció: serveix per moure, girar, etc els objectes.Fletxa d’edició: amb aquesta modifiquem els nodes que defineixen l’objecte.Lupa: acostar-se als objectes o allunyar-se’n.Quadrat, Cercle, Polígon i Espiral: Dibuixar fent servir elements geomètricsbàsics… i no tant, com per exemple l’espiral!

Llapis: realitza un traç “dur”.Dibuixar amb corves de Bézier: es un mètode de dibuxar contorns defineixin lescorves punt a punt.Plomilla: traç suauText: es pot realitzar un quadrat de text, molt útil per maquetació de textos.Vincular elements: Útil per realitzar diagrames, organigrames, etc“Cuenta gotas”: sel·lecciona el color que volguem. Si tenim un objecte seleccionaten el moment d’assenyalar a un color aquest objecte agafa aquell color.

[2]- Vectoritzar imatges

Per vectoritzar una imatge ens anirà millor si ja està tractada (amb el gimp, per

exemple) simplificant-la (amb brillo i contrast a l’exemple, o Umbral si és méscomplicada).

Pasadas múltiples: crea un grup de traços >> ctrl+maj+G per desagrupar "lespassades" de la vectorització... així tenim dividits el colors.

Quan es vectoritza una imatge no s’emmagatzemen dades per a cada punt de laimatge, sinó que ES DESCRIUEN MATEMÀTICAMENT LES LÍNIES I CORVESQUE CONSTITUEIXEN LA IMATGE. A aquests traços se’ls anomena vectors.

[3]- Traç i objecte

Un traç es podria definir com “una línia”. Quan un traç es tanca, conforma un “objecte”. L’objectees pot definir amb contorn (el que abans hem anomenat com a “traç”) i “relleno” . Les propietats(*)

del traç i del “relleno” es tracten independentment tot i formar part del mateix objecte.

(*) color, opacitat, estampat, degradat…



guerrilhagrafica.info

[4]- Corves de Bézier

Si en comptes d’unir dos punts amb una recta s’uneixen amb una corva, sorgeixen els elementsessencials d’una corva Bézier: els punts s’anomenen punts d’anclatge o nodes. La forma de lacorva es defineix per uns punts invisibles en el dibuix, anomenats punts de control, manejadors o

manetes.

Per a crear segments suaus, corvats, es fa clic i es manté apretat el botó mentre s’ajusta la formade la corva. Aquesta forma pot modificar-se posteriorment, movent els punts de control segons esdesitgi. Els segments rectes poeden connectar-se amb segments corves.

[5]- Tipografia per imprimir

Vectoritzar la tipografia perquè sinó, al passar el document d’un ordinador a l’altre, pot ser queaquest altre no tingui les mateixes fonts que l’ordinador d’orígen i que la substitueixi per una altra, iaixí quedi un resultat completament diferent del document que havíem fet d’orígen.

Al vectoritzar la tipografia, el que fem és transformar un text amb una font determinada en“dibuixos”. Això fa que el text, un cop vectoritzat, ja no es pugui tractar com a tal, i per tant no espot “escriure”.

[6]- Incrustar imatges

Per afegir imatges només fa falta arrossegar-les o importar-les. Quedan automàticament afegidesa l’arxiu.


http://es.wikipedia.org/wiki/Wikiproyecto:Ilustraci%C3%B3n/Taller_gr%C3%A1fico/Introducci%C3%B3n_al_dibujo_vectorial

http://es.wikipedia.org/wiki/Curva_de_B%C3%A9zier

http://www.inkscape.org/doc/basic/tutorial-basic.es.html

http://joaclintistgud.wordpress.com/category/tutoriales/inkscape/

http://www.gimp.org.es/modules/downloadse/viewcat.php?cid=10

http://docs.google.com/View?docid=dhs3vfzq_93dj7gq3

http://movimientolibre.com/presentaciones/inkscape-taller/inkscape-taller.pdf

http://joaclintistgud.files.wordpress.com/2008/05/logo_a_logo.pdf

http://screencasters.heathenx.org [vídeo-tutorials ]

disseny lliure ule

Documents

Transcript of disseny lliure ule