# Tamaño de shot de Dribbble: 1600×1200 y cómo encuadrar [Canonical HTML page](https://gradiently.design/es/guide/dribbble-shot-size) En Dribbble tu trabajo compite en una cuadrícula de pequeñas miniaturas 4:3. El marco, el fondo, el recorte y el aire a su alrededor deciden si alguien hace clic. ## The short version - El tamaño de shot de Dribbble es 1600×1200 píxeles, un formato horizontal 4:3. - Dribbble muestra los shots como miniaturas 4:3 en su cuadrícula, así que la primera imagen de un shot tiene que leerse en tamaño pequeño. - La mayoría de los buenos shots muestran una sola idea, recortada de cerca, con mucho espacio alrededor y un fondo que apoya el trabajo sin competir con él. - Un fondo y un encuadre coherentes en todos tus shots hacen que un perfil de Dribbble parezca el portfolio de un único diseñador. - Los shots también pueden ser animados, algo que encaja con el trabajo de interacción y movimiento cuando el movimiento es breve y el bucle es limpio. El **tamaño de shot de Dribbble** es 1600×1200 píxeles, un formato horizontal 4:3. Dribbble muestra cada shot como una miniatura 4:3 en su cuadrícula, así que diseña la primera imagen para que se lea en ese tamaño pequeño: una idea, recortada de cerca, con espacio alrededor y un fondo que favorezca el trabajo en lugar de pelearse con él. Las imágenes adicionales de un shot pueden mostrar el detalle. Mantén el encuadre y el fondo coherentes de un shot a otro y tu perfil se leerá como un portfolio y no como un montón de subidas. ## Dimensiones de un shot de Dribbble | Propiedad | Valor | | --- | --- | | Tamaño | 1600×1200 px | | Proporción | 4:3, horizontal | | Miniatura en la cuadrícula | La primera imagen, mostrada en pequeño en 4:3 | | Tipos de archivo | PNG o JPG para imágenes fijas, GIF o vídeo para movimiento | | Varias imágenes | Un shot puede contener varias imágenes o vídeos | La página de subida de Dribbble indica sus límites actuales de tamaño de archivo y duración de vídeo. Diseña a 1600×1200, o a un múltiplo 4:3 mayor como 3200×2400 para más nitidez, y encajarás exactamente en el marco. Sube exactamente en 4:3. Una forma distinta se recorta o se rellena en la cuadrícula, y Dribbble decide dónde, que rara vez es donde tú elegirías. PNG mantiene nítidos los bordes de interfaz y el texto; JPG va mejor para trabajo fotográfico. - Shot de Dribbble 1600×1200: 1600 × 1200 - Portada de Behance 1616×1264: 1616 × 1264 - Diapositivas 4:3 1600×1200: 1600 × 1200 - Publicación de Instagram 1080×1350: 1080 × 1350 El shot junto a sus vecinos. Una diapositiva 4:3 es el mismo marco, así que un shot bien encuadrado entra directamente en una presentación; la portada de Behance se parece, pero no es idéntica. ## Cómo encuadrar el trabajo dentro de un shot de Dribbble Un clásico shot flojo es una página web entera encogida dentro del marco. En tamaño miniatura se queda en un rectángulo gris con motas. Elige una parte que merezca verse, recorta hasta ella y dale espacio. 1. **Elige una idea** Una sola pantalla, un componente, un logotipo o un conjunto de iconos. Si necesita un párrafo para explicarse, son dos shots. 2. **Recorta más cerca de lo que parece natural** Muestra la tarjeta del pago, no toda la página del pago. El detalle que importa debe ser lo bastante grande para verse en la cuadrícula. 3. **Deja un margen** Entre un 10 y un 15 por ciento del marco por cada lado, unos 160 a 240 píxeles en un shot de 1600 píxeles, deja respirar el trabajo. 4. **Elige un fondo que apoye** Liso o con un degradado suave, tomado de la paleta del trabajo o en contraste con ella. El fondo debe hacer que el trabajo luzca mejor y luego desaparecer. 5. **Añade imágenes de detalle después** Usa la segunda y la tercera imagen para primeros planos, estados y el flujo completo. La primera imagen es la invitación. Una portada de shot de Dribbble de 1600 por 1200 que dice Pago, rediseñado, sobre un degradado suave Una imagen de portada para un shot de varias imágenes: un título corto sobre un fondo tranquilo, con las pantallas en las imágenes siguientes. ## Fondos para shots de Dribbble El fondo es el escenario. Una interfaz clara suele lucir mejor sobre un fondo suavemente teñido, algo más oscuro que su propio blanco, para que se vean los bordes de las tarjetas. Una interfaz oscura pide un fondo profundo con un leve toque de color cerca. El trabajo de marca con colores vivos puede apoyarse en un casi neutro para que el color de marca sea lo único estridente del marco. - Piedra suave, para interfaz clara: `linear-gradient(160deg, #f5f5f4 0%, #e7e5e4 100%)` - Pervinca, para interfaz clara: `radial-gradient(circle at 50% 40%, #e0e7ff 0%, #c7d2fe 60%, #a5b4fc 100%)` - Escenario profundo, para interfaz oscura: `radial-gradient(circle at 50% 35%, #312e81 0%, #1e1b4b 50%, #0b0a1a 100%)` - Papel cálido, para trabajo de marca: `radial-gradient(circle at 30% 30%, #fde68a 0%, #fed7aa 45%, #fecdd3 100%)` Cuatro fondos que apoyan el trabajo en lugar de competir con él. Cada uno mantiene su punto más brillante detrás del centro del marco, donde se sitúa el trabajo. ### Evita - Una página entera encogida para que quepa - Un degradado arcoíris estridente tras un trabajo colorido - Sombras proyectadas pesadas bajo cada tarjeta - El trabajo tocando los bordes del marco - Un fondo distinto en cada shot ### Haz - Un componente o una pantalla, recortado de cerca - Un fondo más calmado que el trabajo - Una sombra suave y única, o ninguna - Un margen del 10 al 15 por ciento - Una sola familia de fondos en todo tu perfil Los mockups de dispositivos pueden ayudar cuando el contexto importa, como una app móvil en una mano o una esfera de reloj en una muñeca. Usados en todos los shots, encogen el trabajo y envejecen rápido. Una pantalla plana y limpia sobre un buen fondo suele ser más potente. Los [fondos degradados](https://gradiently.design/es/guide/gradient-background) y los [fondos degradados oscuros](https://gradiently.design/es/guide/dark-gradient-backgrounds) explican cómo crear fondos que no parezcan preajustes. ## Haz que tu perfil de Dribbble parezca un solo portfolio Los visitantes juzgan un perfil por su cuadrícula. Si todos los shots comparten una familia de fondos, un margen y una forma de recortar, la cuadrícula parece cuidada, y lo que cambia de una miniatura a otra es tu trabajo, no tu encuadre. Los [consejos para portfolios de diseño](https://gradiently.design/es/guide/designer-portfolio-tips) y el [diseño de casos de estudio](https://gradiently.design/es/guide/case-study-design) llevan el mismo razonamiento a un portfolio completo. Una portada de shot de Dribbble titulada Flujo de onboarding sobre un fondo degradado sereno Un shot de una serie: primero el título, luego las pantallas en las imágenes siguientes. Una portada de shot de Dribbble a juego titulada Conjunto de iconos, 48 glifos, con el mismo fondo y la misma composición El siguiente shot con el mismo fondo y la misma composición, para que la cuadrícula del perfil se lea como una sola obra. Da a cada shot un título claro que diga qué es, «Onboarding de una app bancaria» en lugar de «Buen rollo fresco», y una breve descripción del problema y de tu decisión. La gente encuentra los shots mediante búsqueda y etiquetas, y los clientes leen la descripción para juzgar cómo piensas, no solo cómo dibujas. Un fondo que nadie más usa es una firma discreta. En Gradiently, Shot de Dribbble es un tamaño integrado, y un Mark que reservas es solo tuyo para exportar, así que el escenario de tus shots no puede aparecer en el perfil de otro diseñador. Con Pro puedes exportar imágenes fijas hasta 4K o un MP4 corto cuando el movimiento lento del Mark encaja con un shot animado. Para shots con movimiento en general, mantén los bucles cortos y suaves; los [fondos degradados animados](https://gradiently.design/es/guide/animated-gradient-background) explican los principios. ## FAQ ### ¿Qué tamaño tiene un shot de Dribbble? 1600×1200 píxeles, un formato horizontal 4:3. ### ¿Puedo subir otra proporción a Dribbble? La cuadrícula de Dribbble es 4:3, así que otras formas se recortan o se rellenan en la miniatura. Diseña en 4:3 para controlar lo que ve la gente. ### ¿Qué fondo debo usar para un shot de Dribbble? Un fondo calmado algo más oscuro que una interfaz clara, o un fondo profundo con un leve toque de luz para interfaces oscuras. El fondo debe ser más discreto que el trabajo. ### ¿Pueden animarse los shots de Dribbble? Sí. Los shots pueden incluir GIF y vídeos, que encajan con el trabajo de interacción y movimiento. Mantén el movimiento breve y haz que el bucle sea limpio. ### ¿Cuánto margen debe tener un shot de Dribbble? Entre un 10 y un 15 por ciento del marco por cada lado, unos 160 a 240 píxeles en un shot de 1600 píxeles de ancho.