crea tu propio menu de usuario

crea tu propio menu de usuario
tutorial


BIENVENID@S A MI POST



Hola amigos de la familia P!
En esta tarde quiero compartir con ustedes
un tutorial para que aprendan a crear un "Menu de Usuario" usando photoshop 🙂



Crea

1.
creamos un archivo nuevo de 1000px de ancho por 200px de alto, luego creamos un rectangulo redondeado con su respectiva herramienta...

haz
A ese rectangulo le podemos agregar un estilo de los que tenemos guardados en photoshop, o si prefieres puedes agregarle solo color, eso lo decides tu 😉

cardenasx

2.
Ahora usando la herramienta de Texto, escribimos:
Perfil - MP- Post - y por ultimo Poringa! esta ultima es opcional

menu de usuario

tu propio

3.
Como escribimos cada palabra en distinta capa, entonces debemos agrupar las capas de texto,
para eso debemos seleccionar las capas de texto y luego usaremos el comando Ctrl + G , y asi optenemos nuestro grupo

crea tu propio menu de usuario
tutorial

4.
Ahora para darle vida a nuestro Menu de Usuario podemos utilizar un Rander
Si no tenemos ningun rander guardado en nuestra maquina, como en mi caso entonces usaremos una imagen normal 😉
podemos usar la imagen de dos formas:

la primera opción es ir a Archivo y damos click donde dice "Colocar".
la segunda opción es arrastrar la imagen desde la carpeta donde la tenemos guardada y soltarla en el phoshop.

Crea

Ya con la imagen abierta en el photoshop, podemos ubicarla en el sitio que deseamos y también podemos cambiar el tamaño de la misma...
Si la imagen no nos quedo del tamaño que deseamos, podemos volver a editar su tamaño con el comando "Ctrl + T" o moverla con la herramienta "Mover" (V)

Nota: si no tenemos practica usando el photoshop es mas facil utilizar una imagen con fondo blanco, porque esto hace mas facil el trabajo a la hora de quitar el fondo 😉
haz

5.
Con la herramienta -"selección rapida", seleccionamos el fondo de la imagen

cardenasx
menu de usuario

6.
Ahora seleccionamos la herramienta borrador, pero cuando pasamos el borrador nos dice que no se puede editar el contenido de la imagen porque es un objeto inteligente, entonces debemos rasterizar el objeto... hay seleccionas ok.

tu propio
crea tu propio menu de usuario

7.
Ya con el objeto rasterizado podemos pasar el borrador y quitar el fondo
No debemos preocuparnos de borrar la imagen porque al seleccionar el fondo solo sera posible borrar el fondo 😉
Y la imagen nos quedara asi:
tutorial

Cuando hayas borrado el fondo es necesario volver a usar la herramienta "selección rapida" y dando click derecho sobre la imagen seleccionas la opción"Deseleccionar"
Crea

8.
Ya con la imagen que usamos sin fondo nos va dando vida nuestro querido Menu de Usuario 🙂
pero para darle algo mas de vida seleccionamos la capa y dando click derecho seleccionamos donde dice: "opciones de fusión"
haz


cardenasx

9.
Seleccionamos la opción " sombra paralela" y nos da un toque de fondo en la imagen

menu de usuario

tu propio

10.
Ahora hacemos el mismo proceso de fusión con nuestro grupo de texto, entonces: seleccionamos el grupo, y dando click derecho sobre el seleccionamos "opciones de fusión" aqui también usamos sombra paralela y para darle un toque rasgado a las letras usamos la opción "Bisel y relieve", señalando la opción "textura"

crea tu propio menu de usuario

tutorial

11.
Con nuestro menú de usuario prácticamente listo, nos queda lo mas importante: la división de la imagen!
Para hacer dicha división usaremos la herramienta "Sector"

Crea

haz

12.
Dividimos nuestra imagen final así:

cardenasx

menu de usuario

13.
Cuando tengamos nuestra imagen dividida, vamos a "Archivo" y seleccionamos: Guardar para web y dispositivos "Alt + Mayus + Ctrl + S"

tu propio
crea tu propio menu de usuario

14.
Ahora Guardamos nuestra imagen como PNG-24 para que nos de transparencia y Ajustamos la imagen a 720px de ancho 😉

tutorial

Y damos click en guardar, hay cada uno mira en que carpeta lo quiere guadar y que nombre ponerle 😉
Crea

15.
Si hemos hecho todos los pasos bien, nos debe quedar una carpeta con las 4 imagenes 🙂

haz

Si no te queda así, devuelvete y mira que paso hiciste mal 😉
cardenasx

16.
Ahora viene el momento de subir las imagenes, cada uno tiene su host de imagenes preferido entonces cada uno es libre de subir la imagen al host que prefiera...

Una vez las imagenes subidas entonces tenemos algo así:

menu de usuario
pero si dejamos nuestro post con la imagen asi.. no va a pasar nada porque va a quedar como una imagen comun y corriente


tu propio


Para que nuestro menú de usuario nos quede funcionando es necesario que quede de la siguiente manera:






[*url=http://www.poringa.net/perfil/cardenasx][*img=http://s2.subirimagenes.com/privadas/1480645menudeusuario01.gif*][/url][*url=http://www.poringa.net/mensajes/a/cardenasx][*img=http://s2.subirimagenes.com/privadas/1480631menudeusuario02.gif*][/url][*url=http://www.poringa.net/perfil/cardenasx/posts][*img=http://s2.subirimagenes.com/privadas/1480632menudeusuario03.gif*][/url][*url=http://www.poringa.net][*img=http://s2.subirimagenes.com/privadas/1480635menudeusuario04.png*][/url]

crea tu propio menu de usuario
hay que reemplazar mi username: cardenasx, que yo señale con color rojo, lo cambias por tu username y sin los asteriscos (*)

debe quedarnos así:



tutorialCreahazcardenasx

Amigos hay miles de formas para hacer un menu de usuario, se puede hacer con una imagen, se puede hacer en forma de barra separadora (sin render), se puede colocar un estilo al texto; hay que dejar volar la imaginación, para hacer las cosas que nos agradan y darle vida a nuestros post 😉

Si tengo errores u horrores de ortagrafia me disculpan 😀 pues no me dedico a escribir y es mi primer tutorial 😬


GRACIAS POR PASAR 😉


@cardenasx

menu de usuario

tu propio

21 comentarios - crea tu propio menu de usuario

angieyruben +3
Felicitaciones amigo !!!
Muy buen tutorial y muy clara la explicación !!!


Gracias por compartir.
Besos y Lamiditas !!!

crea tu propio menu de usuario

Compartamos, comentemos, apoyemos, hagamos cada vez mejor esta maravillosa Comunidad !!!
2 Años en Poringa junto a todos !!!
perro10malo +3
BUENA INFO COMPAÑERO!!!
BUEN TUTORIAL Y GRACIAS X EL TRABAJO!!!! 😉

tutorial

Crea


haz
superdavidss +3
sos un grosso

A favoritos y volveré con puntos.
laprima +3
MUY BUENO !!!!!

EXCELENTE APORTE

GRACIAS POR COMPARTIR

BESIS LAPRIMA
freddiepaz +3
excelente tuto loko justo buscaba algo asi 😛 lo recomiendo mientras
pasare en cualquier momento con puntines
ELTAVOMANUELERO +3
CAMARRADA esto es muy útil,
gracias por este aporte
angieyruben +3
angieyruben dijo: Felicitaciones amigo !!!
Muy buen tutorial y muy clara la explicación !!!


Gracias por compartir.
Besos y Lamiditas !!!

menu de usuario

Compartamos, comentemos, apoyemos, hagamos cada vez mejor esta maravillosa Comunidad !!!
2 Años en Poringa junto a todos !!!

Volvimos con simbólicos puntos de reconocimiento !!!
flaco_2184 +1
muy :buenpost: me hacia flata este tutorial!! ya vere cuando instalo el photoshop recomiendo!!!
tu propio
HESOYAM_ +1
muy wen tuto,bien explicado se agradece!
crea tu propio menu de usuario
LARRYBRYANT +1



Siempre es de agradecer este tipo de aportes,sobre todo para los que no sabes mucho

de estos temas.

Así que muchas gracias! 😉 😉 😉



tutorial
troncudo13 +1
excelente laburo master
recomendado 😉 😉 😉 Crea
cr100 +1
muy bueno 😉
clementes +1

excelente loco!!! muy util



haz
muerte_p
AHHHHHHHHHHHHHH ASI ERA GRACIAS AMIGO 🆒