# Brändin tuonti verkkosivulta brändipakettiin

[Canonical HTML page](https://gradiently.design/fi/guide/import-brand-from-website)

Verkkosivusi tuntee jo nimesi, lyhyen esittelysi, värisi ja kuvakkeesi. Brändisivun painike lukee ne, ja sinä päätät, mitä säilytät.

## The short version

- Gradiently voi lukea brändin verkkosivun ja ehdottaa sen nimeä, kuvausta, teemaväriä ja kuvaketta brändipakettiin.
- Mitään ei lisätä automaattisesti: jokainen löydös näkyy ehdotuksena, jonka voit käyttää tai ohittaa.
- Nimi tulee sivuston nimimerkinnöistä, kuvaus metakuvauksesta, väri theme-color-merkinnästä ja kuvake kosketuskuvakkeesta tai faviconista.
- Sivusto ilman theme-color-merkintää tai pelkällä SVG-kuvakkeella antaa vähemmän ehdotuksia, joten muutama HTML-headin rivi parantaa tulosta.
- Verkkosivun lukeminen kuuluu brändipakettiin, joka sisältyy Gradiently Prohon.

**Brändin tuonti verkkosivulta** onnistuu Gradientlyssä avaamalla Brändi-sivun, kirjoittamalla osoitteen Identiteetti-osion **Verkkosivusto**-kenttään ja valitsemalla **Lue sivusto**. Gradiently hakee sivuston nimen, kuvauksen, teemavärin ja kuvakkeen ja tarjoaa jokaisen erikseen. Voit käyttää nimeä, kuvausta iskulauseena tai Tietoja-tekstinä, lisätä värin brändiväreihin ja kuvakkeen logoksi. Päätät itse, mitä otat mukaan. Se kestää muutaman sekunnin ja säästää paketin määrittämisen työläimmän osuuden.

## Brändin tuominen verkkosivulta

1. **Avaa Brändi-sivu** Valitse brändi, jonka tiedot haluat täyttää. Tilisi jokaisella brändillä on oma paketti, joten varmista, että olet oikeassa brändissä.
2. **Anna verkkosivusto** Kirjoita osoite **Identiteetti**-osion **Verkkosivusto**-kenttään. Pelkkä verkkotunnus, kuten `crumb.co`, riittää. Et tarvitse https-etuliitettä.
3. **Valitse Lue sivusto** Gradiently käy sivulla kerran, lukee sen head-osan ja hakee kuvakkeen. Painikkeessa näkyy työn aikana **Luetaan…**.
4. **Käytä sopivat tiedot** Jokaisella löydöksellä on oma painike: **Käytä nimenä ”Crumb”**, **Käytä sen kuvausta iskulauseena**, **Käytä sen kuvausta Tietoja-tekstinä**, **Lisää sen väri**, **Lisää sen kuvake logoksi**. Ohita virheelliset tiedot.
5. **Lue uudelleen muutosten jälkeen** Jos päivität sivustoa, valitse **Lue uudelleen**. Kun kaikki hyödyllinen on jo paketissa, sivu kertoo siitä.

Sivuston väri näkyy myöhemmin myös **Värit**-osion ehdotuksena sivustosi nimellä. Voit lisätä sen siellä, jos ohitit sen ensimmäisellä kerralla.

## Mitä Gradiently lukee verkkosivultasi

Se lukee vain antamasi osoitteen julkisen etusivun ja vain brändiä kuvailevat osat. Se ei käy muilla sivuilla, kirjaudu sisään eikä lue sisältöäsi.

| Paketin ehdotus | Lähde | Käyttökohde |
| --- | --- | --- |
| Nimi | `og:site_name`, `application-name` tai Applen verkkosovelluksen otsikko | Brändin nimi |
| Kuvaus | `meta name="description"` tai Open Graph -kuvaus | Iskulause tai Tietoja |
| Väri | `meta name="theme-color"` hex- tai rgb()-arvona | Brändiväri |
| Kuvake | Suurin `apple-touch-icon`, muut rasterikuvakkeet ja sitten `/favicon.ico` | Logo, enintään 256 px |

Neljä ehdotusta ja niiden lähteet. Kuvake piirretään enintään 256 px:n PNG:ksi ennen kuin Gradiently tallentaa sen.

Kaksi yksityiskohtaa on hyvä tuntea. SVG-kuvakkeet ohitetaan, sillä Gradiently ei rasteroi muiden SVG-tiedostoja. Pelkän SVG-faviconin sisältävästä sivustosta ei siis saada kuvaketta. Värin on myös oltava tavallinen hex- tai rgb()-arvo. Theme-color-merkinnän CSS-muuttujaa ei voi lukea.

## Tee verkkosivusta helppo lukea

Jos Lue sivusto löytää vain vähän tietoa, korjaukseksi riittää yleensä muutama rivi sivuston HTML-headissa. Niistä on hyötyä muutenkin: selaimet käyttävät theme-color-arvoa puhelimen osoitepalkissa ja linkkiesikatselut Open Graph -merkintöjä. [Open Graph -merkinnät](https://gradiently.design/fi/guide/open-graph-tags) ja [faviconin suunnittelu](https://gradiently.design/fi/guide/favicon-design) syventävät aihetta.

```html
<head>
  <title>Crumb · Sourdough bakery in Leeds</title>
  <meta name="description" content="Slow sourdough and pastries, baked every morning on Kirkgate.">
  <meta property="og:site_name" content="Crumb">
  <meta name="theme-color" content="#c2410c">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
</head>
```

Kaikki, mitä Lue sivusto etsii: sivuston nimi, yhden rivin kuvaus, hex-teemaväri ja rasterimuotoinen kosketuskuvake koossa 180×180.

### Antaa vähän tietoa

- Metakuvaus puuttuu tai on täynnä hakusanoja
- Theme-color-merkintä puuttuu tai sisältää CSS-muuttujan
- Vain SVG-favicon
- Etusivu ohjaa kirjautumissivulle

### Antaa hyvän alun paketille

- Yksi rehellinen lause toiminnastasi
- Logoon sopiva hex-teemaväri
- 180×180-kokoinen PNG-kosketuskuvake
- Nopeasti latautuva julkinen etusivu

## Mitä tehdä tuonnin jälkeen

Tuonti antaa perustan, ei valmista pakettia. Tee seuraavaksi nämä neljä asiaa tässä järjestyksessä.

1. **Lataa kunnolliset logotiedostot.** Favicon on pieni ja neliömäinen. Lisää koko logosi PNG-, JPEG-, WebP-, GIF- tai AVIF-muodossa, yksi tummille ja toinen vaaleille taustoille. Katso [logo liukuväritaustalla](https://gradiently.design/fi/guide/logo-on-gradient-background).
2. **Täydennä värit.** Yksi teemaväri on alku. Lisää tukiväri sekä tummin ja vaalein neutraali sävy. [Brändivärien valinta](https://gradiently.design/fi/guide/how-to-choose-brand-colors) auttaa.
3. **Määritä fontit.** Valitse otsikko- ja leipätekstifontti tai [lataa omat fonttitiedostosi](https://gradiently.design/fi/guide/custom-fonts-upload).
4. **Kirjoita ääni.** Sivuston kuvaus kertoo Designerille, mikä olet, ei miltä kuulostat. Täytä Sävy, Omin sanoin, Aina ja Ei koskaan. [Brändin ääni tekoälylle](https://gradiently.design/fi/guide/brand-kit-voice) näyttää miten.

Instagram-julkaisu esittelee hapanjuurileipomo Crumbin verkkosivulta luetulla nimellä ja kuvauksella

Ensimmäinen julkaisu heti tuonnin jälkeen: nimi ja kuvaus sivustolta.

Sama Crumbin esittely pystysuuntaisena Instagram-tarinana

Sama brändi tarinana koossa 1080×1920, valmiina kun paketti on määritetty.

## Kun verkkosivun lukeminen epäonnistuu

Jos näet viestin **Emme voineet lukea sivustoa.**, sivu ei vastannut ajoissa, palautti virheen tai esti pyynnön. Tarkista, että osoite avautuu yksityisessä selainikkunassa. Yksityiseen verkkoon, kirjautumissivulle tai tiedostoon verkkosivun sijaan osoittavat osoitteet estetään tarkoituksella. Tiukan bottisuojauksen takana oleva sivusto ei ehkä ole koskaan luettavissa. Kirjoita tiedot käsin, mikä vie muutaman minuutin.

> **Kuka voi käyttää tätä** Sivuston lukeminen kuuluu Pron brändipakettiin. Jaetussa työtilassa vain omistajat ja ylläpitäjät voivat muuttaa brändipakettia. Gradiently lukee sivuston kerran pyynnöstäsi ilman evästeitä tai kirjautumistietoja.

Kun paketti on täytetty, Studio näyttää värisi ensin jokaisessa valitsimessa, tarjoaa logosi ja aloittaa työt fonteillasi. Designer kirjoittaa kuvauksesi pohjalta. Yhdistä paketti Markiin, jota kukaan muu ei voi käyttää, ja julkaisusi näyttävät sinulta ensimmäisestä lähtien. Paketin muut osat käsitellään oppaassa [brändipaketin määrittäminen](https://gradiently.design/fi/guide/brand-kit-setup).

## FAQ

### Miten saan brändivärini verkkosivultani?

Anna Gradientlyn Brändi-sivulla verkkosivusi osoite ja valitse Lue sivusto. Jos sivustolla on theme-color-merkintä, sen väriä ehdotetaan brändiväriksi.

### Miksi Lue sivusto ei löytänyt logoani?

Se etsii rasterikuvakkeita, kuten apple-touch-icon tai favicon.ico, ja ohittaa SVG-kuvakkeet. Lisää sivustolle PNG-kosketuskuvake tai lataa logosi suoraan.

### Korvaako tuonti brändipakettini tiedot?

Ei. Jokainen löydös tarjotaan ehdotuksena, eikä mikään muutu paketissa ennen kuin valitset sen käyttöön.

### Voinko tuoda brändin jonkun muun verkkosivulta?

Työkalu lukee minkä tahansa julkisen sivuston, mutta käytä sitä brändeille, joita johdat tai joille työskentelet. Paketissa tulee olla aineistoja, joita sinulla on oikeus käyttää.

### Entä jos sivustollani ei ole kuvausta?

Lue sivusto tarjoaa silti löytämänsä tiedot. Kirjoita iskulause ja Tietoja-teksti käsin ja harkitse metakuvauksen lisäämistä sivustolle. Se auttaa myös hakutuloksissa.