# Bakgrunder för produktbilder som lyfter produkten [Canonical HTML page](https://gradiently.design/sv/guide/product-photo-backgrounds) En bakgrund till produktbilder har ett jobb: att få det som står framför den att se så bra ut som möjligt. Färg, ljushet, skugga och enhetlighet gör det mesta av det arbetet, och inget av det kräver en studio. ## The short version - En bra bakgrund för produktbilder kontrasterar mot produkten i ljushet, så att formen syns direkt i miniatyr. - Tonala bakgrunder, en ljusare eller mörkare version av produktens egen färg, ser lugna och exklusiva ut. Komplementfärgade bakgrunder ser djärva och energiska ut. - En mjuk skugga under produkten förankrar den på bakgrunden, så att en frilagd produkt inte ser ut att sväva. - En mild gradient bakom en frilagd produkt, ljusare bakom produkten och djupare mot kanterna, efterliknar en studiohorisont. - Behåll samma bakgrund, ljusriktning, vinkel och beskärning i hela sortimentet så att produkter går att jämföra med en blick. Den bästa **bakgrunden för produktbilder** är en som får produkten att se bättre ut utan att själv märkas. Börja med ljushet: en mörk produkt behöver en ljusare botten och en ljus produkt en mörkare, så att silhuetten syns i miniatyr. Välj sedan ett färgförhållande, tonalt för lugn eller komplementärt för energi, lägg till en mjuk kontaktskugga så att produkten vilar på ytan och upprepa samma upplägg för varje produkt i sortimentet. Den här guiden går igenom vart och ett av de valen, med färgexempel, gradientkoder för frilagda produkter och en checklista för enhetlighet i sortimentet. För bredare färgtänkande, se [komplementfärger](https://gradiently.design/sv/guide/complementary-colors) och [60-30-10-regeln](https://gradiently.design/sv/guide/60-30-10-rule). ## Välja bakgrundsfärg för en produkt Ljushetskontrast kommer först, eftersom den gör en form läsbar. Färg kommer i andra hand, och den sätter stämningen. Det finns tre pålitliga färgstrategier, var och en med sin effekt. | Strategi | Bakgrund | Effekt | Passar | | --- | --- | --- | --- | | Tonal | En ljusare eller mörkare version av produktens färg | Lugn, exklusiv, sammanhållen | Skönhet, mode, hemmet | | Komplementär | En färg mittemot produktens på färghjulet | Djärv, energisk, uppmärksammad | Mat, drycker, leksaker, annonser i sociala medier | | Neutral | Tonat vitt, sten, grått eller kol | Ren, ärlig, jämförbar | Marknadsplatser, teknik, sortiment | Tre strategier. De flesta varumärken väljer en som standard och använder en annan för kampanjer. - Produkt: flaskgrön: #2f6b4f - Tonal: blekgrön: #dcebe2 - Komplement: mjuk korall: #f2c6b4 - Neutral: varm sten: #f1eee8 - Neutral mörk: kol: #1f2320 En grön produkt, fyra bottnar. Blekgrönt är lugnt och sammanhållet, mjuk korall får det gröna att sjunga, sten är neutral och kol passar en ljus produkt bättre än den här. > **Kolla marknadsplatsens regler** Vissa marknadsplatser kräver att huvudbilden på produkten har enfärgad vit bakgrund. Använd färgade bakgrunder till sekundära bilder, din egen butik och inlägg i sociala medier, och kontrollera varje plattforms aktuella bildregler innan du fotograferar. ## Gradienter bakom frilagda produkter Studiofotografer fotograferar mot en sweep: en kurvad fond som går från vägg till golv utan synligt hörn, belyst så att den är ljusare bakom produkten och tonar bort mot kanterna. En mild gradient bakom en frilagd produkt återskapar det utseendet utan studio. Den fokuserar uppmärksamheten på produkten och ger ett djup som en platt färg inte kan. - Vit sweep: `radial-gradient(ellipse at 50% 40%, #ffffff 0%, #eef0f2 55%, #d9dde2 100%)` - Varm stensweep: `radial-gradient(ellipse at 50% 40%, #f6efe6 0%, #e9dccb 55%, #cdb89d 100%)` - Tonal grön sweep: `radial-gradient(ellipse at 50% 40%, #e3f0e8 0%, #c5ddcf 55%, #97bba6 100%)` - Korallsweep: `radial-gradient(ellipse at 50% 40%, #fbe2d6 0%, #f2c6b4 55%, #df9c83 100%)` - Kolfärgad strålkastare: `radial-gradient(ellipse at 50% 35%, #3a3f47 0%, #24272c 55%, #141619 100%)` - Vägg och golv: `linear-gradient(180deg, #eceef1 0%, #eceef1 62%, #d6dae0 100%)` Bakgrunder för frilagda produkter. De radiella sweepsen lyser upp ytan bakom produkten. Den sista antyder en vägg som möter ett golv. Låt ljuset ligga bakom produkten, något ovanför dess mitt, som ett verkligt ljus skulle falla. Håll spannet milt: produkten ska vara det som har högst kontrast i bilden, inte bakgrundens sken. ## Skuggor som förankrar produkten En frilagd produkt utan skugga svävar. Två skuggor löser det. En **kontaktskugga** är en liten, mörk, mjuk linje precis där produkten rör ytan. En **kastad skugga** är en större, ljusare, mjukare form som faller bort från ljuset. De flesta produkter behöver båda, och båda ska följa samma ljusriktning som högdagrarna på själva produkten. ```css .product-stage { position: relative; aspect-ratio: 1; background: radial-gradient(ellipse at 50% 40%, #f6efe6 0%, #e9dccb 55%, #cdb89d 100%); display: grid; place-items: center; } /* Soft contact shadow under the product. */ .product-stage::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 17%; height: 5%; background: radial-gradient(closest-side, rgb(40 28 16 / 0.35), transparent); filter: blur(6px); } .product-stage img { position: relative; z-index: 1; width: 62%; margin-bottom: 8%; } ``` En scen för en produkt på webben: en varm sweep, en mjuk elliptisk kontaktskugga och den frilagda produkten överst. Justera skuggans bredd och läge efter produktens fotavtryck. ### Undvik - Frilagda produkter utan skugga, svävande i rymden - En skugga som faller åt ett håll och högdagrar åt det andra - Hårda svarta slagskuggor - En bakgrund som är ljusare eller mer mättad än produkten ### Gör så här - En mjuk kontaktskugga där produkten möter golvet - Ljus och skugga från en enda konsekvent riktning - Skuggor tonade med bakgrundens färg - Produkten som bildens starkaste kontrast ## Håll produktbilderna enhetliga i hela sortimentet Ett sortiment läses som ett rutnät. När varje produkt står på samma bakgrund, i samma vinkel och skala, ser rutnätet lugnt ut och folk jämför produkter i stället för foton. När varje bild är olika ser sidan ut som en marknadsplats full av främlingar. 1. **Lås bakgrunden** En färg eller gradient för huvudbilderna, nedskriven med sina exakta koder. 2. **Lås ljuset** En riktning och en mjukhet, så att skuggor och högdagrar stämmer överens för varje produkt. 3. **Lås vinkeln** Samma kamerahöjd och vinkel för liknande produkter: framifrån, trekvartsvy, uppifrån. 4. **Lås beskärningen** Produkten fyller samma andel av bilden, med samma marginal, centrerad på samma linje. 5. **Lås storlekarna** Exportera varje bild i samma storlek för varje kanal, till exempel 2048 gånger 2048 för en produktbild i Shopify. - Shopify-produkt 2048×2048: 2048 × 2048 - Etsy-annons 2700×2025: 2700 × 2025 - Instagraminlägg 1080×1350: 1080 × 1350 - Pinterest-pin 1000×1500: 1000 × 1500 En produkt, fyra kanaler. En bakgrund som lätt går att utvidga, som en gradient, kan renderas för varje form i stället för att sträckas. Ett stående lanseringsinlägg som presenterar en ny flaska på en mjuk grön gradientbakgrund Ett lanseringsinlägg för en produkt på en bakgrund hämtad från produktens färger: samma familj som butikens bilder. I Gradiently kan du lägga en frilagd bild över vilken Mark som helst, tona foton i Markens färger och kopiera en färdig design till andra storlekar, så att en kampanjbild, en pin och en story delar en bakgrund. För en produkt med stark färg kan [Match a picture](https://gradiently.design/sv/guide/match-a-picture) hitta Marks vars palett ligger nära den. ## FAQ ### Vilken bakgrundsfärg är bäst för produktbilder? En som kontrasterar mot produkten i ljushet. För färgen, välj tonal för ett lugnt och exklusivt intryck, komplementär för energi eller en tonad neutral för rena sortimentsbilder. ### Ska produktbilder ha vit bakgrund? Vissa marknadsplatser kräver vitt för huvudbilden. Annars ser en tonad neutral eller tonal färg ofta mer exklusiv och varumärkestrogen ut. ### Hur får jag en frilagd produkt att inte se ut att sväva? Lägg till en mjuk kontaktskugga där den möter ytan och vid behov en ljusare kastad skugga som följer samma ljusriktning som produktens högdagrar. ### Hur håller jag produktbilderna enhetliga? Använd samma bakgrund, ljusriktning, kameravinkel, beskärning och exportstorlek för varje produkt, och skriv ner upplägget.