Tutorial Diseno de Menu de Usuario Style Dock




Tutorial Diseno de Menu de Usuario Style Dock


Les dejo un tutorial donde muestro paso a paso como crear un menu de usuario, espero que les sirva y asi vean que el uso del photoshop es un muy simple. Asi que comencemos con el tuto.

Paso 1: Una vez abierto el photoshop CS3, CS4 o CS5 presionamos Ctrl+N y le damos las siguientes dimensiones a nuestra area de trabajo 480 píxeles de anchura y 140 de altura, despues le damos a ok



Paso 2: Ahora lo que hacemos es seleccionar la herramienta rectangulo como se muestra en la figura a continuacion y aqui trazamos un rectangulo en nuestra area de trabajo.



Paso 3:  Despues de haber creado el rectangulo presionamos la tecla Ctrl sin soltar le damos la siguiente forma nuestro rectangulo, para eso simplemente con el puntero vamos halando de las esquinas y veremos como le damos una nueva forma a la figura. Lo que haremos a continuacion es tomar nuevamente la herramienta rectangulo y crearemos yn cuadrado y lo colocaremos en la parte infererior de nuestro rectangulo que creamos anterior.



Paso 4: Luego nos vamos a la pestana capa que se encuentra en la parte izquierda de nuestro programa y seleccionamos la forma 1 haciendo Ctrl luego soltamos la tecla y veremos que se ha seleccionado la forma en el area de trabajo y le hacemos clic derecho y seleccionamos la opcion degradado y seleecionamos el color de degradado que mas nos guste y le damos a aceptar



Paso 5: Creamos una nueva capa y despues seleccionamos la nueva capa creada y ahi vamos a elegir la herramienta marco eliptico, para trabajar con ella. para crear la capa nos vamos al menu capa y ahi le damos clic en donde dice crear capa nueva.



Paso 6: Creamos la siguiente forma eliptica y le rellenamos de color blanco con la herramienta bote de pintura, asi como se muestra en la imagen, siempre trabajando con la nueva capa creada.



Paso 7: Ahora procedemos a seleccionar la capa de degraado que hemos creado para nuestra base anteriormente siempre presionando Ctrl para que nos la figura, y en la capa nueva que hemos creado la seleccionamos en la pestana capa con solo hacer clic y presionando las teclas Ctrl+Shif+i para hacer una selecion inversa y ahi borramos todo lo que no nos sirva con la tecla Suprim.



Paso 8: A la capa creada le damos una opacidad de 70% para que nos de un efecto algo transparente.



Paso 9: Podemos crear otra capa para cubrir lo que no cubrimos en la capa 1 y asi darle mas efectos para que se vea mucho mejor nuestro menu de usuario lo podemos hacer y le damos un 18% de opacidad para que muestre un poco mas transparente este efecto en esta capa.



Paso 10: Ahora en el degradado de la forma 2 procedemos a hcaer clic derecho y seleccionamos opciones de fusion y seleccionamos sombra pararela y le damos los siguientes valores que se muestra en la imagen de abajo.



Paso 11: Es aqu donde procedemos a colocar los renders o iconos que deseen que tenga su menu de usuario, lo ajustamos a al tamano que mas nos guste, creamos otra capa y trabajando en esa nueva capa usando la herramienta forma personalizada creamos la siguiente figura.



Paso 12: Luego uilizando el bote de pintura cubrimos con la seleccion con un color negro.



Paso 13: Este paso creamos otra capa y trabajando con esta nueva capa nos vamos al menu y hacemos clic en seleccion le damos clic donde nos muestre la opcion modificar y contraer, luego nos mostrara una ventana donde le damos el valor de 1 y aceptar, y lo rellenamos de color blanco.



Paso 14: Nuevamente volvemos a contraer un pixel y ya contraido la seleccion le borramos el relleno presionando suprim, para que nos quede de la siguiente manera.



Paso 15: En este paso seleccionamos la herramienta texto y escribimos lo que deseemos que diga en nuestro menu de usuario yo en mi caso le coloque identi.es



Paso 16: Este paso lo pueden obviar, no hace falta que lo hagan, pero si lo deseean pueden hacer clic derecho en cada capa y rasterizar la capa.



Paso 17: Luego procedemos a agruparlos por grupos para asi tener mas organizado todas las capas para eso seleccionamos las capas que deseemos y presionando las teclas Ctrl+G creamos el grupo y haciendo clic derecho en el grupo creado en la opcin propiedades podemos darle un nuevo nombre asi como muestra la imagen.



Paso 18: Ahora lo que haremos es a cortar nuestro menu en cuatro partes para eso seleccionamos la herramienta sector y seleccionamos todo el lienzo de trabajo.



Paso 19: Haciendo clic derecho en el area de trabajo o lienzo seleccionamos la opcion dividir sector y le damos un visto bueno en Dividir verticalmenteen... y le damos un valor de 4 sectores.



Paso 20: Ahora lo vamos a guardar haciendo clic en archivo Guardar para Web y dispositivos..



Paso 21: En esta nueva ventana que se nos presento le vamos a cambiar a PNG-24 para que nos guarde con un fondo transparente, despues de eso le  damos a aceptar y nos mostrara una ventana donde guardemos nuestro menu y lo guardamos en el escritorio y ahi nos creara una carpeta con todas las imagenes del menu.



Paso 22: Despues podemos entrar en la carpeta que se creo con el menu y  podemso subir a un servidor de imagenes que mas nos guste.



Espero que les haya gustado este pequeno tutorial y ademas trate de ser lo mas claro posible en todos los pasos asi que cualquier duda pueden dejarlo en los comentarios... Saludos si desean algun tuto solo dejenlo en los comentarios...





Tutorial Diseno de Menu de Usuario Style Dock
30 Puntos Score: 6/10
Visitas: 606 Favoritos: 5
Ver los usuarios que votaron...
3 Comentarios Tutorial Diseno de Menu de Usuario Style Dock
muy buen post  
muy bueno y detallado  
Para dejar un comentario Registrate! o.. eres ya usuario? Accede!