Fotografía
El banco oficial de fotos con grading azul+dorado, y las recetas exactas de overlay navy que hacen el look cinematográfico del sitio.
La fotografía es la mitad del look premium: escenas reales de estudiantes chilenos, ambiente
nocturno/"hora azul", grading azul #003C72 + dorado #FFF100, el sujeto desplazado a un lado
dejando aire para el texto. Una pieza sin foto (o con foto de stock genérica y clara) nunca se verá
como la marca.
Banco oficial (URLs absolutas, listas para usar)
JPEG optimizados (~1600px, q80, 130–280 KB). Patrón:
https://brandbook.prouniversitas.cl/brand/fotos/<nombre>.jpg
| Foto | Cuándo usarla | Encuadre sugerido |
|---|---|---|
scene-01.jpg | Hero / portada — corredora en la ciudad, hora azul | object-position: 60% 30% |
scene-02.jpg | Portada de informes — corredora frente a letreros de carreras | object-position: 30% 30% |
nosotros-hero.jpg | Cierres, institucional, equipo | object-position: 50% 32% |
profesores-hero.jpg | Piezas académicas / profesores | object-position: 70% center |
metodo-bg.jpg | Método, plan de estudio, fondos de sección | tenue: opacity .08–.40 |
sede-vina.jpg | Presencial, sedes, colegios | object-position: center 35% |
banner-experience.jpg | Programas, sala de clases | object-position: center 35% |
La regla de oro: toda foto lleva overlay navy
Nunca una foto "cruda" de fondo. El overlay oscurece el lado donde va el texto y funde la foto con el navy de la página. Recetas exactas del sitio en producción:
/* Portada de documento (footer de foto fundiendo a #002A51 sólido) */
background: linear-gradient(180deg,
rgba(0,26,49,.62) 0%, rgba(0,32,60,.38) 34%,
rgba(0,42,81,.86) 66%, #002A51 84%);
/* Hero con texto a la izquierda (patrón PageHero del sitio) */
background: rgba(0,42,81,.40); /* base */
background: linear-gradient(90deg, /* + direccional */
rgba(0,42,81,.95), rgba(0,42,81,.65), rgba(0,42,81,.15));
background: linear-gradient(0deg, /* + pie */
rgba(0,42,81,.80), transparent 45%);
/* Banda de sección (SectionBanner) */
background: linear-gradient(90deg,
rgba(0,42,81,.95), rgba(0,42,81,.65), transparent);
/* Foto de contexto casi subliminal bajo contenido */
img { opacity: .08; } /* o .10–.40 según jerarquía */En Tailwind (el código real): bg-brand-blue-dark/40 + bg-gradient-to-r from-brand-blue-dark/95 via-brand-blue-dark/65 to-brand-blue-dark/15 + bg-gradient-to-t from-brand-blue-dark/80 via-transparent to-brand-blue-dark/30.
Encaje y esquinas
object-fit: coversiempre (contain solo en mockups de producto).- Aspect ratios del sitio: cards de programa
4/5· blog/banners16/9· retratos1/1. - En cards, la imagen va en contenedor
border-radius: 18–22px+overflow: hidden, conring-1 ring-white/10(oring-2 ring-brand-cyan/50en avatares). - Sin filtros CSS (ni grayscale ni blur sobre fotos de contenido): el grading ya viene en la imagen.
- Sin ruido/grain: la textura del sitio es limpia.
Do / Don't
¿Necesitas una escena nueva? Genera con IA siguiendo la dirección de arte (estudiante chileno real, hora azul, grading azul+dorado, aire para texto) y valida contra estas referencias antes de usarla.