Diseñar una barra web con botones con Adobe Photoshop

Publicado por asktutorial.

Ya comentamos en reiteradas ocasiones acerca del gran abanico de posibilidades que brinda Adobe Photosho en materia de diseño gráfico. En esta oportunidad vamos a ver cómo diseñar una barra web clásica con botones incorporados; y la mejor parte es que no debes ser ningún experto en diseño para conseguir el resultado final, con solo prestar atención a los siguientes pasos bastará.

PASO 1: Inicia tu Adobe Photoshop y crea un documento nuevo con fondo blanco del tamaño que desees para tu barra, uno recomendable es de 600×100 pixeles. Haz el nuevo documento en el modo RGB.

Ahora tomamos la herramienta “Marco rectangular” y en las opciones superiores colocaremos las siguientes medidas:

Estilo: tamaño fijo

Ancho: 450 px

Alto: 50 px

Hacemos clic en el área de trabajo para crear la selección rectangular.

Es conveniente ayudarte de las líneas – guía para conseguir más exactitud. Para ello debes activar las reglas [Vista—–> Reglas] y arrastrar desde ellas para conseguir las líneas tanto horizontales como verticales.

Diseñar una barra web con botones con Adobe Photoshop

PASO 2: Vamos al menú [Ventana —–> Canales] para ver el panel de canales. Luego presiona en el ícono que se encuentra en la zona inferior “Crear canal nuevo”. A continuación vamos a [Edición —–> Rellenar —–> Usar ——> Blanco] y aceptamos. Presionamos [Ctrl+D] para deshacernos de la selección.

PASO 3: Sobre la misma capa vamos a aplicar [Filtro —–> Desenfocar —–> Desenfoque gaussiano]. En el cuadro de diálogo colocamos un valor de 14 pixeles.

Vayamos a [Imagen —–> Ajustes —–> Niveles] y coloquemos los tres triángulos aproximadamente en el centro, como se indica en la imagen de abajo.

Diseñar una barra web con botones con Adobe Photoshop

Seguimos en el panel de los canales y presionamos esta vez el icono “cargar canal como selección”.

PASO 4: Vamos a la ventana de las capas y creamos una capa nueva [Ctrl+Shift+N]. Hacemos doble clic sobre la capa de fondo y luego [Supr] para eliminarla.

Tomamos la herramienta “Degradado” y elegimos uno de los predeterminados o creamos uno nuevo. Luego realizamos el degradado en dirección vertical de abajo hacia arriba.

PASO 5: Vamos al menú [Selección —–> Modificar —–> Contraer] y colocamos un valor de 7 pixeles. Aplicamos el degradado nuevamente, pero esta vez desde arriba hacia abajo. Procura no realizar el degradado por fuera de la selección.

PASO 6: Ayudándonos de las líneas guía dividimos la barra en cuatro espacios iguales y creamos una capa nueva. Vamos a [Selección —-> Modificar selección] y ajustamos los bordes de la selección de acuerdo a las líneas guía colocadas.

Diseñar una barra web con botones con Adobe Photoshop

PASO 7: Sobre esta selección aplicamos de nuevo el degradado en dirección desde abajo hacia arriba. Presiona [Ctrl+T] para escalar el botón al tamaño que quieras y con la herramienta “Mover” lo desplazamos al centro de la barra.

Ahora, mientras presionas [Alt] desplaza el botón hacia izquierda o derecha para crear uno nuevo en una capa diferente. Hacemos lo mismo para crear el tercer botón.

Listo!.. ahora puedes agregar el texto que quieras y nuestro trabajo estará terminado!.

Diseñar una barra web con botones con Adobe Photoshop

Dejar un comentario

Tenga en cuenta: la moderación de comentarios está habilitada y puede retrasar su comentario. No hay necesidad de volver a enviar su comentario.

¡SUSCRÍBETE GRATIS!

Nosotros

AskTutorial nace en Junio del 2010 en la ciudad de Chicago, IL con el fin de crear Tutoriales Educativos en Español dirigidos a la comunidad de habla hispana en Estados Unidos y alrededor del mundo. Gracias a la excelente respuesta del publico que diariamente ve nuestros videos nos hemos extendido a no solo crear video tutoriales, si no tambien ofrecemos información relevante de acuerdo a sus preguntas.

Archivos / Mes

Contenido Bloqueado Solo Para Seguidores

Para ver el contenido solo sígueme en cualquiera de estas redes sociales. ¡Muchas gracias por todo!