Novembre de 2012V1.0

Edició d’imatges per a la Web

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.

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.

9

16

4

3

Observem que al dividir ens dona el mateix valor. • 16/9 = 1.77• 1920/1080 = 1.77La proporció es la mateixa.

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.

Altura modificada

Amplària modificada

La UV en píxels

El disseny Web de la Universitat de 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

960px

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.

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

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”

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”

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.

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.

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”

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.

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.)

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)

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”

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