Creo que alguna vez les comenté la importancia que un menú CSS tiene para un sitio web. Debe ser atractivo, combinar con el resto del diseño, estar ordenada, cumplir con ciertas reglas en cuanto a la estética, y sobretodo, ser cómodo de navegar para el lector. Al fin y al cabo, es desde el menú donde tendrá la posibilidad de recorrer todas las secciones de nuestro proyecto, así que se merece la atención.

Skyje publicó hace poco un interesante artículo donde nos ofrece trece tutoriales CSS que nos explican paso a paso cómo crear un menú para nuestro sitio web o blog. Se incluyen menús horizontales, verticales, con efectos o bien simples, así que seguramente encuentres uno adecuado a tu proyecto sin mayores problemas.

También puedes leer

1. 17 tutoriales para crear efectos de luces
2. Mas de 50 tutoriales para crear iconos
3. Cómo crear un portafolio de una página en Photoshop

El tutorial que vamos a ver a continuación se basa en el menú de Apple, pero sin embargo (y en mi opinión) es una excelente oportunidad para que aprendamos el proceso de diseño de un buen menú utilizando Photoshop. Algo que es sencillo, pero que si queremos que se vea bien profesional, tiene sus secretos, y lo mejor es conocerlos. Por eso mas allá de que vayan a implementar este menú o no, mi consejo es que lo utilicen para aprender las técnicas explicadas y poder aplicarlas en un futuro proyecto.

En ThreeStyles nos explican paso a paso esto, de forma genial y fácil de entender por todos gracias también a las imágenes. Si quieren ir mas allá y poder pasar esta imagen a código, prometen pronto publicar la parte correspondiente donde van a enseñarnos también esa parte.

También puedes leer

1. Crea un logo en forma de cubo con Photoshop
2. Crea una fotomanipulación con Photoshop
3. Crea lineas de color con Photoshop

En el sitio PhotoshopStar nos explican paso a paso como crear un menú de navegación atractivo de forma sencilla. Ideal para principiantes que deseen tener este importante elemento y quizás no sepan muy bien como lograrlo. ¿Por qué “importante”? porque el menú es lo que le va a permitir a nuestros lectores recorrer nuestro blog, y debe estar visible y bien ubicado. Así que si se animan, es un buen lugar para comenzar.

Para el tutorial manejaremos algunos filtros, como el desenfoque y demás técnicas que nos serán útiles no solo para un futuro diseño de menú, sino de cualquier otro elemento que debamos crear, así que les recomiendo que lo visiten.

Fuente: PhotoshopLady

También puedes leer

1. Como crear un planeta con Photoshop
2. Como crear un texto en 3D con textura
3. Como crear una isla flotante

¿Por que un menú de navegación es importante en un blog? Porque de ahí el lector recorrerá nuestro sitio. Si solo tiene una opción que lleva al contacto, no brinda mucho. En cambio si nos preocupamos por hacerlo accesible, atractivo estéticamente y con las opciones adecuadas, el lector pasará mas tiempo en nuestra web.

En InstantShift publicaron una recopilación con atractivos ejemplos de menúes que fueron realizados de forma excelente y cumpliendo con todo lo importante. Es una buena idea que si estás pensando en crear el tuyo, te tomes un rato para estudiarlos y encontrar la inspiración necesaria para lograr que el tuyo quede genial y sobre todo, de acuerdo al resto del diseño de tu proyecto.

También puedes leer

1. 70 errores 404 originales
2. Originales diseños de blogs
3. 10 tutoriales para mejorar los comentarios

Aunque uno sepa o no diseño, si tiene un sitio web es importante que cuente con una navegación accesible, acorde al resto del diseño y atractiva. Es lo que el lector utilizará para navegar por el sitio, y obviamente queremos que se quede el mayor tiempo posible, así que hay que darle la importancia que se merece.

Si no sabes diseñar, puedes recurrir a herramientas web que nos ayudan a crear menús de forma sencilla. Por ejemplo, CSS Menu Maker, un sitio donde con solo agregar algunos datos, tendremos nuestro menú listo para agregar a nuestro blog o sitio web. Debemos agregar las opciones del menú, y los enlaces a donde se dirigirán las diferentes opciones, elegir el diseño del mismo, y una vez conformes nos ofrecen el código HTML, el CSS y las imágenes que se requieren.

Fuente: Tinchio

También puedes leer

1. Chequea tus colores online
2. Crea imágenes de carga con Preloaders.net
3. ProFolio: Creando un portafolio online