SlideShare una empresa de Scribd logo
1 de 2
Descargar para leer sin conexión
Tutorial Inkscape – Iconos Web 2.0
Este tutorial va a tratar de explicar como hacer iconos para páginas con estilo Web 2.0. Para ello voy a
utilizar Inkscape v0.45 y voy a realizar el ya mítico icono de la estrella, pero el mismo procedimiento
puede usarse para realizar muchas otras formas. Empezamos con un nuevo documento en blanco,
pulsamos la tecla rápida “1″ para que la escala del zoom se ponga a 1:1 y ya estamos preparados.
Recordad que con la combinación Shift+Ctr+L mostramos o escondemos el dialogo de capas, nos será
útil durante el tutorial.
Lo primero que haremos es pulsar en la herramienta “estrellas y polígonos” (o pulsar “*”) y crearemos
una estrella del tamaño que queramos, recordad que el tamaño no es algo muy importante (aquí al
menos) ya que el diseño vectorial nos ofrece la posibilidad de escalar nuestros dibujos de forma libre.
En la siguiente imagen podéis ver los parámetros de configuración de la mía pero por supuesto podéis
usar los que queráis.
Lo siguiente es darle color a nuestra estrella así que pulsamos Shift+Ctrl+F para ver las propiedades del
objeto. Yo he elegido darle tonos azules como podéis ver en la imagen. Le pondremos un borde de unos
2 píxeles de un color uniforme y rellenaremos con un gradiente que vaya de un tono más claro al del
borde, a un más oscuro.
Lista la forma, vamos a hacer el efecto del brillo, para lo que creamos una nueva capa encima de la
anterior. Luego, seleccionamos la estrella y hacemos una copia de la misma en la capa nueva justo
encima de la otra. Ahora vamos a seleccionar la herramienta de elipses (F5) y creamos una de color
blanco cubriendo parte de la estrella en la capa recién creada. La elipse debe ser blanca y semiopaca:
Ahora vamos a hacer lo siguiente para quedarnos solo con la parte de la elipse que queremos.
Seleccionamos la estrella de la capa brillo y vamos a Menú->Trazo->Reducir o pulsamos Ctrl+( y
reducimos el tamaño de la estrella hasta que sea del tamaño del relleno de la que está debajo. Es decir, si
le hemos puesto 2 píxeles al borde, la reducimos 2 píxeles y la colocamos encima de la elipse (PgUp).
Ahora con el Shift pulsado seleccionamos los dos objetos de la capa brillo (la estrella más pequeña y la
elipse) y hacemos Menú->Trazo->Intersección o lo que es lo mismo Ctrl+* y ya tenemos el brillo para
nuestra estrella.
Ya solo nos queda elegir que es lo que queremos poner dentro, en este caso texto. Con la herramienta de
escribir seleccionada (F8) y una fuente de tu elección escribimos en color blanco lo que queramos en la
nueva capa destinada al texto que crearemos.
Ahora seleccionamos el texto y le damos a duplicar. A esta nueva copia la vamos a cambiar el color
blanco por un gris (60%) y la vamos a mover un pixel hacia arriba y otro hacia la derecha (puedes
hacerlo con las teclas de dirección y manteniendo la tecla Alt pulsada). Para terminar ponemos la copia
del texto gris debajo del blanco (PgDn) y ya tenemos nuestra bonita estrella.
Del mismo modo, podemos crear infinidad de bonitos logos. Espero que este tutorial os sirva de ayuda,
para cualquier cosa estoy por aquí.

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Crear+botones+3 d
Crear+botones+3 dCrear+botones+3 d
Crear+botones+3 d
 
Logo mitsubishi con Inkscape
Logo mitsubishi con InkscapeLogo mitsubishi con Inkscape
Logo mitsubishi con Inkscape
 
Wallpaper natural
Wallpaper naturalWallpaper natural
Wallpaper natural
 
Texto luces
Texto lucesTexto luces
Texto luces
 
Tutorial hacer botón en gimp
Tutorial hacer botón en gimpTutorial hacer botón en gimp
Tutorial hacer botón en gimp
 
Taller de schatch
Taller de schatchTaller de schatch
Taller de schatch
 
Herramiemtas de point
Herramiemtas de pointHerramiemtas de point
Herramiemtas de point
 
Xmind ishikawa cta
Xmind   ishikawa ctaXmind   ishikawa cta
Xmind ishikawa cta
 
Cuadrados con librecad gimp
Cuadrados con librecad gimpCuadrados con librecad gimp
Cuadrados con librecad gimp
 
Niebla realista en photoshop
Niebla realista en photoshopNiebla realista en photoshop
Niebla realista en photoshop
 
Ejrercicio15 animaciones y transiciones
Ejrercicio15 animaciones y transicionesEjrercicio15 animaciones y transiciones
Ejrercicio15 animaciones y transiciones
 
Clones en mosaico con Inkscape
Clones en mosaico con InkscapeClones en mosaico con Inkscape
Clones en mosaico con Inkscape
 
Mi trabajo de
Mi trabajo deMi trabajo de
Mi trabajo de
 
Practica 2
Practica 2  Practica 2
Practica 2
 
Trabajo de investigación 1: Texto piedra
Trabajo de investigación 1: Texto piedraTrabajo de investigación 1: Texto piedra
Trabajo de investigación 1: Texto piedra
 
Fixlr tutorial
Fixlr tutorialFixlr tutorial
Fixlr tutorial
 
Ejercicio8 como manejar los elementos de una presentación
Ejercicio8 como manejar los elementos de una presentaciónEjercicio8 como manejar los elementos de una presentación
Ejercicio8 como manejar los elementos de una presentación
 
Crear poster constructivista en photoshop
Crear poster constructivista en photoshopCrear poster constructivista en photoshop
Crear poster constructivista en photoshop
 

Similar a Práctica 1 inkscape (1)

Similar a Práctica 1 inkscape (1) (20)

Photoshop
PhotoshopPhotoshop
Photoshop
 
Tuto de photoshop
Tuto de photoshopTuto de photoshop
Tuto de photoshop
 
Ejercicio
EjercicioEjercicio
Ejercicio
 
Practicas Gimp tanda2 4º ESO Inf
Practicas Gimp tanda2 4º ESO InfPracticas Gimp tanda2 4º ESO Inf
Practicas Gimp tanda2 4º ESO Inf
 
Como crear vectores en coreldraw x6
Como crear vectores en coreldraw x6Como crear vectores en coreldraw x6
Como crear vectores en coreldraw x6
 
Diseñar gráficos sencillos con inkscape
Diseñar gráficos sencillos con inkscapeDiseñar gráficos sencillos con inkscape
Diseñar gráficos sencillos con inkscape
 
Practicasguiadas de gimp2
Practicasguiadas de gimp2Practicasguiadas de gimp2
Practicasguiadas de gimp2
 
Practicasguiadas gimp
Practicasguiadas gimpPracticasguiadas gimp
Practicasguiadas gimp
 
Flash 1
Flash 1Flash 1
Flash 1
 
Manual de plataforma tinkercad de diseño 3d y programacion
Manual de plataforma tinkercad de diseño 3d y programacionManual de plataforma tinkercad de diseño 3d y programacion
Manual de plataforma tinkercad de diseño 3d y programacion
 
IllustratorCS5_cast.pdf
IllustratorCS5_cast.pdfIllustratorCS5_cast.pdf
IllustratorCS5_cast.pdf
 
Illustrator cs5 cast
Illustrator cs5 castIllustrator cs5 cast
Illustrator cs5 cast
 
Practica de flash
Practica de flashPractica de flash
Practica de flash
 
Tutorial illustrator
Tutorial illustratorTutorial illustrator
Tutorial illustrator
 
Tutorial illustrator
Tutorial illustratorTutorial illustrator
Tutorial illustrator
 
Tutorial illustrator
Tutorial illustratorTutorial illustrator
Tutorial illustrator
 
Guia iii i curso
Guia iii   i cursoGuia iii   i curso
Guia iii i curso
 
Modulo inkscape
Modulo inkscapeModulo inkscape
Modulo inkscape
 
01 boton que activa un morphing
01 boton que activa un morphing01 boton que activa un morphing
01 boton que activa un morphing
 
Previsualización de la imagen final
Previsualización de la imagen finalPrevisualización de la imagen final
Previsualización de la imagen final
 

Último

Sesión - Vacunación del Adulto (Revisión tema).pdf
Sesión - Vacunación del Adulto (Revisión tema).pdfSesión - Vacunación del Adulto (Revisión tema).pdf
Sesión - Vacunación del Adulto (Revisión tema).pdfLas Sesiones de San Blas
 
SISTEMA DE CLORACIÓN - PARA SISTEMA DE AGUA POTABLE VIVIENDA.pptx
SISTEMA DE CLORACIÓN - PARA SISTEMA DE AGUA POTABLE VIVIENDA.pptxSISTEMA DE CLORACIÓN - PARA SISTEMA DE AGUA POTABLE VIVIENDA.pptx
SISTEMA DE CLORACIÓN - PARA SISTEMA DE AGUA POTABLE VIVIENDA.pptxGenaroElmerSifuentes6
 
PROYECTO 3 4 5 AÑOS del nivel inicial
PROYECTO    3 4 5 AÑOS del nivel inicialPROYECTO    3 4 5 AÑOS del nivel inicial
PROYECTO 3 4 5 AÑOS del nivel inicialArtemisaReateguiCaro
 
Clase de Aines - Terapeutica médica eToxicologia
Clase de Aines - Terapeutica médica eToxicologiaClase de Aines - Terapeutica médica eToxicologia
Clase de Aines - Terapeutica médica eToxicologiaRaphaelCruz46
 
CAPACITACIÓN VIGIA EN SEGURIDAD Y SALUD EN EL TRABAJO.ppt
CAPACITACIÓN VIGIA EN SEGURIDAD Y SALUD EN EL TRABAJO.pptCAPACITACIÓN VIGIA EN SEGURIDAD Y SALUD EN EL TRABAJO.ppt
CAPACITACIÓN VIGIA EN SEGURIDAD Y SALUD EN EL TRABAJO.pptSandraCardenas92
 
IVU-PIELO-SEPSIS listo.pptxLos problemas de salud más comunes en los bebés in...
IVU-PIELO-SEPSIS listo.pptxLos problemas de salud más comunes en los bebés in...IVU-PIELO-SEPSIS listo.pptxLos problemas de salud más comunes en los bebés in...
IVU-PIELO-SEPSIS listo.pptxLos problemas de salud más comunes en los bebés in...MarcoFlores940553
 
dermatitis de contacto dermatologia irritativa
dermatitis de contacto dermatologia irritativadermatitis de contacto dermatologia irritativa
dermatitis de contacto dermatologia irritativaDamiiHernandez
 
TEMA 6 LA II REPÚBLICA (1931-1936)_.pdf
TEMA 6         LA II REPÚBLICA (1931-1936)_.pdfTEMA 6         LA II REPÚBLICA (1931-1936)_.pdf
TEMA 6 LA II REPÚBLICA (1931-1936)_.pdfanagc806
 
Indicaciones y contraindicaciones de la sonda vesical y sonda nasogastrica.pptx
Indicaciones y contraindicaciones de la sonda vesical y sonda nasogastrica.pptxIndicaciones y contraindicaciones de la sonda vesical y sonda nasogastrica.pptx
Indicaciones y contraindicaciones de la sonda vesical y sonda nasogastrica.pptx Estefa RM9
 

Último (9)

Sesión - Vacunación del Adulto (Revisión tema).pdf
Sesión - Vacunación del Adulto (Revisión tema).pdfSesión - Vacunación del Adulto (Revisión tema).pdf
Sesión - Vacunación del Adulto (Revisión tema).pdf
 
SISTEMA DE CLORACIÓN - PARA SISTEMA DE AGUA POTABLE VIVIENDA.pptx
SISTEMA DE CLORACIÓN - PARA SISTEMA DE AGUA POTABLE VIVIENDA.pptxSISTEMA DE CLORACIÓN - PARA SISTEMA DE AGUA POTABLE VIVIENDA.pptx
SISTEMA DE CLORACIÓN - PARA SISTEMA DE AGUA POTABLE VIVIENDA.pptx
 
PROYECTO 3 4 5 AÑOS del nivel inicial
PROYECTO    3 4 5 AÑOS del nivel inicialPROYECTO    3 4 5 AÑOS del nivel inicial
PROYECTO 3 4 5 AÑOS del nivel inicial
 
Clase de Aines - Terapeutica médica eToxicologia
Clase de Aines - Terapeutica médica eToxicologiaClase de Aines - Terapeutica médica eToxicologia
Clase de Aines - Terapeutica médica eToxicologia
 
CAPACITACIÓN VIGIA EN SEGURIDAD Y SALUD EN EL TRABAJO.ppt
CAPACITACIÓN VIGIA EN SEGURIDAD Y SALUD EN EL TRABAJO.pptCAPACITACIÓN VIGIA EN SEGURIDAD Y SALUD EN EL TRABAJO.ppt
CAPACITACIÓN VIGIA EN SEGURIDAD Y SALUD EN EL TRABAJO.ppt
 
IVU-PIELO-SEPSIS listo.pptxLos problemas de salud más comunes en los bebés in...
IVU-PIELO-SEPSIS listo.pptxLos problemas de salud más comunes en los bebés in...IVU-PIELO-SEPSIS listo.pptxLos problemas de salud más comunes en los bebés in...
IVU-PIELO-SEPSIS listo.pptxLos problemas de salud más comunes en los bebés in...
 
dermatitis de contacto dermatologia irritativa
dermatitis de contacto dermatologia irritativadermatitis de contacto dermatologia irritativa
dermatitis de contacto dermatologia irritativa
 
TEMA 6 LA II REPÚBLICA (1931-1936)_.pdf
TEMA 6         LA II REPÚBLICA (1931-1936)_.pdfTEMA 6         LA II REPÚBLICA (1931-1936)_.pdf
TEMA 6 LA II REPÚBLICA (1931-1936)_.pdf
 
Indicaciones y contraindicaciones de la sonda vesical y sonda nasogastrica.pptx
Indicaciones y contraindicaciones de la sonda vesical y sonda nasogastrica.pptxIndicaciones y contraindicaciones de la sonda vesical y sonda nasogastrica.pptx
Indicaciones y contraindicaciones de la sonda vesical y sonda nasogastrica.pptx
 

Práctica 1 inkscape (1)

  • 1. Tutorial Inkscape – Iconos Web 2.0 Este tutorial va a tratar de explicar como hacer iconos para páginas con estilo Web 2.0. Para ello voy a utilizar Inkscape v0.45 y voy a realizar el ya mítico icono de la estrella, pero el mismo procedimiento puede usarse para realizar muchas otras formas. Empezamos con un nuevo documento en blanco, pulsamos la tecla rápida “1″ para que la escala del zoom se ponga a 1:1 y ya estamos preparados. Recordad que con la combinación Shift+Ctr+L mostramos o escondemos el dialogo de capas, nos será útil durante el tutorial. Lo primero que haremos es pulsar en la herramienta “estrellas y polígonos” (o pulsar “*”) y crearemos una estrella del tamaño que queramos, recordad que el tamaño no es algo muy importante (aquí al menos) ya que el diseño vectorial nos ofrece la posibilidad de escalar nuestros dibujos de forma libre. En la siguiente imagen podéis ver los parámetros de configuración de la mía pero por supuesto podéis usar los que queráis. Lo siguiente es darle color a nuestra estrella así que pulsamos Shift+Ctrl+F para ver las propiedades del objeto. Yo he elegido darle tonos azules como podéis ver en la imagen. Le pondremos un borde de unos 2 píxeles de un color uniforme y rellenaremos con un gradiente que vaya de un tono más claro al del borde, a un más oscuro. Lista la forma, vamos a hacer el efecto del brillo, para lo que creamos una nueva capa encima de la anterior. Luego, seleccionamos la estrella y hacemos una copia de la misma en la capa nueva justo encima de la otra. Ahora vamos a seleccionar la herramienta de elipses (F5) y creamos una de color blanco cubriendo parte de la estrella en la capa recién creada. La elipse debe ser blanca y semiopaca:
  • 2. Ahora vamos a hacer lo siguiente para quedarnos solo con la parte de la elipse que queremos. Seleccionamos la estrella de la capa brillo y vamos a Menú->Trazo->Reducir o pulsamos Ctrl+( y reducimos el tamaño de la estrella hasta que sea del tamaño del relleno de la que está debajo. Es decir, si le hemos puesto 2 píxeles al borde, la reducimos 2 píxeles y la colocamos encima de la elipse (PgUp). Ahora con el Shift pulsado seleccionamos los dos objetos de la capa brillo (la estrella más pequeña y la elipse) y hacemos Menú->Trazo->Intersección o lo que es lo mismo Ctrl+* y ya tenemos el brillo para nuestra estrella. Ya solo nos queda elegir que es lo que queremos poner dentro, en este caso texto. Con la herramienta de escribir seleccionada (F8) y una fuente de tu elección escribimos en color blanco lo que queramos en la nueva capa destinada al texto que crearemos. Ahora seleccionamos el texto y le damos a duplicar. A esta nueva copia la vamos a cambiar el color blanco por un gris (60%) y la vamos a mover un pixel hacia arriba y otro hacia la derecha (puedes hacerlo con las teclas de dirección y manteniendo la tecla Alt pulsada). Para terminar ponemos la copia del texto gris debajo del blanco (PgDn) y ya tenemos nuestra bonita estrella. Del mismo modo, podemos crear infinidad de bonitos logos. Espero que este tutorial os sirva de ayuda, para cualquier cosa estoy por aquí.