# Varumärke för open source-projekt: från README till release [Canonical HTML page](https://gradiently.design/sv/guide/open-source-project-branding) De flesta möter ett open source-projekt via en länkförhandsvisning, en README och ett releaseinlägg. Lite varumärke över de tre får ett projekt att se underhållet, pålitligt och värt en stjärna ut. ## The short version - Varumärke för open source-projekt finns mest på fyra ställen: logotypen, README-huvudet, förvarets förhandsbild för delning och releaseannonser. - En bra open source-logotyp är enkel nog att läsas i 16 pixlar som favicon och i liten storlek i en beroendelista. - README-filer på GitHub kan växla en huvudbild mellan ljus och mörk version med HTML-elementet picture och prefers-color-scheme. - Förhandsbilden för delning är det som visas när någon delar förvarets länk, så den bör ange projektets namn och vad det gör. - Releaseinlägg i en konsekvent look hjälper användare att märka nya versioner och koppla dem till samma projekt. **Varumärke för open source-projekt** kräver ingen designbyrå. Det kräver fyra saker som görs en gång och hålls konsekventa: en enkel logotyp, ett README-huvud som läses i ljust och mörkt läge, en förhandsbild för när förvaret delas och en igenkännbar mall för releaseannonser. Tillsammans berättar de för en besökare på några sekunder att projektet underhålls och har en egen hållning, vilket ofta är det som ger den första stjärnan eller den första bidragsgivaren. ## Varför varumärke spelar roll för ett open source-projekt Utvecklare bedömer projekt snabbt, och de bedömer efter tecken på omsorg: en tydlig README, färska releaser, ett namn som är lätt att hitta igen. En konsekvent visuell identitet är ett av de tecknen. Den hjälper också folk att minnas ditt projekt bland flera liknande bibliotek, och ger bidragsgivare och konferenstalare något att sätta på en bild. Inget av det ersätter bra dokumentation, det gör bra dokumentation lättare att upptäcka. ## En open source-logotyp som fungerar i 16 pixlar Din logotyp kommer att synas som favicon, GitHub-avatar, en liten bricka på en dokumentationssida och ibland som klistermärke. Designa för det minsta fallet först. En enda kraftfull form eller en bokstav i ett säkert typsnitt slår en detaljerad illustration. Exportera en SVG för webben och transparenta PNG:er till allt annat. [SVG mot PNG](https://gradiently.design/sv/guide/svg-vs-png) förklarar vad som passar var, och [favicondesign](https://gradiently.design/sv/guide/favicon-design) tar upp de små storlekarna. ### Svår att använda - En detaljerad maskot med tunna linjer - Fem färger som försvinner i liten storlek - En ordbild för lång för att läsas i en avatar - Bara en PNG på vit bakgrund ### Lätt att använda - En form eller bokstav som läses i 16 px - En eller två färger plus en bakgrund - Ett kort märke för avatarer, en ordbild för huvuden - SVG plus transparent PNG, ljusa och mörka versioner Lägg märket på en gradientbakgrund för avatarer och huvuden så slutar det se ut som en standardikon. Håll gradienten lugn bakom logotypen där den ligger. [Logotyp på gradientbakgrund](https://gradiently.design/sv/guide/logo-on-gradient-background) förklarar hur. - Terminalblå: `linear-gradient(135deg, #0d1117 0%, #1f2a44 55%, #3b82f6 100%)` - Bygggrön: `radial-gradient(circle at 25% 25%, #a7f3d0 0%, #10b981 45%, #064e3b 100%)` - Releaseviolett: `linear-gradient(160deg, #1a1033 0%, #6d28d9 50%, #f0abfc 100%)` - Varm bärnsten: `linear-gradient(120deg, #fff7ed 0%, #fdba74 50%, #c2410c 100%)` Fyra projektbakgrunder som sitter bra bredvid GitHubs mörka och ljusa teman. Kopiera en för avatarer, huvuden och förhandsbilden för delning. ## Ett README-huvud som fungerar i mörkt läge Många utvecklare läser GitHub i mörkt läge, och ett huvud gjort för vitt lyser som en fackla. GitHub stöder HTML-elementet `` i Markdown, så du kan visa en ljus och en mörk version av samma huvud. En banner på 1200×600, storleken på en bloggbanner, är en bekväm bredd för en README. [Design för mörkt läge](https://gradiently.design/sv/guide/dark-mode-design) tar upp färgsidan. ```html

Tidepool: a tiny job queue for Postgres

``` Klistra in överst i README.md. GitHub visar den mörka bilden för läsare i mörkt läge och den ljusa för alla andra. Exportera båda i 1200×600 och visa i 600 bredd så att de förblir skarpa på skärmar med hög täthet. Lägg tre saker i huvudet: logotypen, projektnamnet och en beskrivning på en rad. Märken, installationskommandon och skärmbilder hör hemma under det, som text, där de kan kopieras och hållas uppdaterade. ## Så lägger du till en förhandsbild för delning på GitHub När någon klistrar in ditt förvars länk i en chatt, ett forum eller ett inlägg visar plattformen dess **förhandsbild för delning**. Utan en genererar GitHub ett standardkort från förvarets uppgifter. Du kan ladda upp din egen i förvarets inställningar, under Social preview, och GitHub anger sina rekommenderade mått på den sidan. Designa den utifrån din 1200×630-förlaga för länkförhandsvisning och håll orden centrala, så att små skillnader i form inte beskär något. [Bildstorlek för Open Graph](https://gradiently.design/sv/guide/open-graph-image-size) förklarar beskärningarna, och [Open Graph-taggar](https://gradiently.design/sv/guide/open-graph-tags) tar upp samma bild för din dokumentationssida. En liggande förhandsbild för delning för ett open source-projekt som heter Tidepool, med dess beskrivning på en rad En förhandsbild för delning i 1200×630: namn, en rad, inget nära kanterna. ## Releasegrafik som folk lägger märke till Många användare hör om en ny version via ett inlägg snarare än ändringsloggen. En konsekvent releasegrafik, samma bakgrund och layout där bara versionsnumret och rubriken ändras, lär folk att känna igen dina annonser. Börja med vad användare nu kan göra, inte bara versionsnumret. En liggande releaseannons för version 2.0 av ett open source-projekt, med rubriken Omförsök med backoff Ett releaseinlägg för X eller Bluesky i 1600×900: funktionen leder, versionen stöder. En kvadratisk releasegrafik som räknar upp höjdpunkterna i Tidepool 2,0 på samma gradient Den kvadratiska versionen för LinkedIn i 1200×1200, med höjdpunkterna uppräknade. | Grafik | Storlek | Var den visas | | --- | --- | --- | | README-huvud | 1200×600 px | Överst i förvaret | | Förhandsbild för delning | Förlaga för länkförhandsvisning, 1200×630 px | Delade förvarslänkar | | Releaseinlägg | 1600×900 px | X och Bluesky | | Releaseinlägg, kvadratiskt | 1200×1200 px | LinkedIn | | Communitybanner | 960×540 px | Discord-serverns banner | | Förhandsvisning för dokumentationssida | 1200×630 px | Delade dokumentationslänkar | Arbetsuppsättningen för ett projekt. En förlaga täcker dem alla. 1. **Gör märket** En form eller bokstav, testad i 16 px. Exportera SVG och transparent PNG. 2. **Välj en bakgrund** En gradient eller färg som sitter bra i GitHubs mörka och ljusa teman. 3. **Bygg README-huvudet** Ljus och mörk version, logotyp, namn och en rad. 4. **Ladda upp förhandsbilden för delning** Förvarets inställningar, Social preview. Testa genom att klistra in länken i en chatt. 5. **Gör en mall för releaseinlägget** Behåll layouten, ändra version och rubrik varje gång. Gradiently passar underhållare som hellre slipper öppna ett designverktyg. Det fungerar i ChatGPT, Claude och varje assistent som stöder fjärr-MCP-servrar, så du kan be om en releasegrafik medan du skriver releaseanteckningarna, och designen öppnas i Studio för en sista koll. Designerna sitter på en Mark, en gradientbakgrund som ingen annan kan exportera med när du har säkrat den, så ditt projekts look blir verkligen din egen. [Guiden för MCP-installation](https://gradiently.design/sv/developers/mcp) tar några minuter. ## FAQ ### Hur lägger jag till en förhandsbild för delning i ett GitHub-förvar? Öppna förvarets inställningar, hitta Social preview och ladda upp en bild. GitHub visar sina rekommenderade mått där, håll text centralt så att inget viktigt beskärs. ### Hur får jag en README-bild att ändras i mörkt läge? Använd HTML-elementet picture med en source för prefers-color-scheme: dark och en img-reserv för ljust. GitHub renderar det i Markdown-filer. ### Behöver ett open source-projekt en logotyp? Det krävs inte, men en enkel logotyp gör projektet lättare att känna igen i avatarer, dokumentation och presentationer. Designa den så att den läses i faviconstorlek. ### Vad ska en releaseannonsgrafik innehålla? Projektnamnet, versionen och huvudfunktionen skriven som vad användare nu kan göra. Håll layouten densamma för varje release.