Manual d'Edició d'Imatges
Transcript of Manual d'Edició d'Imatges
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”