Logo onscherp op website

[pyro-tukker]

Ik kon op het forum geen antwoord vinden op mijn probleem. Dus dit is mijn probleem:

Ik heb een website en een logo. Dit logo is ontworpen door een designer. Nu heb ik daar het psd bestand van. Het logo is extra groot gemaakt, dus het formaat is rond de 3500px x 1500px.

Nu wil ik het logo (wat gewoon tekst is) graag op mijn website in de header als logo hebben. Het probleem is dat het logo er altijd onscherp uit ziet. Ik heb al geprobeerd het logo in photoshop te verkleinen en op te slaan in het goede formaat. Echter de site is responsive, dus al snel wordt het logo weer pixelig. Ik heb ook geprobeerd het logo als svg bestand te exporteren, alleen deze wordt dan niet goed weergeven op de website.

Iemand een idee hoe ik mijn logo super scherp op de website krijg. En het liefst ook nog dat hij op verschillende formaten schermen, super scherp is.

Alvast bedankt voor de hulp.

P.S mijn vraag kan volgens mij ook in het webdesign gedeelte?!

[ Voor 3% gewijzigd door pyro-tukker op 30-11-2015 21:45 ]

[SAWYER]

Sla op als 3 formaten: desktop, tablet en mobile. En gebruik css om de juiste logo bij de juiste viewport te laten zien?

[pyro-tukker]

Gedaan. Ik heb een logo voor zowel, desktop, tablet en mobile.

En wat bedoel je met een viewport, ik ben hier niet bekent mee.

[Famous]

Hoe groot het scherm is waarop de website wordt aangeroepen, aan de hand hiervoor wordt het juiste (scherpe) logo ingeladen.

[pyro-tukker]

Ik gebruik een 1366 en een 1246 scherm zo uit mijn hoofd.

Op beide schermen is die onscherp.

[Gamebuster]

pyro-tukker schreef op maandag 30 november 2015 @ 21:50:
Gedaan. Ik heb een logo voor zowel, desktop, tablet en mobile.

En wat bedoel je met een viewport, ik ben hier niet bekent mee.

*bekend

In CSS heb je dingen als "media queries". Hierin kan je o.b.v. de breedte van de viewport (je browservenster; het ding waar je "doorheen" kijkt naar de webpagina) andere plaatjes instellen.

Als je ook voor high-DPI schermen scherpe plaatjes wil hebben, neem dan 2x zoveel pixels per "pagina-pixel". Als je logo dus 200x200 pixels groot is voor desktop, sla dan het plaatje op als 400x400, toon deze als volgt:

HTML:

<div id=logo></div>

Cascading Stylesheet:

#logo {
  width: 200px;
  height: 200px;
  background-image: url('logo-400x400.png');
  background-size: 200px 200px;
}

Maar uiteindelijk: Laat een professional dit regelen.

[ Voor 5% gewijzigd door Gamebuster op 30-11-2015 21:56 ]

[pyro-tukker]

Kan ik dan bepalen, dat logo 1 moet worden weergeven als het scherm 1246 is. En dat logo 2 moeten worden weergeven als het scherm 1366 is?

En dan zorgen dat de logo' s goed opgeslagen zijn voor deze formaten?

Thanks voor high DPI tip. Ik wist niet dat je het plaatje/logo dan 2x zo "scherp" moest opslaan.

Btw: ik gebruik wordpress en dan een thema. Kan het ook zijn dat het thema mijn plaatje resized en dat ie daarom pixelig wordt?

[MiliaanR]

Is het niet mogelijk om een alleen tekst logo te vectoren, of zou dit helemaal niet werken?

[Marc3l]

SVG formaat al geprobeerd?

[Ramon]

pyro-tukker schreef op maandag 30 november 2015 @ 22:01:
Kan ik dan bepalen, dat logo 1 moet worden weergeven als het scherm 1246 is. En dat logo 2 moeten worden weergeven als het scherm 1366 is?

En dan zorgen dat de logo' s goed opgeslagen zijn voor deze formaten?

Thanks voor high DPI tip. Ik wist niet dat je het plaatje/logo dan 2x zo "scherp" moest opslaan.

Btw: ik gebruik wordpress en dan een thema. Kan het ook zijn dat het thema mijn plaatje resized en dat ie daarom pixelig wordt?

misschien moet je even wat code delen want zo is het wel heel lastig je te helpen.

[pyro-tukker]

Ik heb nog nooit de code handmatig van mijn site aangepast. Ik doe altijd alles in het dashboard van wordpress.

Waar kan ik de code vinden? Als ik de style.css open dan wordt doorgelinkt naar een andere file. Die andere css files zijn super groot en ik zie niet echt welk stuk code nou voor welk onderdeel van de site wordt gebruikt.

[krisyboy]

Het is inderdaad een optie om het logo in meerdere formaten te uploaden alleen is dit niet de "nette" manier om dit te doen.

Als je de site ergens anders hebt laten maken adviseer ik je om dat bedrijf het voor je te laten doen, en dan op de correcte manier met een svg + svg fallback voor browsers die geen svg ondersteunen.

Met alles behalve een vector bestand heb je al snel dat de kwaliteit iets minder wordt bij het schalen van de browser.