Mostrando entradas con la etiqueta videotutorial. Mostrar todas las entradas
Mostrando entradas con la etiqueta videotutorial. Mostrar todas las entradas

martes, 25 de noviembre de 2014

Tutorial básico de Illustrator

Cómo crear un diseño geométrico abstracto.


Buenos diseños pueden crearse incluso usando las herramientas más simples. En este tutorial vamos a crear un diseño geométrico usando básicamente hexágonos, colores y una serie de texturas.
Este diseño fácilmente puede usarse como un poster, o incluso como portada para un libro o álbum.



El diseño que estamos creando se compone de una serie de hexágonos repetidos. La inyección de colores al azar da vida a la presentación, y el uso de texturas permite crear un estilo similar a los patrones geométricos usados en los años 70.



Vamos a hacer uso de Illustrator y Photoshop para esta creación. Empezamos usando Illustrator y dibujamos un polígono de 6 caras en la mesa de trabajo. Giramos tal figura 90º y luego vamos a Objeto>Trazado>Desplazamiento e introducimos 3mm.



Seleccionamos la nueva forma y le quitamos el relleno y el trazo. Para ello seleccinamos las casillas de relleno y trazo, e individualmente elegimos el pequeño ícono con una línea roja diagonal.



Presionamos Ctrl+Y para activar el modo de esquema, y luego presionamos Ctrl+U para activar las guías inteligentes. Manteniendo ALT presionado hacemos clic y arratramos para obtener un duplicado de las formas, horizontalmente, hasta que queden alineados.



Presionamos Ctrl+D varias veces, para repetir la transformación, hasta obtener una larga lista de hexágonos.



Seleccinamos el conjunto de hexágonos en línea y escalamos a un menor tamaño para que quepan en la mesa de trabajo. Debemos mantener SHIFT pulsado mientras hacemos ello para conservar las proporciones.



Sin quitar la selección mantenemos presionado ALT y arrastramos para obtener otro duplicado. Ahora, debemos alinear el contorno entre los bordes inferiores de los originales.



Clic y arrastramos para obtener otro duplicado de la primera fila. Esta vez desplazamos el duplicado solo horizontalmente.


Usamos Ctrl+D para repetir esta transformación. No debemos prestar atención a los vacíos que van quedando en el diseño ya que en seguida lo solucionaremos.



Ahora obtenemos un duplicado de la segunda fila y repetimos esta transformación usando el atajo Ctrl+D hasta que el patrón esté completamente lleno.


Para dar simetría al patrón, seleccionamos y eliminamos todos los hexágonos que sobresalen por la derecha.



Seleccionamos todo el patrón y pulsamos Ctrl+G para crear un nuevo grupo. Centramos el diseño en la mesa de trabajo con la paleta Alinear. Luego, clic derecho y seleccionamos Desagrupar.



Presionamos Ctrl+Y para desactivar el modo de esquema. Los hexágonos con los que trabajamos están todos presentes, solo que no son visibles los de mayor tamaño por el hecho de haberles quitado tanto relleno como trazo al inicio.



Usando una agradable paleta de colores dibujamos unos rectángulos para que los colores queden a nuestro alcance (luego podríamos usar cuentagotas para facilitarnos las cosas).
Luego, con un color determinado, dibujamos un gran rectángulo de fondo.
De hecho el rectángulo quedará sobre las demás formas, por lo que habría que enviarlo atrás.



Manteniendo pulsada la tecla SHIFT seleccionamos al azar una serie de hexágonos, y asignamos a dicha selección el primer color de la paleta elegida.



Repetimos el proceso, esta vez eligiendo el segundo color de la paleta. Si seleccionamos un grupo de hexágonos de una forma no deseada luego podemos asignar colores a algunos hexágonos individualmente.



Luego de asignar los colores de nuestra paleta a cada hexágono vamos a hacer uso de Photoshop para superponer texturas a estos colores y dar un mayor realce al diseño.



Podríamos simplemente pegar todo el diseño a Photoshop y aplicar una textura general. Sin embargo, podemos lograr un mejor efecto si agregamos texturas diferentes para cada grupo de hexágonos del mismo color. Empezamos copiando el fondo a Photoshop.



Quitamos el relleno del fondo. Seleccinamos ahora un primer color y vamos a Seleccionar > Mismo > Color de relleno. Presionamos SHIFT y añadimos el gran contorno rectangular a la selección.



Copiamos y pegamos nuestra selección a Photoshop, creando otra capa, exclusiva para esta selección.



Repetimos el proceso, seleccionando otros grupos de hexágonos con los colores restantes.



Buscamos algunas texturas en este enlace: http://lostandtaken.com/gallery
Pegamos una textura a Photoshop, sobre nuestra primera capa, y la desaturamos cambiando el modo de fusión a "Multiplicar" con un 30% de opacidad.



Pegamos otra textura sobre la capa de hexágonos del primer color y desaturamos.
Hacemos CTRL+click sobre la miniatura de la capa de hexágonos para cargar su selección, y a continuación, aplicamos "Layer Mask" sobre la capa de la textura para recortar al tamaño adecuado.



Cambiamos la capa de la textura a "Luz suave" con 70%, para crear una serie de marcas sobre el diseño. La aplicación de una textura general habría afectado a todo el diseño. En este caso solo alteramos las primeras formas.



Repetimos el proceso con otras texturas para las capas de hexágonos siguientes. Cargamos la selección y aplicamos "Layer mask" (Máscara de capa).



La superposición de texturas elimina la apariencia limpia y plana de un diseño digital y da a nuestro diseño un aspecto más realista.

Esto es todo. Si desean ver el contenido original en inglés pueden hacerlo dando click aquí.

jueves, 21 de agosto de 2014

Cómo graficar un círculo en Assembler

En esta ocasión veremos cómo graficar un círculo usando el lenguaje ensamblador o ASM.
El programa además de ello permite desplazar el círculo con el teclado numérico, de forma que pueda moverse a los costados, hacia arriba, hacia abajo y en cualquiera de las diagonales. Adicionalmente es posible aumentar o disminuir el radio del círculo en tiempo de ejecución, mientras se desplaza o incluso si está detenido. Y, finalmente, es posible cambiar el color del círculo de forma aleatoria.

En esta entrada se explica de manera general el programa, lo que incluye una explicación breve sobre los siguientes temas:
- Modo de video: texto o modo gráfico
- Segmentos de uso general
- Segmento de datos, segmento de pila, segmento extra, segmento de código
- Cómo usar las instrucciones PUSH y POP
- Zero flag y otros registros bandera
- Comparaciones, como JNZ, etiquetas y saltos
- Procedimientos
- Funciones e interrupciones

La explicación, como de costumbre, se encuentra detallada en un videotutorial, al que pueden acceder desde el siguiente enlace:

De hecho olvidé hacer antes un tutorial explicativo sobre cómo ejecutar código Assembler, por lo que pronto agregaré este video a la lista de reproducción. De todas formas, si tienen dudas pueden comentarlas y les responderé.

Si desean, pueden incluso acceder al código fuente del programa desde el siguiente enlace:

martes, 12 de agosto de 2014

Cómo diseñar un paise en Adobe Illustrator

Tutorial básico de Adobe Illustrator

Sinceramente, muy aparte de programar, siempre he sido particularmente "no muy bueno" en crear imágenes por mí mismo. Si necesitaba alguna imagen, en algún momento, simplemente realizaba búsquedas y tomaba alguna que se adecuara.

Sin embargo, recientemente he decidido comenzar a practicar un poco de diseño gráfico, y al menos, decidí empezar con Illustrator. Este primer tutorial es muy básico y es una buena oportunidad si usted también empieza.

El siguiente tutorial está escrito originalmente en inglés. Lo que les presento entonces es solo una traducción (no una traducción completamente literal, pues he cambiado un poco la redacción según creía conveniente).

De todas formas, si usted prefiere seguir un video en vez de texto e imágenes, también puede hacerlo desde el siguiente enlace:

-----------------------------------------------

El diseño que haremos en esta ocasión es un paisaje sencillo, compuesto de formas básicas y una paleta limitada de colores verdes y amarillos. Un diseño realizado con vectores tiende a lucir relativamente plano y sin vida, por lo que luego de usar Illustrator pasaremos a usar Photoshop para aplicar sobre nuestro diseño algunas texturas. Esto mejorará notablemente la apariencia final de nuestro trabajo.


Abrimos Adobe Illustrator y creamos un nuevo documento. Las dimensiones del documento no tienen importancia, lo importante es ir a Ver->Ocultar mesas de trabajo, para quitar los límites del documento.

Vamos a necesitar una paleta de colores que se adecue a nuestra ilustración. El autor del tutorial ha usado la combinación de colores mostrada anteriormente. Nosotros podríamos dirigirnos a la ventana "Guía de color" y seleccionar la que mejor nos parezca.

El primer paso es crear un rectángulo grande, que sería el fondo de nuestra ilustración, usando el color más claro de nuestra paleta.


Luego, usando el color más cercano al verde de nuestra paleta dibujamos un rectángulo y un óvalo, para representar una colina. Dado que ambas formas tienen el mismo color parecerán ser una sola pero realmente pueden moverse por separado.


Ahora elegimos un color verde más oscuro y dibujamos nuevamente un óvalo para representar otra colina. Esta nueva colina la seleccionamos y damos click derecho sobre ella, luego elegimos la opción Organizar->"Enviar atrás", de modo que se encuentre detrás de la primera colina pero sobre el fondo que pintamos inicialmente.


Ahora usamos la herramienta elipse nuevamente, pero manteniendo pulsado SHIFT, para dibujar un círculo.
Así mismo, usando la herramienta pluma dibujamos un triángulo con 4 clicks. Podemos ajustar la forma del triángulo usando la herramienta "Selección directa", que nos permitirá mover cualquiera de los 3 puntos que fijamos.


Ahora movemos el triángulo que acabamos graficar y lo posicionamos como el tronco de un árbol. Entonces copiamos el triángulo y pegamos un duplicado, escalamos y rotamos el duplicado para que forme una rama del árbol. Superponemos la rama sobre el tronco y vemos cómo combinan bastante bien.


Presionando SHIFT seleccionamos todas las formas que componen un árbol y entonces, luego de seleccionar, presionando ALT arrastramos lo seleccionado a otra posición, para generar duplicados.


Ajustamos la orientación de las ramas, de modo que cada árbol tenga un aspecto único.


Seleccionamos el rectángulo que está de fondo, lo copiamos y pegamos encima. Le quitamos el color de relleno en la barra de herramientas, pues solo nos interesa su forma.


Presionando SHIFT añadimos a la selección el rectángulo verde y las 2 colinas. Seguidamente presionamos el botón "Recortar" de la paleta "Buscatrazos", para recortar estas formas a la medida.


El proceso de "Recortar" modifica la ubicación de los elementos, por lo que debemos seleccionarlos y con click derecho usar Organizar (tal como se hizo antes) según convenga.


Hasta este punto hemos usado Illustrator para crear los vectores de un paisaje, pero ahora vamos a dar más vida a nuestro diseño en Photoshop. Por ello, copiamos y pegamos absolutamente todo (como objeto inteligente).


Pegamos sobre nuestro diseño una textura para dar una mejor presentación a nuestro diseño. 
El tutorial sugiere el siguiente enlace: http://lostandtaken.com/blog/2013/2/28/10-simply-subtle-grunge-textures.html


Luego de pegar la textura, esta aparecerá en una nueva capa, sobre nuestro diseño, y entonces cambiamos su modo de fusión a luz suave (soft light).


Así llegamos al resultado final. Y como se observa, podemos llegar a crear diseños muy agradables incluso usando las herramientas más básicas de Illustrator. Espero poder subir algunos tutoriales más según vaya explorando.

domingo, 20 de julio de 2014

Archivos de Acceso Aleatorio en Java

Archivos de Acceso Aleatorio

En esta ocasión vamos a ver cómo hacer uso de archivos de acceso aleatorio en un programa Java.
Para ello he realizado dos videos explicativos. En el primero veremos cómo escribir datos en un archivo, cómo como leer datos previamente escritos y cómo realizar búsquedas de registros sobre tal archivo.

Si estamos guardando información de empleados, un registro se refiere a los datos referentes a dicho empleado, y así tendríamos un registro por cada empleado, que incluye toda su información, guardada en base a tipos de datos más específicos.

En el segundo video se continua explicando sobre cómo eliminar registros de un archivo de acceso aleatorio. Esta eliminación puede ser tanto física como lógica o incluso una mezcla de ambas. En el video se explica más a detalle sobre porqué usar una u otra eliminación. Se demuestra demás cómo hacerlo.

Espero les sea de utilidad.
Si tienen dudas pueden comentar en esta entrada o en los videos respectivos, en Youtube.

Enlace de descarga del programa de ejemplo:

Enlaces sobre los videos explicativos:

miércoles, 18 de junio de 2014

Patrón de Diseño Strategy

Patrón de Diseño Strategy o Estrategia

Si tuviera que describir el patrón de diseño Strategy en pocas palabras, podría resumirlo del siguiente modo:
El patrón de diseño Estrategia es aplicable cuando tenemos varios algoritmos que hacen lo mismo de distinto modo, y cada forma de hacerlo es conveniente en casos determinados. Entonces el patrón permite intercambiarlos y usar el que mejor se adapte.
Así se establece una estrategia para aplicar el algoritmo más conveniente siempre, y ello se decide en tiempo de ejecución.
¿Y si tuviera que explicarlo en muchas palabras? Pues preferiría explicarlo en pocas palabras y lo definiría del mismo modo.



Bueno, ahora sí, como es de costumbre, aquí un video-tutorial para inmortalizar el concepto y hacerlo prevalecer con el paso del tiempo:
Clic para ver un video-tutorial sobre el patrón de diseño Strategy

Y desde el siguiente enlace es posible descargar el código fuente del programa:
Clic para descargar un programa de ejemplo sobre el patrón de diseño Strategy
El ejemplo está desarrollado en Java, y se creó usando el IDE Netbeans.

Gracias por visitar el sitio. Si tiene dudas, usted puede comentar aquí mismo o en el video, en YT.

jueves, 3 de abril de 2014

Graficar un Círculo en Java y modificar gradualmente sus Colores y Tamaño

Graficar Óvalo o Círculo en Java


Veremos cómo graficar un círculo en Java (y se explicará cómo hacerlo para un óvalo). Pero lo destacable es que podremos modificar el tamaño del círculo y sus colores, moviendo ciertas barras conocidas como JSlider.
Tendremos entonces barras de desplazamiento para modificar la tonalidad de los colores (rojo, verde y azul, RGB) y el diámetro del círculo, que estarán inmersas en ventanas internas (JInternalFrame).
Se explica además acerca de algunos layout: FlowLayout, BorderLayout y AbsolutLayout.

Es posible descargar el código fuente desde MEGA:

Es posible ver el videotutorial desde Youtube:

jueves, 20 de marzo de 2014

Cronómetro en Java - Clase Timer

Cronómetro en Java


He subido un nuevo video sobre programación en Java. En este caso, se explica detalladamente el funcionamiento de una aplicación que hace de cronómetro. Es decir, muestra el tiempo transcurrido en horas, minutos, segundos y centésimas de segundos.
Para ello se hace uso de la clase Timer y la interfaz ActionListener.
El programa es relativamente sencillo pero puede resultar bastante útil como ejercicio práctico para aquellos que recién se inician en Java. El video explicativo puede verse desde:

El código fuente de la aplicación puede descargarse también...

miércoles, 12 de marzo de 2014

Sistema de ventas para una Librería

Aplicación sobre Venta de Libros

Este ejercicio fue propuesto por Juan Angulo, en uno de los grupos de programación de Facebook que suelo frecuentar. El programa de hecho había sido desarrollado en parte, pero faltaba agregarle ciertas funcionalidades más.
A fin de cuentas se llegó a implementar un carrito de compras. Así, es posible agregar libros a la librería, venderlos por cantidades, retirar el libro del carrito si así se desea, o agregar más unidades a la venta del mismo.
El programa calcula el subtotal a pagar, es decir, suma el precio a pagar por los libros seleccionados en el carrito de compra, y además calcula el total a pagar, de todos los libros que se encuentran en el carrito de compras.
La aplicación en Java cuenta además con ciertas restricciones, como asegurarse de que no se agregue el mismo libro más de una vez, ni que se repita un libro en el carrito de compras, sino que se modifique la cantidad del mismo o que sea retirado.

He realizado un video explicativo sobre este ejercicio, el cuál puede verse desde la siguiente dirección:

Así mismo es posible descargar el código fuente del programa:



Como siempre, si usted tiene dudas, no dude ;)
Es decir, no dude en comentarlas en el video mismo o como comentario en esta entrada.

lunes, 10 de marzo de 2014

Buscador tipo Google en Java con Archivos e Interfaces Gráficas

Buscador tipo Google en Java


Se desarrolla una aplicación en Java haciendo uso de interfaces gráficas, es decir, los componentes visuales de Swing.
La aplicación permite registrar empleados e información principal de los mismos. Luego es posible buscar a los empleados a tiempo real según sus apellidos paternos. Es decir, a medida que se escribe el apellido la lista de resultados va filtrando a los que coinciden. La lista de resultados se actualiza cada vez que una tecla es liberada, haciendo uso del evento correspondiente.
Con ello decimos que no se necesita hacer clic en algún botón ni siquiera es necesario presionar enter.
Lo mejor es que no tenemos que estar ingresando datos cada vez que ejecutamos el programa, ya que los datos son salvados en archivos, y se cargan cada vez que el programa es abierto, lo que hace posible armar un buen listado, a diferencia de los programas que no hacen uso de archivos.

Videotutorial en Youtube

He realizado un video explicativo que explica con detalle el desarrollo de este programa, en el que se hacen uso de componentes como JTabbedPane, JTextArea, JTextField, entre otros.

Descargar programa

Es posible descargar el código fuente del programa expuesto en el videotutorial. Hay que tener en cuenta que el programa se desarrollo en Netbeans, sin embargo, puede ser abierto desde otros IDE con un mínimo esfuerzo.

sábado, 22 de febrero de 2014

Patrón de diseño Singleton [Incluye descarga de los ejemplos]

Singleton

Singleton es uno de los patrones diseño más fáciles de aplicar, pero no por ello debe usarse exhaustivamente. Debemos aprender cuándo y porqué hacer uso de este patrón.

Como característica principal del mismo tenemos:
Singleton restringe la creación de instancias de una clase, limitando a que sólo pueda crearse una única instancia.

He realizado un video que explica con mayor detalle la aplicación de Singleton. En tal video se explica cómo se ha integrado este patrón a dos aplicaciones creadas usando Java:

Y es posible descargar el código de tales aplicaciones desde el siguiente enlace:

En caso de tener dudas, puede comentar en el video o aquí mismo.