Unidad 9. Ejercicio paso a paso: Inkscape. Crear esquinas redondeadas
Objetivo
Vamos a crear las imágenes
,
,
, y
utilizando Inkscape, con las que le daremos apariencia redondeada a una capa. Las imágenes serán del tamaño del radio que queramos redondear. En este caso son de 25x25 px.
Ejercicio
Para conseguir las imágenes, vamos a crear un cuadrado, hacerle un "agujero" en medio y dividirlo en cuatro partes.
- Inicia Inkscape. Se abrirá un documento en blanco.
- En la esquina inferior derecha, aumenta el Zoom a 200%
para trabajar cómodamente.
- Vamos a crear un cuadrado. A la izquierda encontrarás una barra vertical de herramientas. Selecciona la herramienta Crear rectángulos y cuadrados
. Si tienes problemas para encontrarla, también puedes pulsar F4
.
- Traza un rectángulo en el documento. No tiene por qué ser exacto ni de una medida determinada. Los colores pueden ser distintos a los del ejemplo.
- Si el cuadrado que has creado, tiene las esquinas redondeadas, como en las siguientes imágenes, haz clic en los controladores circulares de los lados, y arrástralos hasta la esquina superior derecha:
- Haz doble clic sobre
en la esquina inferior izquierda o superior derecha de la ventana.
- Se abrirá la ventana Relleno y borde. Haz clic en la pestaña Color de trazo.
- Haz clic en el icono del aspa
para eliminar el borde.
- Haz clic en la pestaña Relleno.
- Vamos a darle al relleno el color del fondo del body (#3d2e2a). Al definir un color en Inkscape, se utilizando un valor más al final, que corresponde a la opacidad, siendo el valor mínimo totalmente transparente, y el máximo totalmente opaco. Por lo que el color quedará como 3d2e2aff. Introdúcelo en el recuadro RGBA
.
- Redimensiona el rectángulo a 50x50 px. En la parte superior encontrarás una barra de herramientas con los controles de Cambio. El control W (weight) se refiere al ancho y H (height) al alto. Pon ambos valores a 50.
.
Hasta ahora, hemos obtenido este cuadrado:
- Selecciona la herramienta Crear elipses, círculos y arcos
.
- Selecciona la herramienta Seleccionar y transformar objetos
.
- Traza un círculo, y redimensiónalo a 50x50 px, siguiendo los pasos del punto 11.
- Cambia el color del círculo, seleccionando cualquiera de la barra de colores, en la parte inferior de la ventana.
- Con la herramienta selección, traza un rectángulo que rodee a los dos elementos para seleccionarlos.
- Vamos a poner el círculo justo encima del cuadrado. En el menú Objeto, haz clic en Alinear y distribuir.
- En el panel Alienar y distribuir, haz clic en Centrar en el eje vertical
.
- En el panel Alienar y distribuir, haz clic en Centrar en el eje horizontal
.
Con esto, conseguimos los elementos perfectamente superpuestos:
- Lo que vamos a hacer es "restar" al cuadrado el círculo. Para ello, con los dos elementos seleccionados, haz clic en el menú Trayecto → División.
- Aparentemente hemos obtenido el mismo rectángulo, pero observa que puedes arrastrar las esquinas y separarlas.
Separa las distintas esquinas.
- Vamos a guardarlas. Selecciona una de las esquinas, y pulsa en el menú Archivo → Exportar mapa de bits.
- En los botones de la ventana Exportar mapa de bits, marca Selección para exportar sólo el elemento seleccionado.
- En Nombre del archivo, indica la ruta a la carpeta sitio_flores/imagenes/, o búscala pulsando en Examinar.... En cuanto al nombre de la imagen, se lo hemos dado dependiendo de la posición donde irá:
-
→ red_lt.png, por que va en la esquina left - top.
→ red_rt.png, por que va en la esquina right - top.
→ red_lb.png, por que va en la esquina left - bottom.
→ red_rb.png, por que va en la esquina right - bottom.
- Una vez introducida la ruta seguida del nombre (por ejemplo, C:/aulaclic/sitio_flores/imagenes/red_lt.png) pulsa el botón Exportar.
- Repite los pasos anteriores con todas las esquinas.
Cursos Informática Gratuitos