Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Complete Websites
Webdesign

Diseña en Adobe Photoshop un Tema Profesional Nuevo para un Blog Comunitario

by
Length:LongLanguages:

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

En este tutorial aprenderás cómo unas simples y ´fáciles técnicas de diseño te pueden ayudar a crear el tema de un blog en Adobe Photoshop. Algunas de las técnicas abordadas en este tutorial incluyen el uso adecuado del espaciado, la tipografía, colores y la jerarquía visual, además, de algunas herramientas esenciales que solamente se encuentran en la caja de herramientas de diseñadores exitosos. ¡Empecemos!


Acerca del Diseño

Hoy revisaremos el diseño de Alex Pascal para el tema “Revista Revolución” para WordPress. La versión del código completa esta disponible en ThemeForest como un tema de WordPress para un blog.

La Revista Revolucion, es una revista de excepcional diseñada en WordPress, es nítida y moderna, y funciona de dos maneras, es decir; como un blog comunitario o un blog personal o cómo sea que usted la vaya a usar. Si has estado buscando una chispa que encienda su antiguo y sencillo blog en una revista muy popular, entonces, ¡lo ha encontrado!

Creo que todo empieza con el diseño y Alex nos conducirá a través de cómo él concibió la fase de diseño en este proyecto. Como este es solamente un tutorial de diseño, él no se enfocará en el código, sin embargo, recuerda que puedes revisar el tema Revolución en ThemeForest para una muestra en vivo. Además, ahí hay un montón de magníficos códigos de temas de WordPress como cuando visita Nettuts (así como este). Esperamos que te guste - ¡comencemos!


Paso 1

Ir a Archivo > Nuevo > luego ajuste la altura a 2000px, y la anchura a 1400px, la resolución en 72dpi.

Revolution Magazine WordPress Theme Design

Además, necesitamos asegurar que visualizamos nuestras Reglas y Guías. Así que, iremos a Vista > Extras / Reglas / Ajustar (para que nuestros objetos se puedan alinear con nuestras Guías.

Revolution Magazine WordPress Theme Design

Ahora necesitamos ajustar rápidamente algunas líneas guías para usarlas más tardes en el diseño. Vaya a Vista > Nueva Guía…> Marque “Vertical” y escriba los siguientes valores, presionamos “OK” después de que inserto cada uno de los valores. Queremos ajustar líneas guías en las siguientes posiciones 220px, 250px, 380px, 420px, 830px, 860px, 880px, 1155px, y 1180px.

Ahora, rellenamos nuestro fondo con un color sólido. Selecciones la capa “Background” (Fondo), haga clic con el botón derecho del ratón sobre ella, y seleccione “Capa del fondo” y luego asignele un nombre. Ahora, usando la Herramienta Marco Rectangular (M), cree una selección sobre el lienzo completo y rellene la selección con el siguiente color #d0d0d0.

Revolution Magazine WordPress Theme Design

Paso 2

Ahora crearemos el fondo para el encabezado. Crea una nueva capa y ponle el nombre “header” (encabezado), luego agarra tu Herramienta Marco Rectangular (M) y haz una selección empezando por la parte superior de tu lienzo hasta alcanzar un tamaño de 175px de alto pero que ocupe todo el ancho del lienzo y rellena esta selección con cualquier color. Haz doble clic sobre la capa que acaba de crear y, luego, haz clic sobre “Gradient Overlay” (Superposición de Degradado) > luego clic sobre la imagen del degrado existente > y después ajusta el color a la derecha con #383838. Ahora, ubique el color de la izquierda de la barra de degradado a la posición 60% y cambie el color a #2D2D2D.

Revolution Magazine WordPress Theme Design

Ahora continué y duplique la capa “header” y mueva esa capa directamente debajo de la primera capa. Haga doble clic una vez más y vaya a “Gradient Overlay” > luego haga clic sobre la imagen del degrado existente > y después ajusta el color a la derecha con #e0e0e0. Ahora, ubique el color de la izquierda de la barra de degradado a la posición 50% y cambie el color a #d0d0d0.

Revolution Magazine WordPress Theme Design

Ahora haga clic sobre “Inner Shadow” (Sombra Interior) y cambie el color a #EEEEEE, la opacidad (Opacity) a 100%, la distancia a 1px, retraer (Choke) a 100% y tamaño a 0px. Cambie el ángulo a 90 grados y desmarque la opción “Global Lighting” (Usar Luz Global).

Revolution Magazine WordPress Theme Design

Ahora que ya tenemos listo el fondo, ¡hagamos un logo para nuestro sitio! Crea una nueva capa, de aproximadamente 40px desde la parte superior y alineada con la primera línea guía. Usando la Herramienta de Texto Horizontal (T), escriba el nombre de su sitio utilizando el tipo de fuente que prefiera (para la demostración he utilizado Helvetica Neue LT Std, sin embargo, la Helvetica o Arial funciona muy bien). Proceda a cambiar los Estilos de Capa de la misma forma como se muestra en el ejemplo debajo.

Revolution Magazine WordPress Theme Design

Así es como debería de lucir su encabezado hasta ahora.

Revolution Magazine WordPress Theme Design

Paso 3

Un sitio web no es nada sin una barra de navegación, ¡al menos, sin una buena! Vamos a crear una barra de navegación que combine con el actual fondo de nuestro encabezado (header).

Navegación

Crea una nueva capa y ponle el nombre “Degradado Vertical”, agarra la Herramienta Marco Rectangular (M) y haz una selección de 960px por 40px, empezando desde la posición 115px desde la parte superior del lienzo y dejando aproximadamente 20px debajo de la selección hacia el fondo y luego rellena la selección con cualquier color. Después, puedes agregar los Estilos de Capa a la capa que acabas de crear de la misma forma como se muestran en al imagen debajo.

Revolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme DesignRevolution Magazine WordPress Theme Design

Ahora, duplica la capa que acabas de crear y cambia su nombre a “Degradado Horizontal”. Cambia los Estilos de Capa de acuerdo a los de la siguiente imagen.

Revolution Magazine WordPress Theme Design

Finalmente, crea una línea de 960px por 1px in una nueva capa llamada “luz oscura”, justo arriba de las dos capas anteriores y rellena esa capa con #1d1d1d. Ahora su barra de navegación debería lucir de alguna manera como se ve en la siguiente imagen.

Revolution Magazine WordPress Theme Design

Ahora, tratemos que hacer un botón de enlace “home” (inicio), pero personalizado que resaltará del resto de los enlaces en la barra de navegación. Crea una nueva capa y haz una selección con la Herramienta Rectángulo Redondeado (U) de aproximadamente 50px por 60px verticalmente, rellena con el color #444444, y rellena los bordes redondeados del fondo así la selección esta sólo redondeada en la parte superior.

Descarga éste icono de inicio, abre el archivo en Photoshop, he importa lo dentro del lienzo actual. Cambie su tamaño a 18px por 17px y rellenelo con #999999. Coloquelo en el centro de la capa anterior que usted ha hecho ¡y ahora tiene un elegante botón de inicio!

A continuación, vamos a agregar los elementos de navegación a nuestra barra de navegación. Agarre la Herramienta Texto Horizontal (T), y configure los siguientes estilos como se muestran abajo y teclee un elemento de menú. En nuestro ejemplo, el primer elemento es “Documentación” con una descripción de “guía y soporte del tema”. Agregue tantos elementos como usted quiera, pero recuerde dejar un espacio entre cada elemento de menú de aproximadamente 20px.

Revolution Magazine WordPress Theme Design

Iconos de la Redes Sociales

Para el próximo paso, vamos a necesitar iconos para las redes sociales. Empezaremos descargando este grupo de iconos para las redes sociales proporcionado por KomodoMedia, y luego colocaremos cuatro iconos y disminuiremos su saturación de color presionando las teclas (Shift + Ctrl + U) como se muestran en la imagen debajo.

Revolution Magazine WordPress Theme Design

¡Felicitaciones! ¡El encabezado de nuestro sitio esta completo! Vamos a continuar con el cuerpo del sitio.

Paso 4

Ahora que el encabezado completo esta terminado, vamos a continuar con la construcción del cuerpo de nuestro sitio.

Cuerpo principal

Para los principiantes, vamos a dividir el cuerpo en dos mitades: una para el cuerpo principal y la otra para la barra lateral. Crea una nueva capa y ponle el nombre “main body” (cuerpo principal), y haz una selección con la Herramienta Marco Rectangular (M) de 640px de ancho y tan alto como quieras (al menos 1000px o más o menos), empezando directamente debajo del fondo del encabezado (header. Rellena esta selección con #ffffff. Ahora crea una nueva capa, y ponle el nombre “sidebar” (barra lateral) y haz una selección de 320px de ancho a la derecha de la capa “main body” (cuerpo principal) y que sea tan alta como el cuerpo principal. Rellena la capa con #e6e6e6.

Revolution Magazine WordPress Theme Design

A continuación, le agregaremos a la barra lateral (sidebar) una pequeña sombra interior en el lado izquierdo para crear una ilusión de “sangrado”. Agregaremos los Estilos de Capa como se muestran en la imagen abajo a su capa de “sidebar”.

Revolution Magazine WordPress Theme Design

Deslizador Destacado

Crea una nueva capa y usando la Herramienta Marco Rectangular (M), haz una selección de 960px por 360px y que este justo arriba de nuestro cuerpo y directamente debajo de la barra de navegación y rellene esta capa con #e6e6e6. Crea otra capa y, después de dejar un margen de 25px en ambos lados, dentro de la selección anterior, haz una selección de 910px por 312px y rellena esta selección con #ffffff. En la ventana Estilos de Capa, agrega a Contorno (Stroke) de 1px, color #dddddd y posición Interna a esta capa.

Revolution Magazine WordPress Theme Design

Para el siguiente paso, necesitaremos una imagen de muestra para usarla como un marcador de posición. Cualquier imagen de cualquier cosa servirá bien por lo tanto solamente tiene que encontrar algo que tenga una dimensión de 580px por 300ox y ponerlo en la nueva capa, ajustar una separación de 5px de cada lado del contenedor que hemos hecho.

Revolution Magazine WordPress Theme Design

Crea una nueva capa y ponle el nombre “tab_hover”. Agarra la Herramienta Marco Rectangular (M) y haz una selección de 320px por 41px que este directamente a la derecha de la imagen, en la esquina superior derecha del contenedor deslizador blanco. Rellenalo con cualquier color. Usando la Herramienta Lazo Poligonal, haz clic a 20px a la izquierda del rectángulo, exactamente en medio verticalmente y manteniendo presionada la tecla Ctrl mientras arrastras diagonalmente y a la derecha hasta que te encuentre con la esquina superior izquierda del rectángulo. Mientras aún mantienes presionada la tecla Ctrl, arrastra hacia abajo hasta que encuentres la esquina inferior izquierda y finalmente, regresa a la posición inicial. Rellena esta selección con cualquier color.

Ahora agregar los Estilos para la capa “tab_hover”, de la misma forma como se muestran en la imagen debajo.

Revolution Magazine WordPress Theme Design

Ahora, haz una selección de 320px por 92px con la Herramienta Marco Rectangular (M) directamente debajo de la pestaña, ponla en una nueva capa llamada “tab_space”, y luego, aplica los Estilos de Capas básicos como se describe en la imagen debajo.

Revolution Magazine WordPress Theme Design

Ahora, vamos a repetir los pasos para crear el resto de las pestañas, siguiendo estilos un poco diferente con el fin de diferenciar el estado “activo” del resto de las pestañas.

Revolution Magazine WordPress Theme Design

Finalmente, deberíamos aparecernos con algo que luce similar a esto y, creo que todo esta listo para que continuemos.

Revolution Magazine WordPress Theme Design

Paso 5

¡Vaya! ¡Casi hemos terminado! Con las parte más díficil terminada, vamos a continuar con el diseño del cuerpo de nuestro sitio. En este paso, discutiremos técnicas claves tales como espaciado.

Vamos a empezar nuestra sección “Latest Post” (Última publicación) con una publicación. Hagamos un borde haciendo una selección de 615px por 210px con la Herramienta Marco Rectangular (M), luego, rellenelo con cualquier color en una nueva capa llamada “border” y después agregue un degradado como se describe en la imagen debajo. Tan pronto como haya terminado con eso inserte una imagen de 610px por 200px dejando un espacio interno de 5px dentro del marco. La imagen no es importante, así que una vez más, usted puede usar la imagen que sea como un marcador de posición.

Revolution Magazine WordPress Theme Design

El espacio adecuado es esencial en un diseño exitoso. El tema del blog de nuestra comunidad demuestra su efectividad en la consistencia en general y el espaciado, al tener margenes congruentes alrededor de los elementos publicados ayudan al ojo del lector a desplazarse hacia abajo con mucha facilidad. ¡Echemos un vistazo a como luce nuestra publicación, con la ayuda de algunas líneas guías!

Revolution Magazine WordPress Theme Design

La próxima parte es relativamente aclaratoria. Usando la Herramienta Texto Horizontal (T) teclee un título, información meta, un fragmento de texto para los marcadores (puede usar el texto utilizado en la imagen debajo para ahorrar tiempo) en lo que se refiere a la imagen anterior, el espaciado y la alineación, ayuda. En relación a la imagen debajo, para los estilos de texto necesarios. Una vez que ha sido agregado todo el texto, agarre la Herramienta Rectángulo Redondeado (U) y haga unos botones rápidos (aproximadamente de 120px por 32px), alinielos con el lado izquierdo de la publicación y agregue los estilos como se muestran en la siguiente imagen. ¡Usted debería tener una publicación atractiva que, con mucha facilidad, usted podría duplicar una y otra vez hasta que este satisfecho!

Revolution Magazine WordPress Theme Design

Paso 6

Casi, como parte vital de cualquier cosa en el tema de un blog para una comunidad, ¡la barra lateral! Para propósitos demostrativos, diseñaremos algunos complementos —¡obviamente, sería imposible cubrir un diseño personalizado para cada complemento, pero la mayoría de estos permitirá al juicio creativo seguir y crear más!

Para esta parte, necesitaremos descargar gratuitamente el paquete de iconos desde Graphic River, y luego importar los iconos RSS con un tamaño de 48px por 48px así como el de Twitter con las mismas medidas a nuestro proyecto. Coloque estos iconos en la siguiente posición, 20px alejado del lado izquierdo de la barra lateral (sidebar) y asegúrese que están alineados verticalmente con la primera publicación a la izquierda.

Agarra la herramienta Texto Horizontal (T) y teclee un número aleatorio para los suscriptores y seguidores usando la fuente Georgia, y escriba las palabras “suscriptores” y “seguidores” en tipo de fuente Arial tal y como se describe en la imagen debajo.

Revolution Magazine WordPress Theme Design

¿Qué tal un simple widget de anuncios? ¡Claro! Agarra la Herramienta Marco Rectangular (M) y haz una selección de 280px por 410px, rellenelo con blanco, y luego agreguele un contorno interior de 1px y color #dddddd. Agarre un par de muestras de anuncios de Theme Forest y póngalos dentro del nuevo contenedor, dejando un espacio interior entre cada uno de 9-10px (dependiendo de si esta dentro del borde o entre cada anuncio).

Finalmente, teclee un Widget de texto rápido con la Herramienta de Texto Horizontal (T) usando los estilos proporcionados en la imagen debajo.

Revolution Magazine WordPress Theme Design

Agarre la Herramienta Marco Rectangular (M) y haga un contenedor de 280px por 225px. Rellenelo con #eeeeee y dele un contorno interno (Stroke de 1px y color #dbdbdb. En la capa nueva, haga una pestaña de aproximadamente 84px por 37px inle esquina superior izquierda del contenedor, dejando un espacio interno de 4px a cada lado, después, en la misma capa cree otra selección de 270px por 180pox y rellenela de color blanco, cree un rectángulo con un pequeño rectángulo pegado en la esquina superior izquierda. Dele un contorno interno de 1px de color #e0e0e0. Termine las otras dos pestañas, dejando un espacio interno de 4px a cada lado. Complete el texto con Arial de 12px Bold. Haga una viñeta de 3px por 3px y rellenelo con #bbbbbb y cree tantas como usted quiera.

Revolution Magazine WordPress Theme Design

Y eso es todo para la barra lateral, ¡ahora vamos con el resto del sitio!

Paso 7

Ahora, vamos a envolver lentamente este sitio con… ¡lo adivinó, el footer (el pie de página o del sitio)! Preparemos nuestro footer creando, rapidamente, un fondo para él. Agarre la Herramienta Marco Rectangular (M) y cree una selección de 960px por 510px en una nueva capa, que este directamente debajo del fondo del cuerpo principal (main body). Rellene esta selección con #2d2d2d. Este servirá como nuestro footer con 4 columnas dentro de él. Directamente debajo de este bloque de color, haga una selección de 960px por 60px y rellenela con #1d1d1d y pongala en una nueva capa. Esto servirá como la porción “copyright” (derechos de autor) del footer y una simple, pero efectivo forma de representar el final de la página.

Revolution Magazine WordPress Theme Design

En nuestro sitio, tendremos, incluso, 4 columnas en el footer, cada una con un ancho de 200px y con un margen de 25px a cada lado. Para mantener todo ordenado uniformemente, también dejaremos un margen de 25px en la parte superior de nuestro footer, después del cual tendremos los titulos de cada columna. Continué y agarre la Herramienta de Texto Horizontal (T) y comience tecleando los títulos para cada columna, usando los estilos de capa como se describen en la imagen debajo. Dejando un margen de 20px debajo de cada título, teclee un párrafo corto o una lista de elementos separado por una línea punteada 1px.

Revolution Magazine WordPress Theme Design

Conclusión

Felicitaciones, usted ha diseñado un tema nítido en Adobe Photoshop para un Blog. ¡Esperemos! Que usted haya aprendido algunos consejos y trucos de cómo diseñar, y de ciertos aspectos de sitios web que están organizados y son nítidos y que son capaces de usar estas habilidades en sus propios proyectos en el futuro!

Como este solamente es un tutorial sobre diseño, no he profundizado en el tema del código en lo absoluto, sin embargo, usted puede verlo el tema Revolution en ThemeForest para ver un ejemplo en vivo.

¡Buenas suerte y gracias por su lectura! :

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.