Cómo cortar y mapa de gráficos para Web Design

El diseño web es una gran manera de ampliar su perfil y aumentar sus ingresos como diseñador gráfico. Sin embargo, si usted es un diseñador gráfico irrumpir en el diseño web, tendrá que cortar y trazar gráficos para adaptarse a los diseños de Web. Si bien el diseño de la web es similar a la impresión y otros de diseño digital, hay algunos aspectos específicos a tener en cuenta para asegurarse de que su diseño de página web está listo para el desarrollo.

Instrucciones

1 Crear un nuevo lienzo en Photoshop haciendo clic en "Archivo" y "Nuevo". Introduzca un título para la plantilla, una anchura de 1200 píxeles, una altura de 600 píxeles y una resolución de 180 DPI. El modo debe ser "de color RGB", y el contenido puede ser marcado como "blanco". Haga clic en "Aceptar".

2 Crear guías sobre el lienzo para proporcionar directrices para el diseño. Haga clic en "Ver" en la barra de menú superior, seguido de "Nueva guía." Asegúrese de que "vertical" está marcada y el tipo "120px" en el cuadro "Posición". Repita este paso, excepto el tipo "1080px" en el cuadro "Posición".

3 Usted debe tener dos guías sobre el lienzo. Las guías crean un cuadro de 960 píxeles, que es una anchura popular para el diseño web. Todo fuera de estas guías se debe considerar sólo las imágenes de fondo. Crear su diseño.

4 Crear guías alrededor de sus secciones principales, como el encabezado, pie de página y navegación, manteniendo pulsado el botón izquierdo del ratón en la regla y arrastrando. Coloque las guías alrededor de cada gráfico por separado, que rodea a cada gráfico con una caja.

Si no ve los gobernantes, asegurarse de que los "gobernantes" se comprueba en "Ver".

5 Aplanar su imagen, vaya a "Capa" y "Acoplar imagen". No incluya los aspectos del diseño que se creará utilizando HTML o CSS, tales como elementos de menú o el texto del cuerpo. Sin embargo, si desea que estos artículos para ser gráficos en formato JPG, incluirlos en la imagen plana.

6 Seleccione la herramienta de recorte. Recortar cada sección individual manteniendo pulsado el botón izquierdo del ratón y arrastrar el cuadro para adaptarse a las guías que ha creado. Por ejemplo, si ha creado una cabecera, recortar todo lo que fuera de la cabecera usando la herramienta de recorte.

7 Haga clic en "Archivo" y "Guardar para Web". Seleccione el formato JPG y haga clic en "Guardar".

Se puede ajustar la calidad del JPG antes de guardar para reducir el tamaño de la imagen, reduciendo aún más el tiempo de carga de la página web.

8 Haga clic en "Editar" y "Paso atrás" para volver a la imagen original, de tamaño completo. Repita los pasos 6 y 7 para cada gráfico individual.

9 Ahora tiene su sitio web de gráficos listos para la codificación. Proporcionar al desarrollador Web con el original aplanado JPG, junto con cada uno de sus gráficos para la Web. La imagen original de aplanado permitirá a los desarrolladores Web para ver el diseño en general, sino que reduce el tiempo de corte de las imágenes y de definición de diseño.

Consejos y advertencias

• Nombre cada gráfico de acuerdo con su uso en el diseño. Por ejemplo, los elementos de navegación que se podría llamar "nav1.jpg", "nav2.jpg" y "nav3.jpg." El gráfico de pie de página que se podría llamar "footer.jpg." Esto ayudará a los desarrolladores a encontrar fácilmente los gráficos necesarios para la codificación.
• Junto con cada corte gráfico, proporcionar las dimensiones. Esto ayudará a los desarrolladores en el proceso de codificación. Por ejemplo, podría escribir "footer.jpg = 960 por 120 píxeles." No lo incluya en el nombre del archivo; se limitan a afirmar que en un correo electrónico o un documento.