Ik heb grote problemen met het begrijpen van Retina/HiDPI displays en pixel doubling. Ik heb een 13” 2017 MBP die een native resolution heeft van 2560 x 1600, maar het wordt weergegeven als 1440 x 900. Wanneer ik een screenshot neem wordt deze opgeslaan als 2880 x 1800 met 144 pixels/inch, maar geeft preview deze weer als 1440 x 900 en beweert dat het bestand op volledige grootte wordt weergegeven.
Dat is voor mij al een eerste verwarring aangezien pixels/inch toch pas de grootte bepaalt wanneer je iets naar een printer stuurt? Op je scherm is 1 pixel toch altijd 1 pixel? En wat geeft die 2880 x 1800 pixels weer aangezien mijn scherm er maar 2560 x 1600 heeft, wordt dit dan ergens geschaald of hoe moet ik dit zien? Ook mijn oude MBP met 1440 x 900 resolutie doet hieraan mee en wanneer ik een screenshot van 2880 x 1800 op dat toestel bekijk laat hij die op 1440 x 900 zien en beweert dat de afbeelding op werkelijke grootte wordt weergegeven, terwijl de afbeelding dubbel zo groot als mijn scherm zou moeten zijn. Enkel wanneer ik afbeeldingen gebruik op het web of in een PDF, of bijvoorbeeld open in Gimp wordt duidelijk dat deze het dubbele zijn van wat ik op mijn Mac zie.
Stel nu dat ik een afbeelding wil om te gebruiken op het web, 1200 x 800 met zwarte achtergrond en ‘PAGINA’ als tekst in Montserrat Bold, wit, gecentreerd, lettergrootte 150. Iedereen zegt dat het perfect mogelijk is met raster-based software zolang je het maakt op het formaat waarop je het gebruikt en de text layer niet schaalt. Toch geven al mijn pogingen andere resultaten en ik vraag mij af of hun statement misschien niet van toepassing is op HiDPI schermen of ik nog steeds iets verkeerd doe?
Mijn eerste pogingen waren met Gimp. Gimp gebruikt 1440 x 900 als resolutie, dus zoals mijn scherm geschaald wordt. Wanneer ik de afbeelding maak zoals hierboven beschreven en deze exporteer als png zonder te comprimeren en deze vervolgens bekijk zie ik dit op mijn scherm (screenshot is 2880 x 1800, maar ik zie dit dus full size als 1440 x 900):
https://www.dropbox.com/s...gc/Pagina1200800.png?dl=1
Je kan duidelijk pixels zien in de ‘P’, ‘A’, ‘G’ en ’N’. Toen lotgenoten online gelijkaardige vragen stelden kregen ze spottende antwoorden zoals ‘best grappig dat je een monitor koopt met hoge pixeldichtheid om alles beter te zien en daarna klaagt dat ie te scherp is’, of ‘monitors bestaan uit pixels en lijntjes volgen die pixels waardoor je jagged edges krijgt’. Nu had ik de laptop niet aangekocht voor design en loop ik nu pas tegen dit probleem aan, maar met zulke antwoorden schiet een beginner dus niets op. Ook lijken die opmerkingen niet terecht aangezien ik nooit pixels zie in de graphics van anderen (behalve op de site van Bpost gisteren, misschien let ik er nu pas op?). Ook had ik reeds dezelfde afbeelding gemaakt op 3000 x 2000 en wanneer ik die bekijk (deze wordt weergegeven in dezelfde venstergrootte als die van 1200 x 800, alleen uitgezoomd deze keer) ziet ze er wel crisp uit, zoals ik wil:
https://www.dropbox.com/s...Pagina30002000.png?dl=1
Alleen wordt ze dan geschaald weergegeven en volgens wat ik eerder deze week gelezen had zou dit net slechtere resultaten moeten geven in plaats van betere?
Sinds gisteren heb ik de trial van Photoshop CC, ik heb even dezelfde 1200 x800 afbeelding gemaakt en hoewel Photoshop wel werkt in de native resolution zie je de geëxporteerde afbeelding natuurlijk weer geschaald naar 1440 x 900 en zie ik nog steeds pixels.
Zoals jullie wel merken ben ik helemaal de weg kwijt.
Wat ik wil bereiken is een eenvoudig logo met wat tekst en een diagonaal lijntje onder, om te gebruiken als website logo en op een visitekaartje, dat er op alle toestellen crisp uitziet en waarin je geen pixels ziet. Of je het nu bekijkt op een scherm met 100 PPI, een HiDPI met +200 PPI, of een iPhone 6 met 326 PPI.
- Maak ik het op dubbele grootte en pas ik de width en height aan in mijn html?
- Maak ik alles op 144 pixels/inch ipv 72 om rekening te houden met de Retina’s? (Met Gimp lukt dit, maar Photoshop exporteert toch als 72).
- Heb ik verschillende exemplaren nodig voor verschillende resoluties?
- Kan het ontwerp er ooit scherp uitzien op mijn Retina in werkelijke grootte, dus NIET uitgezoomd? Of zal ik altijd pixels zien zolang ik niet in native resolution werk?
Nog een laatste opmerking: Alles waar ik op mijn Retina pixels in zie, ziet er perfect uit op mijn iPhone 6, terwijl die een hogere pixeldichtheid heeft en hoge pixeldichtheid net het begin van al mijn ellende was. Hoe moet ik dit dan vertalen? Heeft de iPhone zoveel meer pixels dat ik de antialiasing niet meer zie?
HELP!
EDIT: een stukje uit onderstaande artikel maakt het allemaal al wat duidelijker:https://tweakers.net/revi...men-met-de-resolutie.html
"Webdesigners die gebruikmaken van Photoshop kunnen hun ontwerpen op 1440x900 niet goed beoordelen: het beeld ziet er karteliger uit dan op een normaal beeldscherm en omdat tekstlayers niet met viervoudige aantal pixels worden gerenderd zoals een browser dat doet zie je niet het resultaat dat in een browser is te zien op een MacBook Pro met Retina-display. Het gebruik van een extern beeldscherm is voor deze groep gebruikers onoverkomelijk."
Best een vervelende zaak toch. Maar als ik het dus goed begrijp zie enkel ik het verkeerd en kan ik het in een browser, ook op mijn MBP Retina het wel goed beoordelen omdat die browser het anders rendert?
Dat is voor mij al een eerste verwarring aangezien pixels/inch toch pas de grootte bepaalt wanneer je iets naar een printer stuurt? Op je scherm is 1 pixel toch altijd 1 pixel? En wat geeft die 2880 x 1800 pixels weer aangezien mijn scherm er maar 2560 x 1600 heeft, wordt dit dan ergens geschaald of hoe moet ik dit zien? Ook mijn oude MBP met 1440 x 900 resolutie doet hieraan mee en wanneer ik een screenshot van 2880 x 1800 op dat toestel bekijk laat hij die op 1440 x 900 zien en beweert dat de afbeelding op werkelijke grootte wordt weergegeven, terwijl de afbeelding dubbel zo groot als mijn scherm zou moeten zijn. Enkel wanneer ik afbeeldingen gebruik op het web of in een PDF, of bijvoorbeeld open in Gimp wordt duidelijk dat deze het dubbele zijn van wat ik op mijn Mac zie.
Stel nu dat ik een afbeelding wil om te gebruiken op het web, 1200 x 800 met zwarte achtergrond en ‘PAGINA’ als tekst in Montserrat Bold, wit, gecentreerd, lettergrootte 150. Iedereen zegt dat het perfect mogelijk is met raster-based software zolang je het maakt op het formaat waarop je het gebruikt en de text layer niet schaalt. Toch geven al mijn pogingen andere resultaten en ik vraag mij af of hun statement misschien niet van toepassing is op HiDPI schermen of ik nog steeds iets verkeerd doe?
Mijn eerste pogingen waren met Gimp. Gimp gebruikt 1440 x 900 als resolutie, dus zoals mijn scherm geschaald wordt. Wanneer ik de afbeelding maak zoals hierboven beschreven en deze exporteer als png zonder te comprimeren en deze vervolgens bekijk zie ik dit op mijn scherm (screenshot is 2880 x 1800, maar ik zie dit dus full size als 1440 x 900):
https://www.dropbox.com/s...gc/Pagina1200800.png?dl=1
Je kan duidelijk pixels zien in de ‘P’, ‘A’, ‘G’ en ’N’. Toen lotgenoten online gelijkaardige vragen stelden kregen ze spottende antwoorden zoals ‘best grappig dat je een monitor koopt met hoge pixeldichtheid om alles beter te zien en daarna klaagt dat ie te scherp is’, of ‘monitors bestaan uit pixels en lijntjes volgen die pixels waardoor je jagged edges krijgt’. Nu had ik de laptop niet aangekocht voor design en loop ik nu pas tegen dit probleem aan, maar met zulke antwoorden schiet een beginner dus niets op. Ook lijken die opmerkingen niet terecht aangezien ik nooit pixels zie in de graphics van anderen (behalve op de site van Bpost gisteren, misschien let ik er nu pas op?). Ook had ik reeds dezelfde afbeelding gemaakt op 3000 x 2000 en wanneer ik die bekijk (deze wordt weergegeven in dezelfde venstergrootte als die van 1200 x 800, alleen uitgezoomd deze keer) ziet ze er wel crisp uit, zoals ik wil:
https://www.dropbox.com/s...Pagina30002000.png?dl=1
Alleen wordt ze dan geschaald weergegeven en volgens wat ik eerder deze week gelezen had zou dit net slechtere resultaten moeten geven in plaats van betere?
Sinds gisteren heb ik de trial van Photoshop CC, ik heb even dezelfde 1200 x800 afbeelding gemaakt en hoewel Photoshop wel werkt in de native resolution zie je de geëxporteerde afbeelding natuurlijk weer geschaald naar 1440 x 900 en zie ik nog steeds pixels.
Zoals jullie wel merken ben ik helemaal de weg kwijt.
Wat ik wil bereiken is een eenvoudig logo met wat tekst en een diagonaal lijntje onder, om te gebruiken als website logo en op een visitekaartje, dat er op alle toestellen crisp uitziet en waarin je geen pixels ziet. Of je het nu bekijkt op een scherm met 100 PPI, een HiDPI met +200 PPI, of een iPhone 6 met 326 PPI.
- Maak ik het op dubbele grootte en pas ik de width en height aan in mijn html?
- Maak ik alles op 144 pixels/inch ipv 72 om rekening te houden met de Retina’s? (Met Gimp lukt dit, maar Photoshop exporteert toch als 72).
- Heb ik verschillende exemplaren nodig voor verschillende resoluties?
- Kan het ontwerp er ooit scherp uitzien op mijn Retina in werkelijke grootte, dus NIET uitgezoomd? Of zal ik altijd pixels zien zolang ik niet in native resolution werk?
Nog een laatste opmerking: Alles waar ik op mijn Retina pixels in zie, ziet er perfect uit op mijn iPhone 6, terwijl die een hogere pixeldichtheid heeft en hoge pixeldichtheid net het begin van al mijn ellende was. Hoe moet ik dit dan vertalen? Heeft de iPhone zoveel meer pixels dat ik de antialiasing niet meer zie?
HELP!
EDIT: een stukje uit onderstaande artikel maakt het allemaal al wat duidelijker:https://tweakers.net/revi...men-met-de-resolutie.html
"Webdesigners die gebruikmaken van Photoshop kunnen hun ontwerpen op 1440x900 niet goed beoordelen: het beeld ziet er karteliger uit dan op een normaal beeldscherm en omdat tekstlayers niet met viervoudige aantal pixels worden gerenderd zoals een browser dat doet zie je niet het resultaat dat in een browser is te zien op een MacBook Pro met Retina-display. Het gebruik van een extern beeldscherm is voor deze groep gebruikers onoverkomelijk."
Best een vervelende zaak toch. Maar als ik het dus goed begrijp zie enkel ik het verkeerd en kan ik het in een browser, ook op mijn MBP Retina het wel goed beoordelen omdat die browser het anders rendert?
[ Voor 8% gewijzigd door Psdmd op 07-10-2018 16:59 ]