Fondo y header

[dDaunloz]

Gente vamos a hacer esto un poco mas dinamico

Hay 4 juegos lindos que salieron en estos dias

Lost Planet 3
Tom Clancy's Splinter Cell: Blacklist
The Bureau: XCOM Declassified
Saints Row 4

Y el GTA5 que sale en breves


hagan un conjunto fondo y banner con el tema que les guste y posteenlo aca

les doy hasta el domingo a ultima hr, asi el lunes armamos una votacion y el que mas guste queda hasta el mes que viene que hariamos el mismo proceso nuevamente


Requisitos:

El banner no debe tener el nombre, solo ser una imagen para el fondo, el nombre es una imagen aparte con transparencia



Dimensiones
Fondo: alto= 1200, >1920
Banner: alto= 185, >1500

Plis, no deformen las imagenes que usen, mantegan siempre el aspect ratio de las mismas si le cambian el tamaño, y en lo posible traten de no agrandarlas, ya que tambien pierde calidad

Bueno.. ahi sale pique

Para arrancar, los fondos que presenten que sean como minimo 1920*1200, pueden ser mas grandes si quieren, pero no creo que muchos utilicen algo mas grande que eso por ahora.

El fondo va a ir centrado y arrancando arriba (top center fixed)
Asi que su diseño deberia concentrarse en las dos franjas laterales, y sabiendo que se va a ir cortando segun la resolucion de cada pantalla (no hacemos resize de la imagen xq pierde calidad)

Como voy a ir perdiendo contenido de mi background? de los costados hacia adentro, y de abajo hacia arriba.

Por lo cual les aconsejo, si siguen el formato de collage de personajes:
* no pongan cabezas muy cerca del borde inferior xq pueden quedar cortadas.
* horizontalmente hagan mas o menos 3 columnas de personajes, para que en cada resolucion se vea algo.

Estas son las resoluciones mas comunes, pueden bajarse esa imagen y usarla como layer en el PS u otro soft que usen (con layers obvio), le ponen una opacidad baja, y la oculatan y activan para ir probando su diseño



Las franjas verdes verticales indican la zona visible para el foro, en las resoluciones que tome como extremos 1280*1024 (clasico cuadradito de oficina) y 1920*1080/1200 (clasico domestico), cualquier otra como laptos quedan comprendidas dentro de esas



O sea que el background tendría que tener material visible en las siguientes franjas, para que quede bien en todas las resoluciones





Después piques cortos (DO's and DONT's)

* NUNCA agranden una imagen (pierde calidad y se nota)
* achicar imágenes si pueden, pero no exageradamente, las imágenes muy grandes, empiezan a perder bastante calidad al bajarle mucho el tamaño
* NO deformen las imágenes, usen Shift (por lo general) para el resize de imágenes que mantiene la relación
* no inviertan (horizontalmente) las imágenes (no se xq, pero nuestro cerebro suele decirnos que hay algo mal con esa imagen)
* si es posible mantengan la iluminación (que la luz les pegue del mismo lado a los personajes que usen)
* agregar una textura al fondo rellena fácilmente posibles lugares vacíos difíciles de completar (buscan texture/a en google y le salen varias)
* es preferible no usar imágenes muy grandes
* para conseguir personajes previamente recortados/sin fondo, buscan agreguen la palabra "render" a su query (altair render)
* traten de mantener cierta armonía de colores
* traten de utilizar imágenes mas o menos parejas en estilo y detalle (un Mario 8 bits no pega mucho con una Lara 2013)

les voy a tirar un pique para que apliquen el fondo y el banner en sus maquinas para ver como queda


boton derecho-> inspeccionar elemento, sobre el fondo



Buscan la siguiente linea recuadrada a la derecha, la seleccionan y cambian la url, por la de su imagen
no apreten directo sobre la url, xq ahi los va a pasar para la pestaña resources (2), si les pasa, solo apretan la pestaña elements (1)



voilá! queda aplicado el fondo (en sus maquinas) y les sirve para checkear que tan bien queda




para probar con varias resoluciones, se pueden bajar la siguiente extencion: window resizer, y les va a permitir cambiar facilmente entre las resoluciones mas comunes

se les agrega un boton en el browser para intercambiar



aca ven como queda en 1280*1024



como les decia.. una fila mas de personajes no vendria mal :P



ahora seguimos el mismo procedimiento para el header.. pero ahora va a ser mas tricky



boton derecho-> inspeccionar elemento, sobre lal imagen



esta vez, no les va a quedar la linea correcta seleccionada, asi que buscan la que esta seleccionada ahi a la izquierda "<div class="above_body">"
y ahi les aparece la url del header a la derecha, la remplazan como antes y listo




quedan aplicados temporalmente en sus maquinas el fondo y el header

para sacarlos solo refrescan la ventana y listo