mirror of
https://github.com/SrIzan10/edicion-en-html.git
synced 2026-06-27 19:02:21 +00:00
363 lines
12 KiB
HTML
363 lines
12 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
|
|
<html lang="es-es">
|
|
<head>
|
|
|
|
|
|
|
|
<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]-->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<title>Recortar imágenes</title>
|
|
<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="multi1e.htm" title="avanzar"><img src="../Images/flechadcha.gif" border="0"></a>
|
|
</div>
|
|
<div id="flechaizq">
|
|
<a href="multi1c.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><a href="multi1c.htm">Escalar
|
|
imágenes</a></li>
|
|
|
|
|
|
<li class="activo"><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>Recortar imágenes</h2>
|
|
|
|
|
|
<p> En ocasiones podemos encontrarnos con que la
|
|
información relevante se encuentre en un fragmento de la
|
|
imagen y lo que deseamos es desechar el resto de la imagen y conservar
|
|
únicamente ese fragmento.</p>
|
|
|
|
|
|
<p>Para poder realizar esta tarea con Gimp tenemos dos
|
|
posibilidades: </p>
|
|
|
|
|
|
<ol type="a">
|
|
|
|
|
|
<li>Marcar el fragmento de imagen trazando un
|
|
rectángulo con la herramienta <img src="../gimp/icoseleccion.png" height="26" width="26">
|
|
y luego elegir la opción de
|
|
menú <span class="refmenu">imagen </span><img class="refmenu" style="font-weight: normal;" src="../imagenes/flechamenu.png" height="13" width="14"><span class="refmenu"> recortar la imagen</span> (Como
|
|
en todos los programas de tratamiento de imagen habrá que
|
|
hacer clic para marcar el primer vértice de la
|
|
selección y arrastrar el ratón hasta el
|
|
vértice opuesto donde, al soltar, se fijará el
|
|
segundo punto y se delimitará la zona seleccionada) <br>
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li>Elegir la herramienta <img src="../gimp/icorecortar.png" height="26" width="26"> y
|
|
delimitar con ella la zona que deseamos conservar igual que
|
|
hacíamos para seleccionar. Una vez ajustada la zona de
|
|
recorte se eliminará el resto de la imagen haciendo clic
|
|
dentro de la zona a conservar.</li>
|
|
|
|
|
|
</ol>
|
|
|
|
|
|
<p><img class="flotder" src="../gimp/recortando.png" height="204" hspace="10" width="301">Cuando
|
|
utilizamos la herramienta <img src="../gimp/icorecortar.png" height="26" width="26"> podemos
|
|
ajustar el recorte introduciendo directamente las coordenadas en la
|
|
ventana
|
|
emergente de propiedades o bien modificando los puntos de
|
|
edición de la zona seleccionada. Cuando pulsamos y
|
|
arrastramos sobre los vértices originales (superior
|
|
izquierdo e inferior derecho en este caso) el cursor varía
|
|
su forma <img src="../gimp/redimensionar.png" height="30" width="38"> indicándonos que
|
|
podemos modificar su posición y, con ella el
|
|
tamaño de la zona seleccionada. Sin embargo, cuando pulsamos
|
|
y arrastramos los vértices opuestos que se han generado
|
|
automáticamente al trazar el rectángulo el cursor
|
|
nos indica que podemos modificar la posición de la zona
|
|
seleccionada pero sin variar su tamaño <img src="../gimp/mover.png" height="32" width="37">.<br clear="all">
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<div class="practicas">
|
|
<p><img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 30" title="Actividad 30" src="../imagenes/numeracion/treinta.gif"><a href="javascript:void(0)" onclick="window.open('imagenindep2.htm','','statusbar=0,menubar=0,toolbar=0,top=0,left=0,width=720,height=540')"><img style="border: 0px solid ; width: 72px; height: 54px;" alt="Enlace a la imagen en tamaño real" class="flotder" src="imagenes/minifarola.jpg" hspace="10"></a>Abre
|
|
en Gimp la imagen farola.jpg que ya se encuentra en la carpeta de
|
|
imágenes. 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. </p>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li> Recorta la imagen eliminando parte del cielo y del pie de
|
|
la farola. Puedes utilizar cualquiera de los dos procedimientos que se
|
|
han descrito.</li>
|
|
|
|
|
|
<li>Guarda la nueva imagen en el formato que creas
|
|
más adecuado para mantener un equilibrio adecuado entre
|
|
calidad y tamaño.</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<h2>Crear rótulos</h2>
|
|
|
|
|
|
<p>Ya hemos comentado la limitación que suponen los
|
|
tamaños de texto en el html básico, el problema
|
|
que supone la utilización de fuentes no habituales y la
|
|
imposibilidad de rotar textos. La solución, bien sea para
|
|
confeccionar títulos o textos rotados, pasa por la
|
|
creación
|
|
de imágenes que luego insertaremos en nuestra
|
|
página.</p>
|
|
|
|
|
|
<p>Si tienes experiencia con programas gráficos
|
|
podrás crear manualmente los efectos que desees, pero si no
|
|
es así Gimp ofrece una serie de herramientas para la
|
|
creación de textos bastante vistosos dentro de la
|
|
sección denominada <span class="refmenu">Script-Fu</span></p>
|
|
|
|
|
|
<p>Lo primero que tendremos que hacer será crear una
|
|
nueva imagen y seleccionar la herramienta <img src="../gimp/icotexto.png" height="26" width="26">.
|
|
Especificaremos las características
|
|
de tipografía, tamaño, color, etc y escribiremos
|
|
el texto en la ventana destinada a ello.</p>
|
|
|
|
|
|
<p>Una vez escrito nuestro texto se utiliza la opción
|
|
de <span class="refmenu">menú </span><span class="refmenu">script-fu </span><img class="refmenu" src="../imagenes/flechamenu.png" height="13" width="14"><span class="refmenu">
|
|
alpha to logo</span><strong> </strong>
|
|
y se elige uno de los múltiples efectos que aparecen. A
|
|
continuación se muestran algunas posibilidades realizadas
|
|
sin modificar ninguna de las opciones por defecto. Jugando con estas
|
|
opciones los efectos se multiplican hasta el infinito.</p>
|
|
|
|
|
|
<p class="centrado"><img src="../gimp/rotulo4.png" height="142" hspace="5" width="316"><img src="../gimp/rotulo8b.png" height="142" hspace="5" width="316"></p>
|
|
|
|
|
|
<p class="centrado"><img src="../gimp/rotulo3b.png" height="147" hspace="5" width="343"><img src="../gimp/rotulo2b.png" height="142" hspace="5" width="316"></p>
|
|
|
|
|
|
<p class="centrado"><img src="../gimp/rotulo7.png" height="142" hspace="5" width="316"><img src="../gimp/rotulo5b.png" height="142" hspace="5" width="316"></p>
|
|
|
|
|
|
<p class="centrado"><img src="../gimp/rotulo6b.png" height="142" hspace="5" width="316"><img src="../gimp/rotulo1.png" height="142" hspace="5" width="316"></p>
|
|
|
|
|
|
<p> </p>
|
|
|
|
|
|
<p>Cuando hemos conseguido el efecto deseado guardamos nuestra
|
|
imagen en el formato que resulte más adecuado dependiendo de
|
|
la cantidad de colores que se hayan generado.</p>
|
|
|
|
|
|
<div class="practicas"><img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 31" title="Actividad 31" src="../imagenes/numeracion/treintayuno.gif">
|
|
|
|
<ul>
|
|
|
|
|
|
<li>Crea un rótulo para tu página web
|
|
utilizando Script-Fu.</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<p></p>
|
|
|
|
|
|
<h2>Rotar textos</h2>
|
|
|
|
|
|
<p><img class="flotizq" src="../gimp/rotulo8vert.png" height="134" hspace="5" width="60">La
|
|
prestación a la que recurriremos de
|
|
forma más habitual es la rotación de un
|
|
texto para que aparezca rotado 90º en sentido antihorario de
|
|
forma que figure como rótulo con el nombre de la
|
|
institución en un margen de página o
|
|
como rótulo de categoría en los datos de una
|
|
tabla.</p>
|
|
|
|
|
|
<p>Para realizar esta tarea basta con acudir, desde la ventana de
|
|
la imagen, al menú <span class="refmenu">imagen
|
|
</span><strong class="refmenu"><img src="../imagenes/flechamenu.png" height="13" width="14"></strong><span class="refmenu"> transformar </span><strong class="refmenu"><img src="../imagenes/flechamenu.png" height="13" width="14"></strong><span class="refmenu"> rotar 90º en sentido antihorario</span>. <br clear="all">
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p class="avisos">Cuando utilices esta técnica
|
|
es importante que no
|
|
pierdas de vista las cuestiones relativas a la accesibilidad: si
|
|
habitualmente debería ser prácticamente
|
|
obligatorio incluir las etiquetas <code><alt></code>
|
|
para indicar el contenido de las imágenes, en este caso se
|
|
convierte en una cuestión imprescindible, debiendo recoger
|
|
en la misma el contenido exacto del texto que hemos creado como imagen.</p>
|
|
|
|
|
|
<p>Es
|
|
posible que, en algunas ocasiones, necesites realizar una
|
|
rotación especial que no se limite a saltos de 90º.
|
|
Aunque empezaríamos a perdernos si intentamos explicar las
|
|
múltiples posibilidades que ofrece Gimp podemos comentarte
|
|
la existencia de un filtro que permite un tratamiento de la apariencia
|
|
y rotación del texto mucho más
|
|
avanzado que la herramienta denominada <img src="../gimp/icotexto.png" height="26" width="26">.</p>
|
|
|
|
|
|
<p>Así pues, como cuestión complementaria
|
|
por si quieres utilizarla tendrás que hacer lo siguiente:</p>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li>Crear una nueva imagen adjudicándole al texto el
|
|
tamaño deseado</li>
|
|
|
|
|
|
<li>Elegir la opción de menú <span class="refmenu">filtros </span><img class="refmenu" src="../imagenes/flechamenu.png" height="13" width="14"><span class="refmenu">
|
|
text </span><img class="refmenu" src="../imagenes/flechamenu.png" height="13" width="14"><span class="refmenu">
|
|
freetype </span>que dará paso a un panel para la
|
|
introducción de texto</li>
|
|
|
|
|
|
<li>Es posible que, la primera vez que se utilice este filtro
|
|
aparezca una pantalla de configuración para que indiquemos
|
|
la carpeta en la que se encuentran las fuentes tipográficas
|
|
disponibles, en cuyo caso pulsaríamos el botón
|
|
señalado para localizarla. (En Windows dicha carpeta suele
|
|
encontrarse en C:\Windows\fonts)</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<p class="centrado"><img style="width: 356px; height: 355px;" alt="Ventana para indicar la carpeta de fuentes" title="Ventana para indicar la carpeta de fuentes" src="imagenes/carpetadefuentes.png"></p>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li>En la pestaña <span class="refmenu">general</span> en
|
|
la que se introduce el texto y se eligen la fuente y el
|
|
tamaño que queramos utilizar. En la pestaña <span class="refmenu">transformation </span>tendremos la
|
|
posibilidad de indicar variaciones de anchura, altura,
|
|
rotación e inclinación que pueden modificar
|
|
considerablemente la apariencia inicial.</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<p class="centrado"><img style="width: 343px; height: 335px;" alt="Pestaña general del filtro FreeType" title="Pestaña general del filtro FreeType" src="imagenes/freetypegeneral.png"> <img class="indentado25" style="width: 343px; height: 335px;" alt="Pestaña Transformation del filtro FreeType" title="Pestaña Transformation del filtro FreeType" src="imagenes/freetypetransformation.png"></p>
|
|
|
|
|
|
<ul>
|
|
|
|
|
|
<li>Como es posible que nos sobre espacio tras introducir el
|
|
texto podemos utilizar la opción de menú <span class="refmenu">imagen </span><strong class="refmenu"><img src="../imagenes/flechamenu.png" height="13" width="14"></strong><span class="refmenu"> autorecortar imagen</span> que
|
|
hará que el "lienzo" se reduzca a un rectángulo
|
|
en el que se inscribe el texto de forma totalmente ajustada.</li>
|
|
|
|
|
|
<li>A los textos creados con este filtro también se
|
|
le pueden aplicar los efectos de Script-Fu como hacíamos con
|
|
los generados con la herramienta <img src="../gimp/icotexto.png" height="26" width="26">
|
|
</li>
|
|
|
|
|
|
</ul>
|
|
|
|
|
|
<br>
|
|
|
|
|
|
<div class="practicas">
|
|
<p><img class="numact" style="width: 29px; height: 29px; float: left;" alt="Actividad 32" title="Actividad 32" src="../imagenes/numeracion/treintaydos.gif">Crea un nuevo rótulo
|
|
y gíralo, utilizando el procedimiento
|
|
más simple de los explicados en este apartado, para que se
|
|
pueda leer en vertical.</p>
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</body>
|
|
</html>
|