Cómo crear una maquetación de blog creativa

En este tutorial, crearemos una maquetación de blog creativa usando formas simples principalmente, algunas técnicas de pincel, algunas imágenes, y una dosis de ingenuidad de Photoshop. Crear diseños de maquetación es más fácil de lo que puedas pensar. Puedes aprender a construir atractivos diseños rápidamente. Crear este diseño llevará menos de dos horas y aprenderás al mismo tiempo algunos trucos profesionales. ¡Empecemos!

Previsualizar la imagen final

Echa un vistazo a la imagen que vamos a estar creando. Aquí abajo tienes la imagen final y también puedes ver aquí una imagen a tamaño completo.

Detalles del tutorial

• Programa: Adobe Photoshop CS4
• Dificultad: Intermedio
• Tiempo estimado de realización: 1.5 horas

Recursos

Para completar este tutorial necesitas descargar el sistema 960 Grid System. Ahora, empecemos.

Paso 1

Abre la plantilla "960_grid_12_col.psd" en Photoshop. Se verá como la imagen que se muestra a continuación. El sistema de cuadrícula es útil porque le permite alinear el diseño rápidamente.

Paso 2

Selecciona la capa del fondo y presiona Comando + J. Este es el atajo de teclado para duplicar una capa. Si usas atajos de teclado agilizarás tu proceso de diseño. Para esta nueva capa añadiremos un bonito degradado de color. Ahora dirígete a Capa > Estilo de capa > Superposición de degradado y usa los siguientes ajustes.

Paso 3

Ahora oculta la retícula para ver mejor el diseño. Mantén tu retícula visible para alinear mejor la forma. Selecciona la Herramienta Rectángulo redondeado, y crea una forma sobre la maquetación.

Paso 4

Para esta barra de navegación añade los siguientes estilos de capa.

Paso 5

Usar la misma herramienta (Herramienta Rectángulo redondeado), crea otra forma y rellénala con el color: #001424.

Paso 6

Añade el siguiente estilo de capa para esta forma.

Paso 7

Crea otra forma con la Herramienta Rectángulo redondeado usando como color el blanco.

Paso 8

Además, para esta forma, añade algún sencillo estilo de capa y cambia el valor del Relleno a 10%.

Aquí abajo puedes ver el resultado hasta ahora.

Paso 9

Sobre esta última forma coloca una imagen. He usado algunas imágenes de algunos tutoriales que hice para Grafpedia, que sirven a modo de buenos ejemplos de imagen para este diseño. Aunque tú por supuesto deberías usar tus propias imágenes.

Paso 10

Ahora necesitas cargar la selección de esta imagen. Para cargar la selección, selecciona la capa desde tu panel de capas y después dirígete a Selección > Cargar selección. Verá una selección alrededor de la imagen como puedes ver en la siguiente imagen.

Paso 11

Crea una nueva capa sobre todas las demás usando este atajo de teclado: Comando + May + Alt + N. Selecciona la Herramienta pincel, y selecciona un pincel redondo. Dibuja una línea horizontal sobre la nueva capa. Mantén pulsada la tecla mayúsculas (May) cuando estés dibujando. De esta forma el trazo será perfectamente horizontal.

Paso 12

Presiona Comando + D para deseleccionar. Ahora usa la Herramienta Rectángulo redondeado para crear otra forma con el color #4b6e82.

Paso 13

Para ambas formas añade los siguientes estilos de capas.

Paso 14

Toma la Herramienta Marco elíptico y crea una forma justo debajo de la forma de la barra lateral.

Paso 15

Dirígete a Filtro > Desenfocar > Desenfoque gaussiano y utiliza los siguientes ajustes. Photoshop te preguntará si deseas rasterizar la forma, sigue adelante y pulsa OK.

Paso 16

Como puedes ver, en el anterior paso, habíamos creado una sombra. Acentuemos ahora esta sombra añadiendo algunas luces. Selecciona la Herramienta Línea, y establece el grosor de la línea a 1 píxel y después crea una línea vertical igual que en la muestra.

Paso 17

Haz clic con el botón derecho sobre la capa y selecciona Rasterizar capa.

Paso 18

Selecciona la Herramienta Borrador, y elige un pincel suavizado y redondo de alrededor de 100px. Úsalo para borrar la parte final de la línea.

Paso 19

Con la misma técnica, crea otra línea en la parte superior del sidebar.

Paso 20

Justo bajo esta línea blanca crea otra pero de color negro.

Paso 21

En la parte media de la maquetación crea otra forma con la Herramienta Rectángulo redondeado.

Paso 22

Crea algunas formas con la Herramienta Rectángulo. Sobre estas formas añadiremos más tarde algunas imágenes.

Paso 23

Añade los mismos estilos de capa para estas tres formas.

Paso 24

Ahora es el momento de añadir las imágenes sobre estas líneas blancas. Añade además algo de texto con la Herramienta de Texto horizontal en el lado derecho.

Paso 25

Crea una línea de guiones entre las entradas con la Herramienta de Texto horizontal.

Paso 26

Crea otras tres formas y colócalas bajo el texto de los Metadatos de la Entrada

Paso 27

Sobre el sidebar, crea una caja de búsqueda usando la Herramienta Rectángulo redondeado. Al mismo tiempo puedes ver que he colocado también algo de texto sobre la barra de navegación.

Paso 28

Por favor, añade los siguientes estilos de capas para este campo de búsqueda.

Paso 29

Ahora usa la Herramienta Rectángulo redondeado para crear otra forma. Coloca esta forma sobre la anterior forma. Además, añade un icono en el lado derecho.

Paso 30

Justo sobre el slideshow crea otra forma blanca.

Paso 31

Añade los siguientes estilos de capas para esta forma.

Paso 32

Mantén pulsada la tecla Comando y con la Herramienta Pluma seleccionada presiona sobre el borde de la forma dos veces. El punto de ancla cambiará a estado activo y seremos capaces de modificar el aspecto de la forma.

Paso 33

Con la tecla Comando todavía presionada, selecciona el siguiente punto de ancla.

Paso 34

Mantén pulsada la tecla mayúsculas y presiona una vez sobre la tecla de la flecha hacia abajo en tu teclado. El punto de ancla se moverá hacia abajo y tendrás el siguiente resultado.

Paso 35

Usa la Herramienta Marco elíptico para crear un círculo.

Paso 36

Haz clic con el botón derecho sobre la capa y selecciona Rasterizar capa. Crea una selección como la que mostramos a continuación con la Herramienta Marco rectangular.

Paso 37

Pero asegúrate de tener la capa con este pequeño rectángulo seleccionada y después presiona la tecla Eliminar. Arrastra esta capa sobre la capa del fondo en tu panel de capas. Este es mi resultado hasta ahora.

Paso 38

Ahora añadiremos dos botones para permitir que los usuarios de los sitios cambien el slideshow de la imagen. Tendrás que usar la Herramienta Rectágulo redondeado para crear la forma y después puedes usar la Herramienta de Forma Personalizada para añadir las flechas.

Paso 39

Sobre la barra lateral crea algunas formas blancas tal y como se ve aquí abajo.

Paso 40

Para todas estas formas blancas, por favor, añade los mismos estilos de capa.

Paso 41

Añade algunos banners en el sidebar. Además añade algunos iconos de redes sociales en la parte superior del diseño del sitio. Existen numerosos iconos gratuitos a lo largo de la web entre los que elegir.

Paso 42

Ahora añade algo de texto con la Herramienta de Texto Horizontal en la parte inferior del sidebar. Además, añade un signo de resta entre el texto usando la Herramienta de Texto horizontal para crear reglas horizontales guionadas.

Paso 43

Añade otros detalles en la barra de navegación. Usa la Herramienta Línea para crear dos pequeñas líneas. Aumenta la visualización sobre esta imagen de manera que puedas ver mejor lo que estás haciendo.

Paso 44

Selecciona ambas capas dentro de tu panel de capas. Para seleccionar ambas capas debes mantener pulsada la tecla Comando al seleccionarlas. Cuando las tengas seleccionadas pulsa Comando +E para combinar las dos capas en una sola. Selecciona la Herramienta Borrador y úsala para eliminar la parte superior y la inferior de las líneas. Por favor, observa que necesitas un pincel suave, redondo de un tamaño de 20 píxeles.

Paso 45

Cambia el modo de fusión para esta capa a Luz suave. Duplícala unas cuantas veces y coloca la línea entre el resto de botones de texto.

Paso 46

Ahora crea el texto para el logo de esta maquetación de WordPress a un tamaño que te parezca correcto.

Paso 47

Añade los siguientes estilo de capa para este texto del logo.

Paso 48

Justo sobre la capa “background” crea una nueva capa (Cmando + May + Alt + N). Con la Herramienta Pincel haz una marca para crear ahí un resaltado con un pincel redondo tal y como se muestra.

Paso 49

Cambia el modo de fusión para esta capa a Luz suave.

Conclusión

¡El diseño está completado! ¡Espero que hayas disfrutado creándolo! Puedes ver el diseño final aquí abajo o visualizar una imagen a tamaño completo aquí.