Esto Adobe Photoshop tutorial mostrar y debatir cómo utilizar Photoshop para diseñar un sitio web que se exporta como html y la imagen de rebanadas. Más tarde esto puede ser puesto en una html Editor de programa como Adobe Dreamweaver. Este es un Adobe Photoshop diseño web tutorial muestra cómo crear una página web directamente en Photoshop.
Abraham chaffin CreativeCow.net, Cambria, California EE.UU.
Hay muchas maneras diferentes de enfocar el diseño de un sitio web. Algunos optan por el diseño en todo Dreamweaver, O hacer un rápido bosquejo en papel y luego construir su sitio, Mientras que otros prefieren un enfoque de diseño gráfico y el uso Photoshop como la herramienta de diseño. La creación de su sitio web como una Photoshop archivo hace que la primera creación de su sitio después mucho más fácil por varios motivos.
El inicio de cualquier concepto de diseño es obtener una buena inspiración de algo que ya puede ver. Como un pintor se inspira en el mundo que les rodea, Un diseñador de páginas web también tendrá la inspiración de lo que ven. Que a veces es un sitio existente, Plantillas de sitio, O de una imagen, Gráfico, O logotipo.
Además de una buena inspiración es el reconocimiento de su público objetivo y el diseño en torno a lo que están a gusto con. El diseño y el estilo debe ser, en algunos conformidad con lo que su audiencia ya se utiliza para. La resolución de la pantalla también debe considerarse al diseñar un sitio web. La anchura de la página y la primera tapa de la página son importantes para el éxito de su sitio. (la tapa es el espectador ve a su zona antes de tener que desplazarse por la página.), Mientras que acomodar solamente las resoluciones de pantalla más grande puede hacer su trabajo más fácil que se corte una parte de su público. La mayoría de los usuarios de la web hoy en día utilizan resoluciones de pantalla más grande que nunca y en el futuro construido sitios web para pequeñas resoluciones de pantalla se convertirá en menos de un factor, pero por ahora todavía deben ser considerados.
También es posible para su sitio web para tener un ancho flexible a fin de que se expande y los contratos basados en un tamaño de la ventana de los usuarios, Este es óptimo cuando se intenta crear un sitio que tendrá en cuenta todos. Un sitio diseñado para adaptarse a un tamaño de la ventana de al menos 750 píxeles de ancho es óptimo. El mínimo de resolución utilizada por la mayoría de la gente de hoy es de 800 x 600.
Los pasos de la creación de su sitio web utilizando Photoshop son:
1. Usar Photoshop para diseñar el aspecto y la presentación del sitio que está queriendo.
2. Rebanada de la imagen en Photoshop, La exportación de imágenes en rodajas o como un html. Comprensión html formato ayuda mucho para la interpretación de la forma de rebanada de su imagen para entrar en la html.
3. Crear la html plantilla para que coincida con el Photoshop diseño del sitio y la caída en rodajas o en el uso de imágenes Dreamweaver para ajustar el html archivo Photoshop creado a partir de su PSD rebanadas.
El diseño del sitio en este tutorial se construirá a partir de una imagen de Bessie en sus pastos.
Este debe ser un sitio feliz = o
La creación de una cabecera gráfica
La primera parte del diseño de un sitio web en Photoshop está creando una cabecera gráfica para su sitio. La cabecera gráfica es la principal parte gráfica de su sitio web que se verá en primer lugar y será el centro de la mirada y la sensación de su sitio. Obtener el acabado gráfico de cabecera Aquí.
3. Recortar la imagen a 745 x 320 con el logotipo de la vaca en la parte derecha de la imagen. Para ello seleccione la herramienta de marquesina rectangular (m), Después, bajo el estilo desplegable elegir tamaño fijo. Puesto en los 745 px de ancho y 320 px de la altura. Posición de su marca para crear tu cabecera y recortar la imagen (imagen menú de cultivos).
4. Crear una pequeña pluma de 10 píxeles en la parte superior de la imagen. Seleccionar la herramienta de gradiente (g), Haga clic en el gradiente en la parte superior ventana de herramientas de gradiente, Establecer el inicio y el final de los colores blanco, Establecer el principio de opacidad al 0% y el fin de opacidad al 100%. Hacer una nueva capa y arrastre y crear la vía de acceso en la parte superior celebración turno a hacer la rampa recta.
5. Aligerar la gráfica mediante la creación de otro más de la rampa, mientras que a partir de la imagen de abajo y hacia la parte superior aligeramiento (mantenga cambio para mantener la vía de acceso directo). El punto final de la rampa debe ser de 300 píxeles por encima de la imagen para dar una agradable neblina a la gráfica. Esto da la apariencia de un mejor día en la granja de vacas.
6. Finalmente vamos a aligerar la cabecera gráfica aún más mediante la creación de otra rampa vertical en la dirección opuesta que la anterior. El punto de inicio debe ser incluso con la parte superior de la vaca y el logotipo de la parte inferior debe ser de 1 píxel por encima de la parte inferior de la gráfica.
7. Guardar el encabezado gráfico en una carpeta donde vas a crear tu sitio web usando guardar para web (Alt + Shift + Ctrl + s). Guardar como jpg, Optimizada, Calidad en torno al 70.
Su cabecera gráfico ha sido creado. El gráfico se puede utilizar de distintas maneras en un sitio de plantilla. Utilizarlo en su máximo de la escala y envuelva la navegación y el cuerpo de Textoo a su alrededor, O reducido en tamaño y en conjunto un diseño más moderno diseño.
El diseño de un sitio web en el diseño Photoshop
El diseño de su sitio web debe tener un mínimo de tres partes diferenciadas que incluyen elementos específicos:
1. Cabecera
Logotipo de la empresa
Gráfico bandera
Enlaces / botones para el hogar, Sobre, Y página de contacto
2. Cuerpo
área de contenido de Textoo en la página
Imágenes o gráficos incorporado con el contenido
3. Pie de página
Información de copyright
Los vínculos con las políticas / términos de uso, Y volver al principio enlace
Al crear el diseño en Photoshop asegúrese de dejar espacio para la navegación adicionales, Texto, Y el lugar de expansión en el futuro o que se encuentra la necesidad de rediseñar completamente su sitio, ya que no deja espacio para más enlaces a páginas de su diseño. Los siguientes pasos se utilizan para crear el diseño del Photoshop diseño de sitio web que se pueden Descargar aquí.
Pasos a seguir:
1. Crear una nueva PSD archivo de 745 px x 600 px y guárdelo como diseño.psd
2. Lugar en la cabecera del documento gráfico. (abrir el archivo de cabecera (g_header.Jpg), Seleccionarlo (Ctrl + A), Copia (Ctrl + C), Activar el trazado.PSD ventana, Pegar (Ctrl + V).)
3. Utilizar la herramienta mover (v) para mover el encabezado en la parte superior de la celebración de cambio de la disposición para dejar que encajen en su sitio en la parte superior.
5. Transformar el logotipo (ctrl + t) y avanzar en la esquina superior izquierda del sitio de disposición.
6. Utilizando la herramienta de tipo horizontal (t) Crear vínculos de Textoo pequeño en el cielo entre los dos logotipos en la parte superior de la guía. Escriba la palabra "casa", 4 espacios, "contacto", Otro 4 espacios, Y luego "sobre". Texto debe ser aproximadamente 12 pt, Arial, Usando el color # a6ff94 de un divertido color verde claro.
7. Dar el Textoo una Sombra (capa estilo de capa Sombra), con una distancia de 2 y un tamaño de 3.
8. Posición el Textoo utilizando la herramienta de mover y las teclas de flecha adecuada junto a la parte superior izquierda el logotipo.
9. Por debajo de la vaca más pequeña logotipo, crearemos algunos grandes de navegación / enlaces imagen:
Utilizando la herramienta de tipo horizontal (t) de tipo "página 1 página 2 página 3 página 4" utilizando arial, 17 pt fuente con Textoo negro. Poner unas 4 o 5 espacios entre las palabras de los botones para dar algo de espacio.
Crear una nueva capa
Y arrástrelo a continuación el Textoo que acaba de crear
Con la herramienta rectangular carpa (m), seleccionar un área mayor a la vuelta de la navegación.
Seleccionar la herramienta cubo de pintura (G) y rellenar el área seleccionada de la nueva capa vacía con (# a6ff94) el color verde.
Hacer esta capa parece un botón de ir al menú capa estilo de capa bisel y relieve. Utilizar la configuración predeterminada pulsando Aceptar
A través de su herramienta única columna marquesina eliminar una columna de píxeles entre cada palabra de la capa de fondo de color verde que acaba de crear. Esto romper el bisel y cada palabra parece un botón. Puede que sea necesario para acercar a la derecha entre las palabras.
8. Duplicar el botón verde capa arrastrando hasta la nueva capa botón O vaya al menú capa duplicar capa.
9. Seleccione el botón verde de abajo y añadir una capa de desenfoque de movimiento a la capa con una distancia de alrededor de 150 píxeles por ir al menú Filtro Blur Motion borroso.
10. Mover la capa borrosa por unos 10 píxeles y reducir la opacidad al 20%. Esto da una sutil línea en virtud de los botones para ayudar a dividir la parte superior del contenido.
12. Crear un nuevo derecho de autor detrás de la capa de Textoo que se convertirá en el segundo plano detrás del pie de página de Textoo, Asegúrese de que la capa está seleccionada.
13. Utilizar la herramienta de marquesina rectangular (m) para seleccionar un área en la parte inferior de la página, pero sólo un poco más alto que el Textoo de derechos de autor.
14. Utilizar la herramienta cubo de la pintura (g) y rellenar el área con el color verde brillante (# a6ff94).
15. Borde exterior de la pluma utilizando la capa de resplandor interior de estilo (menú Capa estilo de capa resplandor interior) establecer el modo de mezcla a la normalidad, De color a blanco (# ffffff) y el tamaño a 10 píxeles.
Ahora que hemos diseñado una simple, Diversión, Sitio web en Photoshop con un encabezado y pie de página. El espacio en blanco entre la cabecera y el pie de página será tanto el contenido de los Textoos y las imágenes que se complete el sitio web.
Corte de las imágenes en Photoshop para la web
Ahora que hemos diseñado una simple página web con Photoshop nos rebanada en pedazos y las piezas de exportación como una html archivo que puede ser usado y modificado posteriormente en Dreamweaver. Cuando el corte del diseño de su sitio web, recuerde que cada tramo se convertirá en una celda de una tabla y la imagen a fin de tratar de mantener las rebanadas como pocos y lo más sencillo posible. Y asegúrese de que su inicio y final rebanadas del diseño fuera de lo posible a fin de Photoshop un error no solo pixel puede estar dejando pasar como una rebanada. Abrir el diseño de sitios web que hicimos anteriormente, Seleccionar la herramienta de corte (k) y vamos a empezar. (encender el ajuste para obtener mejores resultados - ver menú broche (Ctrl + Shift +;), Broche de presión para asegurarse de capas está activado.) Descargar el En rodajas PSD archivo aquí.
Pasos a seguir:
Crear una rebanada de todo el gráfico. Fuera de la gráfica de inicio y el final fuera de la gráfica. Esto ayudará a decirle Photoshop no solo para crear gráficos en algún píxel que no queremos.
Rebanada de pie de página la gráfica de inicio y de fin en el gris fuera de la disposición. Permiten encontrar el ajuste automático de la parte superior de la capa para que usted.
Rebanada de la cabecera de todo el camino en la parte superior de inicio por encima de la gráfica en la gris y que termina justo debajo de la más grande de navegación. Esto la vaca rebanada en dos (por supuesto que no! ). Usted debe ahora tener 3 rodajas de parte de su cabecera, Su contenido, Y su pie de página.
Rebanada de todos los botones, Tratar de asegurarse de que se ajuste a la misma posición para cada botón de modo que la altura de los botones son los mismos. A la baja, Grandes botones que usted puede ajustar a la parte inferior de la porción que rodea.
Tu Photoshop diseño web debe ser ahora en rodajas y listo para guardar para la web.
Exportadores / ahorro Photoshop como rebanadas de una página web
En las versiones anteriores de Photoshop guardando una imagen en rodajas para la web sólo podría hacerse con imageready, pero ahora, todo construido en Adobe Photoshop CS3. La siguiente parte del tutorial le mostrará cómo guardar el diseño de sitios web en rodajas que hicimos en Photoshop como una html fichero con imágenes asociadas.
Pasos a seguir:
Con su gráfico abierto en rodajas elegir menú de archivo guardar para web y dispositivos (Alt + Shift + Ctrl + s). Este trae el guardar para web y dispositivos de ventana.
En virtud de la preselección desplegable para elegir jpeg de alta calidad y el tipo de archivo. (esto es simplemente una preferencia.)
Haga clic en el menú optimizado flecha para abrir el submenú y haga clic en editar los ajustes de salida...
No vamos a entrar en detalles sobre la configuración de la salida de aquí. Elegir la configuración predeterminada de la configuración de menú desplegable. Uso anterior y el siguiente para ver todos los ajustes.
Haga clic en Aceptar y, a continuación, guardar. Asegúrese de que está guardando en un lugar se puede ubicar fácilmente.
Elegir guardar como tipo: html y las imágenes (*.html )
Ajustes: Configuración predeterminada
Rebanadas: Todas las rebanadas
Haga clic en Guardar
Felicitaciones ahora que ha diseñado con éxito un sitio web con Photoshop, Rodajas se, Y luego exportados con éxito como una html archivo! Hay algunas simples modificaciones que deben llevarse a cabo sin embargo antes de que el diseño puede ser totalmente utilizado como una página web o sitio web de plantilla, pero lo dejaré para otro tutorial.
Ahora que hemos diseñado una simple página web con Photoshop nos rebanada en pedazos y las piezas de exportación como una html archivo que puede ser usado y modificado posteriormente en Dreamweaver. Cuando el corte del diseño de su sitio web, recuerde que cada tramo se convertirá en una celda de una tabla y la imagen a fin de tratar de mantener las rebanadas como pocos y lo más sencillo posible. Y asegúrese de que su inicio y final rebanadas del diseño fuera de lo posible a fin de Photoshop un error no solo pixel puede estar dejando pasar como una rebanada. Abrir el diseño de sitios web que hicimos anteriormente, Seleccionar la herramienta de corte (k) y vamos a empezar. (encender el ajuste para obtener mejores resultados - ver menú broche (Ctrl + Shift +;), Broche de presión para asegurarse de capas está activado.) Descargar el En rodajas PSD archivo aquí.
Crear vínculos de Textoo pequeño en el cielo entre los dos logotipos en la parte superior de la guía. Escriba la palabra "casa", 4 espacios, "contacto", Otro 4 espacios, Y luego "sobre". Texto debe ser aproximadamente 12 pt, Arial, Usando el color # a6ff94 de un divertido color verde claro.
Y arrástrelo a continuación el Textoo que acaba de crear
