47 Tutoriales para crear Botones, Web Layouts, Barras de Navegación, Banners y Más

Publicado en 01. Oct, 2009 por Luis Lopez Garay in Tutoriales, Tutoriales Photoshop

47 Tutoriales que recopile en unas 3 horas con las que aprenderás a crear botones profesionales, ya sean glossy o de otro estilo que seguro te servirán para el diseño web o remodelación de tu sitio, también deje tutoriales para esas barras que van arriba de los sitos web o menús horizontales para tus sitios, uno muy famoso como el de Apple y el de YellowIcon, también, y no era para menos, increíbles tutoriales bien detallados para diseñar templates y layouts para web y blogs, profesional y de calidad esta recopilación que o te sirve, o te sirve, o te gusta, o te gusta, pásale .

Si quieres ver los tutoriales tienes que dar click en el titulo, el diseño de botones es de lo mas importante a la hora de diseñar tu propio sitio web, o remodelar tu blog, foro o sitio personal, también te deje tutoriales para crear barras de navegación, y por supuesto, tutoriales para crear increíbles diseños en Photoshop de sitios web muy profesionales para maquetar y listo. Son muy buenos y hay muchos que me gustaron, si Naldz Graphics publico algo similar, yo publico algo aun mejor, espero te sirvan de algo para tus futuros o presentes proyectos.

Barras de Navegación (Navbars)

Crea una barra de navegación con botones glassy en Photoshop

Aprende a crear una barra de navegación muy cool con una serie de botones estilo Glassy (plástico) bien iluminados y con texto bien acomodado, por Pixel2Life.

Simple barra Glossy con Searchbar color blanca

Otro de P2L, un tutorial simple pero increíble para hacer una barra de navegación color blanco con hover amarillo, y una barra de búsqueda incrustada en ella.

Barra de Navegación Multicolor

Tutorial de 3 pasos de FlashGame en el que nos enseñan a crear una barra de menús muy Flashera (en Photoshop) con muchos colores estilo gradient glassy.

Barra de Navegación estilo Vista

Crea una barra de navegación para un sitio web muy profesional estilo Microsoft.Com con un toque aero de vista, sencillamente de las barras mas inspiradoras de la web.

Crea una Barra Inspirada en MAC Fácil

Aprende a crear una de las barras mas famosas e imitadas, la famosa barra de Apple.Com, es muy sencillo hacerlas y dan buenos resultados, en Tutorial Arena te enseñan como muy fácilmente.

Menú de Navegación Vertical Azul

Diseña una barra vertical de navegación o menús, profesional y azul.

Navbar Obscura y Profesional

Si te habías preguntando como hacia yellowicon.com para crear esa increíble y profesional barra, en AvivaDirectory te dicen como, es mas fácil de lo que creías.

Efecto Watercolor en Menú

Si te daba curiosidad por crear un menú estilo hoja de papel aquí tienes el tutorial.

Crea el efecto 3D en Diseño Web

Tutorial de PSDTuts en el que se recrea el concepto de diseño web 3D con ese menú de navegación muy profundo y bien coloreado.

Azul en La Obscuridad (Navbar)

Increíble barra de navegación con azul en los botones negros o grises, un muy buen tutorial y explicado muy detalladamente para llevar a este gran resultado.

Crea un menú inspirado en Vista Aero

Si, otro, pero este luce mejor que el anterior, como ya mencione, si te gusta la barra de tareas de Windows Vista, seguir este tutorial será muy de tu agrado.

Botones Web (y algún “bage”)

Boton Estilo Aqua

Crea un botón estilo MAC Aqua (de los viejos) con Photoshop y este sencillo tutorial.

Botones estilo Web 2.0

Create unos lindos botones estilo Web 2.0 los cuales se han vuelto muy populares y es común ver uno de estos por doquier.

Web 2.0 Botones (Hongkiat)

Tutorial creado por Lim Hong Kiat con una técnica muy buena para botones 2.0.

Crea simples botones usando Photoshop

Botón muy “Sleek y Simple”

Botón estilo iPhone

Diseña un limpio y pulido botón en Photoshop

Uno de los mejores tutoriales que pude haberme encontrado, Six Revisions creo este magnifico tutorial que nos enseña a crear un botón muy bien iluminado y con una apariencia limpia.

Botones Flexibles Usando Photoshop

Un tutorial de una de mis diseñadoras favoritas, Veerle Pieters, se muestra un botón muy flexible y muy glossy, profesional y hermoso usando poco desgaste de tiempo, es fácil y hermoso.

Crea botones para sitios web

Botones web en Photoshop

Estos botones sirven tanto para blogs, como remodelación de foros.

Set de Botones en Photoshop

Pequeños y Coloridos Botones

Creando Botones Circulares

Crea Botones Profesionales de “Descarga”

Muchas veces se ha visto en sitios de servicios de almacenamiento de archivos o sitios de descarga de Software, un botón de descarga para dicho producto, aprende a crearlos con este tutorial de PhotoshopStar muy glossy y profesional.

Botón Hermoso de RSS

Botón estilo Vista de PsFreak

Lindos Botones con Estilo

CoreGFX nos trae un tutorial para crear botones con mucho estilo para sitios web.

Simple, Brillante y Efectivo Boton

Un botón muy brillante, limpio y efectivo para sitios web profesionales.

Glossy Button (Deviantart)

Este tutorial de una sola imagen en Deviantart, te dirá como crear el botón que ves atrás.

Micro Relieve en Botón

Botones 2.0 en GIMP

Para que tengas en cuenta que no solo Photoshop existe para los botones.

Extras y Plantillas Web

Crea un banner de publicidad para tu sitio

Es obvio que sin el reflejo si no quieres contratar a un diseñador para que haga publicidad para tu sitio, hazlo tu mismo con este magnifico tutorial.

Crea un limpio y colorido template

Increíble Layout Estilo Rustico

Compañia de Diseño Web “layout”

PSDVive tiene este tutorial para diseñar el layout de una compañía de diseño web.

Layout “Tendencias al Papel”

Estudio de Diseñador

Pagina Personal

Diseñando una compañía de hosting

Clean Grunge Diseño de Blog

Diseño de Interiores

Portafolio de Fotografía

Diseño Web Grunge

Bueno aquí termina esta recopilación, se agradece que la anuncies en tu sitio si quieres conseguir visitas y así me ayudas a mi por el hecho de haber tardado 3 horas en recopilar todo esto, o puedes dejar tu comentario con lo que quieras decir.

Entradas Relacionadas:

1. 5 Tutoriales o recursos para crear tus emoticons
2. 61 Tutoriales para crear efectos Gore y de Horror
3. Crear un botón con Hover en Photoshop + CSS
4. Recursos y Tutoriales para crear un Theme de Wordpress
5. 60 Brillantes Tutoriales Para Diseñar Iconos