Hola! ¿Como andas? Este es mi primer post (en esta cuenta) y quería enseñarte a crear tu Menú de Usuario para que pongas al final de tus posts.
Acá el ejemplo de Menú que vamos a hacer:
¿Te gusta?
Bueno... acá te dejo el tutorial paso a paso de como debe hacerse
PASO Nº1:
Abrimos PhotoShop (yo tengo la versión CS5 Extended). Creamos un documento de 549px de ancho y 122px de largo, que sea transparente:
PASO Nº2:
Crea tu diseño en el archivo, yo usaré la del ejemplo que está más arriba:
PASO Nº3:
Seleccionar la herramienta Slice Tool (Herramienta de Corte):
PASO Nº4:
Con la herramienta seleccionar los botones y los espacios en blanco de forma arreglonada:
Si no entendiste como, acá te dejo una imagen que te servirá de ayuda:
(Las líneas rojas marcan por donde deben ir los cortes horizontales)
PASO Nº5:
Guardar la imagen cortada en File (Archivo) > Save for Web & Devices...
Una vez en Web & Devices... debes seleccionar cada uno de los cortes que hiciste y poner en Preset: PNG-24. Luego dale a save y chequea que esté todo como lo mostré en el .gif.
PASO Nº6:
Busca en donde hallas guardado el documento (verás una carpeta llamada "Images"
Verás varias imágenes (Sí, son los cortes que hicimos anteriormente!). Sube todas las imágenes a un host confiable, yo utilizo www.Imageshack.us.
PASO Nº7:
Vamos a poner las imágenes en un post borrador para ir poniendo Vista previa (las imágenes pueden desordenarse). Primero, vamos a poner para insertar una imagen desde url:
PASO Nº8:
Para poner una imagen con link debemos usar esto:
PASO Nº9:
Ya deberíamos tener todo dentro del post, ahora falta ordenarlo, posiblemente tengan algo así:
Bueno, para poder poner las imágenes en sus respectivos renglones, debemos ir borrando espacios entre los [], de esta forma:
Verás que en algunos casos no te subirá un renglón, pero eso está bien, solo se debe borrar un espacio.
Bueno y acá el resultado final:
Acá el ejemplo de Menú que vamos a hacer:
¿Te gusta?
Bueno... acá te dejo el tutorial paso a paso de como debe hacerse
PASO Nº1:
Abrimos PhotoShop (yo tengo la versión CS5 Extended). Creamos un documento de 549px de ancho y 122px de largo, que sea transparente:
PASO Nº2:
Crea tu diseño en el archivo, yo usaré la del ejemplo que está más arriba:
PASO Nº3:
Seleccionar la herramienta Slice Tool (Herramienta de Corte):
PASO Nº4:
Con la herramienta seleccionar los botones y los espacios en blanco de forma arreglonada:
Si no entendiste como, acá te dejo una imagen que te servirá de ayuda:
(Las líneas rojas marcan por donde deben ir los cortes horizontales)
PASO Nº5:
Guardar la imagen cortada en File (Archivo) > Save for Web & Devices...
Una vez en Web & Devices... debes seleccionar cada uno de los cortes que hiciste y poner en Preset: PNG-24. Luego dale a save y chequea que esté todo como lo mostré en el .gif.
PASO Nº6:
Busca en donde hallas guardado el documento (verás una carpeta llamada "Images"
Verás varias imágenes (Sí, son los cortes que hicimos anteriormente!). Sube todas las imágenes a un host confiable, yo utilizo www.Imageshack.us.
PASO Nº7:
Vamos a poner las imágenes en un post borrador para ir poniendo Vista previa (las imágenes pueden desordenarse). Primero, vamos a poner para insertar una imagen desde url:
PASO Nº8:
Para poner una imagen con link debemos usar esto:
PASO Nº9:
Ya deberíamos tener todo dentro del post, ahora falta ordenarlo, posiblemente tengan algo así:
Bueno, para poder poner las imágenes en sus respectivos renglones, debemos ir borrando espacios entre los [], de esta forma:
Verás que en algunos casos no te subirá un renglón, pero eso está bien, solo se debe borrar un espacio.
Bueno y acá el resultado final: