Autor Tema: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos  (Leído 60572 veces)

0 Usuarios y 1 Visitante están viendo este tema.

Desconectado Nocturno

  • Administrador
  • DsPIC33
  • *******
  • Mensajes: 17651
    • MicroPIC
Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
« Respuesta #45 en: 31 de Enero de 2008, 18:38:21 »
Jaja, qué bueno....  :D  :D  :D
 :-/ :-/ :-/ :-/ :-/ :-/ :-/
Un saludo desde Sevilla, España.
Visita MicroPIC                                                                                        ɔ!doɹɔ!ɯ ɐʇ!s!ʌ

Desconectado SavageChicken

  • Colaborador
  • PIC24F
  • *****
  • Mensajes: 914
Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
« Respuesta #46 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)
No hay preguntas tontas...
Solo hay tontos que no preguntan.

Desconectado PalitroqueZ

  • Moderadores
  • DsPIC33
  • *****
  • Mensajes: 5434
    • Electrónica Didacta
Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónic
« Respuesta #47 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:

La propiedad privada es la mayor garantía de libertad.
Friedrich August von Hayek

Desconectado todopic

  • Administrador
  • DsPIC30
  • *******
  • Mensajes: 3490
    • http://www.todopicelectronica.com.ar
Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónic
« Respuesta #48 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
« Última modificación: 01 de Febrero de 2008, 01:29:31 por todopic »
Firmat - Santa Fe - Argentina

www.TodoPic.net

Solo se tiran piedras, al arbol que tiene frutos...

Desconectado SavageChicken

  • Colaborador
  • PIC24F
  • *****
  • Mensajes: 914
Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
« Respuesta #49 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:

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:

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.

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:

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:

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:

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][/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)
« Última modificación: 18 de Febrero de 2008, 12:45:22 por SavageChicken »
No hay preguntas tontas...
Solo hay tontos que no preguntan.

Desconectado SavageChicken

  • Colaborador
  • PIC24F
  • *****
  • Mensajes: 914
Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónic
« Respuesta #50 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
No hay preguntas tontas...
Solo hay tontos que no preguntan.

Desconectado Nocturno

  • Administrador
  • DsPIC33
  • *******
  • Mensajes: 17651
    • MicroPIC
Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
« Respuesta #51 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
Un saludo desde Sevilla, España.
Visita MicroPIC                                                                                        ɔ!doɹɔ!ɯ ɐʇ!s!ʌ

Desconectado Micro23

  • Colaborador
  • PIC16
  • *****
  • Mensajes: 226
Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónic
« Respuesta #52 en: 01 de Febrero de 2008, 05:20:54 »
Si que me esta gustando.... un pequeño diseño...

El pesimista se queja del viento
El optimista espera que cambie
El realista ajusta las velas

Conectado RedPic

  • Administrador
  • DsPIC33
  • *******
  • Mensajes: 5426
    • Picmania by Redraven
Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónic
« Respuesta #53 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
Contra la estupidez los propios dioses luchan en vano. Schiller
Mi Güeb : Picmania

Desconectado jfmateos2

  • Moderadores
  • DsPIC30
  • *****
  • Mensajes: 3145
Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
« Respuesta #54 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

Desconectado Nocturno

  • Administrador
  • DsPIC33
  • *******
  • Mensajes: 17651
    • MicroPIC
Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
« Respuesta #55 en: 01 de Febrero de 2008, 08:39:11 »
Con tu consejo ha funcionado perfecto. Muchas gracias crack
Un saludo desde Sevilla, España.
Visita MicroPIC                                                                                        ɔ!doɹɔ!ɯ ɐʇ!s!ʌ

Desconectado PalitroqueZ

  • Moderadores
  • DsPIC33
  • *****
  • Mensajes: 5434
    • Electrónica Didacta
Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónic
« Respuesta #56 en: 01 de Febrero de 2008, 14:38:38 »
una interrupción profe.

la versión que tengo es:



continue profesor  :D

La propiedad privada es la mayor garantía de libertad.
Friedrich August von Hayek

Desconectado SavageChicken

  • Colaborador
  • PIC24F
  • *****
  • Mensajes: 914
Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónicos
« Respuesta #57 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)
No hay preguntas tontas...
Solo hay tontos que no preguntan.

Desconectado flacoclau

  • Colaborador
  • PIC24H
  • *****
  • Mensajes: 1692
    • El Micro Reactor
Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónic
« Respuesta #58 en: 01 de Febrero de 2008, 16:03:25 »
Si que me esta gustando.... un pequeño diseño...



muy bueno micro23
la verdad es que ando buscando un panel frontal con esas características....
Las personas con buena ortografía me atraen textualmente.

El Micro Reactor

Córdoba capital - Argentina.

Desconectado stk500

  • Moderadores
  • DsPIC33
  • *****
  • Mensajes: 4849
Re: Minicurso de Inkscape, Orientado a Diseño de Frentes para Equipos Electrónic
« Respuesta #59 en: 01 de Febrero de 2008, 16:10:38 »
ahora me doi cuenta la version que usa   :shock: :shock: :shock: :shock:
 :-/ sorry amigo SavageChicken  ;-)