Como desarrolla una plantilla para Wordpress
Reproducimos, traducido al Español, el tutorial publicado en Grafpedia sobre la creación de un tema en Wordpress. En él se explica, paso a paso, como desarrollar un plantilla única a partir de un PSD, utilizando PhotoShop.
Este es el resultado que se obtiene siguiendo el tutorial.
Pasos a seguir:
- Crear un nuevo documento y, con la herramienta cubo de pintura, rellenar la capa del fondo con color #a4b9cc
- Con la herramienta rectángulo, cramos una forma simple de color blanco.
- Añadimos estilos a la capa para esta silueta
- Duplicar esta forma (es necesario seleccionar la capa con la silueta blanca y, a continuación hay que pulsar en CTRL + J). Seleccionar ambas capas dentro de la paleta de capas y presiona CTRL + E para la fusión de ambas capas en una sola. Otro importante aspecto es que no se perderá el efecto de los estilos de capa.
- Selecciona la herramienta Borrador, y asegúrate de que tiene un pincelredondo liso seleccionado.
- Eliminar la parte inferior de la forma como en la siguiente imagen
- En el borde izquierdo crea una línea blanca vertical (puedes crear esta línea con la herramienta de línea). Haga clic derecho sobre la capa con esta línea y seleccione Rasterizar capa. Utiliza la herramienta Borrador para eliminar la parte superior y la parte inferior de la línea. Aquí está el resultado. También podrá ver dónde he situado esta línea. Es muy importante colocar la línea vertical cerca de la línea 1 píxel.
- Con la herramienta rectángulo redondeado creamos una nueva silueta blanca
- Para esta silueta, añadimos los siguientes estilos de capa
- Duplicamos la silueta tres veces y posicionamos las copias:
Esta es la previsualización a tamaño real.
- Con la herramienta rectángulo redondeado, creamos otra forma blanca:
- Seleccionamos la herramienta lápiz y, mientras se mantiene presionada la tecla Ctrl, con el puntero del ratón clickamos dos veces en el borde de la forma para crear puntos de anclaje.
- Mantén presionada la tecla CTRL y selecciona el punto de anclaje siguiente:
- Después de haber seleccionado este punto mueve la flecha hacia abajo de su teclado. El punto de anclaje se moverá a la parte inferior :
Resultado:
- Con la herramienta elipse crea un pequeño círculo:
- Rasterizamos esta pequeña forma y hacemos una selección con la herramienta marco rectangular:
- Presionalos la tecla suprimir del teclado, y eliminamos la selección con CTRL+D. Este el resultado:
- Utilizamos el mismo método para las otras zonas del template.En la forma creada en el lado derechose colocará el número de comentarios en este diseño PSD.
- En la parte superior de la plantilla creamos cuatro siluetas con la herramienta rectángulo redondeado:
- Para estas formas aplicamos los siguientes estilos de capa:
Este es el resultado:
- Bajo estas siluetas añadimos algunas líneas:
- Bajo la línea señalada, creamos otra con un colos más oscuro:
- En la cona superior de la plantilla creamos una silueta con la herramienta rectángulo y la coloreamos con #8ba0b5
- Seleccionamos la herramienta elipse y creamos una silueta negra sobre las formas anteriores:
- Aplicamos un desenfoque gaussiano a esta forma (Filtro> Blur> Gaussian Blur). Añadiimos un valor de 7 u 8 píxeles en el radio:
- Ajustamos la opacidad para la capa. En el ejemplo queda así:
- Añadimos el texto del logo y una líena como la que ya hemos utilizado en otros pasos:
- Añadimos algunas imágenes y texto:
- Creamos una nueva silueta con la herramienta elipse:
- Le damos el mismo efecto de desenfoque Gaussiano que en el caso anterior:
- Seleccionamos esta zona con la herramienta marco rectangular:
- Borramos todo dentro de la selección realizada presionando la tecla suprimir. Después hay que suprimir la selección realizada mediante las teclas CTRL+D.
- Creamos otras dos líneas:
- Creamos la barra de navegación: añadimos, mediante la herramienta rectángulo redondeado, una silueta en la esquina derecha superior del diseño:
- Borramos la parte inferior de la silueta:
Resultado final:
Contenidos relacionados
The Wordpress: como crear un tema con Photoshop by Blog AlmacenPlantillasWeb, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Spain License.
Tags: diseño web, fondos y texturas, inspiración, patrones de diseño, plantillas CMS, web templates, Wordpress
