Diseña un tema Tumblr inspirado en el bosque en Photoshop
Tumblr es una plataforma de microblogging que permite a los usuarios publicar fácilmente fragmentos de información en la web, como una foto o conjunto de fotos, un video, una cita o simplemente un párrafo.
A menudo se utiliza como un diario en línea debido a su facilidad de uso en comparación con otras plataformas de blogs como WordPress.
Hay muchos temas de Tumblr disponibles, tanto gratuitos como premium, pero ¿alguna vez te has preguntado cómo diseñar el tuyo?
En este tutorial, aprenderá cómo crear un tema Tumblr inspirado en el bosque, haciendo uso de texturas de madera, patrones sutiles y técnicas modernas: una buena combinación de elementos naturales y modernos.
Lo que vamos a diseñar
El tema que diseñaremos en Photoshop consta de cuatro áreas: barra lateral de madera, área de contenido principal, barra lateral derecha y encabezado.
Paso 1
El primer paso, como debería ser con todas las cosas que diseñas, es la etapa de dibujo. Usando mi tableta gráfica Wacom Bamboo y un lienzo en blanco en Photoshop, esbocé el siguiente diseño, con algunos elementos más grandes, solo para obtener mis ideas en papel (digital).
Paso 2
Con la idea maltratada, cree un nuevo documento en Photoshop. (Tenga en cuenta que esto no está escrito en piedra. Es algo a lo que puede recurrir si se queda atascado en el diseño. Personalmente, tiendo a experimentar y cambiar mucho de lo que inicialmente planifiqué.) Usé lo siguiente ajustes en Photoshop:
Paso 3
La siguiente etapa es colocar algunas guías sobre el lienzo. Esto te ayudará a mantener ordenada la estructura del tema a medida que lo diseñas. Quiero que la barra lateral izquierda sea de 200 píxeles, el área de contenido principal sea de 600 píxeles y la barra lateral derecha de 160 píxeles, lo que nos da un ancho de 960 píxeles.
Si ha utilizado la misma configuración, puede colocar sus guías en 200, 800 y 960 píxeles horizontalmente. Este diseño se alineará a la izquierda, de modo que la barra lateral de madera siempre se asiente contra el lado izquierdo de la ventana gráfica del usuario.
También coloqué guías 200 píxeles debajo de la parte superior del lienzo y 200 píxeles sobre la parte inferior del lienzo. Así es como mi documento se ve actualmente:
Etapa 4
Vamos a agregar un patrón a nuestro fondo. Vaya a Archivo → Nuevo y cree un nuevo documento de 8 × 8 píxeles. Dibuja algunas líneas verticales con un ancho de 2 píxeles. Su lienzo ahora debe tener 2 píxeles de color negro, 2 píxeles de color blanco, 2 píxeles de color negro y 2 píxeles de color blanco. Vaya a Editar → Definir patrón. Guarde su patrón como "Líneas verticales 2px".
En su documento original, vaya a Capa → Nueva capa de relleno → Patrón. Seleccione el patrón que acaba de crear y haga clic en Aceptar. Deja caer la opacidad de la capa hasta que se vea algo así:
Combina el patrón con tu capa de fondo, rastrillándolo automáticamente en el proceso. Vaya a Filtro → Ruido → Agregar ruido. Cambie el valor a 5% y haga clic en Aceptar. Esto agregará una textura sutil al fondo:
Crea una nueva capa y llénalo de blanco. Colóquelo debajo de la capa de fondo original. Reduzca la opacidad de su patrón de capas texturadas a alrededor del 40% y luego combínelo con la capa de fondo yendo a Capa → Fusionar capas.
Paso 5
Seleccione la herramienta Rectángulo y dibuje una forma de 200 píxeles de ancho.
Vamos a cortar la parte inferior de nuestra forma con la herramienta Lazo poligonal, haciendo que parezca una cinta. Cree una selección sobre su forma, rasterice la capa de forma y luego presione la tecla Eliminar para eliminar el área seleccionada.
Coloque la forma en el área de la barra lateral izquierda que marcamos usando nuestras guías.
Cree una selección de la parte superior de la forma y vaya a Editar → Transformación libre. Estire la forma para que se superponga con la línea superior del lienzo.
Paso 6
Seleccione la herramienta Forma de elipse y, mientras mantiene presionada la tecla Mayús para mantener el círculo, dibuje un círculo, lleno de blanco. Colóquelo en la parte superior de la barra lateral y cambie el nombre de la capa a "Retrato".
Haga clic derecho en la nueva capa de forma y seleccione la opción "Rasterizar capa" para convertirlo de un objeto inteligente en píxeles. Mantenga presionada la tecla Comando y haga clic en la imagen de vista previa de la capa en el panel Capas. Esto hará una selección de tu círculo.
Busque una imagen de usted (o de lo que sea que se trate su sitio web) y cópiela. Regresa a Photoshop y, con la selección de círculo todavía activa, ve a Editar → Pegar en. Esto pegará el objeto en la selección de tu círculo.
Una vez hecho esto, ha creado automáticamente una máscara de capa en la imagen (es decir, en una nueva capa, no en la capa circular existente). Vaya a Editar → Transformación libre para cambiar el tamaño y / o girar la imagen. Seguirá siendo un círculo; solo asegúrate de no hacerlo demasiado pequeño. Una vez hecho esto, elimine la capa llamada "Retrato" y cambie el nombre de su nueva capa.
Paso 7
Seleccione la herramienta Texto y cree un cuadro de texto en el área del encabezado. Le di a mi tema un nombre completamente aleatorio: "Kabooom". Utilicé una fuente llamada Reklame Script. Puede descargar una demostración de la fuente o comprarla por $ 30 desde MyFonts .
Haga clic con el botón derecho en su capa de texto y seleccione "Opciones de fusión". Aplique una superposición de color al texto. Utilicé un gris claro que es un poco más oscuro que el fondo, con el código hexadecimal # D6D6D6.
Aplica una sombra interna al tipo, usando una opacidad del 10%, una distancia de 2 píxeles y un tamaño de 1 píxel. Deje todo lo demás en 0. Esto hará que el tipo se vea como si estuviera grabado en el fondo.
Para completar el efecto grabado, agregaremos una sombra paralela al tipo, utilizando el color blanco con un modo de fusión normal. Proporcione a la sombra una distancia de 2 píxeles y un tamaño de 1 píxel. Esta configuración hará que la sombra aparezca como un resaltado en la parte inferior del tipo, agregando más profundidad al tipo y reforzando la sombra interna.
Paso 8
Vuelva a seleccionar la herramienta Texto y cree un cuadro de texto que ocupe el ancho de la barra lateral derecha, que hemos marcado con guías. Coloque una variedad de categorías bajo el encabezado de la categoría, como se ve a continuación:
Seleccione el encabezado de la categoría y cambie el tipo de letra a uno de su elección. Usé Minion Pro. Experimente con subfuentes (negrita, cursiva, etc.) y tamaños de punto.
Cambia la fuente para las categorías ("Noticias", "Días fuera", "Fotografía", etc.). Utilicé Myriad Pro. Disminuya el tamaño de los puntos del tipo y ajuste el frente (es decir, el espacio entre las líneas de texto), de modo que la línea superior se encuentre más abajo de lo que está por defecto.
Copie el primer encabezado y los enlaces y péguelos debajo en el mismo cuadro de texto. Cambiar el título y las categorías. Usé los títulos "Mis proyectos" y "Mis amigos". Por supuesto, use lo que sea relevante para su sitio web.
Paso 9
Ahora vamos a hacer que el texto en la barra lateral derecha sea un poco más atractivo. Seleccione el texto para las subcategorías (es decir, no los títulos) y cambie el color de negro a gris oscuro. Usé # 333333. Haga clic en Aceptar.
Haga clic derecho en la capa de tipo, y seleccione "Opciones de fusión". Aplicar una sombra paralela blanca con un modo de fusión normal. Cambie el ángulo a 120 ° y la distancia y el tamaño a 1 píxel. Deje todo lo demás configurado en 0 píxeles. Esto agregará un resaltado a la parte inferior del texto, tal como lo hicimos con el encabezado.
Paso 10
Seleccione la herramienta Línea y, mientras mantiene presionada la tecla Mayús para mantenerla recta, trace una línea debajo del encabezado "Categorías".
Haga clic derecho en la capa de línea y seleccione "Opciones de fusión". Aplique una sombra blanca con un modo de fusión normal. Establezca el ángulo a 90 ° y la distancia a 1 píxel. Establecer todo lo demás a 0 píxeles.
Duplique la capa de línea y colóquela debajo de cada uno de los títulos.
Paso 11
Si tiene la misma cantidad de encabezados que yo, entonces debe tener tres capas de líneas. Seleccione todos y duplíquelos. Con las tres capas de línea aún seleccionadas, empuje hacia abajo 10 píxeles manteniendo presionada la tecla Mayús y presionando la tecla Abajo una vez. Baje la opacidad de las capas de línea más nuevas al 25% para terminar con algo como esto:
Paso 12
Agarra la herramienta Forma de rectángulo y dibuja un rectángulo similar a lo que está debajo. Haga que el rectángulo tenga exactamente 570 píxeles de ancho. Esto permitirá un espacio de 10 píxeles entre la barra lateral izquierda y el borde del nuevo rectángulo y un espacio de 20 píxeles entre la barra lateral derecha y el borde del nuevo rectángulo, como se ve en la captura de pantalla anotada a continuación:
Paso 13
Vuelva a seleccionar la herramienta Forma de rectángulo y cree un rectángulo gris mucho más pequeño, como el siguiente. Colóquelo en la esquina superior derecha del rectángulo grande, con 10 píxeles de distancia del rectángulo grande. Coloque la forma a 30 píxeles de la parte superior del rectángulo.
Paso 14
Duplique la capa de texto en la barra lateral derecha y, usando la combinación Mayús y la combinación de teclas del cursor, empuje la capa de texto duplicado sobre el área de contenido principal. Haga lo mismo con las dos capas de línea para su encabezado "Categorías".
Seleccione la herramienta Texto y haga clic en su capa de tipo duplicada. Elimine todo el texto del cuadro y cambie el encabezado a algo más adecuado. Acabo de usar un texto falso aquí: "Esto aquí se llama título".
Paso 15
Vaya a Archivo → Lugar y busque una fotografía para colocar en el documento como marcador de posición. Usar imágenes reales aquí es siempre lo mejor porque hacen que la maqueta parezca más real y atractiva. Usé un foto de mi hermana .
Vaya a Editar → Transformación libre para reducir el tamaño de la foto y colocarla en el lugar correcto. Haga un total de 20 píxeles más cortos en ancho y alto para que se ajuste bien en el rectángulo negro, así:
Paso 16
Abra las opciones de fusión para el rectángulo negro grande. Aplique una superposición de color blanco y una sombra paralela con una opacidad del 10% y un tamaño de 3 píxeles.
Paso 17
Seleccione la herramienta Forma de rectángulo una vez más y dibuje una forma larga debajo de la forma de fondo de la foto en blanco. Asegúrate de que tenga el mismo ancho. Llénalo con un gris claro.
Abra las opciones de fusión para el nuevo rectángulo gris y aplique una sombra paralela. Establezca el color en blanco, con un modo de fusión normal, la opacidad al 100% y la distancia a 1 píxel. Deje todo lo demás configurado en 0 píxeles.
Además, aplique una sombra interna, usando el color negro, con una opacidad del 10%. Cambie el tamaño a 13 píxeles y deje todo lo demás en 0 píxeles. Estos dos estilos de capa harán que la nueva forma parezca grabada en segundo plano, al igual que nuestra tipografía de encabezado:
Paso 18
Pasando a la barra lateral, descargue algunas texturas repetitivas de madera. Estoy usando un establecido desde GraphicRiver eso incluye tres texturas de madera diferentes: luz, medio y oscuro.
Una vez que haya instalado los patrones en Photoshop (abriendo cada imagen y definiéndola como un patrón), seleccione la barra lateral en su documento de Photoshop. Ir a Capa → Nueva capa de relleno → Patrón. Seleccione una de sus texturas de madera (seleccioné la versión mediana) y haga clic en Aceptar. Al seleccionar primero la barra lateral, el patrón debería ocupar solo esa área.
Haga clic derecho en la capa de patrón, y seleccione "Opciones de fusión". Aplique una superposición de degradado, pasando de negro a transparente a negro:
Cambia la opacidad de la superposición de degradado al 10% y dale un ángulo de 0 °. Esto agregará una sombra sutil a la barra lateral, haciendo que parezca un poco más realista y menos plana.
Además, aplique una sombra paralela a la barra lateral. Baja la opacidad al 30% y cambia el ángulo a 180 °. Cambie la distancia a 1 píxel y el tamaño a 5 píxeles, dejando todo lo demás en 0 píxeles. Esto agregará una pequeña y sutil sombra a la barra lateral.
Paso 19
Abra las "Opciones de fusión" para el retrato en círculo que creamos cerca del comienzo de este tutorial. Aplique una sombra blanca usando la configuración a continuación:
Además, aplique una sombra interior usando la configuración a continuación. Esto hará que el retrato del círculo se vea como si estuviera colocado en el árbol, en lugar de simplemente sentarse sobre él.
Paso 20
Duplique la capa de título en los contenidos principales. Vuelva a colocarlo en la barra lateral y cambie el texto a "Acerca de mí". Además, vuelva a colocar y cambie el tamaño de las dos líneas debajo del encabezado.
Abra las "Opciones de fusión" para su nueva capa de texto y cambie la configuración de la sombra paralela a estas:
Agregue texto a la sección "Acerca de mí", utilizando la misma fuente y tamaño que utilizamos en el texto de la barra lateral derecha. Abra las "Opciones de fusión" para este nuevo texto y haga clic en la pestaña "Resplandor exterior" para aplicar un brillo externo; cambie la opacidad al 30%, el color al blanco y el tamaño a 18 píxeles.
Esto hará que nuestro texto sea más legible contra el fondo de madera.
Juega con el tamaño de letra para facilitar el escaneo del texto.
Paso 21
Después de algunos experimentos, decidí que toda la barra lateral se veía mucho mejor en la más oscura de las tres texturas mencionadas anteriormente. Cambié el patrón de la barra lateral y los colores del texto. Usa las técnicas que ya has aprendido para hacer esto.
Así es como se ve mi diseño hasta ahora:
Paso 22
Por mucho que haya planificado, está obligado a realizar cambios durante el proceso de diseño. Al observar el diseño como un todo (en lugar de hacerlo por partes), concluí que 10 píxeles entre las barras laterales y el área de contenido principal no era suficiente.
Con la combinación de la tecla Mayús y la combinación de teclas del cursor, mueva el contenido, haciendo que los dos espacios sean de 40 píxeles en lugar de 10. Esto hará que el diseño sea más útil y atractivo.
Paso 23
También decidí cambiar el estilo del encabezado del tema.
Cambia el color (usando una superposición de color en la ventana "Opciones de fusión") a uno seleccionado del retrato del círculo. Escogí un verde azul oscuro.
También eliminé la sombra interna y cambié la configuración de la sombra paralela, lo que hace que parezca que el encabezado está sentado sobre el fondo en lugar de establecerse en él.
Paso 24
Pasando al banner de contenido principal (es decir, el rectángulo que creamos anteriormente que se encuentra en la esquina superior derecha del área de la imagen de nuestro contenido principal), seleccione el rectángulo haciendo clic en la vista previa en miniatura de la capa mientras mantiene presionada la tecla Comando.
Vaya a Capa → Nueva capa de relleno → Patrón y seleccione la misma textura que utilizó para la barra lateral.
Haga clic derecho en la capa de relleno de patrón, y seleccione la opción "Rasterizar capa". Con las herramientas Dodge and Burn, agrega reflejos a la izquierda y a la parte superior de la forma y sombras a la derecha e inferior de la forma.
Esto agregará profundidad y le dará una ligera sensación tridimensional a la forma. La herramienta de grabación oscurecerá la imagen, mientras que la herramienta de esquivar la iluminará.
Seleccione la herramienta Lazo poligonal. Seleccione una forma similar a la de abajo y llénela de un marrón oscuro, seleccionado de su textura.
Con la herramienta Rectangular Marquee, selecciona las áreas con la nueva forma que no necesitas y presiona la tecla Eliminar para eliminarlas. Deberías terminar con algo similar a esto:
Paso 25
Agarra nuestro propio conjunto de iconos exclusivos llamado "Reflexión". Usaremos varios de estos íconos en nuestro diseño.
Inserte los iconos que necesita en el documento yendo a Archivo → Colocar. Elegí los íconos de cámara, corazón, recarga, edición y reloj, que servirán como mis fotos, me gusta, reblog, notas e iconos de tiempo en el tema.
Paso 26
Seleccione el icono de la cámara y cambie su tamaño. Colóquelo en la barra de tipo de publicación que acabamos de crear. Aplique una sombra interna y paralela, usando configuraciones similares a las que hemos estado utilizando a lo largo de este tutorial.
Agrega alguna tipografía a la barra de tipo de publicación. Usé el mismo Reklame Script que utilizamos en el encabezado y las mismas opciones de fusión que utilizamos para los títulos de la barra lateral izquierda.
Paso 27
Seleccione las otras cuatro capas de iconos. Haga clic con el botón derecho y seleccione "Rasterizar capas" para convertirlos de objetos inteligentes en objetos de píxeles.
Use la herramienta Rectangular Marquee para seleccionar todas las reflexiones del icono.
Presione la tecla Eliminar en cada una de las capas de iconos para eliminar su reflejo.
Paso 28
Vuelva a seleccionar las cuatro capas de iconos. Vaya a Editar → Transformación libre y, mientras mantiene presionada la tecla Mayús para mantener los iconos en proporción, reduzca su tamaño y colóquelos en la barra debajo del área de contenido principal que creamos anteriormente.
Distribuya los iconos de manera uniforme utilizando las teclas del cursor.
Paso 29
Haga clic derecho en la capa del icono del corazón, y seleccione "Opciones de fusión" en el menú. Cambia el color a gris claro con una superposición de color y aplica una sombra interna usando la siguiente configuración:
Ahora aplique una sombra paralela, usando estas configuraciones:
Una vez que la configuración se haya aplicado a la capa del icono del corazón, haga clic derecho y seleccione "Copiar estilos de capa". Vuelva a seleccionar los cuatro iconos, haga clic derecho y seleccione "Pegar estilos de capa". Todos los iconos en esta barra deberían tener ahora mismo efecto.
Paso 30
Seleccione la herramienta Texto y haga un pequeño cuadro de texto al lado del icono del corazón. Escriba "Me gusta esta publicación". Aplique una sombra interna y una sombra paralela usando configuraciones similares a las que hemos estado usando a lo largo de este tutorial.
Repita el paso anterior para los iconos restantes, con las siguientes frases: "Rebloguear esta publicación", "1052 notas" y "Publicado el 19/03/2011". Asegúrese de copiar y pegar el mismo estilo de capa en cada capa de texto.
Es posible que también desee cambiar la posición de algunos de los iconos con el nuevo texto, asegurándose de que la brecha entre el texto y los iconos sea constante; debido a las diferentes longitudes de texto, esto puede haber cambiado.
Paso 31
Duplique todas las capas en el área de contenido principal y colóquelas debajo del original. Cambie el título, la imagen y el rectángulo del tipo de publicación. Como se mencionó, cuanto más realista sea la maqueta, mejor.
Paso 32
Duplique el encabezado y el texto en la barra lateral e inserte algunos íconos. Usé los excelentes iconos de redes sociales conocidos como Buddycons , otro conjunto exclusivo de Webdesigner Depot.
El producto final
Después de algunos retoques más (eliminé el corte irregular en forma de cinta en la parte inferior de la barra lateral), ¡ya terminé! Aquí está nuestro diseño final, listo para ser codificado o enviado a un desarrollador para hacerlo.
Este tutorial fue creado exclusivamente para Webdesigner Depot por Callum Chapman , un diseñador de interfaz de usuario independiente que cotiza bajo el nombre Circlebox Creative . Callum también está trabajando en una galería de inspiración proyecto llamado Vinspires.
¿Le gustaría ver otro tutorial sobre cómo dividir y codificar este diseño en un tema de Tumblr en pleno funcionamiento?