Diseño Web – Tutorial Photoshop


Paso 1

Crear un nuevo documento 960 píxeles por 1000 píxeles y RGB. Extraer algunas guías para marcar los límites e ir a Imagen> Tamaño de lienzo para cambiar el tamaño del documento de toma de ancho de la tela “más grande (1460 x 1000 px). De esta manera usted tendrá su diseño centrado en un documento grande y ver cómo se ve en las resoluciones de pantalla ancha. También, elaborar una guía para marcar la altura del encabezado.

Paso 2

Dibuja una guía horizontal en el centro del documento y utilizarlo para llenar el “fondo” de la capa con un color azul oscuro degradado radial (# 0D2B53 – # 010D1F). También estoy agregando algunas guías como los límites del relleno de la página principal de la izquierda y la derecha. Es muy posible que vamos a cambiar la altura del documento más adelante, por lo que añadir una nueva capa de relleno (# 010D1F) por debajo de nuestro “fondo” de la capa.

Paso 3

usaremos imágenes reales en lugar de las nubes filtro clásico. Pegue esta imagen de algunas nubes de tormenta en una nueva capa llamada “Nubes” y cambiar su modo de mezcla de superposición. Luego ir a Capa> máscara de capa> Ocultar todo, y dibujar un degradado radial de blanco a negro (# FFFFFF – # 000000), que va desde la parte superior media a casi la mitad inferior. A continuación, ajuste el “Nubes” niveles un poco para que las nubes más oscuras.

Paso 4

Ahora pega este horizonte de Niza de una playa española en una nueva capa llamada “horizonte”. A continuación, cree una nueva capa de ajuste> Mezclador de canales … y seleccione Blanco y Negro con filtro azul (RGB). Luego de aplicar en este sentido sólo para el “skyline” de la capa en la paleta de capas, mantenga pulsada la tecla Opción y haga clic entre la capa Mezclador de canales y la capa de “horizonte”. Por último, cambiar el “skyline” de la capa de mezcla a modo de superposición.

http://psd.tutsplus.com/tutorials/interface-tutorials/photoshop-web-design-night-theme/

Paso 5

Aplique una máscara de capa> Descubrir todas a la “skyline” de la capa. Luego, utilizando un gran y negro (# 000000) brocha suave para ocultar los bordes de la imagen, a continuación, seleccione un pincel Grunge (estoy usando este cepillo de Grunge establecidos por Kelzky13 , especialmente cepillos 250 y 181) y hacer que los bordes un poco más irregulares.

Paso 6

Ahora escriba el título de “Magic” con la fuente Scriptina. A continuación, aplique los estilos de capa se muestra a continuación: un resplandor exterior (# 9EB6D0) y un gradiente de superposición (# 70ABF6, # FFFFFF, # B4CBE7, a # FFFFFF). Además, ahora es un buen momento para organizar el diseño de nuestro desarrollo en carpetas. Ponga todas las capas en una nueva carpeta llamada “Fondo” y el texto dentro de otra carpeta llamada “Logo”.

Paso 7

Ahora vamos a añadir algunas estrellas a nuestro diseño, se puede usar cualquier cepillo conjunto de estrellas, pero estoy usando esta serie: campo de cepillos estrellas por BL1nX . Luego, utilizando el pincel 550 de la serie, pintar las estrellas en blanco (# FFFFFF) en una nueva capa dentro de una carpeta llamada “Stars”. Tenga en cuenta que me estoy poniendo la estrella más brillante en el punto de la i. A continuación, aplicar un gradiente de superposición con tres colores (# 3A8FEF, # FFFFFF y # 66C9FC) a la “Stars1” capa.

Paso 8

A continuación, utilizando el pincel 615 del campo de estrellas establecidas, añadir más estrellas que el cielo en una nueva capa llamada “Stars2,” y luego con un paño suave goma de borrar, eliminar las estrellas en los edificios. A continuación, agregar un resplandor exterior (# 8AB2FF) para “Stars2”.

Paso 9

Añadir más estrellas a la “Estrellas 2” de la capa en todo el diseño, a continuación, utilizando la herramienta Borrador, eliminar algunas áreas de las estrellas. Por último, aplicar un efecto de superposición de degradado a “Stars2” capa, usando cuatro colores: 6AB1D1 #, # FFFFFF, # 94CFED, y # FFFFFF.

Paso 10

Ahora descargar estos pinceles estrellas por jen-ni y mantener las escobillas de mano, porque vamos a utilizar varias veces en este tutorial. Seleccione un cepillo px 65 (estoy usando el número 148) y dibuje un blanco (# FFFFFF) estrellas en una nueva capa justo por encima del punto de la i. A continuación, aplicar un resplandor exterior (# 00BCF9) a la estrella para que sea más brillante.

Paso 11

Duplicar la “magia” del texto, seleccione el texto, y escriba la palabra “noche” en su lugar. A continuación, establecer el Resplandor exterior a blanco (# FFFFFF) y la superposición de degradado de tres colores (# F9DA5B, FEAE00 # y # FFD403), ver la imagen a continuación para verificar el filtro de los valores.

Paso 12

Vamos a añadir algunas nubes a nuestra noche! Descargar redheadstock de nubes II pinceles. A continuación, seleccione el número de cepillo 2464 y establecer su tamaño a 960px (anchura de juego principal de la presentación del diseño). Ajuste el color a # 234B7F y pegar una sola nube en una nueva capa llamada “cloud1”. Para mantener las capas organizada, me estoy poniendo las nubes en una carpeta separada dentro del “fondo” carpeta. Ahora estire el “cloud1” altura un poco.

Paso 13

A continuación, Dodge y Burn de la nube un poco. Tenga en cuenta que soy un rayo las zonas próximas a la estrella logotipo y oscurecimiento de la parte inferior de la nube. Además, cambia la “cloud1” Opacidad al 50%.

Paso 14

Añadir una nube más en una nueva capa llamada “cloud2”. Usted puede utilizar cualquier nube que está buscando, pero el uso de este color como un primer plano: # 5F83A5. Dodge la parte inferior de la nube un poco para mejorar la sensación de iluminación.

Paso 15

Repita el paso anterior pero esta vez con otro cepillo con este color: # 36638C y colocarlo encima de la “cloud1”. Cambiar su tamaño, a continuación, Dodge y / o grabación de la nube si es necesario.

Paso 16

Seleccione una gran goma de borrar blanda y eliminar la parte inferior de la “cloud1” capa para crear un efecto de fade out.

Paso 17

Esto es realmente un paso fundamental, vamos a agregar el fondo contenedor principal, nunca hay que olvidar que está diseñando para la web. Con la herramienta Rectángulo, dibuje un rectángulo de vectores (# 0A1D37) en una nueva capa debajo de todas las “nubes” carpeta. Tenga en cuenta que mi rectángulo está dentro del relleno de las guías. A continuación, seleccione la capa rectángulo e ir a Capa> Máscara> Mostrar todo … y dibujar un gradiente de blanco a negro, que añade un buen efecto en la parte superior del rectángulo. Por último, la caída de una Guía por debajo del rectángulo de fundido de entrada, que nos ayuda cuando pasamos este diseño en HTML + CSS. Comunicación, que a partir de la guía para la parte inferior del color de fondo debe ser liso.

Paso 18

Ahora añade otro rectángulo pero esta vez como la barra lateral de fondo, de nuevo ayudarse a sí mismo con una guía, y el uso del color # 091525. Luego, se aplican al nuevo rectángulo una máscara de capa un poco al igual que en el paso anterior.

Paso 19

En este punto, tenemos el fondo de la cabecera básica hecho. Ahora es el momento de añadir algunos detalles. Voy a poner un único icono de RSS en la cabecera. Copia esta imagen de la luna llena y pegarlo en una nueva capa llamada “luna-rss”. A continuación, modifica el Tono / Saturación para hacer la luna un poco más amarillo, y agregar tanto interno y filtros Resplandor exterior (ver los valores que aparecen más abajo).

Paso 20

Agregar una forma pequeña nube con el color # 7997B3 en una nueva capa por encima de la luna en la paleta de capas. Luego, utilizando una gran goma de borrar suave, eliminar algunas áreas de la nube de nuevo.

Paso 21

Añadir el RSS de forma clásica (# DCA30B) en una nueva capa en la parte delantera de la “luna” de la capa, pero detrás de la “nube” de la capa. A continuación, se le aplican los filtros de abajo (una superposición de degradado, un resplandor exterior y una gota de sombra). Por último, agregue una estrella en algún lugar sobre la forma de RSS (vea el paso 10).

Paso 22

Pegar la imagen en una nueva capa, vamos a utilizar como fondo de nuestras páginas barra de navegación principal. Dado que la imagen original es un poco estirado, tenemos que hacerla más amplia, he jugado con ambas selecciones y el movimiento (Transformación libre) herramienta para aumentar el desplazamiento de ancho. A continuación, la deformación de desplazamiento un poco con la urdimbre de la bandera.

Paso 23

Dodge algunas zonas de la voluta para aumentar las sombras y para mejorar la ilusión de la urdimbre.

Paso 24

Para mejorar el desplazamiento de la textura, aplicar una superposición de degradado filtro (045F96 # y # FBF4BD) y una superposición de patrones también.

Paso 25

Ahora agregue una gota de sombra a la de desplazamiento. Usted puede utilizar el filtro Sombra o hacer lo que hice, duplicar la capa de desplazamiento, y en Tono / Saturación ajustar el aligeramiento a -100, Blur la copia negro un poco y distorsionar con la herramienta Transformación libre para que sea irregular.

Paso 26

A continuación, agregue una nube sobre el libro, Dodge, Grabar y Eliminar al igual que en el paso 15. A continuación, agregue el texto del enlace Páginas usando Georgia – fuente en cursiva. Utilice el color # 0B1827 de los enlaces estándar, y el color # 211808 para el enlace de vuelo estacionario. Además, agregue algunos detalles adicionales como las estrellas en el fondo y una línea como el efecto hover.Usted puede ver la estructura de las capas en la parte inferior de la imagen de abajo.

Paso 27

Como detalle final de la barra de navegación de las páginas, crear una nueva capa sobre el libro y con un cepillo las partículas, trace una línea como lo es una acuarela (ver imagen abajo). Hazlo unas cuantas veces más, pero con colores diferentes. Además, por la barra de navegación de “Estrellas” opacidad por debajo del 40%.

Paso 28

Agregue el texto relacionado con el RSS. Estoy utilizando el 10 px Aria, con el amarillo (# F2C90D) y blanco (# FFFFFF). No se olvide de establecer el método anti-aliasing en Ninguno, porque la mayoría de los navegadores hace que el texto sin ningún tipo de anti-aliasing (IE7 y Safari son las excepciones).

Paso 29

Como un detalle adicional añadir esta imagen de un globo bonito. Extraer el globo de su fondo y colocarlo en algún lugar debajo del logotipo, agregar un color de superposición (# 1F416E – Modo de fusión: Superposición) para el “globo” de la capa para que coincida con los colores de la escena. Además, puede grabar el lado izquierdo del globo es sólo un poco.

Paso 30

A continuación con el pincel 615 de los cepillos campo de estrellas (añadir más estrellas por encima del balón y el desplazamiento. También estoy agregando un acorde con el balón en la pintura una línea curva blanca con un pincel de 3 px sólidos. Asimismo, el uso de la goma de borrar, aquí y allá para reducir la cantidad de estrellas.

Paso 31

Es el momento de añadir un puesto. En primer lugar, añadir el título y la fila de los metadatos en una nueva capa llamada “Post”. Ver la imagen de abajo para ver los valores de caracteres. Además, estoy agregando una pequeña estrella cerca de los metadatos como un detalle visual.

Paso 32

Vamos a añadir más información en el “Post” carpeta, ya que la lista en la página web tendrá una vista previa del mensaje varias. Vamos a añadir una imagen de previsualización a la izquierda (200 px por 200 px con un efecto de trazo 1px) y un breve texto de la derecha. Además, vamos a añadir una vista previa de cómo muchos comentarios el puesto tiene en la parte superior derecha. Para el campo de comentarios, crear una nueva carpeta llamada “Comentarios” y añadir un fondo pequeño con una nube de pequeñas y algunas pequeñas estrellas. Básicamente, sólo tiene que repetir uno de los pasos anteriores, cuando estábamos diseñando el encabezado, pero en una medida pequeña. Luego agregar el número de observaciones y los comentarios la palabra a continuación.

A continuación, agregue una línea de etiquetas por debajo del mensaje y agregar una pequeña estrella a la derecha de esa línea. Agregar un campo de estrellas poco como un fondo para el puesto, sólo si así lo desea. Finalmente, dibuje un separador (# 1D324F) para el puesto con la herramienta Línea.

Luego duplica el “Post” carpeta y editar las copias para crear dos o tres puestos diferentes. Es muy posible que la altura de su documento es necesario aumentar en este momento, sólo lo hacen utilizando la herramienta Recortar o Imagen> Tamaño de lienzo, sobresalen como en el paso 1. Cuando se ha cambiado el tamaño de su documento principal, aumentar la altura de ambos el fondo principal y el fondo barra lateral también.

Paso 33

Vamos a trabajar en la barra lateral ahora. Vamos a agregar el formulario de búsqueda. Crear una nueva carpeta llamada “Barra lateral” y dentro de ella crear otra carpeta y el nombre de “Buscar”. Dibujar una nube en esa carpeta y esquivar y fresa para hacer que se vea como la imagen siguiente. Luego, utilizando la herramienta Rectángulo redondeado, dibuje un rectángulo sobre la nube. Aplicar un efecto de trazo 1px interior (# 697372) al rectángulo y cambiar su valor de relleno a 50%.

Paso 34

Agregue un poco de estrellas blancas por encima de la capa de nubes de usar cualquier capa de campo de estrellas, recuerde borrar todas las estrellas adicionales. Luego duplica, reducir y Edición> Flip horizontal del “globo” de la capa del paso 29. Póngalo en la “búsqueda” de carpeta. Además, agrega el texto del título con Georgia en cursiva y de color amarillo agradable (# D5A934) de color. A continuación añadimos las instrucciones de búsqueda y el botón “Go!”. Usted puede ver el carácter de los valores en la parte inferior de la imagen siguiente. Como detalle final dibujar una estrella brillante detrás del texto.

Paso 35

Agregue el texto contenido secundario, títulos, enlaces y poner a cada sección en una carpeta separada.Además, agregue un fondo de estrellas de campo suave en cada carpeta y una estrella brillante detrás de cada título. Además, agregue una estrella brillante como un ejemplo del efecto de suspender en cualquier enlace. No se olvide de tanto relleno y guías de márgenes.

Paso 36

Estamos llegando al final. Vamos a añadir un pie de página de la barra lateral. En primer lugar, se desvanecen un poco de la parte inferior de la pintura de fondo de la barra lateral con un cepillo suave en su máscara de capa. A continuación dibuje una pocas nubes, a continuación, Dodge y Burn ellos.Asegúrese de que las nubes no invaden el fondo el contenido principal o sobrepasen el ancho de la barra lateral. A continuación, agregue un campo de estrellas blancas detrás de las nubes y duplicar el balón una vez más. Estoy ahorrando todo esto en una carpeta llamada “Barra lateral Pie”.

Paso 37

Por último, vamos a crear el pie de página. En primer lugar en la máscara de la capa de fondo el contenido principal con un pincel grande y suave, ocultar la parte inferior para que desaparezca. A continuación, seleccione algunos pinceles y pintura nube de todos ellos en la parte inferior del diseño. Soy la combinación de azul oscuro grande (# 0B1C38) nubes y pequeños azul # 223E63 nubes), como se muestra en las imágenes de abajo. Recuerde que las nubes se convertirá en una imagen de fondo, así que trate de no cruzar la Guía entre el contenido y el pie. Además, recuerde que debe poner todas las capas relacionadas con el pie de página en una nueva carpeta llamada “pie de página.”

Paso 38

Grabar el más ligero de nubes. Luego, pintar un campo de estrellas blancas utilizando cepillo de 615 de las estrellas establecidas. A continuación, pintar un campo de estrellas brillantes con un cepillo diferente, en este caso el número 656 de la serie. Por último, elimine el campo de estrellas con una goma de borrar blanda grande.

FINAL

Anuncios

7 comentarios en “Diseño Web – Tutorial Photoshop

  1. Excelente tutorial y blog profe.! estoy aprendiendo poco a poco todo sobre diseño web..
    quisiera conversar con usted..Lo voy a ubicar por su facebook. Saludos.!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s