Curs: Anem per Feina. Centre Cívic Ter

10.30h a 12.00h
22 d’abril, 29 d’abril, 6 de maig i 20 de maig
2014

Disseny I (22 d’abril)

“Menys és més” ~ Ludwig Mies van der Rohe (1886-1969)

curs/curs-A3-A4-A5Formats estàndar

En disseny tenim la llibertat de treballar amb qualsevol format, però treballar amb els estàndars ens ajuda a cenyir-nos a uns models als que la gent ja s’ha habituat i que ja s’ha demostrat que funcionen.

  • Cartell A4 – 297×210
  • Cartell A3 – 420×297
  • A5 – 210×148,5
  • Targetó – 210×99
  • Tríptic – 297×210 (100+100+97)
  • Tarja – 90×50
  • Altres…

curs/curs-caixes-i-margesComposició

  • Textos i imatges: Són els dos elements amb els que treballarem.
  • Caixes: Els elements que utilitzem solen ser rectangulars. Això és per que es troben dins d’una caixa contenidora. La nostra feina és distribuïr aquestes caixes de forma ordenada all larg del document.
  • Espais en blanc: Per donar importància al contingut, és molt important donar aire: espai. Els espais en blanc permeten que el document respiri i es llegeixi millor.
  • Marges i guies: Les nostres caixes s’han d’alinear entre elles i amb el document. Per això definirem marges i farem servir guies que ens els marquin.

cartell fires 2013Informació a destacar (les 6 W)

El nostre disseny ha de respondre 6 preguntes. Per ordre d’importància serien aquestes.

  • What? Què?
  • Where? On?
  • When? Quan?
  • Who? Qui?
  • Why? Per què?
  • How? Com?

* Més cartells
* Tríptics

Exercici: Buscar les 6 w a les imatges de l’enllaç.

curs/curs-pixels-vectorsProgramari

Plantilles per a Inkscape: Cartell A4, tríptic, tarja 90×50.

curs/curs-imatges-impactantsÚs d’imatges

Les imatges són una de les parts més importants dels nostrs documents. Val la pena dedicar el temps que calgui a trobar una bona imatge.

  • En el cas de cartells, farem servir una sola imatge.
  • Imatges significatives i impactants.
  • Imatges de qualitat: 300ppp (ppp = Punts per polçada / dpi = Dots per inch)
  • Evitar imatges de fons que no deixen que es llegeixi bé el text.
  • Respectar els marges entre les imatges i el text.

 

Exercici de resum de la lliçó

Creació d’un cartell. Es pot fer un cartell qualsevol, però proposo fer tots el mateix, per comprovar com en poden sortir moltes versions diferents a partir del mateix material.

Informació de l’esdeveniment a anunciar

Segona festa del càntir. Breda. 13 de juliol de 2014. Fira internacional de ceràmica i terrissa. 13, 14 i 15 de juliol de 2014.

Imatge disponible

 

curs/curs-imatge-cantir

Imatge en png amb fons transparent

curs/curs-imatge-cantir

Imatge en jpg

Cartells fets a classe

curs-cartell-tamara curs-cartell-veronica curs-cartell-montse curs-cartell-joana

Cartell original

curs/curs-fira-del-cantir

Cartell original

 

 

 

Tancament

* Per què no s’han de demanar favors a un dissenyador :D (en anglès) 

 

Disseny II (29 d’abril)

“Keep It Simple Stupid” ~ Kelly Johnson (1910-1990)

Eines d’Inkscape

Aquesta és la barra d’eines principal d’Inkscape. Per aprendre les eines més senzilles ens centrarem només en les que us he posat en negreta i amb l’icona al costat.

curs/curs-barra-eines-inkscape

  • curs/curs-eines-selector Selector d’objectes senzill 
  • Selector complexe (de nodes)
  • Deformació d’objectes
  • curs/curs-eines-lupa Lupa (ampliar/reduir) 
  • curs/curs-eines-rectangle Rectangles 
  • Rodones
  • Polígons i estrelles
  • Espirals
  • Ma alçada
  •  curs/curs-eines-rectes Rectes i corves geomètriques
  • Ploma
  • curs/curs-eines-text Text 
  • Esprai
  • curs/curs-eines-goma Goma d’esborrar 
  • curs/curs-eines-cubell Cubell de pintura 
  • Degradats
  • curs/curs-eines-color Selector de color 
  • Diagrames

Com a exercici obrirem un document i provarem totes aquestes eines i les anirem comentant una a una. Ens centrarem especialment en l’eina de rectangles, emfatitzant la configuració dels farcits i dels contorns d’aquests, tant pel que fa a gruixos del contorn com a colors d’ambdós. Un cop coneguem l’eina de rectangles, podem aplicar aquests coneixements a l’eina de rodones i polígons.

Altres eines

curs-eines-basiques-1  curs-eines-basiques-2    curs-eines-basiques-3

Farem aquest exercici en tres passos. Primer jugarem amb tots els elements de la barra d’eines sense preocupar-nos de la composició. Tot seguit posarem guies al document i farem servir les eines d’alineació. Finalment amagarem les guies per veure el document final.

curs-eines-basiques-capesFarem proves amb les guies, l’alineació i les capes. Seguirem amb el mateix document i ordenarem tots els elements fent servir aquestes eines.

Les guies les podem editar clicant i arrossegant les regles al voltant del document. Un cop les tenim al document els hi podem fer doble clic per editar la seva posició amb més precisió.

L’alineació i les capes són dues finestres que podem obrir des dels botons superiors. Les icones són les mateixes que encapçalen les imatges que he afegit.

curs-eines-basiques-alineacioLes opcions d’alineació ens permeten alinear els objectes amb precisió, en comptes de a ull.

Les capes ens permeten controlar quins objectes es troben els uns davant dels altres i en quin ordre.

 

 

* Més sobre edició de text
* Text sobre un traç. És la manera de donar forma d’arc, etc… al text.
* Per aprofundir us podeu descarregar i imprimir aquest excel·lent tutorial en pdf (en castellà) 

Tancament

curs-dilbert

 

Disseny III (6 de maig)

“Think small (pensa en petit)” ~ Bill Bernbach (1911-1982)

Petit exercici de recordatori

Farem varies formes en un document amb guies i les alinearem i distribuirem amb les eines que ja coneixem. El resultat hauria de ser semblant al de la imatge que afegeixo a continuació.

curs-exercici-recordatori

Elaboració d’un tríptic

Els tríptics no se separen en tres parts exactament iguals. Per tal d’assegurar-nos que es pleguin bé, el plec de dins farà 97 mm, mentre que els altres dos faran 100 mm. Farem servir dues plantilles diferents, una per la part interior i una per l’exterior: Plantilla tríptic exterior, plantilla tríptic interior.

Per centrar-vos en el disseny i oblidar-vos del text en sí, podeu fer servir aquest text. Més tard ja el canviareu per el vostre contingut.

curs-triptic-1  curs-triptic-2  curs-triptic-3

Treballarem totes dues cares i ho imprimirem a casa per portar-ho el pròxim dia.

 

Petites nocions de GIMP

curs-gimp-logoSi no tenim el Gimp instal·lat ens el baixarem, i l’instal·larem en un moment.

El Gimp ens permet infinites possibilitats a l’hora de modificar imatges. Dues de les més llamineres són les eines per deformar la imatge i els filtres per canviar totalment la imatge. Aquestes eines són molt fàcils de descobrir per un mateix, o sigui que ens centrarem en altres aspectes més professionals del programa.

Objectius:

  • Consultar la informació de la imatge: mida i punts per polçada.
  • Canviar la mida de la imatge.
  • Canviar la mida de l’àrea de treball.
  • Retallar la imatge.
  • Guardar en diferents formats i guardar optimitzant per a web.
  • Passar les imatges a inkscape, combinant-ho amb l’exercici del tríptic.

Exemple de cartell acabat

Us passo un cartell acabat que he fet recentment. És senzill però l’arxiu està ben acabat. Així hem de fer els nostres cartells i altres materials. Pulint fins l’últim detall.

curs-enfaixa-t-11  curs-enfaixa-t-esquema

curs-cartell-assajos-01.svg

Tancament

curs-broma-projecte

Blogs i llocs web (20 de maig)

“La simplicitat sempre és preferible a la complexitat, especialment pel que fa als web, on cada 5 bytes que ens estalviem guanyem un milisegon en temps de càrrega.” ~ Jakob Nielsen (1957)

Què és un web? Què és un blog?

Sovint fem servir aquestes dues paraules com si fóssin dos conceptes oposats, però això no és així. Un lloc web és un conjunt de pàgines web, normalment ordenat per unes pestanyes que solen tenir un ordre jerarquic. Un blog és un tipus de lloc web en el que hi ha pàgines ordenades cronològicament. A aquestes pàgines, se los sol anomenar entrades, per distingir-les de les altres pàgines. Avui dia la majoria de llocs webs combinen seccions jerarquiques amb seccions cronol·logiques, amb la qual cosa ja no té massa sentit fer una distinció gaire ferma entre què és un blog i que és un web.

Donant d’alta un web amb wordpress.

Només hem de crear un usuari a http://wordpress.com/ i anar a “Els meus blogs” i crear un blog nou. Crear un blog nou amb wordpress es fa amb cinc minuts. De rellotge.

Com a exemple he creat un web anomenat Proves CCTer.

curs-crear-un-web

 

Pàgines i entrades

Com hem dit abans les pàgines són la part més estructurada del nostre blog. Les podem fer servir per fer els apartats de portafoli, productes, contacte, inici, localització… Les entrades les podem fer servir per parlar dels esdeveniments propers, o els que ja hagin passat. Seria l’apartat de notícies, articles, pensaments, reflexions… idees disperses que no responen a un ordre tant concret com al de les nostres pàgines.

* Truc: A Opcions > Lectura podem configurar quina volem que sigui la nostra pàgina d’entrades i si volem posar una pàgina estàtica de pàgina d’inici.

Menú

El menú ens servirà per ordenar les nostres pàgines i entrades de manera que siguin fàcils de navegar per als nostres lectors. Si mirem com a exemple http://tavernadelsubira.cat/ veurem que al menú hi tenim Inici, Localització, Horaris, Reserves i Fotografies. Per últim hi ha un element anomenat Blog, on es recullen les entrades.

curs-captura-tavernadelsubira-cat

Ginys

curs-ginysPer afegir funcionalitats al nostre web hi podem afegir moduls. Aquests es troben a Aparença > Ginys i ens permeten afegir un botó de Facebook o de Twitter, una galeria de Flickr o d’Instagram, una caixa de cerca… d’entre moltes altres coses. WordPress ja vé amb alguns Ginys per defecte. Els treurem i posarem els que més ens agradin.

Temes

Podem canviar l’aparença del nostre web fàcilment fent servir els temes. Jo per exemple hi he aplicat el tema Fictive, que és un tema gratuït. N’hi ha un munt de gratuïts, i també hi ha opcions de pagament.

curs-tema

Webs que hem publicat des de la classe

Tancament

curs-tira-mauro-entrialgo

Valoració general

He gaudit molt impartint aquest [primer] curs. M’ha agradat la interacció amb el grup i n’he après moltes coses. Espero que algunes de les idees que he intentat transmetre tambe hagin arribat a bon port. Ara que el curs ja ha acabat obro la secció dels comentaris, per si els estudiants hi voleu deixar alguna anotació, positiva o negativa. Qualsevol altre visitant d’aquesta pàgina també està convidat a participar-hi.

 

Deixa un comentari

Els camps obligatoris se senyalen amb *.