Share
En este tutorial, haremos un diseño de blog creativo utilizando formas principalmente simples, algunas técnicas de pincel, algunas imágenes y una dosis de ingenio Photoshop. Crear diseños de diseño web es más fácil de lo que piensas. Puedes aprender a construir diseños atractivos rápidamente. Crear este diseño tomará menos de dos horas y aprenderá algunos consejos profesionales a lo largo del camino. Empecemos!
Echa un vistazo a la imagen que vamos a crear. La imagen final está debajo o puede ver una imagen a tamaño completo aquí.
Para completar este tutorial necesitas descargar el Sistema de Grid 960. Ahora comencemos.
Abra 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.
Seleccione la capa de fondo y presione Comando + J. Este es el acceso directo para duplicar una capa. El uso de atajos acelerará su proceso de diseño. Para esta nueva capa añadiremos un bonito color degradado. Ahora vaya a Capa> Estilo de capa> Superposición de degradado y use la siguiente configuración.
Ahora oculta la Grilla porque para ver mejor el diseño. Mantenga su cuadrícula visible porque puede alinear mejor la forma. Seleccione la herramienta Rectángulo redondeado y cree una forma en la parte superior del diseño.
Para esta barra de navegación agregue los siguientes estilos de capa.
Usando la misma herramienta (herramienta Rectángulo redondeado) cree otra forma y rellénela con el color: # 001424.
Agrega el siguiente estilo de capa para esta forma.
Crea otra forma con la herramienta Rectángulo redondeado usando blanco para el color.
También para esta forma, agregue algunos estilos de capa simples y cambie el valor de Relleno al 10%.
A continuación se muestra el resultado hasta el momento..
Sobre esta última forma colocamos una imagen. He usado algunas imágenes de algunos tutoriales que he hecho para Grafpedia, que sirven como buenos ejemplos de imágenes para este diseño. Deberías usar tus propias imágenes aunque por supuesto.
Ahora necesitas cargar la selección para esta imagen. Para cargar la selección, seleccione la capa en su paleta de capas y luego vaya a Seleccionar> Cargar selección. Verás una selección alrededor de la imagen como en la siguiente imagen.
Cree una nueva capa sobre todas las capas utilizando este método abreviado: Comando + Mayús + Alt + N. Seleccione la herramienta Pincel y elija un pincel redondo suave. Sobre la nueva capa dibuja una línea horizontal. Mantenga presionada la tecla Mayús cuando realice el dibujo. De esta forma el dibujo quedará perfecto horizontalmente..
Presione Comando + D para deseleccionar. Ahora use la herramienta Rectángulo redondeado para crear otra forma con el color # 4b6e82.
Para ambas formas agregue los siguientes estilos de capas.
Coge la herramienta Elipse y crea una forma justo debajo de la barra lateral..
Vaya a Filtro> Desenfoque> Desenfoque gaussiano y use la siguiente configuración. Photoshop le preguntará si desea Rasterizar la forma, seguir adelante y presionar OK.
Como puede ver en el paso anterior, hemos creado una sombra allí. Ahora acentuemos esta sombra agregando algunas luces. Seleccione la herramienta Línea y establezca el peso de la línea en 1 píxel y luego cree una línea vertical como se muestra.
Haga clic derecho en la capa y elija Rasterizar capa.
Seleccione la herramienta Borrador y elija un pincel suave y redondo alrededor de 100px. Úselo para eliminar la parte superior y la parte inferior de la línea.
Con la misma técnica, crea otra línea en la parte superior de la barra lateral..
Justo debajo de esta línea blanca crea otra que es negra..
En la mitad del diseño, cree otra forma con la herramienta Rectángulo redondeado.
Crea algunas formas con la herramienta Rectángulo. Sobre estas formas añadiremos algunas imágenes más tarde..
Agrega los mismos estilos de capa para todas estas tres formas.
Ahora es el momento de agregar las imágenes sobre estas formas blancas. También agrega texto con la herramienta de tipo horizontal en el lado derecho.
Cree una línea discontinua entre las publicaciones con la herramienta de tipo horizontal.
Cree otras tres formas y colóquelas debajo del texto Publicar metadatos.
Sobre la barra lateral, cree un cuadro de búsqueda con la herramienta Rectángulo redondeado. Al mismo tiempo, puedes ver que también he colocado un poco de texto sobre la barra de navegación.
Por favor agregue los siguientes estilos de capa para este cuadro de búsqueda.
Ahora usa la herramienta Rectángulo redondeado para crear otra forma. Coloque esta forma sobre la forma anterior. Además, añade un icono en el lado derecho..
Justo encima de la presentación de diapositivas crea otra forma blanca.
Agrega los siguientes estilos de capas para esta forma.
Mantenga presionada la tecla Comando y, con la herramienta Pluma seleccionada, presione dos veces el borde de la forma. El punto de anclaje se activará y podremos modificar el aspecto de la forma.
Con la tecla Comando aún presionada, seleccione el siguiente punto de anclaje.
Mantenga presionada la tecla Mayús y presione una vez la tecla de flecha hacia abajo desde el teclado. El punto de anclaje se moverá hacia abajo y obtendrá el siguiente resultado.
Usa la herramienta Elipse para crear un círculo..
Haga clic con el botón derecho en la capa y elija Rasterizar capa. Con la herramienta Rectangular Marquee haga una selección como la que se muestra a continuación.
Asegúrese de tener la capa con este pequeño círculo seleccionado y luego presione la tecla Eliminar. Arrastre esta capa sobre la capa de fondo en su paleta de capas. Este es mi resultado hasta ahora.
Ahora agregaremos dos botones para permitir a los usuarios del sitio cambiar la imagen de la presentación de diapositivas. Necesitará usar la herramienta Rectángulo redondeado para crear la forma y luego puede usar la herramienta Forma personalizada para agregar las flechas.
Sobre la barra lateral, crea algunas formas blancas como se muestra a continuación..
Para todas estas formas blancas, por favor agregue los mismos estilos de capas..
Agrega algunas pancartas en la barra lateral. Además, agregue algunos iconos de marcadores sociales en la parte superior del diseño del sitio. Hay numerosos iconos gratuitos disponibles en la web para elegir.
Ahora agregue un poco de texto con la herramienta de tipo horizontal en la parte inferior de la barra lateral. Además, agregue signos menos entre el texto utilizando la herramienta de tipo horizontal para crear reglas horizontales discontinuas.
Vamos a añadir otros detalles en la barra de navegación. Utilice la herramienta Línea para crear dos líneas pequeñas. Haz zoom en esta imagen para que puedas ver mejor lo que estás haciendo.
Seleccione ambas capas dentro de su paleta de capas. Para seleccionar ambas capas, debe mantener presionada la tecla Comando cuando seleccione ambas capas. Una vez que haya seleccionado las líneas, presione Comando + E para combinar las capas en una sola. Seleccione la herramienta Borrador y utilícela para eliminar la parte superior y la parte inferior de las líneas. Tenga en cuenta que necesita un cepillo suave y redondo con un tamaño de 20 píxeles.
Cambia el modo de fusión de esta capa a Soft Light. Duplíquelo varias veces y coloque la línea entre los otros botones de texto.
Ahora cree el texto para el logotipo de este diseño de Wordpress en un tamaño que se vea bien para usted.
Agrega los siguientes estilos de capas para este texto logo.
Justo sobre la capa "de fondo" crea una nueva capa (Comando + Mayús + Alt + N). Con la herramienta Pincel haga una marca de resaltado allí con un cepillo suave y redondo como se muestra.
Cambia el modo de fusión de esta capa a Soft Light.
¡El diseño está completo! Espero que hayas disfrutado creando! La imagen final está debajo o puede ver una imagen a tamaño completo aquí.
Accentsconagua