Está en la página 1de 12

Diseo de interfaces 1 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
Este tuto esta hecho para dar una guía de mas o de ser consecuentes y concordantes en cuanto a
menos que pasos debemos seguir para la creación los colores o sea el manejo de un tema uniforme
de interfaces para nuestros programas y las para las distintas partes u elementos de nuestras
pautas que debemos seguir a la hora de escoger aplicaciones, antes no se tenían en cuenta este
el color y las formas de los distintos elementos de tipo de cuestiones, ya que de lo que se trataba
la misma, en este tutorial se usaran tres era ser funcionales y el diseño poco trascendía en
programas: la creación de un programa, pero en la actualidad
Photoshop CS2 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
Visual Basic 6.0 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


Microangelo 5.5 de titulo en Visual Basic 6.0 lógicamente

y para poder personalizar nuestra aplicación para


Diseo de interfaces 1 CUH e-zine 4 edicin
que dicha barra de Windows desaparezca manejamos varios tamaños de ventanas,
debemos manejar la propiedad BorderStyle del entonces para cada tamaño manejaremos una
form: 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 0-
none para omitir la barra.

De forma que podemos usar las nuestras para


personalizar totalmente nuestras aplicaciones.

Con la herramienta pincel, un pincel duro,


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 Cuando necesitamos precisión podemos usar las
sirve para ello, sin embargo podemos manejar el guías para manejar exactitud a la hora de diseñar,
API ReleaseCapture, por el momento veremos la en el menú Vista, Nueva Guia:
forma de hacer las barras para usarlas en
nuestras aplicaciones, suponiendo que
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

en este caso necesitamos moverlas a la derecha


de la barra para después dimensionar la capa que
independientes en caso de futuras modificaciones da el efecto de resplandor
pero debemos crear la mas ancha de 600 px de
ancho X 20 px de alto, para ello nos vamos al
menú imagen

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
Diseo de interfaces 1 CUH e-zine 4 edicin

Y las propiedades del Shape quedan de esta


forma

Ahora insertamos un nuevo form

Hacemos lo mismo que en el primer form, esta


vez seleccionamos la barra mas ancha, el
BackColor del Form2 igual que el anterior, pero
Ahora le ponemos al form a la propiedad esta vez vamos añadir dos shapes rectangulares
BackColor el color negro 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


Volvemos de nuevo al Photoshop para hacer algo
siguiente forma:
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
Guardamos para web, en formato .Gif como
texto escribimos entrar
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
Para el borde blanco del botón seleccionamos la los esquemas de colores que se elegirán para
capa de fondo y en el menú Capa hace las aplicaciones determinando en ello el tipo
de aplicación y los usuarios a los que llegará
Diseo de interfaces 1 CUH e-zine 4 edicin
nuestro programa o aplicación. 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

‘Ayuda
De nuevo en Visual agregamos un Command o Private Sub Image2_Click()
botón que llaman, en la propiedad Style le MsgBox "Ayuda"
dejamos en 1-Graphical, seleccionamos la End Sub
propiedad Picture y cargamos la imagen
Boton-A.gif ‘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,

De igual forma debemos pegar las mascaras o


imágenes transparentes en el form2 para que
quede funcional por el momento y asignarles el
En las propiedades dejamos como se ve aca
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


En la propiedad DownPicture cargamos la imagen
ocultara el form2
que queremos que se active al clicar el botón, de
esta forma creamos un efecto de roll-over sin
‘Muestra el form1 y Oculta el form2
embargo es molesto el borde del command por Private Sub Command1_Click()
ello yo prefiero hacerlo con el control Image y no 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 Con este programa podemos crear nuestros
photoshop, abrimos un nuevo documento de 200 iconos de manera rápida y eficiente, la primer
px X 200 px con fondo negro, creamos una nueva pantalla nos muestra el primer frame por defecto
capa y seleccionamos la herramienta rectángulo y de 48 x 48 y de 256 colores, nos vamos al menú
hacemos dos rectángulos uno de fondo blanco Tools
pequeño y uno mas grande de fondo negro y
trazo blanco de un pixel, le ponemos un texto
dentro, mas o menos así

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
para ello debemos saber usar el selector de color
hacer clic derecho podemos agregar o eliminar
y escoger un monitor pequeñito en la parte
frames, como en nuestro caso tenemos el primer superior de la ventana paleta
frame en blanco o vacio hacemos clic derecho y lo
borramos

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
Volvemos a Visual Basic 6.0 y en el form1,
transparencia, con MicroAngelo también podemos
cargamos el icono recién creado, ahora vamos a
hacer nuestros iconos trasparentes.
resolver el problema de mover el form, como dije
antes, usaremos la API ReleaseCapture y la
Diseo de interfaces 1 CUH e-zine 4 edicin
función SendMessage, para ello las declaramos al SWP_NOOWNERZORDER)
principio del form de la siguiente manera End Sub

‘Declaramos la function SendMessage y la API La otra forma es mas larga perola podemos
ReleaseCapture aplicar a un botón

Private Declare Function SendMessage Lib 'Declaramos la Api


"User32" Alias "SendMessageA" (ByVal hWnd As Private Declare Function SetWindowPos Lib
Long, ByVal wMsg As Long, ByVal wParam As "user32" (ByVal _
Long, lParam As Any) As Long hWnd As Long, ByVal hWndInsertAfter As Long,
ByVal X As Long, _
Private Declare Sub ReleaseCapture Lib "User32" ByVal Y As Long, ByVal cx As Long, ByVal cy As
() Long, _
ByVal wFlags As Long) As Long
‘Declaramos las constantes
Const WM_NCLBUTTONDOWN = &HA1 ‘Se llama la funcion y se declaran constantes
Const HTCAPTION = 2 Sub SetTopmostWindow(ByVal hWnd As Long,
Optional topmost As Boolean = True)
En el evento MouseMove del form la llamamos Const HWND_NOTOPMOST = -2
Const HWND_TOPMOST = -1
Private Sub Form_MouseMove(Button As Integer, Const SWP_NOMOVE = &H2
Shift As Integer, X As Single, Y As Single) Const SWP_NOSIZE = &H1
Dim lngReturnValue As Long SetWindowPos hWnd, IIf(topmost,
If Button = 1 Then 'si es el botón izquierdo HWND_TOPMOST, HWND_NOTOPMOST), 0, 0, 0,
Call ReleaseCapture 0, _
lngReturnValue = SendMessage(Me.hWnd, SWP_NOMOVE + SWP_NOSIZE
WM_NCLBUTTONDOWN, HTCAPTION, 0&) End Sub
End If ‘boton1 pone la ventana encima de todas
End Sub Private Sub Command_Click()
SetTopmostWindow Me.hWnd
Cabe decir que este procedimiento nos sirve para End Sub
mover cualquier control que posea la propiedad ‘boton2 pone la ventana normal
hWnd,. Private Sub Command2_Click()
De esta forma queda solucionado el problema de SetTopmostWindow Me.hWnd, False
las ventanas fijas e inamovibles, otra buena End Sub
opción para nuestros programas es estar
posicionada encima de todas las ventanas activas, Existen diversas maneras de afrontar el diseño de
tal como lo hacen programas como el nuestras aplicaciones pero se hace extenso el
administrador de tareas, esa funcionalidad se texto, es por ello que se queda para otra edición,
llama TOPMOST y se puede lograr de distintas la siguiente parte de este tutorial, cabe decir que
maneras la primera es de esta forma la elección de los colores, es algo que se tratará
en la segunda parte, ya que es algo primordial
'Declaramos la Api para darle una identidad y un aire profesional a
Private Declare Function SetWindowPos Lib nuestros programas, por muy pequeños que sean,
"user32" (ByVal hWnd As Long, ByVal como dicen por ahí, todo entra por los ojos y que
hWndInsertAfter As Long, ByVal X As Long, ByVal mas que el software, gracias a todos por su
Y As Long, ByVal cx As Long, ByVal cy As Long, paciencia y por soportar la larga espera de esta
ByVal wFlags As Long) As Long edición , que como todas las demás siempre ha
'Declaramos las constantes que usará la Api estado plagada de imprevistos y de aplazamientos
Const SWP_NOMOVE = &H2 pero al final se ha terminado, tarde pero se ha
Const SWP_NOSIZE = &H1 logrado, ojala que para los próximos números de
Const SWP_NOOWNERZORDER = &H200 la revista se superen este tipo de impases, Espero
Private Sub Form_Load() que les haya gustado este tutorial, es hecho
'Llamamos la funcion al cargar el form exclusivamente para el CUH E-zine, la revista
Call SetWindowPos(hWnd, -1, 0, 0, 0, 0, electrónica del foro de el-hacker.com
www.el-hacker.com/foro
SWP_NOMOVE Or SWP_NOSIZE Or By Aleks 2008
Diseo de interfaces 1 CUH e-zine 4 edicin
Anexo - Resultados Diseño
Diseo de interfaces 1 CUH e-zine 4 edicin
Barras de Titulo

Iconos