Z-Graphics

4- Presionamos doble click sobre la capa que acabamos de dibujar(en el panel de capas), con esto se nos abrirá una ventanita para aplicar efectos. En este caso agregaremos una superposición de degradado, modificalo como se muestran los valores:

* lo colores del degradado son #52741a #668b1d #7fa729 #63871d, respectivamente.

5- Ya tenemos el fondo de nuestro menú, ahora agreguemos los enlaces. Para ellos vamos a poner algunos separadores: se trata de dibujar dos lineas juntas, de diferente color, con la herramienta rectangulo. Algo como esto:

El color del primer rectangulo es #759e1f y el del segundo #84aa3b.

muy simple ¿verdad? lo siguiente será desgastar un poco los extremos usando la herramienta borrador con una opacidad del 10%(procura que el diametro de la herramienta supere el ancho de los rectangulos para que el desgaste sea uniforme). Pero antes de hacerlo presionaremos click derecho sobre cada capa (la de los rectangulos que acabamos de dibujar) y seleccionaremos rasterizar capa. cuando lo hayas hecho con las dos, seleccionalas y presiona Ctrl+E para combinarlas en una sola. Ya puedes proceder a desgastar.

si lo hiciste bien deberia parecerse a esto:

6- selecciona esta última capa (click derecho sobre la misma) y presiona Ctrl+J para duplicarla. Hazlo cuantas veces creas necesario para separar tus enlaces:

yo lo he hecho 6 veces, ahh y puedes usar las lineas de guia para alinearlos.[+/-]
7- El siguiente paso será añadir los enlaces entre cada separador usando la herramienta de texto.

Y puedes añadir detalles, en este caso con la herramienta de forma personalizada:

8- ya tenemos el menú aunque tal vez te parezca un poco sencillo, asi que añadiremos un un sutil brillo a la primera capa que dibujamos (la linea curva). Para ello tomamos la herramienta Marco rectangular y:

a- ve hacia el panel de capas, posa el cursor del mouse sobre la capa en cuestion (en este caso posalo sobre la parte gris de la capa ya que es un dibujo con la pen tool) y presiona, sin soltar, la tecla Ctrl. Cuando notes cierto cambio en el icono del cursor presiona click.
Con eso deberias ver algo asi:

b- Ahora debes poner la heramienta Marco rectangular en modo Formar intersección con selección y luego empezar a dibujar un rectangulo desde la parte superior(debes estar seguro que empiezas desde el extremo superior) de la linea curva y descender hasta la altura del centro; ya puedes soltar el click. Si lo se, es un poco complicado de entender pero espero que esta imagen te sea de ayuda:


Y te debe quedar algo parecido a esto:

c- El siguiente paso es colorear de blanco esa zona seleccionada, pero como estamos situados sobre una capa con mascara(con mascara me refiero a la parte gris) debemos primero crear una nueva capa (Mayús + Ctrl + N) y rellenar con la herramienta Bote de pintura.

d- Luego baja la opacidad de la capa al 4%.

Y listo ese brillo ha sido añadido. Sobra decir que eres libre de añadir todos los detalles que desees.

9- El siguiente paso será agregar una sombra bajo el menú para crear una minima impresion de 3d:

a- Nos vamos a posicionar en la ultima capa, es decir la primera que rellenamos, y crearemos una nueva capa sobre ella. Usando la herramienta Marco eliptico vamos a dibujar un ovalo horizontal debajo del menú y lo rellenaremos con #567a1a

b- para dar ese aspecti de sombra vamos a Filtro > Desenfocar > Desenfoque de movimiento y aplicamos la siguiente configuración:


y deberia quedar algo asi:

Que bonito va quedando verdad :)

Me gusta como queda el efecto 3d asi que agregaremos algunos colores mas. Asi que agregaremos una luz y una sombra un poco mas abajo; el procedimiento es el mismo solo varia los valores al momento de aplicar el filtro.


Otra cosa muy importante en el header, aparte del menú, es el logotipo de la pagina o empresa. Y no necesariamente tiene que ser algo muy elaborado, puede tratarse de algunas letras sencillas con colores y trata de impregnarles algun significado para que cobre importancia en tu cultura corporativa.


y como siempre digo, si te ha gustado el post dejame un comentario.

Demo

Download Psd

Autor

En esta página encontrarás toda una variedad de emoticones por si deseas personalizar un poco.

Armando el mini-editor

Para empezar hay que definir que botones deseas agregar, para así mismo definir el Java Script. El código fuente lo he conseguido después de varios minutos vagando en la red así que si encuentras algún error te agradecería que me lo comentaras (además porque no soy muy bueno en ello :) ).
Vale la pena aclarar que lo que ves cerca al editor de blogger es un iframe (que contiene al mini-editor). He decidido hacerlo así para no causar problemas en la plantilla y facilitar un poco el trabajo.

El mini-editor que estoy usando tiene varias funciones que son:

1-agregar un enlace[+/-]
2-Agregar una imagen[+/-]
3-agregar formato al texto (Negrita, Cursiva y Subrayado)[+/-]

Los he agrupado en dos archivos java script formato texto.js e img.js.
Para agregarlos a la plantilla copia y pega estos códigos antes de </head>

El siguiente paso es, dentro del <body>, crear el formulario y dentro de el poner el textarea:

Teniendo el formulario y las funciones Java Script solo faltan los botones:

Donde el texto en azul son las funciones y el texto en rojo es la etiqueta a añadir, es decir
<etiqueta>< /etiqueta>

En este caso son b (Negrita), u (Subrayado), e i (Cursiva).
Hasta aquí deberían funcionar muy bien los botones e insertar el formato en el textarea, si todo va bien podemos continuar. Algo que me pareció muy practico fue que al dar click en cada emoticón este también inserte su texto, pero para no complicarme mas con funciones javascript busqué y busqué hasta que encontré esto:

<a href="javascript:void(0);" title="texto-alternativo"><img style="propiedades" onClick="document.form1.commenteditor.value+=' TEXTO-A-AGREGAR '" src="url-de-la-imagen" /></a>

Solo tendrías que modificarlo según tus necesidades y reproducirlo debajo del textarea con cada emoticón. Por ultimo se me ocurrió agregar dos botones mas : uno para copiar el código (aunque solo funciona en internet explorer) y otro para borrar lo que haya escrito (Reset).

Para el botón de copiar[+/-]
Para el botón de Reset[+/-]

Y hasta aqui va el editor, solo tienes que agregar las propiedades css a tu gusto. O puedes copiar el que estoy usando en este momento (si lo haces no olvides alojar las imágenes y los archivos Js en tu propio servidor, ya que los míos están en uno gratuito).

Mini-editor z-graphics

Como agregar el iframe a blogger

Si lo quieres agregar junto con el editor de blogger, expande plantillas de artilugios, busca el siguiente código y agrega lo que está en rojo:

Agregalo antes o despues, como desees. Y lo puedes posicionar agregando propiedades CSS al ID commenteditor. Estas son las propiedades que yo uso, puedes variar los valores para adaptarlo a tu plantilla:


Y eso es todo, te podrás dar cuenta que algunas etiquetas HTML no están permitidas en los comentarios de blogger, pero seguro sabrás darle un buen uso.

Una pequeña modificación

Los comentarios 21 y 23 de Manolo y Gem@ me han hecho caer en cuenta que el botón para insertar imagenes por medio de la url resulta poco eficiente, ya que blogger no permite esta etiqueta en los comentarios. La solucion que propone gem@ es que la funcion JavaScript nos muestre el codigo para introducir una imagen, es decir:


Si estas de acuerdo con el cambio solo debes reemplazar el archivo img.js anteriormente nombrado por este. Para verlo en accion Click aqui

Demo

Download Source

Autor