Diseñe un diseño de blog limpio y elegante en Photoshop CS6

En este tutorial te voy a mostrar el proceso de Haciendo un blog de diseño simple y limpio. Utilizando el último Photoshop. Vamos a utilizar el nuevo Estilos de personajes y Estilos de párrafo para ayudarnos a agilizar el proceso.

Para seguir este tutorial, necesitarás los siguientes recursos:

• Fuente libre de Bernd Montag.
• 26 patrones de píxeles repetibles de PSDfreemium.
• Iconos gratis de redes sociales de Daniele Selvitella.

• Manifestación

Preparando el lienzo

Paso 1

En este diseño, vamos a utilizar 960 gs como marco. Descargue la plantilla desde su página principal y, dentro del archivo zip, busque el archivo photoshop. Abra el archivo '12 Column Grid 'en Photoshop.

Haga clic en el icono de ojo de la capa de 12 Col Grid para ocultarlo; No lo vamos a necesitar por ahora..

Paso 2

El tamaño del lienzo actual es demasiado pequeño. Hacer clic Imagen> Tamaño de lienzo (o Ctrl + Alt + C). Agregue un tamaño más grande y asegúrese de establecer su punto de anclaje en el centro.

Paso 3

Pulsa Ctrl + R para revelar la regla. Hacer clic Ver> Nuevo Guía para hacer nueva guía que nos ayude a diseñar con precisión. Seleccionar Vertical y en la posición: 185 px para hacer una guía vertical de 185 px desde la esquina superior izquierda del lienzo.

Etapa 4

Dibuja otra guía vertical en la posición. 150 px, 1095 px y 1130 px.

Abajo está nuestra guía final dentro del lienzo..

Preparación del tema de color

Paso 5

Para este diseño, vamos a utilizar una buena combinación de colores de Colorlouver. Haga clic en el enlace Vista previa para abrir la combinación de colores como un archivo jpeg.

Guarde la combinación de colores y colóquela dentro del archivo de Photoshop. Al colocar la imagen directamente dentro del lienzo podemos muestrear su color más rápido y más fácil.

Preparando el fondo

Paso 6

Seleccionar Fondo capa y haga clic en el icono de bloqueo en la parte superior del panel Capas para desbloquearlo. Haga doble clic en la miniatura para cambiar su color..

Haga clic en el segundo color, # 948371, para seleccionarlo.

Paso 7

Dibuja una forma rectangular en la parte superior del lienzo. Este será el segundo fondo..

Paso 8

Mantenga la forma seleccionada. En el Barra de opciones, abierto Llenar Color cuadro y luego haga clic en el icono de rueda de color. Cuando se abra el cuadro de diálogo Selector de color, haga clic en el primer color para seleccionarlo. Por su Carrera selección de color Ninguna.

Paso 9

Cree una nueva capa y luego seleccione el lienzo superior con la herramienta de marco rectangular. Activar el herramienta gradiente y llenarlo con radial gradiente De blanco a negro. Asegúrate de que el degradado esté centrado en la parte superior del lienzo.

Cambiar su Mezcla modo a Pantalla y reducir su Opacidad a 37%.

Paso 10

Crea una nueva capa y llámala 'sombra'.

Dibuje una selección rectangular en la parte inferior del fondo secundario como se muestra. Hacer clic Editar: Rellenar. Conjunto Utilizar a Negro. Hacer clic DE ACUERDO para llenar la selección con negro.

Paso 11

Suavizar utilizando Gaussian Blur. Hacer clic Filtro> Blur> Gaussian Blur.

Paso 12

Mantenga presionada la tecla Alt y luego coloque el cursor entre sombra y fondo superior capa. Sin soltar la tecla Alt, haga clic para convertir la capa en máscara de recorte. Al convertirlo en Máscara de recorte, la sombra ahora entra en el fondo superior.

Paso 13

Traer sombra Opacidad a 50% para hacerlo sutil. A continuación, puedes ver el resultado en un aumento del 100%..

Paso 14

Siempre es una buena idea poner estas capas en un grupo. Para hacer esto, seleccionar todas las capas y luego haga clic en Ctrl + G.

Encabezamiento

Paso 15

Dibuja un rectángulo en el lienzo superior como se muestra.

Paso 16

En el Barra de opciones, conjunto Carrera color para # af9f8e.

Paso 17

Por su Llenar color, seleccione gradiente lineal desde # d0c4b9 a # a89c91.

A continuación se muestra el resultado en una vista del 100%..

Nombre del sitio

Paso 18

Agregue el nombre del sitio en el lado izquierdo del diseño. Observe la colocación como se muestra a continuación. Haga doble clic en el texto y agregue Sombra paralela. Para su fuente, usa Sansation..

Menú

Paso 19

Dibuja los menús en el otro lado de la barra de menús. Utilizar fuente Sansation 14 pt. De nuevo, note las colocaciones..

Paso 20

Para el menú activo, establezca su tipo de fuente en negrita.

Paso 21

Activar Herramienta poligonal y establecer Lados a 3. Dibuja una forma de triángulo con Rellenar: # 3d3123 y Accidente cerebrovascular: ninguno. Añadir Estilo de capa > Sombra.

Paso 22

Vamos a enfatizar el menú activo agregando una línea debajo de él. Activar el Herramienta de linea y poner su peso a 5 px. Seleccionar # f76b6a por su relleno, sin trazo.

Coloque la línea justo debajo del menú activo y agregue espacio de 1 px a la parte inferior de la barra de menús.

Usando estilos de personajes

Paso 23

Guardemos la configuración de caracteres como un estilo de carácter. Esta función es una versión simplificada de los estilos de caracteres en InDesign. Para guardarlo, active el texto y luego haga clic en el icono 'Nuevo estilo de carácter'.

Haga doble clic en el nuevo estilo de carácter y use la siguiente configuración.

Paso 24

Seleccione el otro menú y luego haga clic en el Estilo de carácter para aplicarlo. Si encuentra un signo más junto al Estilo de carácter, significa que el carácter tiene una configuración diferente. Para anular la configuración, haga clic en el icono de flecha circular.

Paso 25

Repita el paso anterior para crear un nuevo estilo de carácter para el menú activo.

Paso 26

Entonces, ¿cuál es el punto de usar estilos de caracteres? Los estilos de caracteres nos ayudan a centralizar la configuración de caracteres. Simplemente podemos editar el estilo de carácter para editar cada texto usando ese estilo. Vea un ejemplo a continuación. Si editamos el tipo de letra dentro del estilo de caracteres Menú superior - Normal a Corbel, todo el menú normal se cambia automáticamente a Corbel.

Paso 27

Crea una nueva capa y colócala debajo de la barra de menú. Presione la tecla Ctrl y haga clic en la barra de menú para hacer una nueva selección según su forma. Llenarlo con negro.

Paso 28

Elimine la selección utilizando Ctrl + D. Suavícela agregando Desenfoque gaussiano, Filtro> Blur> Gaussian Blur.

Deslizador

Paso 29

Dibuje una forma rectangular con el ancho de 10 columnas (vea abajo).

Por su Color de relleno seleccionar # dfd1c2. Por su Carrera seleccionar # c8baac con talla 10 pt. Haga clic en la pequeña flecha desplegable junto a la vista previa de la línea y asegúrese de Alinear dentro esta seleccionado.

Paso 30

Pegar una imagen en la parte superior del marco. Convertirlo a Máscara de recorte al presionar Ctrl + Alt + G. La imagen se irá automáticamente dentro del marco del deslizador. Si es necesario, puede mover y cambiar el tamaño de la imagen sin afectar su marco.

Paso 31

Dibuja otra forma rectangular detrás del deslizador con el mismo color. Asegúrese de ajustarlo a la guía exterior. Añadir Estilo de capa> Superposición de patrón utilizando el patrón de píxeles de PSDfreemium. Atenuar su Opacidad para hacer su sutil.

Paso 32

Dibuja una forma rectangular sobre la forma con Rellenar: # b3aca5 y no trazo. Presione Ctrl + T y luego girarlo 45 °. Convertir forma de capa a Máscara de recorte.

Paso 33

Duplica la forma y cambia su tamaño. Cambiar su Llenar a un color más oscuro. Convertir forma de capa a Máscara de recorte.

Paso 34

Repite el mismo paso para dibujar otra flecha en el otro lado.

Paso 35

Presione Ctrl y haga clic en el marco de la diapositiva para hacer una nueva selección. Hacer una nueva capa y convertirla en una Máscara de recorte. Rellena la selección con negro.

Paso 36

Deselecciona (Ctrl + D) luego ablandar usando Desenfoque gaussiano.

Puedes reducir la opacidad de la sombra si es necesario.

Paso 37

Dibuja un rectángulo redondeado en la esquina del control deslizante con Rellena # c8baac.

Paso 38

Dibuja un círculo dentro de la forma. Establecer su Carrera a negro con talla 1 pt y quitar el relleno.

Paso 39

Selecciona el circulo camino usando Selección de camino herramienta. Shift + Alt-arrastre el camino para duplicarlo.

Repite esto para dibujar más círculos..

Paso 40

Selecciona una de las trayectorias circulares. Presione Ctrl + Shift + J para cortarlo a una nueva capa.

Paso 41

En el Barra de opciones, quitar su Carrera y cambiar su Llenar a un radial gradiente de # e38989 a # bb5c5c. Añadir Estilo de capa> Resplandor exterior y Sombra paralela.

Paso 42

Dibuje una selección elíptica bajo el control deslizante. Haz una nueva capa y rellénala con negro.

Paso 43

Deseleccionar (Ctrl + D). Ablandarlo utilizando Desenfoque gaussiano.

Fondo inferior

Paso 44

Dibuja otra forma rectangular para el fondo inferior. Usa el mismo Llenar y Carrera color como la forma del control deslizante.

Como siempre, ten mucho cuidado con su colocación. Queremos que cubra todas las guías del lienzo..

Añadir Estilo de capa> Superposición de patrón.

A continuación se muestra el resultado en 100% de aumento..

Paso 45

Seleccione su área superior utilizando la herramienta Marquesina rectangular.

Paso 46

Haz una nueva capa, colócala detrás de la forma. Rellena la selección con negro. Pulsa Ctrl + T, haz clic derecho y selecciona Perspectiva.

Arrastra sus esquinas superiores hacia afuera.

Haz clic derecho de nuevo y elige Escala. Arrastra el mango superior hacia abajo.

Haz click derecho y elige Deformación. Arrastre el segmento izquierdo y derecho hacia adentro.

Ablandarlo utilizando Desenfoque gaussiano.

Bajar el tono Opacidad a 20%.

Paso 47

Dibuja un rectángulo blanco dentro del fondo. Este será el fondo para el contenido principal del sitio..

Agregue un espacio de 10 px al lado izquierdo, derecho y superior del fondo. El espaciado debe ser fácil porque hemos hecho la guía en los primeros pasos. Añadir Estilo de capa> Resplandor exterior.

Paso 48

Añade una nueva guía, 25 px desde la parte superior de la forma..

Sección de título

Paso 49

Agregue un nuevo estilo de carácter para el título de la sección de la página y su descripción..

Agregue el título de la sección y su descripción usando la herramienta Tipo. Aplica los estilos que hemos realizado anteriormente. Asegúrese de agregar un espacio de 25 px desde la parte superior de su fondo con la ayuda de la guía anterior..

Paso 50

Dibuja una línea de 5 px en la descripción del sitio con Rellenar: # 938270 y Accidente cerebrovascular: ninguno.

Entrada en el blog

Paso 51

Haz otro estilo de personaje para el título del post..

Paso 52

Agrega un título de post y aplica el estilo de personaje anterior.

Paso 53

Dibuja una forma de rectángulo debajo del título con 4 columnas de ancho. Conjunto blanco por su Llenar y #bebebe por su Carrera. Añadir Estilo de capa> Trazo.

Paso 54

Pega una imagen encima de la forma. Convertirlo en máscara de recorte (Ctrl + Alt + G).

Paso 55

Dibuja un rectángulo redondeado con Rellenar: # 8e8380 y Accidente cerebrovascular: ninguno. Convertirlo a Máscara de recorte.

Paso 56

Crea nuevos estilos de personaje para los metadatos del blog..

Paso 57

Agregue texto de metadatos en la parte superior de la forma y aplique el estilo de caracteres que hemos creado anteriormente..

Paso 58

Activar Tipo herramienta y haga clic y arrastre para hacer un cuadro de texto. Establece su ancho en 4 columnas. Hacer clic Tipo> Pegar Lorem Ipsum para llenarlo con Lorem Ipsum generado automáticamente de Photoshop.

Paso 59

Crea un nuevo estilo de párrafo para el contenido del personaje. Haga clic en el nuevo icono en el panel Estilos de párrafo.

Haga doble clic en el estilo de párrafo y use esta configuración siguiente.

Paso 60

Aplica este estilo al contenido del post. También puedes experimentar con sus ajustes de sangría y espaciado.

Para el diseño web, desactivar la separación de palabras..

Paso 61

Dibuja un rectángulo redondeado con Rellenar: # 8e8380 y Accidente cerebrovascular: ninguno. Añadir Estilo de capa> Superposición de patrón. Por consistencia, usa el mismo patrón que en el control deslizante.

Paso 62

Añadir una etiqueta de botón. Te sugiero que lo guardes como un estilo de personaje. De esta manera, podemos usarlo fácilmente para otros botones..

Paso 63

El botón anterior es para condiciones normales. Vamos a duplicarlo y cambiar su color a # f76b6a. Además, establece su tipo de etiqueta en negrita.

Paso 64

Coloca la publicación dentro de un grupo y luego presiona Ctrl + J para duplicarla. Alt-arrastrar para duplicar el grupo.

Repita el mismo paso para hacer más mensajes. Recuerda cambiar la foto y el título de cada post..

Paso 65

Duplicar Lee mas botón y cambiar su etiqueta a número. Lo vamos a utilizar para la navegación de la página. Recuerda configurar uno de los botones para mantener el estado.

Paso 66: Pie de página

Vamos a empezar a trabajar en el pie de página. Añadir un título de widget y su descripción..

Paso 67

Agrega un enlace y dibuja una línea de 1 px debajo de él. Conjunto Relleno: Ninguno y Trazo: # 8e8380.

Paso 68

Hacer clic Mas opciones botón y seleccione Linea discontinua.

Paso 69

Añadir más enlaces en el widget.

Paso 70

Duplicar el widget.

Paso 71

También tenemos que añadir la condición de hover. Establecer uno de los enlaces en negrita.

Debajo de ese enlace activo, agregue una línea de 5 px. Establece su color a # f76b6a. Por coherencia, la apariencia de este enlace es similar al menú activo en la barra de menús.

Paso 72

Agregue otro rectángulo en el área inferior. Establecer su Llenar a # 3d3123.

Información de pie de página

Paso 73

Añadir información de pie de página usando Tipo herramienta. Dale una oscuridad Sombra paralela Para agregar contraste a su fondo.

Red social

Paso 74

Agrega algunos iconos de redes sociales de Daniele Selvitella. Añadir Estilo de capa> Resplandor exterior.

Paso 75

Bajar el icono normal para 50%. Para la condición de hover, vamos a mantener su Opacidad a 100%.

Paso 76

Agarre el icono del cursor de una mano libre y coloque el cursor de la mano más pequeña sobre el enlace activo o flotante.

Resultado final

Este es nuestro resultado final. Puedes ver que la última versión de Photoshop tiene algunas características interesantes para diseñar un diseño web. Los estilos de carácter y los estilos de párrafo son una mejora significativa para todos los diseñadores web.

• Manifestación
• Descargar fuente