Estructuración y creación de un diseño wordpress


WordPress es un sistema de gestión de contenido enfocado a la creación de blogs (sitios web periódicamente actualizados). Desarrollado en PHP y MySQL, bajo licencia GPL y código modificable, tiene como fundador a Matt Mullenweg.

WordPress fue creado a partir del desaparecido b2/cafelog y se ha convertido junto a Movable Type en el CMS más popular de la blogosfera. Las causas de su enorme crecimiento son, entre otras, su licencia, su facilidad de uso y sus características como gestor de contenidos.

Otro motivo a considerar sobre su éxito y extensión, es la enorme comunidad de desarrolladores y diseñadores, que se encargan de desarrollarlo en general o crear plugins y temas para la comunidad, siendo usado en septiembre de 2009 por 202 millones de usuarios.

Hacer un tema para WordPress desde cero es una habilidad esencial para los diseñadores y se hace cada vez mas importante según esta sea una de las herramientas favoritas para la creación de publicaciones web. El primer paso es crear definir la estructura.

Estructuración

Esta es la primera parte y tal vez la más importante porque de esta dependerá todo el diseño web. Debemos estructurar nuestro diseño antes de abrir Photoshop. Lo primero es la disposición según la estructura y predisposición del blog WordPress.

  1. Cabecera
  2. Publicar zona
  3. Barra lateral
  4. Pagina simple
  5. Comentario
  6. Retroalimentación
  7. Búsqueda
  8. Página del menú
  9. RSS
  10. Archivos, Enlaces y Página por defecto.

Algo que tenemos que tener en cuenta. No podemos poner todas las cosas en una sola estructura. Por lo tanto, no podemos:

  1. Mostrar demasiadas cosas en una sola página.
  2. Usar demasiados colores y tipo de fuente.

En este ejemplo, tratare de hacerlo tan simple como sea posible porque el propósito es dar un ejemplo adecuado y fácil de entender sobre cómo crear un tema de WordPress. Posteriormente se planteara algunas alternativas de diseño para poder ampliar el conocimiento y desarrollar nuevas técnicas que permitan elaborar diseños más complejos.

Usando Photoshop para crear el diseño

Paso 1

Creamos un nuevo documento de 1024px x 768px y plantear una estructura según el diagrama, usaremos como color de fondo #eae8c6.

Paso 2

Seleccionamos la herramienta rectángulo y trazamos una cabecera, se estima la altura según se desee, el equilibrio y la proporción son cosas que debemos tomar en cuenta, a continuación aplicamos la opción de fusión para la capa, como se muestra a continuación. Un gradiente de negro a blanco, con luz suave como modo de mezcla. Cree otro rectángulo, aplicar superposición de degradado con el ajuste como se muestra a continuación. Ponerlo 1px por debajo de la barra verde. Esto lo hará con más detalles. A continuación, trace una línea de 1 píxel y lo puso justo encima de la brecha entre las dos barras que creó antes. Dale un color más oscuro.

Paso 3

Se usara la fuente Myriad Pro. Se aplica sombra con el valor que se muestra a continuación. Entonces, también se aplican Superposición de degradado con 12% de opacidad, del color negro al blanco. Para crear un contorno blanco. Simplemente mantenga pulsada la tecla CTRL y haga clic en la capa de texto para obtener la selección. Ir a Seleccionar> Modificar> Contrato> 1px. Después de eso, crear una nueva capa. Vaya a Editar> Trazo 1px>, blanco, en el interior.

Paso 4

Dibuja un rectángulo, recuerda, el ancho máximo que puede utilizar es 600px. Ok, que su color blanco. Aplicar 1px hacia dentro para el trazo blanco. Y, superposición de degrade con el ajuste como se muestra a continuación.

Paso 5

El botón de “leer más (read more)” en realidad está utilizando la misma técnica que se utilizó para el logotipo. Esta vez, se aplica resplandor interior con un tamaño de 8px y el 75% de opacidad en la luz suave modo de mezcla. Superposición de degradado con el 70% de opacidad también en luz suave modo de mezcla. Por último, una fuera del recorrido 1px con el color # 47670b. Entonces, para el interior de 1px trazo blanco. Es lo mismo con lo que hicimos en el paso 3.

Paso 6

Colocar en un texto ficticio y foto. Usted puede utilizar un generador de texto para ello.

Paso 7

Ponga en algunos el texto de relleno de nuevo. Trate de no utilizar fuentes con anti-alias para la prueba. No se olvide de lo que es necesario en un tema de wordpress. Título del puesto, las etiquetas, fecha de publicación, número de comentarios. Esta vez, puedo añadir, en alguna parte, el autor de la foto que se muestra en todos los envíos.

Paso 8

Coloque un icono de RSS. Lo puedes descargar de la internet, para el área de búsqueda, cree un rectángulo redondeado con un ancho máximo de 330px. Llena de color negro y se puso mezcla de color a modo de luz suave. Cree otro rectángulo redondeado las esquinas hacia el interior. Este será nuestro campo de entrada. Llena de color blanco. Aplicar 1px dentro de tiempos con el color – # d0ceae. A continuación, aplique Resplandor interior, con el valor que se muestra a continuación. Después de eso, coloque el icono de búsqueda.

Paso 9

Dibuja un rectángulo redondeado y el uso de la herramienta de lápiz para dibujar un cuadro de diálogo como se muestra a continuación. A continuación, aplique sombra sobre él. Utilice la herramienta de rectángulo para crear el cuadro de categorías y enlaces de contenido. La anchura máxima será de 160px. Necesitamos un espacio de 10px entre ellos.

Paso 10

Utilizamos la misma técnica para crear otras secciones.

Conclusión

Se están dejando algunos elementos sin explicar con el fin de que pueda utilizar lo aprendido para poder practicar, el orden de capas y grupos es determinante para que puedas trabajar lo mas adecuadamente y puedas planificar futuros cambios.

Anuncios

2 comentarios en “Estructuración y creación de un diseño wordpress

    • voy a armar una tutoría para indicar como hacer un diseño en diseño y llevarlo a maquetación en XHTML y CSS a pedido del publico, gracias por tu comentario pablito.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s