Cómo crear un tamaño de página web en photoshop

Ya sea que se codifican los propios sitios web o producir maquetas de un gurú de codificación para construir detrás de las escenas, usar Adobe Photoshop para crear visualizaciones detalladas para la revisión y aprobación del equipo cliente. Dado que los navegadores Web muestran en el mundo basado en píxeles de monitores y pantallas de dispositivos móviles, el enfoque de Photoshop en las imágenes de mapa de bits coincide con la opinión de sus visitantes verán cuando termine la construcción de sus diseños.

El tamaño importa

Cuando maqueta o prototipo de una página Web, mantener las dimensiones del monitor espectadores en cuenta al configurar los archivos de trabajo en Adobe Photoshop. Aunque el sitio web W3Schools atrae a los visitantes tecnología centrada en cuyos equipos pueden no coincidir con los usuarios medios informáticos, sus estadísticas del sitio a largo plazo muestran claramente el impacto de los dispositivos de visión grande y altas resoluciones de pantalla. En enero de 2014, el 47 por ciento de sus visitantes establecido sus preferencias de visualización a 1920 por 1080 o una resolución superior, en comparación con el 10 por ciento 10 años antes. Junto con versiones del sitio en pantalla completa, si usted está construyendo la vista de dispositivos móviles de un diseño de respuesta que se adapte a las dimensiones de la pantalla de los visitantes, se puede configurar el archivo de trabajo en un tamaño que coincide con las dimensiones de pantalla común en los teléfonos inteligentes y tabletas .

En sus marcas, listos, fuera

A medida que instigan el proceso de creación de un documento de Adobe Photoshop, se empieza con lo básico: las dimensiones, la resolución y el modo de color. Ajuste la resolución de 72 píxeles por pulgada y su modo de color RGB para la compatibilidad en línea. Photoshop "Web" preestablecido crea automáticamente un archivo de píxeles de 800 por 600, que puede no ser lo que quiera, dependiendo del tipo de página que cree y el hardware que suponen un uso a sus visitantes. Nuevo cuadro de diálogo del programa también muestra la cantidad de espacio en disco el documento requiere. Utilice el contenido de fondo de ajuste para establecer un archivo que incluye una capa de fondo blanco, se inicia con una capa transparente 1 o llena el fondo con el color de primer plano actual en el panel Herramientas. Si tiene previsto construir muchos archivos en este tamaño y con estos ajustes, guardar su configuración como un preset. En la sección Opciones avanzadas del cuadro de diálogo nuevo, encienda - o ignorar - gestión del color y asignar un perfil de color.

En la cuadrícula

Los archivos de Photoshop cuadriculadas proporcionan un área de trabajo productivo en el que el diseño de los diseños de Web basadas en soluciones consistentes de columnas, canales de columna y las divisiones de página vertical. Al configurar este tipo de acuerdos, tome un momento para hacer los cálculos subyacente en primer lugar. Sume las anchuras de las columnas y los espacios de canalón entre ellos para determinar el ancho total de la página o dividir el ancho que desea utilizar por los tamaños de las unidades en las que desea dividirla. Con sus cálculos en la mano, crear un archivo que contiene las dimensiones adecuadas para su uso previsto. Tenga en cuenta que si basa diseños de Photoshop en cualquier sistema de medición distinta de píxeles, se arriesga a la creación de unidades de diseño que no coinciden con la cuadrícula de píxeles invisibles impuesta por resolución del documento. Verás bordes suavizados alrededor de sólidos rectangulares porque sus medidas no caigan exactamente en la propia rejilla del archivo. Por supuesto, si usted está acostumbrado a trabajar en puntos como unidad de medida, un archivo de 72 píxeles por pulgada destinado a la Web se correlaciona exactamente con las mediciones puntuales.

Otras Consideraciones

Si el diseño de las pantallas de ultra-alta resolución de los dispositivos de la pantalla Retina de Apple en mente, crear un conjunto de gráficos en dos veces las dimensiones de sus activos en línea regular y servirlos a los visitantes con el hardware de clasificación. Dependiendo de cómo se codifican sus páginas web, puede utilizar dos conjuntos separados de gráficos, de bajar los archivos de Retina-listos para otros visitantes o servir imágenes regulares a todo el mundo. Añadir "@ 2x" - sin las comillas - al final de los nombres de archivos web de alta resolución para que el software que se carga sus páginas pueden reconocer estos documentos. Vas a tener mejores resultados si se construye los archivos más grandes primero y crear versiones reducido de ellas para pantallas regulares, en lugar de al revés, debido a la inevitable ablandamiento introducido a través de las operaciones de escalado de imagen.

Información de versión

La información en este artículo se aplica a Adobe Photoshop CC 2014, Adobe Photoshop CC y Adobe Photoshop CS6. Se puede diferir ligeramente o significativamente con otras versiones o productos.

referencias

• enlazar W3schools.com: la pantalla de búsqueda Estadísticas
• enlazar Adobe Systems: Ayuda para Adobe Photoshop y tutoriales [CC 2014]
• enlazar Adobe Systems: Ayuda para Adobe Photoshop y tutoriales [CC]
• enlazar Adobe Systems: Ayuda para Adobe Photoshop CS y tutoriales [6]
• enlazar Webdesign.org: Cómo crear un sitio web diseño limpio en Photoshop
• enlazar Seis revisiones: Cómo crear un diseño web en Photoshop Ilustrativo
• enlazar Amarillo puente interactivo: Diseño Web para pantallas Retina
• enlazar Lee Munroe: 5 cosas que aprendí Diseñar para pantallas de alta resolución Retina
• enlazar Designmodo: Diseñando para pantallas Retina, optimizar el sitio web para @ 2x Imágenes
• enlazar StudioPress: Cómo diseñar para pantallas Retina de Apple

Sobre el Autor

Elizabeth Mott ha sido escritor desde 1983. Mott tiene una amplia experiencia en la redacción de textos publicitarios para todo, desde aparatos de cocina y servicios financieros a la educación y el turismo. Ella tiene una licenciatura en Artes y Master of Arts en Inglés de la Universidad Estatal de Indiana.