mirror of
https://github.com/SrIzan10/edicion-en-html.git
synced 2026-06-28 03:12:25 +00:00
291 lines
13 KiB
HTML
291 lines
13 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
|
|
<html lang="es-es">
|
|
<head>
|
|
<title>Trabajando con los gráficos</title>
|
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
|
|
|
|
<!-- compliance patch for microsoft browsers --><!--[if lt IE 7]>
|
|
<script src="../ie7/ie7-standard-p.js" type="text/javascript"></script>
|
|
<![endif]-->
|
|
<link type="text/css" href="../nvu2005.css" rel="stylesheet">
|
|
|
|
<link rel="stylesheet" href="../multi2.css" type="text/css">
|
|
|
|
<link href="../body.css" rel="stylesheet" type="text/css">
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
<div id="localizador">
|
|
<p>Multimedia>>Imagen</p>
|
|
|
|
</div>
|
|
<div id="flechadcha">
|
|
<a href="multi1d.htm" title="avanzar"><img src="../Images/flechadcha.gif" border="0"></a>
|
|
</div>
|
|
<div id="flechaizq">
|
|
<a href="multi1b.htm" title="retroceder"><img src="../Images/flechaizq.gif" border="0"></a>
|
|
</div>
|
|
|
|
<div class="solapas">
|
|
<ul>
|
|
|
|
<li><a href="multi1.htm">Conceptos
|
|
generales</a></li>
|
|
|
|
<li><a href="multi1b.htm">Formatos
|
|
gráficos</a></li>
|
|
|
|
<li class="activo"><a href="multi1c.htm">Escalar
|
|
imágenes</a></li>
|
|
|
|
<li><a href="multi1d.htm">Recortar y rotar</a></li>
|
|
|
|
<li><a href="multi1e.htm">Insertar
|
|
imágenes</a></li>
|
|
|
|
<li><a href="multi1f.htm">Líneas e
|
|
imagen fantasma</a></li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<div class="principal">
|
|
<h2>Escalar imágenes</h2>
|
|
|
|
<p>Últimamente empiezan a aparecer un cierto
|
|
número de utilidades de caracter gratuito que nos permiten
|
|
realizar una serie de modificaciones en nuestras imágenes
|
|
para adaptarlas a su utilización en la WEB. El principal
|
|
problema que se encuentra es que, aquellas que ofrecen unas
|
|
prestaciones suficientes se encuentran en inglés. Otra
|
|
alternativa que puede ser válida es el software que
|
|
acompaña a los escáneres, ya que en muchos casos
|
|
ofrece las funciones necesarias y está en castellano. Ahora
|
|
bien, teniendo en cuenta que no todo el mundo tiene que disponer de un
|
|
escáner se ha optado por la utilidad que pasamos a revisar.</p>
|
|
|
|
<p>Aunque se trata de un programa muy potente con gran cantidad
|
|
de posibilidades interesantes para el tratamiento de imagen,
|
|
nos
|
|
centraremos en la aplicación de Gimp para la
|
|
modificación del tamaño de las
|
|
imágenes y su conversión de uno a otro formato.</p>
|
|
|
|
<p><img class="flotder" style="width: 158px; height: 227px;" alt="visor sin vista previa" title="visor sin vista previa" src="../gimp/sinvistaprevia.png" hspace="10">Una vez
|
|
que pulsamos en la opción de menú <span class="refmenu">archivo</span><strong class="refmenu">
|
|
<img src="../imagenes/flechamenu.png" height="13" width="14"> </strong><span class="refmenu">abrir</span>
|
|
podremos movernos por las diferentes carpetas y
|
|
seleccionar la imagen sobre la que queremos trabajar. </p>
|
|
|
|
<p>Si la imagen no se ha abierto previamente con Gimp veremos que
|
|
en la zona derecha aparece una información con el nombre y
|
|
el tamaño que la imagen ocupa en el disco aunque, de forma
|
|
prácticamente instantánea se genará la
|
|
vista previa de la imagen. Si no es así podemos probar
|
|
pulsando sobre el
|
|
icono <img style="width: 71px; height: 53px;" alt="logotipo Gilbert" title="logotipo Gilbert" src="../gimp/gilbert.png">para intentar obtener la vista
|
|
previa aunque es probable que, por diversos motivos, el
|
|
programa no sea capaz de generarla. </p>
|
|
|
|
<p>Así pues, salvo casos
|
|
excepcionales tendremos disponible una miniatura de
|
|
la imagen y los datos de nombre y
|
|
tamaño en disco, el tamaño en
|
|
píxeles, la profundidad de color y el número de
|
|
capas.</p>
|
|
|
|
<p>Ya sabemos que uno de los motivos por los que necesitamos
|
|
alguna utilidad de tratamiento de imágenes es para acelerar
|
|
la carga de nuestras páginas. Vamos a suponer que la imagen
|
|
que estamos abriendo es demasiado grande y queremos ajustar su
|
|
tamaño para que coincida con el que realmente se
|
|
mostrará en la página WEB.</p>
|
|
|
|
<p class="centrado"><img style="width: 538px; height: 450px;" alt="abrir una imagen en Gimp" title="abrir una imagen en Gimp" src="../gimp/abririmagen.png"></p>
|
|
|
|
<p><img style="width: 390px; height: 342px;" alt="opciones de escalado de una imagen" title="opciones de escalado de una imagen" src="../gimp/cambiotamanio.png" class="flotder"></p>
|
|
|
|
<p>Una vez que hemos aceptado para abrir la imagen vamos a
|
|
la menú de la ventana de imagen y seleccionamos
|
|
Seleccionaremos la opción <span class="refmenu">imagen</span><strong class="refmenu">
|
|
<img src="../imagenes/flechamenu.png" height="13" width="14"> </strong><span class="refmenu">escalar
|
|
la imagen</span>.<br>
|
|
|
|
</p>
|
|
|
|
<p>La pantalla de trabajo me informa del tamaño
|
|
actual de la imagen en píxeles que puedo modificar
|
|
directamente, aunque también puedo optar por seleccionar la
|
|
modificación porcentual de las dimensiones respecto al
|
|
tamaño original.</p>
|
|
|
|
<p>Dado que estamos modificando el tamaño para
|
|
la presentación en pantalla la zona que nos interesa es la
|
|
superior, aunque comprobaremos que, salvo que modifiquemos la
|
|
resolución, el tamaño de impresión se
|
|
ajustará automáticamente para reflejar la
|
|
modificación realizada en el tamaño de pantalla. </p>
|
|
|
|
<p>Es importante que matengamos activo el icono <b><img style="width: 19px; height: 34px;" alt="icono de eslabones de cadena" title="icono de eslabones de cadena" src="../gimp/enlazados.png">
|
|
</b>que relaciona el
|
|
tamaño
|
|
horizontal y vertical de forma que se mantengan las proporciones entre
|
|
el largo y el ancho de la imagen cuando ésta cambie de
|
|
tamaño.
|
|
</p>
|
|
|
|
<br clear="all">
|
|
|
|
<p class="aviso avisos"><img class="flotizq" title="advertencia" style="width: 28px; height: 25px;" alt="advertencia" src="../imagenes/atencion.gif">Teniendo
|
|
en cuenta que trabajamos con imágenes de mapas de bits
|
|
aumentar el tamaño supondrá hacer más
|
|
visibles los píxeles que forman la imagen, por lo que no es
|
|
muy recomendable. </p>
|
|
|
|
<div class="practicas"> <img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 28" title="Actividad 28" src="../imagenes/numeracion/veintiocho.gif">
|
|
<p>En la carpeta Imagenes del CD-ROM
|
|
encontrarás la imagen amapolas.png. Si no quieres
|
|
ponerte a buscarla ahora puedes utilizar la pulsación con el
|
|
botón secundario del ratón para obtenerla desde
|
|
la ventana que se abrirá al pulsar la miniatura.<a href="javascript:void(0)" onclick="window.open('imagenamapolas.html','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=614,height=819')"><img style="border: 0px solid ; width: 55px; height: 73px;" alt="Mostrar la imagen amapolas.png a tamaño real en una nueva ventana" src="imagenes/amapolasico.png" title="Mostrar la imagen amapolas.png a tamaño real en una nueva ventana"></a></p>
|
|
|
|
<ul>
|
|
|
|
<li>Carga la imagen en Gimp y modifica su tamaño
|
|
para que quede con una anchura de 300 píxeles. Comprueba que
|
|
tienes activado el enlace para mantener las proporciones.</li>
|
|
|
|
<li>Utiliza <span class="refmenu">archivo <img src="../imagenes/flechamenu.png" height="13" width="14">
|
|
guardar como</span>
|
|
para almacenar la imagen en formato JPG. <br>
|
|
|
|
<div class="avisos"><img class="flotizq" title="advertencia" style="width: 28px; height: 25px;" alt="advertencia" src="../imagenes/atencion.gif">Verás
|
|
que aparece
|
|
un panel para <span class="refmenu">ajustar parámetros</span>
|
|
que tiene establecido el nivel de <span class="refmenu">calidad</span>
|
|
en un valor de 85. Es un nivel que provoca una pérdida de
|
|
calidad imperceptible pero una importante reducción de
|
|
tamaño. Para comprobar el efecto de variar este valor puedes
|
|
activar la opción <img title="Mostrar vista previa ..." style="width: 249px; height: 17px;" alt="Mostrar vista previa ..." src="../gimp/preview.png"> y,
|
|
además de mostrarte el resultado que obtendrás
|
|
con cada nivel, el programa te informará del
|
|
tamaño que ocupará la imagen al almacenarse.</div>
|
|
|
|
</li>
|
|
|
|
<li>Guarda el archivo en formato GIF. Dado que el formato gif
|
|
trabaja con una paleta de colores reducida te avisará de la
|
|
necesidad de convertir la imagen para adaptarla a la paleta de 256
|
|
colores o a una imágen en tonos de gris que
|
|
también tiene una gama de 256 valores. <img title="Convertir imagen de color real a indexado" style="width: 267px; height: 32px;" alt="Convertir imagen de color real a indexado" src="../gimp/convertiraindexada.png"> </li>
|
|
|
|
<li>Para poder actualizar las vistas correctamente cierra las
|
|
imágense y utiliza <span class="refmenu">archivo
|
|
<img src="../imagenes/flechamenu.png" height="13" width="14">abrir</span> para volver a cargar ambas
|
|
imágenes en Gimp. Aprovecha
|
|
el momento de la selección para comparar el
|
|
tamaño en KB que ocupa cada una de las
|
|
ellas según la información que se muestra en la
|
|
miniatura de vista previa.</li>
|
|
|
|
<li>También podrás realizar una
|
|
comprobación sobre las diferencias cualitativas entre ambas
|
|
imágenes para lo que te resultará muy
|
|
útil ampliarlas mediante la opción de
|
|
menú <span class="refmenu">
|
|
ver <img src="../imagenes/flechamenu.png" height="13" width="14"> ampliación <img src="../imagenes/flechamenu.png" height="13" width="14">
|
|
2:1(200%)</span> (También puedes utilizar el indicador
|
|
de porcentaje que aparece en la barra de estado de la ventana de la
|
|
imagen).</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<div class="practicas">
|
|
<img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 29" title="Actividad 29" src="../imagenes/numeracion/veintinueve.gif">
|
|
<ul>
|
|
|
|
<li>Vuelve a cargar
|
|
la imagen amapolas.png en Gimp y
|
|
modifica su tamaño para que resulte al 50% de su
|
|
tamaño actual. Comprueba que tienes activada la casilla para
|
|
mantener las proporciones.</li>
|
|
|
|
<li>A
|
|
veces, cuando se hacen
|
|
reducciones de imagen, se produce una pérdida de nitidez.
|
|
Para corregirlo puedes probar con alguno de los filtros que
|
|
encontrarás en <span class="refmenu">filtros</span>
|
|
<img class="refmenu" src="../imagenes/flechamenu.png" height="13" width="14"><span class="refmenu">
|
|
realzar</span>,
|
|
preferiblemente con <span class="refmenu">enfocar</span>
|
|
y <span class="refmenu">máscara de desenfoque</span>.
|
|
(En unas ocasiones te parecerá que el efecto mejora el
|
|
resultado
|
|
final y en otras no, así que tendrás que probarlo)</li>
|
|
|
|
<li>Realiza nuevamente una comparación de <span style="font-style: italic;">"peso"</span> y calidad de
|
|
las imágenes. </li>
|
|
|
|
<li>Es probable que en esta ocasión notes una
|
|
diferencia algo menor en la calidad: Ten en cuenta que la
|
|
reducción de tamaño ha introducido en ambas
|
|
imágenes una importante pérdida de
|
|
información)</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<div class="estilo">
|
|
<p>El formato <acronym title="Joint Photographic Experts Group">JPG</acronym>
|
|
está basado en filtros y algoritmos
|
|
de compresión que provocan una pérdida en la
|
|
calidad de la imagen.<br>
|
|
|
|
<br>
|
|
|
|
Si necesitas hacer modificaciones de una imagen procura hacerlo de una
|
|
sola vez, puesto que si las vas haciendo por etapas irás
|
|
acumulando las sucesivas compresiones, ... y sus correspondientes
|
|
pérdidas de calidad. <br>
|
|
|
|
<br>
|
|
|
|
No es mala idea conservar la imagen original en un formato sin
|
|
pérdida (tif o png pueden ser buenas alternativas) y guardar
|
|
las modificaciones con nombre diferente, ya que así se
|
|
podrían volver a aplicar todas juntas a partir de la imagen
|
|
original con su nivel máximo de calidad. </p>
|
|
|
|
<div class="avisos"><img class="flotizq" title="advertencia" style="width: 28px; height: 25px;" alt="advertencia" src="../imagenes/atencion.gif">Los
|
|
cambios de
|
|
tamaño de la imagen producen resultados bastante
|
|
deficientes cuando se aplican a imágenes de color indexado.
|
|
Si quieres reducir una imagen en formato gif elige desde el
|
|
menú <span class="refmenu">imagen <img src="../imagenes/flechamenu.png" height="13" width="14">
|
|
modo <img src="../imagenes/flechamenu.png" height="13" width="14">
|
|
rgb</span>, o pulsa
|
|
sobre ella con el botón derecho y elige la misma
|
|
opción en el menú contextual. (También
|
|
deberás hacer esta comprobación cuando intentes
|
|
modificar imágenes png, aunque en este caso es posible que
|
|
encuentres la opción <acronym title="Red Green Blue">RGB</acronym>
|
|
atenuada porque la imagen ya
|
|
esté en modo <acronym title="Red Green Blue">RGB</acronym>
|
|
ya que, como sabes, este formato
|
|
soporta ambos modos)</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|