El post que buscas se encuentra eliminado, pero este también te puede interesar

Crear Un Sitio Web Con Adobe Photoshop (Paso a Paso)

Anuncios

CREAR UN SITIO WEB EN PHOTOSHOP

Crear Un Sitio Web Con Adobe Photoshop (Paso a Paso)


Paso 1: Crear un nuevo documento de Photoshop

Vamos a empezar por crear un nuevo documento (Comando / Ctrl + N). Establecer el ancho de 1000px y la altura de 950px. Asegúrese de que el modo de color se pone en RGB color.


web


Haga doble clic sobre la capa de fondo por defecto y pulsar Intro en la ventana de diálogo Nueva capa que se abre, para desbloquear la capa de fondo.
Haga doble clic sobre la capa de fondo de nuevo (que, por defecto, se cambia el nombre a "Nivel 0" cuando se abre) para que aparezca la ventana de diálogo Estilo de capa. Nuestro diseño debe tener un color de fondo gris claro, por lo que le dará una superposición de color establecido en # EBEBEB.


crear


Después de aplicar la superposición de color, convertir la capa en un objeto inteligente haciendo clic derecho sobre él en el panel Capas y elija Convertir en objeto inteligente en el menú que aparece.
Con la capa todavía la capa activa, vaya a Filtro> Ruido> Añadir. Establecer la cantidad de 2% para dar el fondo una textura sutil, granulada.


una


Paso 2: Creación de patrones personalizados Photoshop

Vamos a crear tres diferentes patrones personalizados para su uso en el diseño web. Para ello, tendremos que crear tres nuevos documentos de Photoshop.
Patrón 1

El primer documento de Photoshop vamos a crear tendrá un tamaño de lienzo de 38 × 38px.


pagina


Utilice la herramienta Marco Rectangular (M) / Transformación libre (Comando / Ctrl + T) o la herramienta de lápiz para crear un patrón diagonal a la siguiente imagen (la imagen de abajo es el zoom). Asegúrese de que la capa de fondo es transparente, y si no, basta con borrar la capa de fondo por defecto.
Seleccionar todo (Comando / Ctrl + A) e ir a Edición> Definir motivo. Guarde su patrón.


photoshop


Patrón 2

A continuación, vamos a crear un documento de 3 x 3px Photoshop.


en


Utilice la herramienta Marco Rectangular (M) (es posible que desee establecer la opción de estilo de tamaño fijo, y luego utilizar una anchura y altura de 1px), crear tres plazas de negro, como se muestra a continuación. De nuevo, asegúrese de que el fondo es transparente, seleccione todos (Comando / Ctrl + A) e ir a Edición> Definir motivo para guardar el patrón.


cs4


Modelo 3

Por último, vamos a crear un documento de 130 × 20 píxeles de Photoshop para nuestro modelo de encargo de terceros.


CS5


Crear una nueva capa (Comando / Ctrl + Shift + N) y dibuje un círculo con la herramienta Marco elíptico con la opción de estilo establecidas a tamaño fijo, con la anchura y la altura a 20 píxeles.
Rellene el círculo con el negro por la elección # 000000 como el color de primer plano y luego pulsando Opción / Alt + tecla de retroceso (de acceso directo para rellenar una selección con el color de primer plano).
Ir a Seleccionar> Todo para cargar una selección alrededor de todo el lienzo, ir a Capa> Alinear capas de selección> Centros horizontales a la posición del círculo en el centro, y luego ir a Capa> Alinear capas de selección> Bordes inferiores para localizar el círculo en la parte inferior del lienzo.
En una nueva capa, crear otra forma, esta vez un rectángulo negro, con las dimensiones de 20 píxeles (ancho) y 120px (altura). Alinear el rectángulo a la parte superior del lienzo.
Guarde la ilustración que hizo como un patrón.


Crear Un Sitio Web Con Adobe Photoshop (Paso a Paso)


Paso 3: Crear la Sección de Cabecera

Vuelva a su documento principal de Photoshop. Crear una nueva capa y el nombre de "cabecera". Crear un alto 130px y 100% selección rectangular de ancho en la parte superior del lienzo. Vaya a Edición> Rellenar para abrir la ventana de diálogo de relleno. En la opción Usar, elija Patrón y, a continuación seleccionar el tercer patrón que hicimos en el paso anterior. Pulse Aceptar para completar la selección rectangular con nuestro modelo.


web


Ahora haga doble clic en la "cabecera" de la capa para que aparezca la ventana de diálogo Estilo de capa. Dar a esta capa una superposición de degradado (la configuración se muestra a continuación).


crear


Convertir la "cabecera" de la capa a un objeto inteligente y rasterize (clic derecho sobre la capa y elija Capa Rasterizar en el menú que aparece).
Ir a Filtro> Ruido> Añadir ruido, el uso del 2% para la cantidad. Duplicar la "cabecera" de la capa (Comando / Ctrl + J), y luego cambiar el nombre de la capa duplicada a "bandas delgadas".
Comando / Ctrl + clic en el icono de la "rayas delgadas" capa a cargar una selección alrededor de él. Presione la tecla Supr para eliminar el área seleccionada. Rellenar el área seleccionada con el segundo patrón que hemos creado en el paso 2.


una


Duplicar la "cabecera" de la capa de nuevo y cambiar el nombre de "rayas de espesor". Esta nueva capa debe estar por encima de la "cabecera" de la capa, pero por debajo de la "bandas delgadas" capa. Comando / Ctrl + clic sobre la capa para cargar una selección alrededor de sus contenidos y pulse Suprimir para eliminar el área seleccionada. Mantenga su selección activa. Rellenar el área seleccionada con el patrón de rayas gruesas (el primer patrón que hemos creado en el paso 2).
Seleccione las 3 capas, pulse Comando / Ctrl + G para colocarlos en un grupo de capas, y establecer el modo de grupo de capa de mezcla a superposición. Ajuste la opacidad de las "rayas de espesor" de la capa a un 3% y establecer la opacidad de la " rayas delgadas "capa al 15%.


pagina


Ahora descarga la muestra gratuita (o comprarlo, no es caro y definitivamente vale la pena) del Grunge Rasguños metal cepillos. Instale el paquete de cepillo. Crear una nueva capa, defina el color frontal en blanco (# FFFFFF), cambie a la herramienta Pincel (B), seleccionar un cepillos de metal algunos de cero, y aplicarlo en nuestra sección de encabezado. A continuación, ajuste la opacidad de la capa de arañazos al 15%.


photoshop


Paso 4: Añadir el logo del sitio

En primer lugar, necesitamos guías de Photoshop para ayudarnos a hacer las alineaciones perfectas. Vamos a añadir dos guías verticales en 20px y 980px, y una guía horizontal a 65px. Vaya a Ver> Guía nueva para crear las guías de precisión.
Utilice la herramienta de tipo horizontal (T) para escribir el nombre del sitio. He utilizado la libertad de langosta en el tamaño de la fuente 50pt, y el texto, "Calaka".


en
Dar la capa de texto una gota de sombra (la configuración se muestra a continuación).


cs4


Duplicar la capa de texto (Comando / Ctrl + J), claro el estilo de capa en la capa duplicada haciendo clic derecho sobre él y eligiendo Estilo de capa transparente, entonces rasterizar la capa.
Comando / Ctrl + clic en la miniatura de la capa a cargar una selección de todo el texto, a continuación, pulse Eliminar para eliminar el área seleccionada. Rellenar el área seleccionada con el segundo patrón que hicimos en el paso 2. Luego, cambiar a la herramienta Mover (V) para mover el patrón de rayas finas sobre la derecha y 4px 4px abajo. Haga doble clic sobre la capa para acceder a la ventana de diálogo Estilo de capa, y luego darle una superposición de color de blanco (# FFFFFF).


CS5


Crear una nueva capa. Cambiar a la herramienta Pincel (B) (valores que se muestran a continuación) y haga clic una vez para dar a la zona donde el logo es un resplandor blanco. Establecer el modo de la capa de brillo blanco de fusión a Superponer y reducir la opacidad al 40%.


Crear Un Sitio Web Con Adobe Photoshop (Paso a Paso)


Paso 5: Crear la barra de navegación

De la barra de navegación, vamos a tener cuatro enlaces (siéntase libre de añadir más): "Inicio", "Acerca de", "Carpeta", y "Contacto". He utilizado el (libre) Bebas fuente con tamaño de letra 20 pt en. Escribir los vínculos con la herramienta de tipo horizontal (T) en las capas de texto diferentes. Seleccione todas las capas de texto, e ir a Capa> Alinear> Centros verticales para alinear en una fila. Utilice la herramienta Mover (V) a la posición de los enlaces de tal manera que darles un poco de espacio en blanco entre ellos.
Uso de la herramienta Rectángulo redondeado para crear un fondo para el enlace "Inicio", el fondo de un rectángulo redondeado servirá como referencia visual para referirse a la página que el usuario se encuentra en.
web


Dar el fondo rectángulo redondeado una superposición de degradado, Resplandor interior y Accidentes Cerebrovasculares.
Superposición de degradado

crear


Carrera

una


Resplandor interior

pagina


A continuación, cambiar el modo de la capa de mezcla a superposición y la opacidad de la que aproximadamente un 62%. También he añadido sombras caída en los enlaces para darles un poco de profundidad.


photoshop


Paso 6: Crear el texto de introducción


La cabecera se ha completado. A continuación, vamos a crear la sección de texto de introducción debajo de la cabecera. El usuario debe saber de inmediato que él o ella está tratando, por lo que vamos a añadir una introducción de los grandes / saludo. He utilizado la fuente Bebas (igual que en el menú de navegación) en 100pt para el texto, y me acaba de escribir "Hey There" para el título del texto de introducción.


en


Dar la capa de texto un degradado de color de negro a gris oscuro.


cs4


Rasterizar la capa de texto y luego ir a Filtro> Ruido> Añadir ruido (uso de un 3% de la cantidad para darle una textura sutil). Haga doble clic en el "Hey There" de la capa de nuevo para abrir la ventana estilo de capa, a continuación, dar la capa de una sombra blanca.


CS5


Duplicar la capa (Ctrl / Cmd + J), claro el estilo de capa en la capa duplicada, luego Comando / Ctrl + clic en la miniatura de la capa duplicada para cargar una selección alrededor de nuestro texto. Presione la tecla Supr para eliminar el área seleccionada, y luego rellenar el área seleccionada con el patrón de rayas finas a medida que creamos en el paso 2. Arrastre la capa por debajo de la banda "Hey There" de la capa, y moverlo 4px hacia abajo ya la derecha para crear un efecto de sombra patrón.


Crear Un Sitio Web Con Adobe Photoshop (Paso a Paso)


Escribir un poco de copy Introducción a la derecha de la "Hey There" la partida. Introducción a la copia de color verde oscuro color de superposición (# 797c26). Para darle un poco de profundidad, añadir una sombra 1px así (la configuración se muestra a continuación).


web


Paso 7: Crear un divisor elegante

Para separar la introducción del contenido principal, he añadido un divisor mediante una línea de 1px. He utilizado la herramienta Forma personalizada (U) establece en el 2 Hedera forma personalizada (que viene con Photoshop por defecto) para hacer una bonita florecen en el centro del divisor.


crear


Paso 8: Crear la Sección de Cartera

A continuación, vamos a trabajar en la sección de cartera de la disposición. Agregar un título para esta sección con el texto "Portfolio", "Las recientes adiciones a mi cartera", o algo por el estilo. He utilizado el Baskerville fuente de 27pt. Me dio la capa de texto de una sombra blanca, que se puede copiar el estilo del texto de introducción de la capa.
Después de que el texto del título, vamos a añadir las imágenes, que representan a algunos de nuestros últimos trabajos. Las dimensiones de la imagen son de su elección, he elegido 250 × 160px. Tomé 6 imágenes, y los colocó en 2 filas y 3 columnas.
Dar a las imágenes de un resplandor exterior, de superposición de patrones y trazos.
Resplandor exterior

una


Patrón de superposición Utilice el patrón de rayas finas que hemos creado en el paso 2.


pagina


Resplandor exterior

photoshop


Una vez hecho esto, esto es lo que nos encontramos con:


en


Si lo desea, también puede agregar una sombra a cada imagen. Crear un rectángulo oscuro que es del mismo tamaño que la imagen en una nueva capa debajo de ella, aplicar un filtro Gaussian Blur con un radio 6px, y luego usar Transformar> Distorsionar para dar a la sombra de una curva en el centro.


cs4


Paso 9: Crear una llamada a botón de acción
Por debajo de la sección de cartera, vamos a crear una llamada a botón de acción. En este caso, he añadido alguna copia ("Hire Me" para el texto del botón y un trazo de pintura verde que sirve como forma del botón con un cepillo de la alta calidad de Photoshop áspero y sucio Cepillos biblioteca de pinceles.


CS5


Paso 10: Crear el pie de página

Por último: la sección de pie de página. Crear una nueva capa y el nombre de "divisor de pie de página". Utilice la herramienta Marco Rectangular (M) para seleccionar un área que es 960px de ancho y 10px de alto. Rellenar con el patrón de rayas finas y añadir un poco de copia por debajo de ella.


Crear Un Sitio Web Con Adobe Photoshop (Paso a Paso)


Y aqui terminamos este post, de lo que he encontrado en la web, Si desean dejar Puntos les estare MUY agradecido.

7 comentarios - Crear Un Sitio Web Con Adobe Photoshop (Paso a Paso)

@robertotodo -2
que ondas como estan www.huatulnet.com
@michael1958 -2
NO ENTENDI UN JORACA.......alguiem me explica la forma de crear web x intemedio de editor de texto por favor?