En este tutorial de diseo paso a paso de diseo web, se puede descubrir un mtodo para el diseo de un blog de diseo limpio

con una pendiente impresionante y efectos de iluminacin utilizando Adobe Photoshop. Este tutorial est dirigido a usuarios de principiante a intermedio de Photoshop.

Resultado final
Para ver el producto terminado, haga clic en la siguiente imagen para ver la versin a gran escala .

Descargar el archivo de origen

El archivo PSD est disponible para su descarga y estudio. limpia-blog-design.zip (ZIP, 0.74 MB)

Configuracin del documento de Photoshop

1 Abrir Photoshop, crear un nuevo documento que es 1000px de altura 1300
pxelesde ancho, y con un fondo blanco ( # FFFFFF ).

La creacin de la seccin de banner rotador

2 Crear una nueva capa en la parte superior de la capa de fondo. Seleccione la
herramienta Marco Rectangular (M) y crear una seleccin rectangular sobre el lienzo dejando un 50px brecha en la parte superior. La altura del rectngulo debe estar alrededor de 250px - 275px .

3 Ajuste el color de fondo a # 00C0FF . Haga doble clic en la capa para abrir el
cuadro de dilogo Estilo de capa y luego agregar una superposicin de degradado estilo de capa con los valores que se muestran en la siguiente figura.

Usted debe tener algo como esto:

Creacin de efectos de iluminacin de la bandera

4 Crear una nueva capa. Seleccione la herramienta Elipse en el panel de
herramientas y crear una elipse sobre el banner que es aproximadamente entre 250px - 275px de ancho, utilice la siguiente figura como gua.

5 Seleccione la capa ms baja y el relleno a 0% .

6 Haga doble clic en la capa para abrir el cuadro de dilogo Estilo de capa y
luego aadir los estilos de capa se muestra en la siguiente figura.

Usted debe obtener algo como esto:

7 Crear una nueva capa y seleccione tanto la nueva capa y la capa Elipse
manteniendo pulsada la tecla Ctrl / Cmd y haga clic en las miniaturas de las capas en el panel Capas.

8 Haga clic en las capas en el panel Capas y seleccione Combinar capas .

9 Seleccione la capa fusionada en el panel Capas y ajustar su modo de fusin

de Normal a Overlay .

Ahora debera tener algo como esto:

Creacin de botones de la bandera de los rotadores

10 Seleccione la herramienta Elipse y crear una 20px amplio crculo, mantenga
pulsada la tecla Mays para que sea perfectamente circular. En el panel Capas, bajar la opacidad al 60% .

11 Duplicar la capa haciendo clic derecho sobre la capa en el panel Capas y

elijaDuplicar capa . Utilice la herramienta Mover (V) para mover los crculos a cada lado de la tela hacia abajo a mitad de camino en el fondo superior del rotador de Banner.

La construccin de la barra de navegacin

12 Seleccione la herramienta Marco Rectangular (M) y crear una seleccin
rectangular sobre el lienzo en el banner rotador. La altura del rectngulo debe estar alrededor de100px - 200px .

13 Crear una nueva capa. Seleccione Edicin> Rellenar y completar la

marquesina de seleccin rectangular con cualquier color. El color de fondo a # 000000 . Establecer la opacidad de la capa en el panel Capas para el

15% . Haga doble clic en la capa y abrir la caja de dilogo de estilos de capa y luego agregar una superposicin de degradado estilo de capa, como se muestra en la figura siguiente.

Ahora debera tener algo como esto:

La creacin de los cuadros de contenido

14 Seleccione la herramienta Rectngulo redondeado desde el panel de
herramientas.Establecer el radio de la herramienta para entre 5px 10px (dependiendo de la cantidad que desee de las esquinas se va a redondear) en la barra de opciones. Crear una gran caja de 600px por 800px . Este ser el fondo del rea de contenido.

15 Haga doble clic en la capa para abrir el cuadro de dilogo Estilo de capa y
luego agregar una carrera estilo de capa con los valores que se muestran en la siguiente figura.

Usted debe tener algo como esto:

16 Seleccione la herramienta Marco Rectangular (M) y crear un rectngulo

sobre la parte superior del rectngulo redondeado.

17 Con el rectngulo an seleccionado, crear una nueva capa. Utilice la

herramienta Degradado (G) para crear un Negro (# 000000 ) a transparente gradiente lineal va hacia arriba (vase la figura siguiente).

18 Haga clic en la capa con el rectngulo redondeado (la que creamos en el

paso 14) en el panel Capas para seleccionarla. Ahora elija la herramienta Magic Wand (W) y haga clic en la parte exterior de la forma.

19 Con el rea seleccionada, haga clic en la capa con el gradiente lineal (paso
17) en el panel Capas. Pulse la tecla Supr para eliminar el rea debajo de la seleccin varita mgica.

20 Repita los pasos 14 - 19 para crear ms cuadros de contenido segn sea

necesario. En la figura siguiente, he creado dos cuadros de contenido en la barra lateral utilizando el mismo mtodo anterior.

La creacin de la seccin de pie de pgina

21 Seleccione la herramienta Marco Rectangular (M) y crear una seleccin
rectangular en la parte inferior de la tela. La altura del rectngulo debe estar alrededor de 70px - 90px . El color de fondo a # D9D9D9 .

Toques finales

22 Para condimentar este diseo para arriba, llenar su cabecera, banner,

navegacin, cajas de contenido y pie de pgina con texto falso y fotografas.

Banner:
Yo puse una captura de pantalla de esta maqueta de la derecha, y se utiliza la herramienta de tipo horizontal (T) para escribir algo de blanco (# FFFFFF ) texto.

Navegacin:
Texto de navegacin es simple, para simular texto HTML, eleg en negrita Arial con anti-aliasing mtodo en la barra de opciones establecido en Ninguno .

Cajas de contenido:
Aqu usted puede ver que he puesto simplemente un texto ms ficticio en el rea de contenido mediante la herramienta de tipo horizontal (T). Para obtener un poco de texto de relleno para copiar y pegar, la cabeza hacia el generador de Lipsum sitio.

Recuadro:
El cuadro de contenido por primera vez en la barra lateral utiliza un pequeo texto suavizado. Tambin coloc una imagen hay que pueda sustituir para mostrar un logotipo o una foto de usted / de su empresa. El cuadro de la barra lateral de contenidos segunda es para los anuncios de banner.

Pie de pgina:
He incluido algunas informaciones de derechos de autor en el pie de pgina.

Encabezado:
Slo un logotipo sencillo que se puede sustituir por el suyo propio.

Usted debe tener algo como esto:

Felicitaciones, usted ya est listo!

Si ha seguido a lo largo del tutorial, tienes que venir con algo que se parece a la figura siguiente, haga clic en l para ver la versin a gran escala .