Ubuntu Times

Eres alguien a quien le gustaria crear iconos dibujos o imagenes en tu PC? si es que no lo conoces aun te recomiendo ampliamente Inkscape. A mi me parece un programa realmente bueno y que me agrada mucho usar junto con gimp, me gusta mucho crear imagenes o fondos para mi escritorio, ademas de necesitar ambos programas para desarrollar imagenes para mi sitio web. ya puse un tutorial de los usos basicos de Gimp y ahora es el turno de Inkscape.
Te mostrare los pasos basicos y algunas de las herramientas de Inkscape y crearemos un icono muy basico que es el que se muestra a continuacion, si quieres bajarlo en el formato SVG para usarlo en Inkscape y mirar como esta formado lo puedes bajar aqui.

Pero empecemos por el principio, abre Inkscape y en la esquina izquierda Archivo, nuevo e icon_64×64 tal como se ve en la imagen.

Y bien comencemos a editar nuestra imagen.

Presiona F5 en tu teclado esto seleccionara la herramienta de elipses dentro de inkscape que obviamente es para dibujar circulos, dubuja un circulo de la dimension que quieras, despues selecciona en tu teclado Mayus+Ctrl+F esto seleccionara la herramienta de estilo, con ella podras editar los colores de un objeto, si quieres un color solido o un degradado, el color de el borde, si quieres o no un borde, si quieres el borde degradado o solido, el ancho, etc. El color que yo use es 0009b0c8 ( tal y como esta escrito los primeros seis son el color y los ultimos dos la opacidad ) este es el color azul de el relleno y para el borde color negro y un ancho de 2px. A continuacion le daremos las medidas y la colocacion a nuestro dibujo las medidas seran ancho y largo 64px, 0x y 0y se mira mas claro en la imagen siguiente.

Una vez hecho esto deberias tener un circulo azul con el borde negro y que rellena perfectamente el area de dibujo establecida como se mira en la imagen anterior, ahora en el menu elije capa y renombrar capa de esta manera le daremos un nombre que nos resulte familiar y facil de usar y de identificar a el objeto o la razon para la cual se va a usar esa capa, yo la nombre fondo porque sera el fondo de el dibujo pero tu puedes usar el nombre que gustes. Como ya lo dije en el tutorial de introduccion a gimp cuando estes manejando o creando imagenes es muy importante el manejo de las capas y no poner todos los objetos de la imagen en una sola capa, esto es indispensable e importantisimo en inkscape asi como en cualquier otro programa de edicion de imagenes llamese gimp, photoshop, paint shop pro, etc.

El siguiente paso sera el crear otra capa, de nuevo capa y añadir capa, por nombre de nuevo el que quieras yo use reflejo que es para lo que lo vamos a usar. De nuevo la herramienta para elipses y dibuja un circulo solo que ahora le cambias el color a blanco. Lo colocas dentro de el circulo azul en la parte de arriba preferentemente pero eso es tu eleccion yo lo deje asi.

Tal vez te preguntes por que tu circulo no es como el que se mira en la imagen, pues por que el mio esta ya editado, para empezar colocalo en el lugar que quieras, despues Mayus-Ctrl-F y en el color de relleno elije degradado lineal, no lo confundas con el degradado circular, este circulo no necesita un borde por lo tanto elimina el color de el borde de esta manera eliminaras el borde y por ultimo la herramienta de degradados en tu teclado Ctrl+F1 y mueves las orillas de la linea de el degradado para que queden en una posicion que te agrade o parecida a la mia como se muestra en la imagen. No entiendes? mira las siguientes imagenes y tal vez te ayuden a entender.

Y por ultimo la ventana donde editas los degradados.

Bien cuando hayas terminado de editar el circulo blanco continuamos al siguiente paso, una capa mas y la nombras segun tu gusto yo la llame lupa. Dibujas otro circulo esta vez con borde blanco y relleno azul como se mira a continuacion ( el color azul es 000095ff tal como esta escrito ).

Despues en el teclado F4 esto elige la herramienta para realizar rectangulos basicamente lo mismo que para hacer circulos pero aqui dibujaras un cuadro, redondea las esquinas hasta que quede algo como se mira en la imagen.

Lo siguiente sera colocar el objeto en el lugar que necesites en este caso bajo la lupa en la posicion que la imagen original muestra.

Como lo podras notar en la imagen anterior esta todo terminado y esto es porque estamos casi finalizando, despues de colocar el rectangulo en la posicion necesaria le pondremos dos pequeñas lineas, en el teclado Ctrl+F2 y dibuja una linea en cualquier parte de el dibujo como se mira en la imagen.

Y lo siguiente es editarlo para empezar cambia el color a blanco y el tamaño a 2px cabe aclarar que esta linea no es sino un borde de manera que lo haces de la misma manera que lo hiciste con el borde de los objetos de la lupa. Lo siguiente es elegir en el teclado el editor de nodos (F2) esta herramienta te permitira cambiar la figura de los objetos, para empezar coloca la linea dentro de el mango de la lupa, como se mira en la imagen.

Lo siguiente es presionar dos veces con el boton izquierdo de tu mouse en el medio de la linea esto creara otro nodo y lo haces curvo, no se si sea la palabra adecuada trato de referirme al hecho de que al mover ese nodo se curvara la linea en vez de hacerce en angulo en el, se entiende mejor en la imagen.

Para finalizar crearemos otro capa pero esta vez como subcapa de la capa de la lupa… Que dijo??? si ya se que se oye raro pero asi es, capa y añadir capa la nombras y en posicion eliges “como subcapa de la actual” yo la nombre reflejo de lupa, en esta dibujas un circulo sin bordes y blanco dentro de el circulo de la lupa y lo editas hasta quedar como en la imagen original de el icono o lo mas parecido, de nuevo necesitaras la herramienta de nodos pero esta vez teniendo elegido el circulo que acabas de realisar presionas trazo y “objeto a trazo” esto hara que se creen cuatro nodos.

En la imagen no son cuatro nodos los que tiene sino cinco, no solo puedes agregarle nodos a un objeto pero por supuesto quitarle, de manera que quede adecuado para tu dibujo o el objeto que quieras dibujar cabe destacar que como se mira en la ventana donde editamos el degradado el reflejo de la lupa tiene un desenfoque de 7% y una opacidad de 68.3%.

Esta terminado pero espera tal vez no te gusto, debo decir que a mi no me parece muy brillante que digamos pero en mi defensa no soy un experto y queria algo rapido de hacer, a esa misma imagen tal vez quieras borrarle el circulo y poner un cuadrado como se mira en el boton de el buscador dentro de esta pagina, o tal vez quieras usar solo el fondo solamente como lo use yo debajo de el sotano de esta pagina, o tal vez quieras eliminar todo el fondo dejar la lupa y ponerle solo una sombra como se mira en la imagen siguiente ( el color gris de el fondo es solo para que los bordes se distingan de el mismo ) en fin la decision es tuya, podras hacer tanto como quieras y tu imaginacion o determinacion te lleven.

Estos botones los he hecho yo mismo para otro sitio que estoy desarrollando, se que no son tan buenos pero son solo un ejemplo de lo que se puede hacer con Gimp e Inkscape, puedes usarlos si gustas o los necesitas.

Sigue los comentarios a esta entrada con RSS. Puedes dejar un comentario, o un trackback desde tu sitio.