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.

  1. Inicia Inkscape. Se abrirá un documento en blanco.
  2. En la esquina inferior derecha, aumenta el Zoom a 200% Z: 200% para trabajar cómodamente.
  3. Vamos a crear un cuadrado. A la izquierda encontrarás una barra vertical de herramientas. Selecciona la herramienta Crear rectángulos y cuadrados Crear rectángulos y cuadrados. Si tienes problemas para encontrarla, también puedes pulsar F4.
  4. 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.
  5. 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:
  6. Haz doble clic sobre Relleno - Trazo en la esquina inferior izquierda o superior derecha de la ventana.
  7. Se abrirá la ventana Relleno y borde. Haz clic en la pestaña Color de trazo.
    Relleno y borde
  8. Haz clic en el icono del aspa para eliminar el borde.
  9. Haz clic en la pestaña Relleno.
  10. 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 RGBA: 3d2e2aff.
  11. 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.Cambio W: 50  H: 50.

    Hasta ahora, hemos obtenido este cuadrado:
  12. Selecciona la herramienta Crear elipses, círculos y arcos Crear elipses, círculos y arcos .
  13. Selecciona la herramienta Seleccionar y transformar objetos Seleccionar y transformar objetos.
  14. Traza un círculo, y redimensiónalo a 50x50 px, siguiendo los pasos del punto 11.
  15. Cambia el color del círculo, seleccionando cualquiera de la barra de colores, en la parte inferior de la ventana.
  16. Con la herramienta selección, traza un rectángulo que rodee a los dos elementos para seleccionarlos.
  17. Vamos a poner el círculo justo encima del cuadrado. En el menú Objeto, haz clic en Alinear y distribuir.
  18. En el panel Alienar y distribuir, haz clic en Centrar en el eje vertical AlCentrar en el eje vertical.
  19. En el panel Alienar y distribuir, haz clic en Centrar en el eje horizontal Centrar en el eje horizontal.

    Con esto, conseguimos los elementos perfectamente superpuestos:
  20. Lo que vamos a hacer es "restar" al cuadrado el círculo. Para ello, con los dos elementos seleccionados, haz clic en el menú TrayectoDivisión.
  21. Aparentemente hemos obtenido el mismo rectángulo, pero observa que puedes arrastrar las esquinas y separarlas.
    Separa las distintas esquinas.
  22. Vamos a guardarlas. Selecciona una de las esquinas, y pulsa en el menú ArchivoExportar mapa de bits.
  23. En los botones de la ventana Exportar mapa de bits, marca Selección para exportar sólo el elemento seleccionado.
  24. 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.
  25. Una vez introducida la ruta seguida del nombre (por ejemplo, C:/aulaclic/sitio_flores/imagenes/red_lt.png) pulsa el botón Exportar.
  26. Repite los pasos anteriores con todas las esquinas.

   Inicio    




.