TODOPIC

Misceláneas - Interés General => Off Topic => Mensaje iniciado por: SavageChicken en 27 de Enero de 2008, 19:20:35

Título: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: SavageChicken en 27 de Enero de 2008, 19:20:35
Introducción:

   La gran mayoría de los hobbistas de la electrónica tiene al menos la inquietud de darle a sus pequeñas maravillas un acabado lo más cercano posible a un trabajo profesional. Y es que sin duda estamos orgullosos de este o aquel aparatito que nos llevó horas y horas diseñar y llevar a buen puerto y nos gustaría presentarlo en sociedad con buenas terminaciones y un aspecto profesional si fuera posible, por el contrario la mayoría de las veces terminamos exponiéndolo como un enredo de cables, botones y leds colgando. Aun cuando conseguimos una cajita plástica o metálica para esconder las tripas y partes pudendas de nuestros circuitos, en muchos casos desearíamos poder poner un buen frontis, display o como quieran llamarle que además de darle color y vivacidad a la parte visible, identifique para que sirve ese botón o aquella perilla que asoma huérfana de todo nombre por el frente de la caja.

   Llegados a este punto comenzamos a divagar por varios programas poco apropiados para este fin, ocupando algún editor gráfico o ante la total falta de algo parecido improvisamos alguna chapuzada en el Paint.

Que es y que no es

   Este minitutorial, pretende darnos alguna ayuda en este punto que venimos tratando, no pretende ser un curso de diseño gráfico, ni mostrar todas las herramientas y opciones de un programa determinado, pero sí busca mostrar algunas herramientas básicas, productivas y potentes de Inkscape que obviamente nos servirán para éste y otros propósitos similares como hobbistas de la electrónica.

¿Por qué Inkscape?

   Durante muchos años, me dediqué al diseño gráfico, pero por ese entonces la mayoría de los que lo ejercíamos “tocábamos de oído” sin ser verdaderos diseñadores salidos de una universidad formal, sin embargo con la gente adecuada se aprenden muchas cosas que permiten que uno se desenvuelva con cierta soltura en determinado ambiente y la práctica enseña muchas cosas que la teoría solo confirma, mis primeros pasos fueron con un programa que utilicé y utilizo aún, se llama Corel Draw  y la primera versión que tuve oportunidad de usar fue la versión 3.0 esta versión tenía las herramientas básicas que se mantuvieron hasta la versión que más me gusta usar por estos días, la 12.0 si bien hay nuevas versiones de este programa, de hecho las que más me gustaron y seguiría usando si no fuera que es necesario actualizarse son la versión 6.0 y la versión 8.0 y puedo asegurarles que en el 99% de los casos, bastan las herramientas de estas antiguas versiones para hacer un trabajo de excelente calidad.

   Pero para no desviarnos de la pregunta, la razón es simple, Corel Draw, Adobe Ilustrador, o cualquier otro programa de gráficos vectoriales que quisiéramos ocupar, requerirá del desembolso de algún dinerillo (en general de varios cientos de dólares) de nuestros bolsillos, mientras que Inkscape es total, absoluta y abrumadoramente gratis, además de traer casi todas las herramientas que traen aquellos programas de pago.

   Lo conozco hace un par de semanas, pero me he quedado boquiabierto, sencillamente es bueno y tiene poco que envidiarle a los antes mencionados y estoy decidido a adoptarlo como nueva herramienta de diseño.

   Así que mientras leen estas líneas denle click a download (http://downloads.sourceforge.net/inkscape/Inkscape-0.45.1-1.win32.exe) para bajarlo, que quien se anote en este minicursillo lo va a necesitar.
   Un detallito más, a la hora de instalarlo desabiliten todos los lenguajes que incorpora y dejen solo seleccionado el español.


¿Por qué gráficos vectoriales?

   Muy buena pregunta estimado interlocutor.
   Los dos grandes grupos en los que se dividen los gráficos, son justamente los gráficos de mapas de bits o rasterizados y los gráficos vectoriales, en los primeros una línea estaría representada por una sucesión de pixeles encendidos, mientras que en los segundos una línea estaría definida por el punto de inicio, el punto final y el grosor y color de la misma.
   Ahora bien si yo ampliara el gráfico de mapa de bits de forma exagerada, podría ver cada pixel, y serían unos cuadros enormes, mientras que si amplío un gráfico vectorial, este mantiene su calidad gráfica intacta, esto a la hora de imprimir le da una calidad muy superior.

(http://www.todopic.com.ar/Inkscape/muestra1yv4.gif)

(http://www.todopic.com.ar/Inkscape/muestra2fc2.gif)

Detalle de gráfico ampliado, pueden notarse los pixeles en un grafico de tipo bitmaps

   Por otro lado hacer cambios a un gráfico de mapa de bits podría conllevar una enorme labor, mientras que hacerlo con uno vectorial es extremádamente sencillo.

(http://www.todopic.com.ar/Inkscape/defono3.gif)

Deformación lograda en un circulo con un par de clicks

   Finalmente la idea es aprender mientras hacemos, por lo que vamos a intentar hacer el siguiente frontis y paso a paso iremos descubriendo algunas de las herramientas que tiene esta potente aplicación.

(http://www.todopic.com.ar/Inkscape/todopicde3.gif)

   Espero les entusiasme la idea y bajen el programa porque tiene mucho provecho para sacarle, si no es con esto con otras cosas.
Ruego también tengan paciencia, prometo llevar la tarea hasta el final, pero mis ocupaciones me impiden llevar el ritmo que muchos (incluyéndome) desearíamos.
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: SavageChicken en 27 de Enero de 2008, 23:57:27
Muy bien.

   Ante tal arrolladora cantidad de solicitudes de que continue  :D :D :D , voy a comenzar con la parte básica del Inkscape.
   Lo primero que tenemos que hacer con cualquier programa, es familiarizarnos con su entorno y tratar de recordar en mediana medida, donde estan los botones o menús mas frecuentes de uso y para que sirven estos.

Tras iniciar el Inkscape, nos aparece una ventana como la que sigue, yo me tomé la libertad de girar la hoja 90º para trabajar con la hoja en formato apaisado, pero por lo demás todos deberían tener una pantalla de inicio maximizada más o menos así:

(http://www.todopic.com.ar/Inkscape/areatrabajoxn3.png)

Vista general del Inkscape y sus principales barras y menus

   Vamos a enumerar estas barras y menus y veremos una breve descripción:

1- Menu Principal
   Basta decir que en este menú podremos encontrar todas las acciones que son posibles realizar con los botones de acceso rápido, iremos conociendo algunas de sus herramientas a medida que le demos uso.

2- Barra de Acciones rápidas
   Esta barra contiene botones que permiten las acciones más comunes, como salvar y cargar, copiar y pegar, y algunas acciones más específicas del programa como "agrupar objetos", "alinear objetos" y hacer ajustes de configuración.

3- Barra contextual
   Esta barra cambia dependiendo de la herramienta que tengamos seleccionada, podemos hacer la prueba de dar click a cualquier herramienta de la izquierda (4) y veremos como estos botones cambian.

4- Barra de Herramientas
   Este es el corazón de cualquier programa de diseño gráfico, estas son las herramientas que nos permitirán dibujar y modificar lo dibujado

5- Información Básica de Objetos
   Cuando tenemos seleccionado algúno o varios objetos, podremos ver en esta esquina información tal como su color de relleno, su color de contorno, el grosor de dicho contorno y la opacidad (lo contrario de transparencia) del objeto

6- Información de Capa
   Nunca me acostumbré a usar capas, pero no tienen por que seguir mis malos hábitos, las capas permiten tener nuestro dibujo ordenado, en todo caso, aquí podemos ver información básica de ellas.

7- Información del Cursor
   En este extremo, podemos ver la posición del mouse respecto al eje X e Y, además de ver el factor de zoom

   Tenemos un par de cosas que no he marcado en el gráfico anterior, como son la regla, que nos permite conocer distancias entre objetos por ejemplo, y tenemos también una paleta de colores que luego aprenderemos a usar eficientemente.



   Ok. Estamos en condiciones de tener nuestro primer encuentro con Inkscape. Lo primero que empezaremos a usar es nuestra barra de Herramientas:

(http://www.todopic.com.ar/Inkscape/herramientasye9.jpg)   Como puede observarse, la barra de herramientas consta de 14 elementos, nosostros solo veremos algunos de ellos y quedará por parte de los amables lectores descubrir y darle buen uso al resto de ellos.
Los dos primeros en la parte superior, son las herramientas de selección, ellas proveen de las principales funcionalidades para modificar los objetos que seleccionemos.
(http://www.todopic.com.ar/Inkscape/seleccionnk6.jpg)
Herramientas de seleción

   Estas herramientas tienen un gran número de utilidades y veremos que constantemente recurrimos a ellas para hacer ajustes en los objetos.

   Bien, vamos a comenzar dibujando un rectángulo en la pantalla, para ello debemos dar click sobre la erramienta rectángulo, la cuarta de arriba hacia abajo, una ves seleccionado rectángulo iremos con el mouse a la pantalla, haremos click en algún punto del área de trabajo y sin soltar el botón del mouse lo moveremos hasta formár un rectángulo de cualquier tamaño, y luego soltamos el mouse. Si nos quedamos con la herramienta rectángulo seleccionada, cada ves que hagamos click y arrastremos en la pantalla se dibujará uhn nuevo rectángulo, por lo que antetes de hacer cualquier otra cosa, haremos click en la primera herramienta de seleción que mencionamos hace un momento.

   Si todo ha ido bien deberíamos tener un rectángulo similar al mostrado en la figura:

(http://www.todopic.com.ar/Inkscape/rectangulocl3.jpg)
Nuestro Primer Rectángulo

   Es casi seguro que el color y el contorno sean distintos a los que ven en pantalla, ya que Inkscape utiliza los últimos colores seleccionados para hacer el nuevo objeto, pero a no preocuparse, en breve estaremos en condiciones de cambiar estos.
   Si le hemos dado click a la herramienta de selección, el objeto (en este caso el rectángulo), tendrá an sus bordes una serie de flechas que nos permitiran modificarlo a gusto, si estas flechas no aparecen y tenemos elegida la herramienta de selección, bastará que demos click sobre el rectángulo y éstas aparecerán, si damos un segundo click sobre el objeto, las flechas cambiarán de forma, obteniendo algo como lo que se muestra a continuación:

(http://www.todopic.com.ar/Inkscape/rectangulo2bk5.jpg)
Rectángulo al darle un segundo click con la herramienta de selección

   Una cosa importante a tener en cuenta es que si el rectángulo no tiene relleno (generalmente se distinge por tener solo color de contorno y no tener color de relleno), por más que le demos click a la parte interna no podremos seleccionarlo, deberemos hacer click sobre su contorno para poder hacerlo.
   Bien, vamos a jugra un poco, podemos ver que cada flecha hace una modificación distina en el objeto, las primeras flechas nos dejarán estirar, agrandar o disminuir el tamaño del objeto, mientras que las segundas nos dejarán rotarlo o deformarlo como si lo sometiéramos a un empuje de sentido contrario en cada lado.
   Ahora develaremos el primer truquito, para ello borraremos el actual rectángulo deforme y procederemos a hacer uno nuevo, elegimos la herramienta de selección y le daremos los clicks necesarios para que aparezcan las flechas que aparecen en el primer rectángulo, las flechas para transformar el tamaño.
   Vamos a comenzar a transformar el rectángulo desde una de las flechas que aparecen en los costados (NO EN LAS ESQUINAS) y mientras lo movemos sin soltar el mouse presionaremos la tecla shift, al hacerlo así, el objeto se deforma simétricamente en ambos sentidos, podemos soltar y volver a presionar shift mientras arrastramos el mouse para ver el efecto. Ahora soltamos shift y presionamos la tecla control, veremos que el objeto ahora se transforma proporcionalmente, esto nos asegura que el objeto tendrá un mayor o menor tamaño pero sus proporciones serán idénticas.
   Podemos presionar ahora las dos teclas (shift y control) y veremos que el objeto se deforma desde el centro en forma simétrica y además en forma proporcional. Si ahora tomamos el objeto desde las flechas de las esquinas, tendremos dos grados de libertad, pero además podemos seguir ocupando control y shift para controlar la simetría y proporcionalidad.
   Estas teclas están activas a la hora de crear un objeto, es decir que si queremos hacer un cuadrado perfecto y no un rectángulo que se parezca a un cuadrado, solo debemos presionar control antes de darle click al primer vértice y soltarlo luego de hacer el segundo vértice, y si además presionamos shift, Inkscape tomará el primer click como el centro del objeto y no como el vértice, haciendo que el cuadrado crezca desde ese primer punto en todas direcciones por igual.
   La tercera opción, es presionar la tecla Alt, con ella Inkscape hará movimientos más pequeños, permitiendo un control más preciso a la hora de crear o modificar objetos.

   Pasemos ahora a ver que pasa con el segundo juego de flechas. Pues bien, ya vimos que permiten rotar y torcer el objeto, pero ¿qué pasa si presionamos control?, Lo que sucede es que el objeto ya no rota con toda libertad, sino que lo hace en pasos de 15º, esto es muy util si queremos hacer rotacione de 15º, 30º, 45º, 90º etc. lo mismo sucede con el torcimiento del objeto, se hace en los mismos grados antes mencionados.
   ¿Y si apretamos shift? con esta opción cambiamos el centro de rotación al extremo opuesto del elegido para rotar o torcer, y también puede usarse en conjunto con control para hacerlo en pasos de 15º.

   Seguramente se estarán preguntando como hacemos para que los pasos sean de valores distintos a los 15º, les aseguro que es muy sencillo, pero tiempo al tiempo, por ahora dejamos hasta aquí, y ¡hale, hale! a jugar un rato con el Incscape, que estoy seguro que ya le están encontrando el gustito a las herramientas. Espero poder mañana entregar una tercera parte.

Salud  8)
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: poseidon20 en 28 de Enero de 2008, 02:16:38
No se preocupe profesor SavageChiken, ya me matricule a su tutorial, por lo menos ya tiene un alumno para su clase  :-/ :-/, estoy siguiendo con pasiencia su curso  :mrgreen:

P.D: Soy el primero en apuntarme a su clase maestro  :mrgreen: :D :D
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: J1M en 28 de Enero de 2008, 02:29:47
Gracias por el tutorial, me apunto a seguirlo!!! está muy muy interesante, creo q a muchos va a sernos muyyyy util!

Saludos y gracias de nuevo! :)
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónic
Publicado por: micro_cadaver en 28 de Enero de 2008, 02:41:35
yo tambien me apunto SavageK , eso de los vectoriales lo ignoraba, hoy aprendi algo nuevo  :mrgreen:
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónic
Publicado por: stk500 en 28 de Enero de 2008, 04:49:37
 :-/ :-/ :-/ estoy en la cola, me apunto tambien  amigo SavageChiken  :-/ :-/ :-/
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: Nocturno en 28 de Enero de 2008, 08:03:31
Yo también me apunto. Me gusta mucho la idea.
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: El_Guitre en 28 de Enero de 2008, 08:15:54
Bien, me anoto a este curso. Hay descuento para los primeros inscriptos??  :D :D
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: SavageChicken en 28 de Enero de 2008, 08:43:40
Gracias... mil gracias estimado pupilos y bienvenidos a clases  :mrgreen:

La matrícula es absolutamente gratis, asique a no preocuparse, vamos a tener lista una nueva clase para esta noche (o al menos noche en mi zona horaria  :D :D :D)

Gracias nuevamente por contar con vuestra amable audiencia.

Salud  8)
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónic
Publicado por: aitopes en 28 de Enero de 2008, 09:06:52
Muy bueno lo suyo, amigo!!!!

Otro que se apunta al hilo. Gracias por el esfuerzo!

Saludos.
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: elmasvital en 28 de Enero de 2008, 11:25:53
Fantasticho chick apunta a otro
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: jfh900 en 28 de Enero de 2008, 11:53:59
Me parece interesante. Me apunto.

Un saludo
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: picNIC en 28 de Enero de 2008, 21:01:12
Escuche GRATIS!!!!   me anoto.....  lindo programita...

salu2
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: SavageChicken en 29 de Enero de 2008, 01:43:56
   Ok, cuento diez participantes, asique podemos hablar de un buen grupo para la clase.

   Seguramente no todos están al mismo nivel de conocimiento, asique pido paciencia a los más avanzados ya que la idea es conocer lo mejor posible las herramientas, esto implica tratar de aprender la mayor cantidad de ventajas de esta herramienta. Pero en breve estaremos haciendo cosas muy interesantes.

   De ahora en más quisiera pedirles que tengan abierto el programa simultaneamente con la página del foro, para ir probando lo que vamos viendo, comencemos entonces.

Los tres mosqueteros: Control, Shift y Alt lo hacen de nuevo
   Bien, recordamos que en la clase anterior estuvimos viendo algunas funciones de la primera herramienta de selección del panel de herramientas de la izquierda, pero no hemos visto una de las funciones más sencilla de esta herramienta... mover objetos. Pues si, damos click a la herramienta de selección y podemos hacer click en cualquier objeto y arrastrarlo y soltarlo donde queramos en el área de trabajo, cualquier objeto fuera de la hoja no podrá ser imprimido y todo objeto dentro del área de la hoja podremos imprimirlo siempre y cuando este objeto esté en una capa habilitada para la impresión.
   Parece demasiado obvio lo que estoy diciendo, pero ahora veremos como nuevamente vienen a nuestra ayuda la tecla control, en general veremos que las teclas shift control y alt permiten potenciar las herramientas utilizadas.
   Como decía, si ahora presionamos la tecla control, podremos hacer que el objeto se mueva solo en uno de los ejes, permitiendo entonces que si hemos colocado un objeto en un determinado lugar y encontramos que está bien ubicado verticalmente pero no nos gusta su posición horizontalmente, podemos moverlo solo en el el eje X y mantener su posición en el eje Y. Lo mismo si deseamos moverlo en el otro eje, bastará con que lo desplacemos más en un sentido que en el otro y el programa reubicará el objeto en el eje las coordenasdas iniciales del eje de menor desplazamiento y solo lo moverá en el eje de mayor desplazamiento. Jugando un poco, soltando y apretando control mientras movemos un objeto, nos daremos cuenta de lo que estoy diciendo.
   Una cosa más antes de entrar a algo más divertido, habrán notado que si movemos el roller del mouse podmos subir y bajar dentro de la hoja, ¿qué se les ocurre hacer?..... eso mismo presionar control y ver que pasa... pues que podemos hacer zoom a la imagen, tanto para hacercarnos como para alejarnos, noten algo interesante, el programa hace zoom tratando de centralizar en pantalla el punto donde esta el cursor del mouse, entonces antes de hacer zoom a una zona que nos interese, debemos colocar el mouse sobre esa zona, entonces Inkscape nos llevará justo a donde queremos ir.  Nos queda otra tecla... efectivamente shift, con ella presionada haremos que el programa se desplace ahora en el eje "Y" para mostrarnos lo que hay a la izquierda o derecha del dibujo.

   Quedan algunas cosas más por ver referente a la segunda herramienta de selección, pero hice un compromiso al comenzar este mini tutorial, y era el de aprender haciendo, asique vamos a proponernos un trabajo y lo hemos de llevar a cabo mientras aprendemos, como buenos alumnos deberan ir haciendo algunos ejercicios que iremos proponiendo, acabo de crear una cuenta de correo y los que lo deseen pueden enviarme sus trabajos, yo no diría que para corregirlos, pero si para darles un vistaso y ofrecer alguna ayuda o sugerencia si amerita.

La meta:

(http://www.todopic.com.ar/Inkscape/metaxp1.png)
Diseño Propuesto

   Vamos a proponernos realizar este sencillo diseño, y simultaneamente, vamos a ir aprendiendo algunas cosillas:
   Como primera medida vamos a realizar el ya conocido rectándulo, sin que por ahora nos importe la forma, tamaño o color que este tenga, luego le daremos click a la herramienta de selección y nos quedará algo así:

(http://www.todopic.com.ar/Inkscape/rectangea3.png)
Primer rectángulo

   De ahora en más para hacer más rápida la lectura, cuando vean una imagen con los tiradores en la orilla, significa que tenemos escogida la herramienta de selección, y si tenemos las flechas para girar, es que además le hemos dado un segundo click al objeto, ustedes ya están en condiciones de identificar estas acciones.

   Si miramos en la barra contextual de la parte superior, podrán observar una seria de botonos y algunos números que pasaremos explicar y a empezar a usar. Pero antes una imágen de lo que estamos hablando:

(http://www.todopic.com.ar/Inkscape/contextualseleccionsz4.jpg)
Barra contextual de la herramienta de selección

   Podrán observar cuatro casilla con números, estos son:

   X: Posición del objeto en el eje X
   Y: Posición del objeto en el eje Y
   W: Ancho del objeto
   H: Altura del objeto

   Bastará entonces que escribanos en los dos primeros casilleros algún número, para lograr que el objeto cambie de posición en la hoja y si lo hacemos en los dos últimos podremos darle el tamaño que nos plazca. Además a la derecha de estos cuadros hay un menu del tipo drop down, con él podemos escoger distintas unidades para realizar estos cambios, a saber:

   %: Porcentajes
   pt: Puntos
   px: Pixeles
   mm: Milímetros
   cm: Centímetros
   m: Metros
   in: Pulgadas

   Con el tiempo aprendí que nadie me obliga a nada, sin embargo también aprendí que nos es malo seguir un buen consejo, es por eso que voy a darles uno, y cada quien decide si lo toma o no.
   Cualquiera de estas medidas puede ser tan buena como otra, sin embargo es preferible que cuando realizamos un diseño que terminará en una hoja de papel, usemos medidas como los milímetros y los centrímetros, y cuando nuestro diseño va a terminar en un monitor, usemos pixeles, porque de esta forma estaremos más claros de cuanto mide el objeto con relación al espacio en el que vamos a ubicarlo. Es muy dificil saber cuantos pixeles ocupará algo de 20 cm en un monitor con resolución de 1024x768 pixeles, pero si me dicen que el objeto tiene 800 pixeles de ancho, sabré que se verá completo en la pantalla. Lo mismo sucede al revés. Es por eso que como nuestro diseño pretende ser usado en el frente de un equipo convendría ir tomando la regla y medir cuantos centímetros o milímetros tiene dicho frente y escribir esa medida en milímetros o centímetros (dependo de lo escogido en el menú drop down) en los cuadros W y H.
   Para que todos nos manejemos con las mismas unidades, voy a proponer unilateralmente  :mrgreen: que usemos los milímetros, luego de escoger esta unidad, vamos a escribir entonces: W=300; H=30
   Con estas medidas tendríamos un frente de 30 cm de largo y 3 centímetros de alto, verán entonces como el rectángulo toma la forma que estamos buscando.
   Podemos ahora moverlo con la herramienta de selección a donde sea nuestra preferencia, usando para ello el mouse o escribiendo en X; Y la posición deseada.
   Lo siguiente que vamos a hacer es cambiar sus colores, para que sean idénticos a los del patrón que estamos siguiendo, hemos de usar para ello una herramienta ubicada en la esquina inferior izquierda de Inkscape:

(http://www.todopic.com.ar/Inkscape/bordefiletefl5.jpg)
Herramienta de Relleno, Contorno y Opacidad

Con ellas podemos modificar el tipo y color de relleno, el tipo y color del contorno, el grosor y características del contorno y la opacidad del objeto, pinchando sobre ellas se abre una nueva ventana con opciones para hacer cambios en el objeto.

(http://www.todopic.com.ar/Inkscape/bordefiletetoolzl2.jpg)
Las tres pestañas de la herramienta de Borde y Relleno desplegadas

   En la parte superior de esta ventana, tenemos tres pestañas, que yo estoy mostrando en conjunto en la imagen anterior, hay una gran variedad de opciones y posibilidades aquí, pero iremos dando pequeños pasos, asique aprenderemos primero a dar colores de relleno uniforme en primera instancia. Para ello escogemos la pestaña y veremos algo similar a los que se ve en la parte izquierda de la imagen anterior, vemos que bajo la palabre "relleno" hay una serie de botones, ellos de izquierda a derecha tienen el siguiente significado:

   Sin relleno: Al escoger este, nuestro objeto será transparente dejando ver lo que ubiese detras de él, pensémoslo como un marco de una foto pero sin foto.
   Color uniforme: Con él podemos darle al objeto un color parejo a todo el objeto, tiene a su vez un subgrupo que dice:
           RGB: Variamos los colores usando proporciones de Rojo Verde y Azul (Red Green Blue)
           HSL: Similar al anterior pero en este caso variamos el Tono la Saturación y el Brillo (Hue, Saturation, Lightness )
           CMYK: Otro modelo de color en este caso variamos proporciones de Cian, Magenta, Amarillo y Negro
           Rueda: En este modelo apuntamos en una rueda el color que nos apetezca.
    Además todos ellos agregan en la parte inferior la letra A, este es llamado "canal alfa" y representa un nivel de transparencia del color elegido, eso permite por ejemplo hacer efecto de cristales coloreados dejando transparentarse en mayor o menor proporción lo que está debajo
   Gradiente Lineal: Aqui hay mucha tela que cortar, lo veremos con detenimiento en breve, baste con explicar que permite hacer degradé de colores en forma lineal.
   Gradiente Circular: Lo mismo que el anterior, para degradé de colores en forma circular.
   Patrón: En otros programas esta herramienta permite cargar un dibujo y usarlo como relleno, repitiéndolo como un "Tile", pero aun no he aprendido como usarlo en Inkscape (Recuerden que hace solo un par de semanas que lo estoy usando :mrgreen:)

   Bien para que todos hablemos el mismo idioma vamos a utilizar RBG, escogemos entonces Color uniforme, y llenamos las casillas de RGB con 0,0,128 y obtendremos el azul que buscamos. El canal Alfa lo situamos en 255 eso implica que nuestro objeto es totalmente opaco, sin dejar que se vea nada de lo que hay debajo de él.
   Pasamos ahora a color del trazo y vemos que Inkscape permite que el traso tenga idénticas posibilidades que el relleno, debo mencionar que otros programas son más limitados en esto, permitiendo que el trazo solo tenga colores uniformes. ¡¡Punto a favor de Inkscape!!
   En color del trazo elegimos RGB, y lo dejamos 0,0,0 y canal alfa 255, esto nos dará un relleno de color negro y sólido.
   Pasamos finalmente a estilo del trazo, en el ancho escogemos milímetros y le daremos un grosor de 0,5, lo demás lo dejamos como viene por defecto, y ya veremos alguna de sus utilidades.

   Basta con cerra esta ventana y los cambios son aplicados inmediatamente. Recordemos que el programa tiene la posibilidad de hacer "undo" (podemos hacerlo en forma rápiza con: Control Z) de modo que si nos equivocamos en algo podemos volver atrás.

Ok, eso por hoy, vamos a guardar nuestro trabajo para seguirlo la próxima clase, creo que todos sabemos hacer eso  :D :D :D
Pueden ir viendo las múltiples opciones de los rellenos verán que es una herramienta muy potente.

   A partir de ahora los avances serán más vertiginosos. Espero les haya gustado y sigan con la clase.

   Alumnos pueden retirarse.... Salud  8)
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: poseidon20 en 29 de Enero de 2008, 01:59:32
Ningun retirarse, "Retroceder Nunca, rendirse jamas"  :D :D :D :D
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónic
Publicado por: flacoclau en 29 de Enero de 2008, 02:42:47
otro que se suma.... :-/ :-/ :-/
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónic
Publicado por: PalitroqueZ en 29 de Enero de 2008, 20:42:13
otro mas  :mrgreen:

a ver si aprendo de una vez por todas (una cosa que siempre me molestó es no tener aptitud para el diseño gráfico)

Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: SavageChicken en 29 de Enero de 2008, 23:56:52
Bienvenidos entonces los que se van sumando.

   Hoy vamos a intentar avanzar lo más posible en el diseño propuesto, esto se debe, a que si han seguido con atención las clases anteriores, podré decir simplemente que hagan un rectángulo de 25 x 30 centímetros de color RGB 25,64,200 canal Alfa = 255 con borde negro 1 milímetro y todos deberían poder hacerlo en un dos por tres.
   Si les pido un circulo de 10 cm. de radio con iguales caraterísticas sabrán ubicar la herramienta y bastará que le den 200 mm. de ancho y alto (ya que el ancho es el diámetro) y lo demás es pan comido.

Tropas... Alinearse!!!

   Ok, cargemos lo que hicimos ayer, o bien hagamos el primer rectángulo con las medidas y colores indicados en la última clase. Recordemos medidas en milímetros colores RGB. Hagamos entonces un nuevo rectángulo de W=85 H=20 RGB 0,0,255 Alfa=255 con borde negro de 0,5 mm
   Una forma mucho más rápida de darle color de relleno a un objeto es dando click con el boton principal sobre alguno de los colores que figuran en la barra de colores que tenemos en la parte de abajo del programa, justamente el azul que estamos proponiendo, está entre los primeros colores y recibe justamente el nombre de "Blue".
   Seguramente no les quedó en el lugar apropiado, pero ahora vamos a ver como Inkscape nos ayuda con la tarea de ubicar objetos, para ello vamos a utilizar la herramienta alinear y distribuir, esto lo encontramos en el menú: Objeto-->Alinear y distribuir, o si lo prefieren con las teclas de acceso rápido Ctrl+Shift+A.

(http://www.todopic.com.ar/Inkscape/alineardistribuirzt3.jpg)
Alinear y Distribuir
   Como Podemos observar, aquí tenemos una gran variedad de opciones, por desgracias, se haría muy extenso que las analizáramos todas y cada una, pero lo que les voy a mostrar es un puntapié inicial, y ustedes son lo bastante curiosos como para desde lo aprendido aprovechar todas las ventajas que esta herramienta nos brinda.
   Vamos a usar solamente la sección de alinear y queda entonces como tarea que ustedes investiguen la sección distribuir, solo les comento que la última parte es más fácil de entender con tres o más objetos.
   Para Alinear primero necesitamos dos o más objetos, en este caso debemos seleccionar los dos rectángulos que tenemos dibujados, hay varias formas de hacer esto, la más sencilla quizá es con la herramienta de selección arrastrar de modo que encerremos en el rectángulo que se forma la totalidad de los objetos que queremos seleccionar, si no los cubrimos por completo Inkscape no los selecciona, la segunda opción es dar click sobre los objetos que nos interesan manteniendo la tecla shift presionada, de esta manera se van sumando objetos a la selección. En esta oportunidad es mejor hacerlo de esta manera, y podremos ver la razón inmediatamente.
   Una ves escogidos los objetos a alinear, hacemos Control+Shift+A para que salga el menú de Alineación y lo primero que vemos es la frase Relativo a: Esto es súmamente importante, depende de lo escogido en ese casillero es como ha de realizarse la alineación. En particular yo prefiero la opción Ultimo selecionado, pero veamos que es cada uno.
   Ultimo selecionado: Significa que cuando se alinien los objetos el últmo seleccionado permanecerá fijo, y el resto se moverá para alinearse según lo deseado.
   Primero selecionado: Idem al anterior, pero el que permanecerá fijo ahora será el primero.
   Elemento mayor: Idem, pero el fijo será el mayor.
   Elemento menor: Idem, pero el fijo será el menor.
   Página: Los objetos se alinerán con respecto a la página
   Dibujo: Los objetos se alinean con respecto al conjunto de todos los objetos dibujados
   Selección: Los objetos se alinean con respecto al conjunto de todos los objetos Seleccionados.

   Como ya les adelanté mi preferencia es la primera, de esta manera elijo en primer lugar el objeto que quiero que se mueva, y en segundo lugar presiono shift y hago un click sobre el objeto que estará fijo y finalmentecon la herramienta de alineación logro que el objeto se ubique en el lugar que me parece mejor.
   Jugando un poco pueden ver los resultados de las distintas opciones. Como les comenté para que funcione distribuir, deben escoger a lo menos 3 objetos.


   Muy bien vamos a central los dos objetos y luego damos un click en alguna parte de la pantalla que esté en blanco, de esa manera deseleccionamos todos los objetos y que damos en libertad de hacer una nueva selección, ahora vamos a seleccionar el el rectángulo más pequeño y manteniendo control presionado lo vamos a arrastrar hacia la orilla izquierda, tratando de que nos quede parecido a la figura que pretendemos lograr. (Notarán que les pido que presionen control mientras arrastran, esto permitirá que el objeto no se nos mueva en el eje Y, donde ya está centrado.)

Clonando clonando y con el mazo dando

   Ahora en algún logar en blanco del area de trabajo vamos a hacer un nuevo rectángulo y le vamos a dar las siguientes características: W:1,4 H:1,4 RGB 0,0,128 Alfa=255, sin Borde (Recordemos que el boton que parece una X es el que quita bordes o rellenos)
   Este cuadrado pequeñito, será la base para hacer el display donde leemos TODOPIC.
   Inkscape permite duplicar objetos, la forma más sencilla es seleccionando él o los objetos que queremos duplicar y presionar la combinación de teclas "Control+D", por defecto el programa crea los duplicados en el mismo lugar que su original, pueden probar de hacerlo una vez y mover el objeto creado, verán que debajo de él está el original, (a no olvidar esto que es muy útil), pero se imaginan que duplicar un total de 432 cuadritos uno por uno sería una tarea muy tediosa, si bin una forma más sencilla y bastante usada es por ejemplo duplicar el cuadrito 9 veces hacia abajo y el conjunto de nueve cuadritos duplicarlos hacia un costado, y obtendríamos así los 432 cuadritos, pero, vamos a usar otra herramienta más productiva, se llama Clonar.
   Para ello vamos a ir al menu Edición-->Clonar-->Crear Clones en mosaico y saldra una ventana con las opciones para hacer clones.
   Si ustedes creen que voy a explicar todas y cada una de las opciones que tenemos... estan locos  :D :D :D, pero pueden ver dando un paseito por las pestañas, todas las opciones que permite, nosotros nos contentaremos con setear lo siguiente, en la pestaña simetría, seleccionaremos traslación simple y en la pestaña Desplazamiento pondremos los valores que ven en la imagen:
   Todas las demás pestañas las dejamos como vienen por defecto, y si hemos estado jugando y no podemos dejarla como en un principio, podemos usar el botón Reiniciar para dejarlo con los seteos por defecto. Obviamente primero debemos seleccionar el objeto que queremos clonar y luego dar click en crear.
   Si nos ha salido mal, antes de nada le daremos al botón eliminar para que no se nos llene la pantalla de clones indeseados  :mrgreen:
   Si todo ha ido bien, tendremos algo parecido a un rectángulo lleno de cuadritos.
   Algo bien importante es que con este sistema queda un clon ubicado justo encima de la pieza original, si borramos el cuadrito ubicado en el extremo superior izquierdo del conjunto, veremos que hay otro cuadrito debajo, éste es el original.
   Lo importante del original, es que los clones lo imitan, si por ejemplo le cambiamos el color al original, todos los clones toman el mismo color, por el contrario no podemos cambiarle el color a los clones, ellos solo obedecen a los cambios que se realicen sobre el original.
   Nos estaremos dando cuenta de que esto no es lo que queremos, ahora necesitamos poder cambiarle el color a los cuadritos en forma independiente... bien, a no asustarse, una ves más Inkscape viene en nuestra ayuda, basta selecionar todos o algunos de los clones y nos vamos al menu Edicion-->Clonar-->Desconectar clon y ahora tendremos 432 cuadritos con total independencia. (no se asusten, demora un poquito)
   Ok, es hora de aprender algo más, me imagino que se estarán preguntando como hacemos para llevar todos estos cuadritos tan bien alineaditos hasta el rectángulo que representa el display, la forma larga sería uno a uno.... :D :D :D, es broma, la forma de resolverlo es usar una nueva herramienta, y se llama Agrupar:

(http://www.todopic.com.ar/Inkscape/agruparpu7.jpg)
Agrupar y Desagrupar

   Si elevan la vista hacia la primera barra superior, encontrarán estos botones, ellos permiten hacer que un conjunto de objetos funcionen como si fuese uno solo, y también es posible a un grupo creado desagruparlo para que vuelvan a ser objetos independientes, vamos ahora a seleccionar todos los cuadritos pequeños y dando click al botón correspondiente los vamos a agrupar. Ahora que son un conjunto, podemos utilizar la herramienta de alineación para alinerlos al centro del rectángulo más pequeño.

(http://www.todopic.com.ar/Inkscape/clonajerv8.jpg)
Herramienta para clonar con los valores deseados.

Hagamos una Gradiente, pero no se me caliente

   Vamos a hacer algo más el día de hoy, pero no será encender el display, estará apagado hasta mañana.... (Que malo soy   :twisted:) ahora vamos a crear nuestro primer circulo (Aleluya, ya esta harto de tantos rectángulos), le daremos las siguientes dimenciones: W=12 H=12 RGB (255,0,0) A=0 Color del trazo Negro y un ancho de trazo de 2 px (NO 2 mm)
   En estas condiciones vamos a hacer un relleno en degradé circular, para ello abrimos la herramienta que permite cambiar los colores (lo que vimos ayer) y escojemos en el tipo de relleno Gradiente Radial Una ves dentro, buscamos el boton editar y le damos click, con lo que obtendremos la siguiente ventana:

(http://www.todopic.com.ar/Inkscape/gradientesi0.jpg)
Edición de una Gradiente Radial
     Para entender una gradiente, pensemos en un atardecer soleado, notamos que en la parte más alta el cielo es de un tono más amarillento, mientras que en la parte más baja el color es mas rojizo, al hacer una gradiante, nosotros elegimos el primer y el último color y el programa se encarga de buscar los colores necesarios para hacer una transición desde uno de los colores hasta llegar al otro, en Inkscape, a estos colores principales se les llama paradas y podemos colocar tantas paradas como deseemos, luego solo debemos escoger la parada a la que queremos asignarle un color y lo hacemos con las opciones de abajo, eso incluye la posibilidad de hacer que el color sea más transparente en un punto que en otro.
    Pero estamos haciendo una gradiente circular, eso además implica que los colores se mostrarán no como una linea recta de arriba hacia abajo o de izquierda a derecha (pueden probar esto en la opción gradiente) sino que aqui los colores iran tomando posiciones concéntricas desde el centro del objeto hasta sus extremos.
  Para nuestro caso, hemos usado solo dos paradas (más que suficiente para lograr algo muy elegante), en la primera parada colocamos el color más intenso RGB 255,0,0 A=255 y en la segunda parada colocamos el rojo más oscuro RGB 128,0,0 A=255, (presten atención a cambiar el canal alfa, ya que por defecto Inkscape usa en la segunda parada A=0) Al cerrar, deberíamos tener algo parecido a esto:

(http://www.todopic.com.ar/Inkscape/botonhx4.png)
Botón con gradiente circular

Pero mirando con atención podemos ver que el botón que intentamos dibujar tiene el punto más brillante cerca de la parte superior izquierda, como si la luz viniese de arriba y un poco del lado izquierdo, para lograr eso, Inkscape cuenta con una herramienta que permite mover los rellenos con gradientes, está ubicada en el grupo de herramientas principal, se llama "Crear y editar gradientes" o también pueden acceder a ella con la tecla rápida "Control+F1", una ves seleccionada, aparecen en el objeto una serie de tiradores que permiten rotar y trasladar la gradienete hasta donde nos parezca mejor, a por ello entonces y dejarla parecida al modelo propuesto

   Finalmente podemos alinear el boton y ubicarlo de modo que quede similar a lo propuesto, mañana aprenderemos a dejar los objetos al milímetro donde deban estar, esto es porque no nos sirve un frente con los objetos en posiciones aproximadas, sino que necesitamos dejarlos en donde definitivamente van, además nos esperan otras herramientas y truquitos para sacarle todo el jugo a Inkscape.

A guardar y nos vemos la próxima.

P/D: Ayer comenté que podían enviarme mail con sus avances o incluso consultas, aunque estas últimas prefiero que se hagan en el foro para provecho de todos, pero no les di la dirección de mail  :D :D :D. Bueno ahora les cuento que la dirección es aprende.inkscape@gmail.com

Salud  8)
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: Nocturno en 30 de Enero de 2008, 07:28:38
Me está encantando la aplicación SavageChicken. Y pensar que hasta ahora cuando he necesitado diseñar algo vectorial estaba utilizando PowerPoint  :(

Gracias por descubrirnos esta herramienta.
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: SavageChicken en 30 de Enero de 2008, 09:31:07
Hola Manolo.

   Que bueno que les agrade el programita, la verdad es que la mayoría cuando debe hacer un dibujo trata de no complicarse y opta por alguna herramienta sencilla y que conozca como usar, y por lo demás este tipo de programas los saben utiliar aquellos que como yo hemos tenido la suerte de trabajar en un medio gráfico, lo mismo que a pocos se les ocurrira aprender a usar el Eagle para hacer un circuito de un par de pistas, de hecho a mi me pasa lo contrario, estoy tan acostumbrado a usar herramientas como estas, que de hecho no uso programas de ruteo para hacer mis circuitos :P, pero por otro lado es un grave error ya que me estoy perdiendo de funcionalidades específicas para este fin.
   Ahora bien, a medida que vamos descubriendo las posibilidades de algún programa en particular nos vamos maravillando con él, a mi en particular me encanta que estas herramientas pasen a manos de todos, como lo que hacen los creadores de este programita y que el manejo con ellas no sea patrimonio de un club exclusivo.
   Lo mejor de todo, es que lo que nos falta por ver es justamente las mayores fortalezas y potencialidades de esta aplicación  :-)

   Espero que no se pierdan lo que viene, aunque parece que hoy día voy a tener que trabajar hasta tarde y no se si llegue a un horario apropiado para hacer la clase :(

   Pero a no desesperar que como lo prometí vamos a llegar hasta el final.... Salud  8)
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: ASTROCAR en 30 de Enero de 2008, 11:58:26
me parece excelente la aplicacion ya estoy siguiendo todo al pie de la letra gracias por su intension.

saludos y no se olvide de dar todos los detalles por pequeño que sean.
bye
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: SavageChicken en 30 de Enero de 2008, 13:29:51
Gracias por el apoyo Astrocar.

Ver las muestras de que lo que estoy haciendo ayuda a otros me anima a seguir con el curso.
Un saludo grande y nos vemos en breve con otra nueva clase.

 :wink:
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónic
Publicado por: Micro23 en 30 de Enero de 2008, 18:30:38
Adelante! Adelante!  SavageChicken te sigo con el Minicurso...que va muy bien. :-/
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónic
Publicado por: PalitroqueZ en 30 de Enero de 2008, 19:42:23
Bueno. Anoche hice unas pruebas para copiar varios layouts realizados en eagle. imprimí a pdf desde el board y luego con el Inkscape "dupliqué" varios en una misma página.

 :lol:
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: Nocturno en 30 de Enero de 2008, 19:52:31
¡¿No me digas que abre los PDF?!
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónic
Publicado por: PalitroqueZ en 30 de Enero de 2008, 19:59:43
si que si los abre, los guarda, y si vieras el viaje de formatos que soporta.

Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: SavageChicken en 30 de Enero de 2008, 20:05:13
Parece que los pupilos están descubriendo solitos de todo lo que es capaz!!  :-) :-) :-)

Felicitaciones, ese es el espíritu  :wink:
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: SavageChicken en 30 de Enero de 2008, 20:09:21
Un datito más, el formato nativo de Inkscape (svg) significa Scalable Vector Graphic y es compatible con la mayoría de los navegadores de internet cargando un pequeño plugin, de modo que los archivos grabados pueden ser mostrados directamente en la pantalla de cualquier navegador, ¿Les gustó? 8)
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónic
Publicado por: RedPic en 30 de Enero de 2008, 20:12:00
SavageChicken:

Ultimamente no sé en qué leches he estado pensando pero se me han ido escapando algunos hilos que recién descubro ahora. Este me lo acabo de encontrar y me ha entusiasmado. Ya esta siendo descargado el soft y me pongo manos a la obra. Muchas gracias pollo.  :mrgreen: :mrgreen: :mrgreen:
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: Nocturno en 30 de Enero de 2008, 20:27:56
No consigo abrir ni importar los PDF, ¿cómo tengo que hacerlo?
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: SavageChicken en 30 de Enero de 2008, 22:22:01
Estimado Manolo, tienes toda la razón, si bien el programa maneja variados formatos, solo es capaz de exportar a pdf, pero no de importar.
Al menos yo que baje la versión estable (0.45.1) veo que no tiene forma de leer archivos pdf, me parece que Pedro se bajó la versión beta (0.46) que según vi por ahí es capaz de leer pdf.

Salud  8)
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónic
Publicado por: El_Guitre en 31 de Enero de 2008, 01:37:32
Me esta gustando el programita, muy buenas clases señor instructor! Avancemos sin ton ni son!!  :mrgreen: :mrgreen:.


(http://img245.imageshack.us/img245/1786/frente1rs1.png)
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: Gorgonas en 31 de Enero de 2008, 04:13:08
Siguiendo el manual :D
Pero no me cuadran las medidas :D si el primer rectangulo era de  W=300 H=30,  el de las letritas de puntos de W=300 H=70 no me cabe dentro y el circulo de W=40 y h=40 tampoco :D que hacemos estiramos el 1 o encogemos el resto jeje
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: SavageChicken en 31 de Enero de 2008, 09:36:35
Un BUUUUUUUUU grande para el profe, que no se fijó que la barra estaba en pixeles y anotó los valores sin prestar atención


BUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUU

Efectivamente Górgonas, las medidas están mal, vamos a hacer un fe de erratas y poner las medidas correctas
Cuadro Grande: W=300 H:30
Display: W:85 H:20
Cuadritos o Pixeles del Display: W:1,4 H:1,4
Botón Rojo: W:12 H:12

Salud  8)

P/D: Tal como comenté el trabajo me tiene atrasado, pero en breve seguimos :P
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: Gorgonas en 31 de Enero de 2008, 11:43:08
Gracias, ahora ya me cuadran las cosas xD
Ale ahi va el mio por el momento...

(http://img507.imageshack.us/img507/1678/path10367br7.png)
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: SavageChicken en 31 de Enero de 2008, 12:11:55
   Gorgonas y el Guitre, muy buen trabajo, recuerden correr el degradé del botón hacia el sector superior, esto lo hacen como lo indiqué anteriormente:

   Presionen, "Control+F1", aparecen en el objeto una serie de tiradores que permiten rotar y trasladar la gradienete hasta donde nos parezca mejor, a por ello entonces y dejarla parecida al modelo propuesto

   Eso hará que parezca que la luz viene desde arriba.

Nos vemos y Salud  8)
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: El_Guitre en 31 de Enero de 2008, 13:36:38
Si lo estuve probando a eso, pero la verdad me gusto como quedaba asi  :mrgreen:. Vi que el programa tiene la posibilidad de poner lineas guias, como el corel por ejemplo. Me esta gustando cada vez mas.

Una pregunta, se puede cambiar el origen de coordenadas a un punto cualquiera a eleccion nuestra? Eso seria muy util a la hora de respetar medidas de un frente por ejemplo. Saludos estimado profesor.
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: SavageChicken en 31 de Enero de 2008, 13:56:27
   Justamente la clase siguiente contempla el uso de lineas guía, pero leyendo todo el manual (en ingles) descubro que no tiene forma de mover el origen de las coordenadas como lo hace el Corel, cosa que no me gustó mucho, pero tampoco es un escollo insalvable.

Salud  8)
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: El_Guitre en 31 de Enero de 2008, 14:18:39
ahhh me parecia, anoche busque y busque la forma de moverlo pero no, ahi se quedó. Es una herramienta útil pero tampoco indispensable, a lo sumo tendremos que sumar o restar medidas. Saludos.
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónic
Publicado por: todopic en 31 de Enero de 2008, 15:13:13
Hola Amig@s!!!, hola SavageChicken  :-/ , gracias por este fantastico curso, asi que pido permiso para entrar (un poco tarde)
Yo trabajo algo con Corel, y me sorprendio el poder de este programa, y lo "liviano" para trabajar..., recien lo termino de descargar, y he jugado con deformaciones de la figura "estrella" y es fabulosa!

Ya me pongo  hacer los deberes!!!!  :D

Un abrazo

Norberto
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: SavageChicken en 31 de Enero de 2008, 16:29:45
Gracias Jefe y bienvenido, y gracias por ponerle chincheta, recién buscaba el post y no lo encontraba  :D :D :D

Habrá que seguir haciendo el empeño :P, nos vemos  8)
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónic
Publicado por: todopic en 31 de Enero de 2008, 16:42:00
jA JA!, considero unas chinchetas bien merecidas!!!  :-/

He estado jugando, y me agrada mucho la posibilidad de desenfoque y transparencias!, lo simple de emplear, para hacer sombras en letras, es barbaro!!!

Seguimos practicando!

Un abrazo

Norberto
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: Azicuetano en 31 de Enero de 2008, 18:16:40
Me ha gustado el programa.

Gracias SavageChicken por instruirnos a todos  :mrgreen:

Eso si... por idiomas que no falte  :D

(http://img352.imageshack.us/img352/4766/flipaencoloresle6.jpg)

Voy a empezar ahora mismo por el primer post a ver si hago algo de probecho  :D


Un saludo desde Alicante.
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: SavageChicken en 31 de Enero de 2008, 18:20:11
Idioma Mordoriano (Traducido por Gandalf)  :D :D :D :D :D :D

No había visto eso, genial... me dieron ganas de istalarlo de nuevo con ese idioma a ver que han traducido.

Salud  8)
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: Azicuetano en 31 de Enero de 2008, 18:32:09
Noooo!! Que era broma!!  :D :D :D

Es que es el único que le faltaba  :D


Un saludo desde Alicante.
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: Nocturno en 31 de Enero de 2008, 18:38:21
Jaja, qué bueno....  :D  :D  :D
 :-/ :-/ :-/ :-/ :-/ :-/ :-/
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: SavageChicken en 31 de Enero de 2008, 18:45:17
Azicuetano malo, eso no se hace, me hiciste desinstalar el programa por nada.  :5] :5] :5]


No hay problema, pero te salió muy bueno el montaje, no me di cuenta. :D

Salud  8)
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónic
Publicado por: PalitroqueZ en 31 de Enero de 2008, 19:52:54
Estimado Manolo, tienes toda la razón, si bien el programa maneja variados formatos, solo es capaz de exportar a pdf, pero no de importar.
Al menos yo que baje la versión estable (0.45.1) veo que no tiene forma de leer archivos pdf, me parece que Pedro se bajó la versión beta (0.46) que según vi por ahí es capaz de leer pdf.

Salud  8)

no se que versión es, solo le dí abrir y en los formatos aceptados aparecía el pdf.

lo que sucede es que en el trabajo de mi hermana trabajan con linux y se usan muchas herramientas de diseño gráfico, programación, etc. y me había mencionado las maravillas del inkscape, pero yo ni pendiente  :D hasta que leí este hilo y me animé  :mrgreen:

Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónic
Publicado por: todopic en 01 de Febrero de 2008, 00:59:37
Hola Amigos!, he jugado un rato con el programa, y me agradó el efecto de transparencias, coloque parte de la tarea, solo que fabrique unos lindos led rojos  :D
y como me agradaron, los deje para que los vean los compañeros del curso  :-/

Pero no logro realizar bien el gradiente desplazado.... siempre me queda blanco por fuera  :?

Un abrazo

Norberto
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: SavageChicken en 01 de Febrero de 2008, 02:16:06
Muy Bien, vamos a retomar la clase.

Vamos a ver en primer lugar algunas preferencias que podemos dejar configuradas para que nuestro Inkscape esté personalizado a nuestro gusto, para esto podemos ir al menu Archivo--> Preferencia de InkScape y se abrirá una ventana con variadas opciones. Si bien no vamos aver todas y cada una de ellas, vamos a considerar algunas:

(http://www.todopic.com.ar/Inkscape/prefepasosiz1.jpg)
Preferencias Pasos

De esta pantalla destacamos las siguientes preferencias:
Las flechas mueven: Cuando tenemos un objeto seleccionado, podemos usar las flechas para moverlo, este valor establece cuanto se moverán los objetos al usar las flechas
> y < escalan: Las teclas ">" y "<" permiten ampliar o redicir los objetos seleccionados, podemos determinar con esta opción, cual será este aumento o disminución en su tamaño
Rotación se ajusta cada: ¿Recuerdan que con la tecla Control podíamos restringir la rotación de un objeto en pasos de 15 grados?, bien, aqui podemos modificar este valor y lograr que los objetos girene en ángulos distintos a los 15 grados.

Solo muestro uno más, pero ustedes pueden ver que cada herramienta tiene algunos ajustes que son posibles con estas preferencias, por dar un ejemplo más en la sección formas, uno puede determinar el color y contorno que tendrá un objeto nuevo al ser creado:

(http://www.todopic.com.ar/Inkscape/prefeformasse6.jpg)
Preferencias para la Forma Rectángulo

Como pueden ver incluso el programa permite tomar los colores de relleno y contorno del objeto actualmente seleccionado, para que de ahora en más, la forma que estamos dejando predeterminada los use cuando queramos crearla.

Algunas preferencias más pueden ser fijadas entrando en el menu Archivo--> Propiedades del documento, pero debemos recordar que estos seteos son solo y exclusivamente para el documento que tenemos abierto, no tienen por que ser iguales en otro documento, y esto es muy bueno, ya que algunas cosas es importante poder independizarlas entre un documento y otro.

(http://www.todopic.com.ar/Inkscape/propdoc1tp6.jpg)
Primeras dos pestañas de las Propiedades del Documento

Vemos aquí un conjunto de cosas muy importantes y necesarias de configurar, obviamente el tamaño de la hoja donde finalmente imprimiremos el trabajo final, si queremos que se vea el borde de la hoja en el área de trabajo y una sombra de la hoja para darle más realismo, pero quizá uno de los puntos principales es setear en las unidades y el tamaño del papel las unidades en las que queremos trabajar, esto permite que de ahora en más en este documento salgan por defecto esas unidades en la mayoría de las opciones que se nos presentan (y evitarán el percance que tuve en las primeras clases donde por error daba medidas en pixeles cuando deberían ser en milímetros  :)).
   La segunda pestaña que tiene opciones para líneas guías y rejillas, estas últimas logran que en pantalla se dibujen una serie de líneas formando una grilla, esto es útil para ayudarnos colocar objetos de forma equidistantes. Los controles que alli vemos nos permitirán ubicarla y darle los espacios entre ellas, marcando mostrar la rejilla podemos visualizarla en pantalla.
   La segunda sección nos permite elegir los colores para las líneas guía y si estas estarán visibles o nó.

   Veamos ahora la tercera pestaña, que contiene importantes opciones:

(http://www.todopic.com.ar/Inkscape/propdoc2fx6.jpg)
Pestaña de Ajustes

   Esta pestaña, tiene tres secciones:
   Ajuste a Objetos: al activar las distintas opciones, al acercar objetos entre sí, los objetos tenderán a "pegarse" unos a otros, esto permite alinearlos sin necesidad de utilizar la herramienta de Alinear y distribuir, dependiendo de lo elegido, los objetos podrán unirse por sus vértices o contornos, además según la sensibilidad elegida, los objetos se atraerán desde más lejos o más cerca. (esto es similar en las otras dos secciones)
   Ajuste a rejilla: Similar al anterior, pero ahora los objetos se "pegarán" a la rejilla, esto solo funciona si la rejilla está visible.
   Ajuste a guías: Idem, pero con relación a las líneas guías, lo mismo que el anterior su funcionamiento está supeditado a la visibilidad de las líneas guía.

   Sobre estas última vamos a ver algunas cosas de inmediato.
   Bien, vamos a asegurarnos de dejar las líneas guías visibles y dejar seteado todo en milímetros, tan pronto lo hagamos, podremos notar que la regla, (que está ubicada en la parte superior, justo donde termina el área de trabajo, y en la parte izquierda en igual lugar) pasa a mostrar las distancias en milímetros. El origen de las coordenadas de esta regla es colocado por Inkscape automáticamente en el límite inferior izquierdo de la hoja elegida, por desgracia no es posible cambiar las coordenadas de origen como en algunos programas similares.

   A pesar de esto vamos a tratar de darle buen uso a las herramientas de que disponemos. Vamos a ver ahora como es posible poner en pantalla lineas guías, esto es súmamente fácil, basta con dar click sobre una de las reglas y sin soltar el botón del mouse arrastrar hacia la zona de trabajo, esto hará que aparezca una línea guía y podremos ubicarla donde nos plazca, si luego queremos mover estas líneas lo podemos hacer de dos formas, simplemente posicionando el mouse sobre ellas y cuando cambian a color rojo pinchar y arrastar para llevarlas a otro sitio. La segunda tiene sus ventajas y consiste en darle doble click a la línea guía, esto hará aparecer una ventana donde podemos ingresar manualmente la posición en donde queremos que se ubique la línea a la que le hicimos doble click, si dejamos marcado "movimiento relativo" el valor tipeado no significará la posición, sino cuanto queremos que la línea se mueva desde su actual posición. Podemos ingresar valores positivos o negativos.

Deja que te guíe la guía, porque si la guía te guía estarás bien guiado

   Ok, vamos a cargar nuestro dibujo en el estado actual y vamos a configurar las preferencias de Inkscape como mejor nos guste, pero en las propiedades del documento, vamos al menos a elegir las unidades predeterminadas milímetros, una hoja A4 con orientación horizontal y nos aseguraremos de que las líneas guías estén visibles y que los objetos se puedan pegar a ellas, con una sensibilidad de ajuste cercana a 10.
   Habiendo seteado esto, vamos a sacar una línea guía horizontal y otra vertical y dándole doble click vamos a introducir un valor de 10 en ambos casos.
   Despues de darle aceptar veremos que las líneas se han ubicado en la parte inferior de la hoja, exáctamente a diez milímetros del borde inferior izquierdo. Lo que haremos ahora será seleccionar todo el conjunto de objetos y lo arrastraremos tratande de acercar el rectángulo mayor a las líneas guías, si tenemos todo bién seteado, el rectángulo tenderá a "pegarse" a esas líneas facilitándonos la taréa de darle la ubicación que pretendemos.
   Ahora bien si tuviéramos un frente de un equipo como el propuesto y el display está a 20 milimetros desde la orilla izquierda, podríamos colocar una nueva línea guía vertical a 30 milimetros (recordemos que la primera está a 10 milimetros del borde sumando 20 cmts. desde este punto nos dá 30 milimetros es por eso que la segunda línea debe ir ubicada ahí).
   Lo que hacemos ahora es seleccionar solo el display con sus cuadritos y desplazar todo este conjunto hata que se pegue a la línea guía que acabamos de poner (seguramente será útil que se ayuden presionando la tecla control mientras despazan el conjunto, para evitar que el conjunto se les mueva verticalmente, y solo lo haga en forma horizontal, ya que si hicimos las tareas, ya debiese estar centrado en forma vertical).
   Pondremos ahora una tercer línea guía vertical a 135 milímetros, y haremos que el botón rojo que hicimos la última clase quede adherido a esta línea por el costado izquierdo, el conjunto queda como se ve a continuación:

(http://www.todopic.com.ar/Inkscape/conjuntofv4.jpg)
Conjunto hasta el momento

Para encender los pixeles del display es muy fácil basta con pintar los puntos que queramos de color blanco, asique manos a la obra.
   Nos centraremos ahora en terminar el botón y veremos que aprovechando las herramientas vistas y algunas nuevas es muy sencillo, veamos una imagen de lo que queremos lograr:

(http://www.todopic.com.ar/Inkscape/botonsoloiq2.png)
Detalle del botón

   Primero, vamos a duplicar nuestro botón rojo con "Control + D" en apariencia no pasó nada, pero si movemos el botón veremos que debajo hay otro, vamos a darle las siguientes medidas y colores W:16,5 H:16,5 RGB 180,180,180 A=255 contorno negro de 2 px
   Dependiendo de cual círculo escogimos para hacer los cambios, es muy probable que este nuevo círculo esté por encima del círculo rojo, vamos a aprender ahora como hacer para ordenar los objetos de manera que podamos ubicarlos en el orden que deseemos, pensemos que trabajar con objetos en este tipo de programas es como trabajar con recortes de papel, el que esté más arriba oculta al que está más abajo, es por eso que es importante ordenarlos de manera que esté más arriba el que tiene que estarlo. Para ello necesitamos la siguiente herramienta:

[float=left](http://www.todopic.com.ar/Inkscape/ordenarjp7.jpg)[/float] cada uno de estos cuatro botones nos permite mandar un objeto totalmente abajo, que baje una posición, que suba una posición o que suba al tope.
   En nuestro caso, bastará que el objeto baje una posición y veremos que el circulo rojo ahora aparece.
   Centramos este conjunto respecto al cuadro azul.
   Hacemos un nuevo rectángulo, de W:0,7 H:2,5 color blanco y sin borde, lo centramos horizontalmente respecto a los círculos y lo movemos luego presionando control para hacercarlo al circulo de color gris pero sin tocarlo como se ve en el detalle.
   Ahora vamos a sacar una nueva línea guía, en este caso será horizontal, le damos doble click y escribimos 25, con ello tendremos una línea guía pasando por el contro del frente que estamos diseñando, ahora le daremos seleccionamos el rectángulo blanco que hemos dibujado y le damos un nuevo click para que aparezca la opción de rotar, pero ahora haremos algo nuevo, notarán que en el centro del rectángulo aparece una pequeña cruz, esta indica el punto de rotación del objeto, ahora vamos a arrastrar este punto hasta la línea guía del centro, presionando control, para que solo se mueva en forma verticál, una vez hecho esto presionamos "Control + D" para obtener un nuevo rectángulo blanco, ahora lo hacemos rotar presionando control una vez más para obtener pasos de 15º, y si hemos dejado el centro de rotación bien ubicado veremos que la figura empieza a asemejarse a lo que buscamos, repetimos la operación, duplicando y rotando, duplicando y rotando hasta lograr el objeto como lo buscamos.
   Cuando tenemos el conjunto listo podemos agruparlo para poder manejarlo con facilidad, ahora podemos duplicar este conjunto y colocarlo de manera que se asemeje al conjunto que buscamos.

Ok, dejamos hasta aquí, mañana pretendo terminar con el modelo propuesto, pero quedan muchas cosas por aprender, probablemente vamos a hacer un par de ejemplos más para aprender cosas nuevas.

Espero nos acompañen .... Salud  8)
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónic
Publicado por: SavageChicken en 01 de Febrero de 2008, 02:27:34
Hola Amigos!, he jugado un rato con el programa, y me agradó el efecto de transparencias, coloque parte de la tarea, solo que fabrique unos lindos led rojos  :D
y como me agradaron, los deje para que los vean los compañeros del curso  :-/

Pero no logro realizar bien el gradiente desplazado.... siempre me queda blanco por fuera  :?

Un abrazo

Norberto

Hola Norberto.

Te adjunto el archivo con una leve corrección en el degradé del primer led, si te fijas la herramienta para modificar degradé muestra en los objetos 3 puntos, los puntos periféricos muestran donde termina el degradé, en algunos casos es conveniente estirar este límite más allá del límite del propio objeto, para que no queden parte donde no hay degradé, creo que es eso a lo que te refieres, por otro lado si haces que alguna parada tenga canal alfa en 0, en ese punto el objeto se hará totalmente transparente y mostrará lo que hay debajo pareciendo que tiene un agujero en ese punto, espero que eso responda tus dudas.

Saludos y a seguir practicando
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: Nocturno en 01 de Febrero de 2008, 04:41:30
Una pequeña duda, que borraré después para no interrumpir el curso.
Si pego un bitmap, ¿cómo puedo recortarlo para quitarle un trozo?. Sólo encuentro transformaciones de escala, de rotación y muchas otras, pero ninguna para recortar.
Gracias
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónic
Publicado por: Micro23 en 01 de Febrero de 2008, 05:20:54
Si que me esta gustando.... un pequeño diseño...
(http://img521.imageshack.us/img521/6053/lcdmicro23rr9.th.jpg) (http://img521.imageshack.us/my.php?image=lcdmicro23rr9.jpg)
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónic
Publicado por: RedPic en 01 de Febrero de 2008, 05:36:30
Una pequeña duda, que borraré después para no interrumpir el curso.
Si pego un bitmap, ¿cómo puedo recortarlo para quitarle un trozo?. Sólo encuentro transformaciones de escala, de rotación y muchas otras, pero ninguna para recortar.
Gracias

Si, porque los bitmaps los carga el diablo.  :D :D :D
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: jfmateos2 en 01 de Febrero de 2008, 06:03:34
Para Nocturno, una posibilidad es la siguiente:

Dibuja sobre la imagen una forma (rectángulo, estrella, o lo que sea) que cubra la zona que quieres mantener de la imagen.

Selecciona la imagen y la forma dibujada en el paso anterior (manteniendo pulsada la tecla Mayús mientras haces clic sobre cada una de ellas).

Ejecuta el comando Objeto>Clip>Aplicar. Con Objeto>Clip>Máscara puede incluso aplicar transparencias.

Te aconsejo que si insertar imágenes bitmap en un diseño de inkscape utilices el comando Efectos>Imágenes>Incrustar todas las imágenes
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: Nocturno en 01 de Febrero de 2008, 08:39:11
Con tu consejo ha funcionado perfecto. Muchas gracias crack
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónic
Publicado por: PalitroqueZ en 01 de Febrero de 2008, 14:38:38
una interrupción profe.

la versión que tengo es:

(http://img530.imageshack.us/img530/7133/versioninkscapers8.jpg)

continue profesor  :D

Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: SavageChicken en 01 de Febrero de 2008, 14:47:51
Fíjate en la parte superior de la imagen que pones: dice Inkscape 0.46dev+devel
Solo la imágen es de la versión 0.45 pero la compilación es de la versión 0.46

Salud  8)
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónic
Publicado por: flacoclau en 01 de Febrero de 2008, 16:03:25
Si que me esta gustando.... un pequeño diseño...
(http://img521.imageshack.us/img521/6053/lcdmicro23rr9.th.jpg) (http://img521.imageshack.us/my.php?image=lcdmicro23rr9.jpg)


muy bueno micro23
la verdad es que ando buscando un panel frontal con esas características....
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónic
Publicado por: stk500 en 01 de Febrero de 2008, 16:10:38
ahora me doi cuenta la version que usa   :shock: :shock: :shock: :shock:
 :-/ sorry amigo SavageChicken  ;-)
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: Gorgonas en 01 de Febrero de 2008, 17:08:34
Ale prueba superada :D  "SavageChicken"

(http://img90.imageshack.us/img90/1503/pruebafinalcv8.png)

He seguido el tutorial paso a paso, y me ha encantado el programa, gracias por el tutorial :D

Solo hay una cosa que no me kedo nada clara, lo de crear las rayitas inclinadas para el volumen y demas...Intente hacer lo que ponias pero no lo entiendo, si pudieras explicarlo mejor te lo agradeceria. :D.
Yo consegui colocar las rayitas en su sitio pero calculando las coordenadas x e y, usando senos y cosenos y su grado de inclinacion respecto a las coordenadas relativas de las rayitas de 0 y 90 grados. Pero vamos es algo laborioso...
Suerte :P
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: Leon Pic en 01 de Febrero de 2008, 17:59:32
Hola Profe, me anoto también. Recien lei todo el hilo y ya me descargue el programa por lo que en breve, alcanzo a la clase  8)
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: SavageChicken en 01 de Febrero de 2008, 18:05:41
¡¡¡ FELICITACIONES GORGONAS!!!!
Te a quedado muy bien, ya voy a explicar mejor la forma que antes mencioné para hacer las rallitas, sin dudas que es más fácil que calculando senos y cosenos  :D :D :D
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónic
Publicado por: ema en 01 de Febrero de 2008, 23:37:52
Hay lugar para una matricula mas profe!!!!. :-/ :-/ :-/

Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: SavageChicken en 01 de Febrero de 2008, 23:49:42
   Sin duda alguna que hay más matrículas, todas las que quieran:

   Vamos a responder una consulta, Gorgonas me dice que no quedó claro la forma de rotar que expliqué la última clase, y como una imágen vale más que mil palabras...

(http://www.todopic.com.ar/Inkscape/centrorotasc4.jpg)
Trasladando el punto de rotación

   Lo que intentaba explicar es que debemos trasladar el punto de rotación hacia el centro del botón, de esta manera el cuadrito girará en torno a ese centro, para ello una vez que nos salen los tiradores para girar, aparece una crucecita en el medio del objeto, esa cruz la desplazamos a donde necesitamos y listo.

Fácil y bonito ¿no?  :)

P/D: Perdón por el error de tipeo, léase: Desplazado y no Deplazado :P

Salud  8)
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: Gorgonas en 02 de Febrero de 2008, 04:35:34
Muchas gracias por la aclaracion, si con la razon que una imagen vale mas ke mil palabras! asi se entiende a la primera :D
Es un metodo muy comodo y rapido :p
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónic
Publicado por: pocher en 02 de Febrero de 2008, 08:28:36
Otro que se apunta, no sé como pero intentaré seguiros. Eso de pinchar y quedarte en la cola del pelotón es muy duro ahj, ahj, ahj  :D
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónic
Publicado por: stk500 en 02 de Febrero de 2008, 08:40:26
Dom SavageChicken   :lol: :lol: ya lei muchos sobre este programa y es super genial mi felicitaciones aunque por ahora lo tengo en ingles
va super genial editando lo que sea y import export  :-) guao XHTML genial  :-) :-) siga maestros
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: SavageChicken en 04 de Febrero de 2008, 01:36:37
Hola mis alegres pupilos.

   Hoy hemos de completar el frente propuesto, para ello vamos a utilizar algunas herramientas y funciones nuevas, ahora vamos a sacarnos de encima el miedo a dibujar, porque con herramientas como esta es muy sencillo.

   Y vamos a utilizar como modelo a copiar la manzanita de apple, y créanme que no la estoy usando por otra cosa que no sea que tiene todas las cualidades necesarias para aprender esta parte del minicurso.
Vamos a descargar entonces la siguiente imagen y la vamos a importar en Inkscape:

(http://www.todopic.com.ar/Inkscape/appleqw6.png)   Una ves descargada, vamos a tratar de seguir su contorno utilizando la herramienta: Dibujar líneas Bézier y líneas rectas., esta herramienta es muy útil para realizar trázos en línea recta, permite realizar líneas horizontales y verticales o trazos en saltos de 15 grados si mantenemos presionado control.
   La idea es hacer líneas rectas con puntos estratégicos, sobre todo en los lugares donde hay cambios importantes e la dirección del trazo original, cuando lleguemos al final, nos posicionamos sobre el primer punto y le damos doble click, con esto ce cierra la figura. Como dato podemos decir que hay dos tipos de figuras, las cerradas como estas, que comienzan y terminan en un mismo punto y las abiertas, que empiezan en un punto y terminan en uno distinto, para decirle a Inkscape que hemos terminado un trazo basta con hacer doble click en el punto final.
   A la derecha pueden ver la imagen que pretendemos copiar en un azul más ténue y en negro lo que debemos obtener dibujando por encima.
(http://www.todopic.com.ar/Inkscape/apple2pe0.png)

[float=left](http://www.todopic.com.ar/Inkscape/selecciontrazovn6.jpg)[/float] Vamos ahora a hacer uso de la segunda herramienta de selección, con ella podemos modificar trazos, y podemos hacerle cambios a otras figuras como rectángulos, circulos y elipses, estrellas y espirales, cuando la seleccionamos, los objetos muestran una serie de puntos de control que permiten hacer estos cambios.
   Algo importante de saber, es que los objetos primarios, pueden tener dos estados, por ejemplo si yo dibujo un rectángulo y elijo la segunda herramienta de selección (en el programa se llama:Editar nodos de trazo o tiradores de control), lo único que podré hacer con esta herramienta es hacer un borde redondeado para el rectángulo o variarle su tamaño, pero siempre será un rectángulo, pero si lo convierto a trazo, puedo mover y cambiar cada uno de sus vertices.
   Para convertir a trazo un objeto primario debo ir al menu Trazo-->Objeto a trazo, una vez convertido, sus puntos son accesibles y modificables.
   La barra contextual de la herramienta para editar trazos es el siguiente:
(http://www.todopic.com.ar/Inkscape/contextualtrazoqa2.jpg)
Barra contextual de la herramienta de edición de nodos

   Como lo hemos hecho en anteriores clases, vamos a enumerar y explicar que hacen las distintas opciones, lo haremos de izquierda a derecha:
   Insertar nodo: Permite añadir un nuevo nodo en el punto del trazo en el segmento seleccionado, tambien se puede lograr haciendo doble click en un segmento del trazo.
   Suprimir nodo: Con el podemo borrar él o los nodos que tengamos seleccionados, tambien lo podemos lograr presionando la tecla suprimir.
   Unir nodos: Los dos botones siguientes permiten unir nodos, en el primer caso junta ambos nodos en uno único, en el segundo, agrega un segmento al dibujo para unir los dos puntos.
   Separar nodos: Tambien son dos botones, al usarlos, el trazo queda abierto, el primero borra un segmento y el segundo separa un punto en dos, un trazo abierto tiene un comportamiento extraño con los rellenos (en todos los programas de este tipo) asique yo por norma solo uso rellenos en objetos con trazo cerrado.
   Convertir en esquina: Habrán notado que cada noso tiene un par de tiradores a ambos lados de él, estos tiradores guían el trazo desde el punto en cuestión hasta el próximo punto. en los nodos tipo esquina, estos tiradores son totalmente independiente, permitiendo que el trazo pueda cambiar bruscamente de dirección.
   Suavizar: Cuando elegimos este tipo de nodo, los tiradores antes mencionados restringen su movilidad logrando trazos más suaves
   Simétrico: Un nodo de este tipo además de estar restringido en el ángulo que forman sus tiradores, además está restringido en la distancia que hay entre ellos, manteniéndola siempre equidistante y por ende logra curvás más suaves.
   Estos botones los hemos de usar en breve.
   Convertir a líneas: Este botón perite convertir en líneas rectas aquellos segmentos seleccionados.
   Convertir a curvas: Con él logramos que los segmentos elegidos se conviertan en líneas curvas.
   Los siguientes dos botones permiten convertir objetos primarios en curvas y finalmente el último permite que sean visibles o no los tiradores bézier antes mencionados.

   Ahora vamos a empezar a trabajar con la figura y vamos a ver que es muy fácil lograr el objetivo final, vamos en primer lugra a elegir todos los nodos con la herramienta de edición de nodos, basta hacer click y arrastrar hasta encerrar todos los nodos del dibujo, luego en la barra contextual le damos click al boton de convertir a curvas.
   Aunque no lo parezca, ahora todas las líneas son curvas. Ahora vamos a seleccionar solo los nodos que indicamos en la siguiente imágen, para ello hacemos una pequeña selección y presionando shift vamos añadiendo nodos al grupo. También podemos eliminar nodos elegidos manteniendo shift presionado y dando click sobre el nodo que queremos sacar del grupo:

(http://www.todopic.com.ar/Inkscape/sleccionnodoskt2.jpg)
Nodos que debemos seleccionar

   Una vez seleccionados le damos click al botón Suavizar nodos y... Voilá... la mazanita se parecerá mucho a la que buscamos.
   Ahora vasta con unos toquecitos por aquí y por allá y tendremos lo que queremos, vamos vamos... ponganse a mover los tiradores, los nodos y los segmentos hasta que tengan la forma buscada.
   Se preguntarán por que dejamos ciertos nodos fuera, bien la respuesta es simple, estos nodos tienen cambios bruscos de dirección, que requieren que los tiradores bézier tenga total libertad, si los suavizamos, restringimos la movilidad de los tiradores y no podemos lograr lo que necesitamos, prueben de suavizarlos y verán a lo que me refiero.
   Lo que hemos visto, es la herramienta más poderosa de cualquier programa de diseño vectorial, manejando bien esta herramienta podemos dibujar con poco esfuerzo lo que nos plazca.

   Con lo que hemos aprendido podemos ahora hacer la parte final del frente.
   Voy a colocar dos imágenes, he suprimido todos los demás objetos para que veamos con detalle la parte que nos ocupa, lo primero es crear con la herramienta para Dibujar curvas Bézier, un dibujo similar al mostrado en rojo, que como ven, debe  sobresalir por los bordes al cuadro azúl.
(http://www.todopic.com.ar/Inkscape/ondita1wo8.png)
Dibujo inicial

  Luego seleccionamos todo con la herramienta para editar nodos y lo convertimos a curva y finalmente elegimos los puntos que están en la zona azul y los suavizamos y nos quedará algo así:
(http://www.todopic.com.ar/Inkscape/ondita2tt8.png)

   Ahora debemos pintarlo del color y contorno apropiado, en mi caso RGB (171,55,200) A=255 y el contorno que sea nuestra preferencia, negro blanco o sin contorno, en mi caso lo estoy haciendo sin contorno.
   Finalmente vamos a aprender a usar algo nuevo, para ello vamos a duplicar estos dos objetos (el fondo azul y el dibujo a mano) y lo vamos a llevar a otro sector del área de trabajo, y vamos a provar lo que se obtiene seleccionando ambos objetos y aplicando las distintas opciones que encontramos en el menú Trazo-->Union / Diferencia / Intersección / Exclusión / División / Cortar Trazo (recuerden hacer "undo" antes de probar el siguiente  :P)
   Como pueden ver en mi caso usé intersección, basta ahora con la herramienta de alinera y distribuir llevarlo a donde queremos y utilizar la herramienta "bajar la selección al fondo" para que queden los objetos en el orden que nos interesa.


   Eso es todo por ahora, a la vuelta de vaciones podemos proponer otro frente o dibujo para aprender nuevas utilidades de este software.
   Recuerden que probando y "hechando a perder se aprende" asique a probar.

Un gran saludo de SavageChicken  8)
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónic
Publicado por: Micro23 en 04 de Febrero de 2008, 04:21:28
Te Felicito!! SavageChicken vas muy bien... te estaremos esperando para cuando vuelvas de las vacaciones... que la pases bien.
Saludos
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: Leon Pic en 04 de Febrero de 2008, 11:53:07
Grande Gallo Claudio. Muy buena la explicación. Es igual al Corel draw, a diferencia que jamás lo havía terminado de entender (nadie me explico y tube que hacerlo solo) pero con tu explicación, ahora puedo hacer muy buenos dibujos.
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: SavageChicken en 18 de Febrero de 2008, 13:19:29
Hola estimada audiencia.

   Tal como lo sospechaba, no soy el único que ha publicado algún curso de inkscape, asique quería compartir con ustedes el Blog de Joaquín Herrera Goás, quién utilizando el seudónimo de Joaclint Istgud, enseña el manejo de software libre para diseño gráfico, en lo que respecta a Inkscape, empieza por cosas sencillas como las que hemos visto y sigue con técnicas avanzadas, con las que podemos realizar cosas realmente sorprendentes, utiliza muchos logos de marcas conocidas y me dió gracia encontrar que también utilizó la manzanita de Apple para una de las clases  :D :D
   Para los que quieran profundizar en el uso de esta herramienta, no dejen de visitarla, que no tiene desperdicio.

Curso Inkscape (http://docs.google.com/View?docid=dhs3vfzq_499fsbh2gr6)

Salud  8)
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: Nocturno en 18 de Febrero de 2008, 14:29:08
Es espectacular el curso. Lo que pasa es que una cosa es conocer la técnica, y otra muy distinta, tener la habilidad creativa suficiente para diseñar cosas bonitas.
Pero realmente la herramienta es una pasada.
Yo estoy diseñando en mis ratos libres una publicidad de mi página para la revista uControl y la verdad es que es una gozada.
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónic
Publicado por: jfh900 en 18 de Febrero de 2008, 14:57:29
Hola SavageChicken, ¿se han terminado los capítulos del curso? o ¿piensas añadir alguno más?

Un saludo

P.D. Yo egoístamente te animaría a que siguieras con alguno más. (jejejejejeje)
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: SavageChicken en 19 de Febrero de 2008, 01:22:34
Pienso añadir un capítulo más y daría por cerrado el curso, aunque siempre estaría dispuesto a posibles consultas que surgieran.

Un saludo grande  8)
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: Nocturno en 27 de Febrero de 2008, 18:15:29
Aquí está mi humilde creación gracias al curso de InkScape. Sinceramente, la herramienta me ha encantado.
(http://img505.imageshack.us/img505/4558/publicidaducontrolmicrowk7.th.jpg) (http://img505.imageshack.us/my.php?image=publicidaducontrolmicrowk7.jpg)

Si alguien lo quiere descargar en formato InkScape, está aquí:
http://www.micropic.es/descargas/Publicidad%20uControl%20micropic.svg

Hay una cosa que no he sabido realizar en InkScape y he tenido que acudir a Photoshop. Se trata de deformar un bitmap para hacer que parezca en perspectiva, como se ve en los cuatro bitmaps de la parte inferior de la página.
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: SavageChicken en 28 de Febrero de 2008, 00:51:05
Hola Nocturno.
Te ha quedado muy bueno el trabajo, te felicito!!!

En cuanto al tema de las fotos con perspectiva, al menos Corel Draw permitía hacerlo, asique voy a investigar si se puede hacer con Inkscape y entonces podré responder a tu inquietud.

Salud  8)
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: SavageChicken en 28 de Febrero de 2008, 17:49:18
Luego de mucho intento, veo que no tiene opción para hacer ese efecto que comentas Manolo.  :?

He notado también que vectorizaste el logo de MicroPIC, me gustaría saber como lo hiciste, porque podría darte algunos consejitos para que te quedara mejor y más liviano :)

Salud 8)
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: Nocturno en 28 de Febrero de 2008, 18:22:25
Pues lo hice utilizando la opción Trazo -> Vectorizar mapa de bits y lo configuré para un montón de pasadas, para que el degradado que tiene siguiera siendo fiel al original.
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: SavageChicken en 11 de Abril de 2008, 14:02:42
Ya está disponible la versión 0.46 de InkScape y trae importantes mejoras.

Salud  8)
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: Nocturno en 11 de Abril de 2008, 14:39:06
¡Aleluya!, al fin puedo editar PDF. Gracias pollo.
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónic
Publicado por: PalitroqueZ en 17 de Abril de 2008, 17:19:53
es un gallo-rambo  :D :D

Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: Medusa en 20 de Enero de 2009, 19:31:53
Muy interesante el curso  :-/ , entindo que con este software podemos diseñar la mascara de nuestros juguetes, pero mi pregunta es quien o que empresas hacen la impresion y el mecanizado o corte de las mascaras, existe alguna empresa que acepta pedido on-line  :?:.

Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: SavageChicken en 22 de Enero de 2009, 14:32:14
Si bien la idea inicial era abordar un uso más para el hobbista (quizá utilizando una impresora hogareña), también hay muchas imprentas que son capaces de imprimir distintos sustratos, o papeles adhesivos para llevarlo a la carcaza de nuestros aparatos.
Basta entonces hacerles llegar el archivo con nuestro diseño y ellos lo hacen realidad para nosotros  :)

Salud  8)
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: J1M en 22 de Enero de 2009, 14:36:45
Escribiendo 'Serigrafía industrial' en google aparecen algunos fabricantes dedicados al asunto.

un saludo!
Título: Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
Publicado por: real_chaos en 07 de Noviembre de 2014, 12:15:23
Auhh este curso está muy bien, gracias por compartirlo con el resto  :-/