¿El mejor tamaño para las plantillas de sitio web de PSD?

Question

He creado algunos sitios web en Photoshop CS5, pero por lo general tiendo a convertirlos en raw en el bloc de notas ++. Normalmente los hago en vivo en el sitio, y edito el código y actualizo la página para ver los cambios. Estoy deseando pasar al método más profesional y hacer toda la plantilla/diseño en photoshop. Lo que me impide volver a bucear, es el mismísimo principio ...

¿Cuál es una buena resolución para usar en la plantilla? He encontrado diferentes tutoriales y dicen diferentes tamaños. Por ejemplo, la resolución de mi laptop es 1366x768. Tengo una pantalla LCD de 22 pulgadas en mi oficina, y sé que también es una resolución realmente grande. Asumiría que la resolución mínima de la mayoría de los monitores es 1024x768 ...

Al crear una nueva plantilla en Photoshop para crear plantillas de sitios web, ¿qué tamaño debería crear y por qué?

Además, ya que estamos en el tema, ¿tienen algún vínculo con los buenos recursos de colecciones de imágenes y de tal forma que encuentren que lo ayuden a crear sus plantillas? Soy un programador, y como todos sabemos, la mayoría de los codificadores chupan imágenes ... Estoy tratando de fortalecer la otra mitad de mi cerebro :)

¡Gracias de antemano!

Answer 1

que sugeriría el siguiente curso de acción:

1. Tome un vistazo a las estadísticas actuales para el most widely used screen resolutions. Como verá, 1366x768 es la resolución más popular en este momento, seguida de la antigua 1024x768, que todavía tiene una gran base de usuarios. Y manténgase atento a las resoluciones móviles también.
2. Factor en la propiedad de pantalla necesaria tomada por el navegador Chrome y otras pelusas del sistema operativo.
3. Dado que el diseño para múltiples tamaños de pantalla se está volviendo más importante cada día, le recomiendo encarecidamente que elija algunas resoluciones objetivo en lugar de solo una. Todo esto puede ser manejado muy bien por CSS. Incluso si está orientando solo a equipos de escritorio, aún tiene sentido considerar diferentes tamaños de pantalla.
4. Dado que todavía está mojándose los pies con Photoshop, puede comenzar con una de las muchas plantillas de PSD basadas en grillas disponibles. Conozco un 960px one y un 1140px one, pero puede encontrar muchos más. Probablemente tendrá que usar varias cuadrículas de todos modos si decide admitir más de un tamaño de pantalla.

Y cuando tenga ganas de pensar un poco más sobre esto, vaya directamente a este artículo: A tale of two viewports por Peter-Paul Koch.

Answer 2

Mira la revista smashing y suscríbete a su boletín de noticias, así como webdesignerdepot y echa un vistazo a Codrops.net. Tienen excelentes regalos, tutoriales y actualizaciones de normas. ME ENCANTA consultar mi correo para verlos.

En cuanto a la PSD, no tiene un tamaño establecido. He visto maquetas profesionales de desarrolladores de wordpress a 1100 px de ancho (la altura es la variante SO en función de su diseño). No recomendaría mucho más que 1366px de ancho.

Podría hacer 1366 o 1440 porque esa es la resolución que la mayoría de la gente verá. Cuando se envía una maqueta a 1920 personas piensan ancho de la página web es demasiado pequeño, cuando el contenido sigue siendo el 940-980 que todos ellos

Editar:

Yo mismo PSD, ya sea en 1100px o 1440px de ancho y el contenido principal es siempre de 940-980px de ancho.

Uso 1100 cuando no hay mucho que observar gráficamente en el fondo del cuerpo, y 1440 cuando el fondo es más crucial para la "sensación" del sitio web.

Answer 3

Desea diseñar su sitio web para la resolución de pantalla más utilizada, que parece ser 1280px por 720px. Por lo tanto, eso es lo que quiere que sea su ancho, puede crear cualquier tipo de fondo y simplemente asegurarse de que se desvanezca a un color o de forma transparente y use CSS para cambiar el color de fondo.

Asegúrese de tener guías que lo ayuden a mantener el contenido alineado, de la mejor manera, cree un nuevo documento con un ancho de 960-100px y una altura de 720px, luego arrastre las guías por los cuatro lados.

Luego puede cambiar el tamaño del documento a 1280px por 800-960px.

La razón por la que tiene una guía en 720px es porque todo lo que está por encima de esa línea está garantizado para verse en todas las resoluciones, se llama "arriba del pliegue". Los buenos diseñadores toman esto en cuenta para garantizar que la audiencia se vea atraída a explorar el sitio, un control deslizante de contenido destacado es una salida fácil.

Answer 4

incomepitbull, entiendo a qué atenerse a partir de ...
También soy un desarrollador de back-end que está tratando de aprender Photoshop ..
Muchos diseñadores de front-end son ignorantes de lo que sucede en el escenario de desarrollo ..
En su mayoría, el moke de Photoshop depende de la especificación del cliente ...
La altura no importa; utilice 960 px (12col, 16col, 24col), 980 px (12col, 24, col), 1000 px (100% responsive friendly para aquellos que no usan grid systems) o 1140 (para webs dirigidas a monitores más grandes, es decir, no móviles primero px ... .)
Después de todo, como desarrolladores, solucionamos todos estos problemas; pero las buenas maquetas son importantes ...