Manual d'Edició d'Imatges per al gestor de continguts UV. Fent Us de la ferramneta Picasa.

1. Edició d’imatges per a la Web
V1.0 Novembre de 2012

2. Introducció
 Característiques fonamentals de les imatges:
 Resolució
 Format
 La resolució d'una imatge, s’expressa en píxels i indica el grau de detall que pot observar-se en la
imatge.
 Tenir major resolució es tradueix a obtenir una imatge amb més detall o qualitat visual
 Un píxel, plural píxels (acrònim de l'anglès picture element, "element d'imatge") és la menor unitat homogènia en
color que forma part d'una imatge digital, ja sigui aquesta una fotografia, un fotograma de vídeo o un gràfic.

3. Resolució d’imatges
 Per a les imatges digitals, la convenció és descriure la resolució de la imatge amb dos nombres
enters:
 Ample: columnes de píxels
 Altura: quantitat de files de píxels
 Els monitors d’ordinador també tenen com a característica fonamental la resolució
 Le resolucions de pantalla típiques son 1024x768 (4:3), 1280x1024 (5:4) i 1920x1080 (16:9)
 La relació entre l'amplària i altura determina la forma de la pantalla (Ample x Altura)
 [4:3] Típica de pantalles antigues (Forma quadrada): 4 columnes d'amplària per cada 3 d’alt.
 [16:9] Panoràmica (Forma rectangular): 16 columnes d'amplària per cada 9 d’alt.
16
Observem que al dividir ens dona el
mateix valor.
9 • 16/9 = 1.77
• 1920/1080 = 1.77
3 La proporció es la mateixa.
4

4. Resolució d’imatges
 Una errada típica es augmentar la mida d’una imatge venint d’una resolució inferior. En aquest
cas tindrem un imatge pixelada. Suposa una pèrdua de qualitat i nitidesa.
 Una imatge pixelada es aquella que no té suficient resolució per l’espai que s’espera que ocupi.
 Exemple: Una imatge de 2x2 es vora pixelada si la representem en un espai de 4x4 píxels
en la pantalla.
 En algunes ocasions sols modifiquem un dels dos paràmetres; el que dona lloc a imatges
deformades. Observem una pèrdua de nitidesa.
Amplària
modificada Altura
modificada

5. La UV en píxels
 El disseny Web de la Universitat de 960px
València te una amplària màxima de 960
píxels.
 L’altura varia en funció a la quantitat
d'informació disponible en la pàgina en la
que ens trobem.
 Les mides de les diferents components
gràfics i de disseny cal respectar-los sense
cap tipus de dubte.
 Mides:
 Spot principal: 940 x 222
 Banner: 220 x 60
 Spot Interior: 700 x 150
 Destacat Imatge Text: 220x115
 En les cas de les imatges de novetat es
recomanable fer us d’una resolució de
 Imatge Novetat: 145x90

6. Formats i noms d’arxiu
 Els formats típics de imatge son jpg, .gif i png.
 PNG és una bona opció per a la transparència i la no pèrdua de dades, arxius més petits.
 GIF, actualment, només és útil per l'animació i per produir petites imatges de 8-bits.
 JPG segueix sent el rei de les fotografies i les imatges en Internet, però vagi amb compte, ja que el seu arxiu es
degrada amb cada modificació.
 En internet i en el llenguatge informàtic, donat que son d’origen anglès, poden haver problemes
de codificació amb l’ús de caràcters externs a la llengua saxona.
 Per això es convenient no fer us dels mateixos al anomenar arxius i imatges. Son recomanables
noms d’arxiu sense accents, dièresis o espais.
Content Server [Important]
 En Content Server, la ferramenta en la que treballem ja s’han donat problemes derivats dels noms
de les imatges que volem inclou-re en la plataforma.
 Altra particularitat de Content Server es que si realitzen alguna modificació sobre la imatge ja
adjunta a un component per tal de fer efectiu el canvi de imatge cal NO gastar el mateix nom que
la imatge anteriorment adjuntada.

7. Edició d’imatges
 Com a ferramenta per l’edició d'imatges farem us de Picasa de Google.
 Gratuït
 Multi-plataforma
 Descarregar en: http://picasa.google.es/
 Instal·lar la ferramenta

8. Treballant amb Picasa
 Aquesta es la pantalla inicial del programa Picasa
 Ens apareixen les carpetes ordenades que haguem importat a la nostra biblioteca
 Per entrar a editar/retallar una imatge doble clic a sobre la mateixa
 També podem editar directament una imatge arrastrant-la a l’aplicació des de el escriptori
 A l’hora de crear un Spot, Banner o imatge de novetat es FONAMENTAL partir d’una imatge amb resolució
superior en amplària i altura superior a la resolució de la nova imatge a crear. Per tal de evitar deformacions o
pixelacions.
 Obtenim la resolució amb el botó de informació.
 Observem la columna de “Propiedades”

9. Retallar amb Picasa
 La columna de Propietats ens informa de la resolució de
partida en “Dimensiones”
 Observem la opcions d’edició d’una imatge en picasa
 Cliquem a sobre la 1ª opció “Recortar”
 Al entrar a retallar ens interessa treballar amb les relacions
de aspecte personalitzades.
 Creem aquelles que s’adapten al elements gràfics de
Content Server amb “Añadir relación de aspecto
personalizada”

10. Crear relacions d’aspecte
 Creem la relació que ens ajudarà a retallar Banners 220x66.
 Després d'acceptar ja ens apareixerà al llistat de relacions guardades.

11. Crear relacions d’aspecte II
 Fem també:
 Spot principal: 940 x 222
 Spot Interior: 700 x 150
 Imatge Novetat: 145x90
 Destacat Imatge Text: 220x115
 Aquest es el llistat una vegada guardades totes les relacions
d’aspecte.
 Triem ara la de Spot per retallar una imatge que volem fer
gastar com a Spot de portada.

12. Creant un Spot amb Picasa
 La pròpia aplicació en dona ja alguns retalls recomanats.
 Però també podem fer-ho de forma Manual
 Una volta ressaltada l'àrea de la nova imatge clicar a sobre de “Aplicar”

14. Exportar/ Redimensionar
 Observem en la barra inferior la resolució de la nova imatge que guarda la proporció d’aspecte del
Spot.
 Es Fonamental que aquesta nova imatge es mantingui superior en ambdós valors de resolució a la
resolució del spot (940x222).
 En aquest cas:
 2405 > 940
 567 > 222
 Per obtindre la imatge final clicar a sobre de Exportar.

15. Exportar/ Redimensionar II
 Fixar la amplària exacta de la imatge: 940px en aquest cas concret.
 Fixar on guardem la imatge i “Exportar”.
 En cas necessari modificar el nom (sense espais, accents, dièresis, etc.)

16. Desfer retall
 Per tal que la pròxima vegada que accedim a la biblioteca la imatge aparegui com la original.
Clicar a sobre de “Deshacer Recorte”

17. Incloure Text
 Per tal de Incloure Text: Seleccionar “Texto” en la tercera fila segon element.
 Opcions com al Word: Font, Mida, Negreta; Alineació
 En el cercle unt a la T obscura elegim el color (Es recomanable fer gastar el BLANC)
17

18. Incloure Text II
 Després d’escriure a sobre la imatge; podem variar totes les opcions de color, font i mida de la
lletra. Veurem els canvis en temps reial.
 Finalment clicar a sobre “Aplicar”, per tal de consolidar la imatge.
 Passem ara a l’etapa de “Exportar”
18

19. Borrar Text
 Per tal de recuperar la imatge sense text per a futures edicions: “Borrar Todo”
 Aplicar, després de “Borrar Todo”, per consolidar l’esborrada del Text
19