Diseño De Interfaces

Diseo de interfaces 1

Este tuto esta hecho para dar una guía de mas o menos que pasos debemos seguir para la creación de interfaces para nuestros programas y las pautas que debemos seguir a la hora de escoger el color y las formas de los distintos elementos de la misma, en este tutorial se usaran tres programas: Photoshop CS2

Visual Basic 6.0

Microangelo 5.5

CUH e-zine 4 edicin

Para el diseño de las barras fondos y botones usaremos el Photoshop CS2, debemos tener en cuenta que podemos manejar distintos tamaños para las ventanas y demás componentes de nuestros programas, así mismo debemos tratar de ser consecuentes y concordantes en cuanto a los colores o sea el manejo de un tema uniforme para las distintas partes u elementos de nuestras aplicaciones, antes no se tenían en cuenta este tipo de cuestiones, ya que de lo que se trataba era ser funcionales y el diseño poco trascendía en la creación de un programa, pero en la actualidad ya es un ítem manejar el concepto del diseño grafico en los programas, ya que esta será la cara que daremos a los demás y de esta forma se verán que nuestras maneras de trabajar son acordes a la realidad y la actualidad, es por ello que se hace necesario saber ciertas cosas para poder competir gráficamente con otras aplicaciones que pueden hacer lo mismo que la nuestra, pero que por diseño la nuestra se lleva de leguas a las demás, siendo escogida por esta cualidad ante las demás, es cierto que entre mas liviana sea nuestra aplicación, mas funcional será, sin embargo con los tipos de tecnologías y el hardware soportado y que se maneja en la actualidad eso ya no es un pretexto para hacer aplicaciones arcaicas y monocromáticas, ya que un poco de diseño no le añadirá el suficiente peso para hacerla inoperable (A menos que tengas un PC de el pasado milenio), ya que con los equipos que salen al mercado desde hace mas de 5 años fácilmente una aplicación de menos de 10 megas es algo casi que ultraliviano entre comillas lógicamente! Entonces empezaremos con la parte de la barra de titulo en Visual Basic 6.0 lógicamente

y para poder personalizar nuestra aplicación para

Diseo de interfaces 1

que dicha barra de Windows desaparezca debemos manejar la propiedad BorderStyle del form:

CUH e-zine 4 edicin manejamos varios tamaños de ventanas, entonces para cada tamaño manejaremos una barra, en nuestro primer caso vamos a suponer que hacemos el home y una ayuda por el momento, necesitaremos dos forms para ello, pero primero vamos al diseño de las barras en photoshop. Abrimos un nuevo documento de 400 pixeles de ancho x 20 pixeles de alto, lo rellenamos de negro.

Insertamos una nueva capa

En Windows se usa esta barra para poner el titulo de la ventana y para el manejo de los botones de visualización, por defecto Windows depende del theme que se use actualmente para así mismo poner el color y la fuente de la misma, entonces en el combo de la propiedad la ponemos en 0none para omitir la barra. De forma que podemos usar las nuestras para personalizar totalmente nuestras aplicaciones. Con la herramienta pincel, redondo y de color blanco

Cabe decir que al quitar este elemento el form queda fijo ya que no se puede mover la ventana al carecer de la barra, sobra decir también que sirve para ello, sin embargo podemos manejar el API ReleaseCapture, por el momento veremos la forma de hacer las barras para usarlas en nuestras aplicaciones, suponiendo que

un

pincel

duro,

Cuando necesitamos precisión podemos usar las guías para manejar exactitud a la hora de diseñar, en el menú Vista, Nueva Guia:

Diseo de interfaces 1

CUH e-zine 4 edicin

Creamos una nueva capa de color blanco asi:

Le bajamos a esta capa a 45% quedando asi

Ya tenemos nuestra primer barra lista para usar, la guardamos en el menú archivo guardar para web

bien sea como un .gif o como un .jpg

Hacemos tres puntos separados equitativamente y a la misma altura, dejando las guías para poner los botones de la siguiente forma

Seleccionamos la Herramienta Texto y escribimos un carácter por capa en cada botón

Diseo de interfaces 1

CUH e-zine 4 edicin

Este mismo documento nos puede servir para crear la barra mas ancha, debemos guardar el psd para mantener los documentos psd, vamos al menú archivo

Y le cambiamos el ancho a 600, seleccionamos todas la capas (menos la capa de fondo negro o sea la base) en el menú capas, se logra seleccionando la primera y con la tecla CTRL presionamos una a una las capas que necesitamos manipular

independientes en caso de futuras modificaciones pero debemos crear la mas ancha de 600 px de ancho X 20 px de alto, para ello nos vamos al menú imagen

en este caso necesitamos moverlas a la derecha de la barra para después dimensionar la capa que da el efecto de resplandor

De esta forma ya podemos hacer algo básico, entonces vámonos a Visual Basic de nuevo, allí nos vamos a la propiedad Picture del form1 y seleccionamos la barra pequeña para el home de nuestra aplicación, debemos adaptar el ancho del form de forma que se adapte al ancho de la barra

CUH e-zine 4 edicin

Diseo de interfaces 1

Y las propiedades del Shape quedan de esta forma

Ahora insertamos un nuevo form

Ahora le ponemos al form BackColor el color negro

a

la

propiedad

Hacemos lo mismo que en el primer form, esta vez seleccionamos la barra mas ancha, el BackColor del Form2 igual que el anterior, pero esta vez vamos añadir dos shapes rectangulares una transparente y otra blanca a modo de panel lateral, y una línea, quedando algo así

Luego insertamos un shape rectangular

Lo modificamos a de forma que quede de la siguiente forma:

Volvemos de nuevo al Photoshop para hacer algo que es típico de las paginas webs y del diseño en general, y es crear una imagen transparente de 1

Diseo de interfaces 1

CUH e-zine 4 edicin

pixel x 1 pixel, la usaremos como una mascara o capa de selección, ya veremos como la usaremos, entonces para ello abrimos un nuevo documento transparente de 1 px X 1 px y lo guardamos con el nombre de EspacioBlanco.gif, volvemos al form1 e insertamos un Image, seleccionamos la imagen EspacioBlanco.gif y en la propiedad Stretch le ponemos True de esta forma la expandimos para abarcar un botón, seleccionamos la imagen y le damos click derecho, copiar, pegar, nos saldrá algo diciendo que si deseamos un no se que XD, le decimos que no y pegamos de nuevo, escogemos no de nuevo, corremos las imágenes una en cada botón Le dejamos el trazo como se ve

Volvemos a photoshop para hacer unos botones breves, abrimos una nueva capa de 60 px X 20 px Le ponemos el fondo negro con la herramienta texto escribimos entrar

Para el borde blanco del botón seleccionamos la capa de fondo y en el menú Capa

Guardamos para web, en formato .Gif como botón-A.gif, ahora seleccionamos el texto y le cambiamos el color a un tono gris y en el resplandor exterior le dejamos como se ve

A la capa del fondo en el estilo resplandor interior lo dejamos como se ve en la siguiente imagen, el color es a vuestro gusto de igual forma todo lo aquí expuesto, es el estilo personal el que decide los esquemas de colores que se elegirán para hace las aplicaciones determinando en ello el tipo de aplicación y los usuarios a los que llegará

Diseo de interfaces 1

nuestro programa o aplicación.

CUH e-zine 4 edicin con el control Command, al evento click del Command le cargamos el form2 con la propiedad Show y el form1 le cambiamos la propiedad visible en false, también asignamos los eventos click de las mascaras o imágenes transparentes, quedando el code del form1 así: ‘Muestra el form2 y Oculta el form1 Private Sub Command1_Click() Form1.Visible = False Form2.Show End Sub ‘Termina la aplicacion Private Sub Image1_Click() End End Sub

De nuevo en Visual agregamos un Command o botón que llaman, en la propiedad Style le dejamos en 1-Graphical, seleccionamos la propiedad Picture y cargamos la imagen Boton-A.gif

‘Ayuda Private Sub Image2_Click() MsgBox "Ayuda" End Sub ‘Minimiza el form Private Sub Image3_Click() Me.WindowState = vbMinimized End Sub

Es importante dejar la propiedad StartUpPosition en 2- CenterScreen, para que siempre arranquen en el centro de la pantalla sin importar la resolución de la misma,

En las propiedades dejamos como se ve aca

En la propiedad DownPicture cargamos la imagen que queremos que se active al clicar el botón, de esta forma creamos un efecto de roll-over sin embargo es molesto el borde del command por ello yo prefiero hacerlo con el control Image y no

De igual forma debemos pegar las mascaras o imágenes transparentes en el form2 para que quede funcional por el momento y asignarles el mismo code que en el form1, También agregamos un Command pero sin asignarle imagen ni nada

Pero al evento click del botón mostrará el form1 y ocultara el form2 ‘Muestra el form1 y Oculta el form2 Private Sub Command1_Click() Form2.Visible = False

Diseo de interfaces 1

CUH e-zine 4 edicin

Form1.Show End Sub ‘Termina la aplicacion Private Sub Image1_Click() End End Sub ‘Ayuda Private Sub Image2_Click() MsgBox "Ayuda" End Sub ‘Minimiza el form Private Sub Image3_Click() Me.WindowState = vbMinimized End Sub

Ahora solo queda diseñar nuestro icono para terminar el tutorial, retornamos de nuevo a photoshop, abrimos un nuevo documento de 200 px X 200 px con fondo negro, creamos una nueva capa y seleccionamos la herramienta rectángulo y hacemos dos rectángulos uno de fondo blanco pequeño y uno mas grande de fondo negro y trazo blanco de un pixel, le ponemos un texto dentro, mas o menos así

Con este programa podemos crear nuestros iconos de manera rápida y eficiente, la primer pantalla nos muestra el primer frame por defecto de 48 x 48 y de 256 colores, nos vamos al menú Tools

Combinamos las capas visibles y duplicamos la capa, la transformamos y desocultamos el fondo y al estilo de capa le ponemos un superposición de degradado de esta forma

Dejamos todo como se ve en la pantalla anterior, ahora nos vamos al menú Edit -> Import

Al resultante lo guardamos para web pero esta vez en formato .jpg, lógico que también guardamos el documento .psd para poder de esta forma tener nuestros documentos a la mano por si necesitamos hacer modificaciones. Abrimos MicroAngelo Studio 5.5 y

Diseo de interfaces 1

CUH e-zine 4 edicin

Alli seleccionamos nuestro recién guardado .jpg en Photoshop, ya lo podemos manipular como un icono

Pero para ello debemos seleccionar una herramienta de edición como son los pinceles o el bote pintura, similares a como funcionan en photoshop las herramientas

Como muchos saben los iconos son usados dependiendo del tipo del programa que los necesite, de esta forma podemos tenerlos en distintas resoluciones para que de esta manera no se deforme al tener un solo frame y ser requerido para distintos usos como son el icono que se pone en el Sistray, los iconos de vista previa y otros mas, es por ello que es necesario tener nuestro icono en varias resoluciones , para saber cuantos frames tenemos nos vamos a esta pantalla y al hacer clic derecho podemos agregar o eliminar frames, como en nuestro caso tenemos el primer frame en blanco o vacio hacemos clic derecho y lo borramos

para ello debemos saber usar el selector de color y escoger un monitor pequeñito en la parte superior de la ventana paleta

Ya es cuestión de experimentar con las tools y con el programa en si. Guardamos el resultado como un archivo .ico y listo ya podemos usarlo en nuestros proyectos De la misma forma que borramos podemos agregar nuestros nuevos frames haciendo clic derecho sobre el frame actual, para cada resolución creamos un frame, asegurando un icono especial para cada requerimiento del sistema, de la misma forma que lo dejamos sin transparencia, con MicroAngelo también podemos hacer nuestros iconos trasparentes.

Volvemos a Visual Basic 6.0 y en el form1, cargamos el icono recién creado, ahora vamos a resolver el problema de mover el form, como dije antes, usaremos la API ReleaseCapture y la

CUH e-zine 4 edicin

Diseo de interfaces 1

función SendMessage, para ello las declaramos al principio del form de la siguiente manera

SWP_NOOWNERZORDER) End Sub

‘Declaramos la function SendMessage y la API ReleaseCapture

La otra forma es mas larga perola podemos aplicar a un botón

Private Declare Function SendMessage Lib "User32" Alias "SendMessageA" (ByVal hWnd As Long, ByVal wMsg As Long, ByVal wParam As Long, lParam As Any) As Long

'Declaramos la Api Private Declare Function SetWindowPos Lib "user32" (ByVal _ hWnd As Long, ByVal hWndInsertAfter As Long, ByVal X As Long, _ ByVal Y As Long, ByVal cx As Long, ByVal cy As Long, _ ByVal wFlags As Long) As Long

Private Declare Sub ReleaseCapture Lib "User32" () ‘Declaramos las constantes Const WM_NCLBUTTONDOWN = &HA1 Const HTCAPTION = 2 En el evento MouseMove del form la llamamos Private Sub Form_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single) Dim lngReturnValue As Long If Button = 1 Then 'si es el botón izquierdo Call ReleaseCapture lngReturnValue = SendMessage(Me.hWnd, WM_NCLBUTTONDOWN, HTCAPTION, 0&) End If End Sub Cabe decir que este procedimiento nos sirve para mover cualquier control que posea la propiedad hWnd,. De esta forma queda solucionado el problema de las ventanas fijas e inamovibles, otra buena opción para nuestros programas es estar posicionada encima de todas las ventanas activas, tal como lo hacen programas como el administrador de tareas, esa funcionalidad se llama TOPMOST y se puede lograr de distintas maneras la primera es de esta forma 'Declaramos la Api Private Declare Function SetWindowPos Lib "user32" (ByVal hWnd As Long, ByVal hWndInsertAfter As Long, ByVal X As Long, ByVal Y As Long, ByVal cx As Long, ByVal cy As Long, ByVal wFlags As Long) As Long 'Declaramos las constantes que usará la Api Const SWP_NOMOVE = &H2 Const SWP_NOSIZE = &H1 Const SWP_NOOWNERZORDER = &H200 Private Sub Form_Load() 'Llamamos la funcion al cargar el form Call SetWindowPos(hWnd, -1, 0, 0, 0, 0, SWP_NOMOVE

Or

SWP_NOSIZE

Or

‘Se llama la funcion y se declaran constantes Sub SetTopmostWindow(ByVal hWnd As Long, Optional topmost As Boolean = True) Const HWND_NOTOPMOST = -2 Const HWND_TOPMOST = -1 Const SWP_NOMOVE = &H2 Const SWP_NOSIZE = &H1 SetWindowPos hWnd, IIf(topmost, HWND_TOPMOST, HWND_NOTOPMOST), 0, 0, 0, 0, _ SWP_NOMOVE + SWP_NOSIZE End Sub ‘boton1 pone la ventana encima de todas Private Sub Command_Click() SetTopmostWindow Me.hWnd End Sub ‘boton2 pone la ventana normal Private Sub Command2_Click() SetTopmostWindow Me.hWnd, False End Sub Existen diversas maneras de afrontar el diseño de nuestras aplicaciones pero se hace extenso el texto, es por ello que se queda para otra edición, la siguiente parte de este tutorial, cabe decir que la elección de los colores, es algo que se tratará en la segunda parte, ya que es algo primordial para darle una identidad y un aire profesional a nuestros programas, por muy pequeños que sean, como dicen por ahí, todo entra por los ojos y que mas que el software, gracias a todos por su paciencia y por soportar la larga espera de esta edición , que como todas las demás siempre ha estado plagada de imprevistos y de aplazamientos pero al final se ha terminado, tarde pero se ha logrado, ojala que para los próximos números de la revista se superen este tipo de impases, Espero que les haya gustado este tutorial, es hecho exclusivamente para el CUH E-zine, la revista electrónica del foro de el-hacker.com www.el-hacker.com/foro By Aleks 2008

Diseo de interfaces 1

Anexo - Resultados Diseño

CUH e-zine 4 edicin

Diseo de interfaces 1

CUH e-zine 4 edicin Barras de Titulo

Iconos