Está en la página 1de 16

Paso 1

Descargar el siguiente archivo que contiene la plantilla con la que trabajaremos: Descargar plantilla

Este sistema se utiliza mucho en el diseo web, porque es ms rpido que hacer su propia red, por supuesto, pero tambin porque contiene los tamaos y proporciones universales. Esto significa que siempre est seguro cuando se usa esta plantilla y no va a terminar con un diseo que es demasiado grande para la pantalla. Tambin las cuadrculas se hacen con las dimensiones perfectas para los propsitos estticos. Cambiar el tamao del lienzo del documento a la anchura px 1200 y 600 de altura px. Puede ocultar la cuadrcula, por ahora haciendo clic en el ojo al lado de la carpeta de la cuadrcula.

Paso 2
Crear una nueva capa y llenarla completamente con el color # dfdfdf

Paso 3

Duplicar esta capa y tomar la herramienta Mover (V) Asegrese de tener la capa superior seleccionada y elegir uno de los cuadrados de las esquinas de la estructura. Puede que tenga que alejar un poco para verlos.

Ahora mantenga pulsada la tecla Mays y Alt y hacia el interior de arrastre con el ratn hasta conseguir algo parecido a esta proporcin.

Cambiar el color de este nuevo marco ms pequeo a # d0d0d0

Paso 4
Elige la herramienta Rectngulo redondeado y establecer el radio de 10 (se puede hacer en la parte superior de la ventana). Ahora dibuja una barra horizontal como sta (que es de 30 pxeles de alto) Presione Ctrl / Cmd +, para mostrar las guas (o visualizarlos a travs del men) y hacer que los lados de la barra toquen estas guas:

Agregue los siguientes estilos de capa:

Lo que debera quedar as:

Paso 5
Duplicar la barra que acabamos de crear (Ctrl + J) y elegir la herramienta Marco Rectangular (M) Seleccionar todo, desde la izquierda a la derecha, excepto la ltima parte, por lo que slo la parte de color rosa en la siguiente imagen se mantiene:

Ahora escoja la herramienta goma de borrar y haga clic una vez, un cuadro de dilogo se abrir y Aceptar, luego pulse Retroceso para borrar todos los restantes. Agrega estos estilos de capa: (El degradadoes de los mismos colores de la barra, pero al revs, as que es posible que desee copiar y pegar el estilo de capa) (Color de trazo es # b8b8b8)

Paso 6
Duplicar este pequeo botn y girar 180, y luego moverlo al lugar en el lado izquierdo. De esa manera se debe crear dos extremos idnticos en la barra.

Paso 7
Vamos a aadir algunas flechas en los botones. Toma la herramienta Forma personalizada (oculta bajo la herramienta Rectngulo) y coger el tringulo agudo. Establezca su color en: # a9a9a9

Dibuje un rectngulo muy pequeo en la parte superior del botn (zoom para una mayor precisin). Girar 90, mientras presionas la tecla shift y luego duplicarlo con Ctrl / Cmd + J, a continuacin, pasar al lado del otro con las flechas de tu teclado.

Seleccione las dos capas con las flechas, mientras que presionando ctrl / cmd (por lo que el original y el duplicado una) y pulse Comando / Ctrl + E. Ahora duplicar esta capa fusionada de nuevo y girarlo 180A con el fin de colocarlo en el otro lado de la barra. This will result in: Esto resultar en:

Paso 8
Elige la herramienta Elipse y dibuje un crculo (mientras mantiene Shift) en la parte superior de la barra. Hacer de modo que la parte superior e inferior del crculo se superpongan a la barra un poco.

Paso 9
Agrega estos estilos de capa: (El degradado va de # a # e7e7e7 f2f2f2) (Color de trazo es # e9e9e9)

Resultado hasta el momento:

Paso 10
En este punto tenemos que utilizar las guas de nuevo. No es necesario para mostrar la carpeta de capas, pero slo muestran las guas de nuevo. Tome la herramienta de texto y guardarlo en Arial pero con un tamao de 14 pt. Trabaja con 2 dgitos para que todo se vea mejor y colocarlos entre las guas en la parte superior de la barra, como se muestra aqu:

El 05 se pone en la parte superior del crculo, es probable que necesite ajustar la posicin del crculo. 05 est escrito con un tamao de 18 puntos.

Paso 11
Las imgenes que se muestran son de su eleccin. Busqu algn vehculo. Asegrese de que su imagen es lo suficientemente grande como para cubrir el marco. Siempre cambiar el tamao de una imagen con una esquina mientras mantiene nob cambio de mantener sus proporciones. Evite tambin la ampliacin de las imgenes originales, slo si es necesario reducir el tamao (que es slo para la calidad de imagen, por supuesto). Comando / Ctrl + clic en la miniatura de la capa con el marco para convertirlo en una seleccin. Asegrese de que su capa de la imagen est seleccionada y pulse Comando / Ctrl + I para invertir la seleccin. A continuacin, borrar los restos. Al lado de la barra se puede poner un logotipo o el nombre de coresponding del autor.

Paso 12
Ahora estamos en la etapa final. Volver a la primera capa que hemos creado capa. En medio de la capa de fondo se realiza de forma manual (por lo que no s un fondo estndar) y el gran rectngulo en la parte superior de la misma, tenemos que poner una sombra. Elige la herramienta Elipse y establecer el color a negro. Dibujar una elipse larga y plana en la parte inferior del rectngulo. (Si no consigue negro, asegrese de que desactiva todos los estilos en el barra de la configuracin de la parte superior). Ahora agregue un desenfoque gaussiano con un radio de 9 a 10px.

Definicin de la opacidad a 50%. Y mire lo que usted prefiera, a veces puede ser ms adecuado si se mueve la sombra por un poco

Resultado
Eso es todo, ya est terminado! Se trata de un diseo limpio con todo tipo de blancos y grises. Siempre se puede cambiar los colores con las mismas proporciones que se utiliz aqu, pero tener en cuenta que un color neutro como negro, gris y blanco se ajusta a todas las imgenes. Es muy til para recordar y practicar este estilo y los efectos de esos porque estn acostumbrados tan a menudo en el diseo web actual. Se convertir en un gran ahorro de tiempo cuando se domina esto.