Jump to content
Just nu i M3-nätverket

Photoshop CC och retina/webben


arjemma

Recommended Posts

Hej!

 

Jag har en Macbook Pro från början av 2015 med retina-skärm.

Jag använder senaste versionen av Photoshop CC och har nu märkt att om jag gör en bild på 500x700px och 72dpi så ser den ut att vara riktigt bra kvalitet i Photoshop men när jag sen sparat (i PNG) och öppnar filen i Chrome så ser den ut att vara jättedålig kvalitet.

 

Jag tänkte ladda upp bilderna på min tumblr men där ser bilderna hemska ut, även fast jag gör exakt som jag gör på min Mac Mini där jag inte har retina skärm.

 

Jag håller även på med webb design och behöver verkligen veta hur bilderna kommer se ut på webben redan när jag sparar dom i Photoshop men det verkar inte vara möjligt just nu.

 

Vad ska jag göra?

Vill så gärna fortsätta blogga.

 

Link to comment
Share on other sites

davidredjoy

Kan ha att göra med Chrome och Tumblr inte stödjer "retina-skärm" i deras inställningar? Om du öppnar samma bilder i Safari hur blir det då? Om du öppnar samma bilder i Chrome eller i Tumblr på din Mac mini, hur ser de ut där?

 

500x700x72 är liksom ingen stor bild som borde skapa problem... När du sparar dom som .png - använder du 100% kvalité när du exporterar dom i PS?

 

Kommer inte på något annat just nu som kan orsaka detta utöver ovanstående....

 

- Använder själv inte en retina skärm nämligen så vet inte hur dessa visar Tumblr... :huh:

 

:whistling:

Link to comment
Share on other sites

Kan ha att göra med Chrome och Tumblr inte stödjer "retina-skärm" i deras inställningar? Om du öppnar samma bilder i Safari hur blir det då? Om du öppnar samma bilder i Chrome eller i Tumblr på din Mac mini, hur ser de ut där?

 

500x700x72 är liksom ingen stor bild som borde skapa problem... När du sparar dom som .png - använder du 100% kvalité när du exporterar dom i PS?

 

Kommer inte på något annat just nu som kan orsaka detta utöver ovanstående....

 

- Använder själv inte en retina skärm nämligen så vet inte hur dessa visar Tumblr... :huh:

 

:whistling:

 

Jag har kollat i Safari också och där är det exakt likadant :/

Det intressanta är att jag har EXAKT samma inställningar på bilden i Photoshop som jag har haft på bilderna jag har gjort på min mac mini (storlek och dpi) men kvalitets skillnaden på webben är extrem.

 

Nej jag tycker inte heller att den ska skapa några problem alls, det har det aldrig gjort tidigare. Jag sparar dom som okomprimerad PNG på båda datorerna. Jag börjar fundera på om det har att göra med att min Mac Mini kör Photoshop CS6 och min Macbook kör Photoshop CC men borde väl inte vara någon skillnad?

 

Det roliga är att när jag mäter med verktyget i Mac (cmd+shift+4) så är den bara 250px i Photoshop men 500px i Chrome...

 

Jag bifogar båda bilderna och inställningarna jag har i Photoshop.

 

Som det är nu är det en pina att designa för webben i Photoshop :(

 

EDIT:

Såg nu att det blir exakt likadant när jag tar en screencap... så har det något med upplösningen på Photoshop att göra? Typ ska jag göra en bild i dubbel storlek och sen exportera som halv storlek? Är helt lost just nu haha

Allt jag verkar göra i Photoshop blir dubbelt så stort i alla andra program...

post-67357-0-58554300-1457287599_thumb.png

post-67357-0-50629600-1457287608_thumb.png

post-67357-0-99976700-1457287652_thumb.png

Link to comment
Share on other sites

davidredjoy

Verkar helt wierd det där...!

 

Det enda jag vet - som jag har läst och hört innan här är att när man ska ladda upp bilder på sidor som stödjer retina upplösning finns det ett speciellt namn man ska lägga till i fil-namnet - dock vet jag inte exakt hur detta fungerar och om det sträcker sig till t.ex. Tumblr då detta nog mest handlar om html-design... Men man ska iaf alltid göra två bilder då, en original och en dubbel så stor och då döper man den större till "...x2.png" så html-sidan själv reglerar detta beroende på om besökaren har retina skärm.

 

Dock märkte jag en sak när jag öppnar dina bilder, den ena du lagt upp (den översta i inlägget) är 996x1216p medans den understa är 500x706p...

 

Kan inte tänka mig att versionerna på PS skulle ha betydelse om du kör samma inställningar, men försäkerhets skull, om du inte redan testat, gör en bild i CS6 och spara den som en .psd och skicka över den till din MBP med CC och se om den ändras? Testa även tvärtom med så klart... - Alla psd-filer ska ju kunna öppnas i äldre versioner med så borde inte va några bekymmer där btw....

 

- Har lagt till två stycken testbilder nedan, med ett mönster jag haft sen tidigare som är enkelt att se om det blir suddigt....

 

post-74999-0-47106400-1457310917_thumb.png

Denna är 500p x 700p x 72dpi

 

post-74999-0-25511000-1457311638_thumb.png

Denna är 1000 x 1400 x 72dpi

 

(Dom är lite olika i klippningen av mönstret men det blev så när jag ändra storlek bara)

 

Båda borde va lika kristallklara, dom är i .png-format och i full kvalité.

 

Spara dom, testa öppna dom där du har problem och se vad som händer?

 

- Kan även tillägga att dessa är skapade i Photoshop CS4 - så ännu äldre än något av dina du använder...

 

 

:laserbok:

 

 

Link to comment
Share on other sites

Du måste spara ut grafiken i dubbel storlek från hur du vill att den ska upplevas.

 

Alltså vill du ha en bild som upplevs som 500x500 pxl på en traditionell skärm, så måste du göra bilden i dubbla storleken 1000x1000 pxl för att retina ska fungera (det räcker naturligtvis inte att bara skala upp bilden i photoshop utan den måste innehålla dubbelt så mycket information redan från början).

Vad en dator med retinaskärm gör, är att skala upp alla bilder till dubbel storlek om den inte hittar en korrekt retinabild. Det är därför du upplever bilderna som dåliga i din browser.

 

På din hemsida kan du lägga upp bilden med dubbel storlek och sen sätta "korrekt" storlek i koden. För icke retina kommer folk få ladda ner dubbelt så stora bilder dessvärre, men den kommer visas skarpt på både retina och vanlig skärm. (funkar inte på bakgrundsbilder dock).

 

Det finns naturligtvis kod för att fixa alternativ som funkar mer optimerat beroende på vilken skärm som används men det ligger utanför min kunskap.

Link to comment
Share on other sites

Verkar helt wierd det där...!

 

Det enda jag vet - som jag har läst och hört innan här är att när man ska ladda upp bilder på sidor som stödjer retina upplösning finns det ett speciellt namn man ska lägga till i fil-namnet - dock vet jag inte exakt hur detta fungerar och om det sträcker sig till t.ex. Tumblr då detta nog mest handlar om html-design... Men man ska iaf alltid göra två bilder då, en original och en dubbel så stor och då döper man den större till "...x2.png" så html-sidan själv reglerar detta beroende på om besökaren har retina skärm.

 

Dock märkte jag en sak när jag öppnar dina bilder, den ena du lagt upp (den översta i inlägget) är 996x1216p medans den understa är 500x706p...

 

Kan inte tänka mig att versionerna på PS skulle ha betydelse om du kör samma inställningar, men försäkerhets skull, om du inte redan testat, gör en bild i CS6 och spara den som en .psd och skicka över den till din MBP med CC och se om den ändras? Testa även tvärtom med så klart... - Alla psd-filer ska ju kunna öppnas i äldre versioner med så borde inte va några bekymmer där btw....

 

- Har lagt till två stycken testbilder nedan, med ett mönster jag haft sen tidigare som är enkelt att se om det blir suddigt....

 

attachicon.gif2016_test-retina_500x700x72.png

Denna är 500p x 700p x 72dpi

 

attachicon.gif2016_test-retina_500x700x72_x2.png

Denna är 1000 x 1400 x 72dpi

 

(Dom är lite olika i klippningen av mönstret men det blev så när jag ändra storlek bara)

 

Båda borde va lika kristallklara, dom är i .png-format och i full kvalité.

 

Spara dom, testa öppna dom där du har problem och se vad som händer?

 

- Kan även tillägga att dessa är skapade i Photoshop CS4 - så ännu äldre än något av dina du använder...

 

 

:laserbok:

 

 

 

Ja det är så sjukt förvirrande.

De två bilderna ser helt annorlunda ut i Chrome och Safari mot vad dom gör i Photoshop. I Photoshop är båda kristallklara och ser jättebra ut. I webbläsaren och i mitt "förhandsvisning" på Macen har den övre suddiga kanter på mönstret och den undre är lite mer skarp.

Anledningen måste ju vara att Photoshop förminskar bilderna till 50% när man laddar in dom där, eller ja visar dom i 50% i alla fall även fast det står 100%. När jag mäter med verktyget är den som är 500px bara 250px tex men Photoshop hävdar att den är 500px.

Båda ser som sagt ut att vara mycket sämre kvalitet i webbläsaren och förhandsvisning än vad Photoshop visar. Så man luras ju!

Eller är det min Retina som luras? Oklart haha

 

Du måste spara ut grafiken i dubbel storlek från hur du vill att den ska upplevas.

 

Alltså vill du ha en bild som upplevs som 500x500 pxl på en traditionell skärm, så måste du göra bilden i dubbla storleken 1000x1000 pxl för att retina ska fungera (det räcker naturligtvis inte att bara skala upp bilden i photoshop utan den måste innehålla dubbelt så mycket information redan från början).

Vad en dator med retinaskärm gör, är att skala upp alla bilder till dubbel storlek om den inte hittar en korrekt retinabild. Det är därför du upplever bilderna som dåliga i din browser.

 

På din hemsida kan du lägga upp bilden med dubbel storlek och sen sätta "korrekt" storlek i koden. För icke retina kommer folk få ladda ner dubbelt så stora bilder dessvärre, men den kommer visas skarpt på både retina och vanlig skärm. (funkar inte på bakgrundsbilder dock).

 

Det finns naturligtvis kod för att fixa alternativ som funkar mer optimerat beroende på vilken skärm som används men det ligger utanför min kunskap.

 

Okej tack för svaret, jag förstår ungefär hur min skärm gör men jag förstår inte varför Photoshop inte kan kompensera för det.

I kodning är det inga problem mer än att man måste ha mycket större filer men däremot blir det problem när jag vill ladda upp en bild på Tumblr, Flickr etc som inte har den här inställningen. Funderar starkt på att överge min Macbook med retina när jag ska redigera bilder och sitta på min Mac mini även fast jag egentligen inte vill.

 

Jag har en extern skärm som inte är retina men jag antar att det blir samma problem även på den eftersom det körs från en dator med retina eller?

Link to comment
Share on other sites

Kanske den här länken kan kasta lite ljus över problemet:

http://www.kamerabild.se/fotoskolor/bildredigering-spara-bilder-f-r-webben

 

Jo det där beskriver precis så som jag gör men det blir inte bättre för det. Jag gör precis likadant på min Macbook Pro Retina och min Mac Mini men den sparade bilden blir helt annorlunda på båda datorerna.

Det är nog snarare ett problem med skärmen än med filerna.

Link to comment
Share on other sites

De två bilderna ser helt annorlunda ut i Chrome och Safari mot vad dom gör i Photoshop. I Photoshop är båda kristallklara och ser jättebra ut. I webbläsaren och i mitt "förhandsvisning" på Macen har den övre suddiga kanter på mönstret och den undre är lite mer skarp.

 

Anledningen måste ju vara att Photoshop förminskar bilderna till 50% när man laddar in dom där, eller ja visar dom i 50% i alla fall även fast det står 100%. När jag mäter med verktyget är den som är 500px bara 250px tex men Photoshop hävdar att den är 500px.

 

Båda ser som sagt ut att vara mycket sämre kvalitet i webbläsaren och förhandsvisning än vad Photoshop visar. Så man luras ju!

Eller är det min Retina som luras? Oklart haha

:) Nja, det är väl inget som luras, mer än att man lurar sig själv. Allt är vad det är och det är när bilden visas i webläsare som det blir fel. En webläsare har en egen “renderings-motor” och visar bara bilden i så många pixlar man har angett.

 

Det kommer snart, el har redan kommit, men är inte så väl implmenterat än - <picture> eller <img> med “srcset” (ex). Då kommer man kunna skriva såhär...

<img src="images/bild.jpg"
srcset="images/bild.jpg 1x, images/bild_2x.jpg 2x,
images/bild_hd.jpg 3x">

Rätt smidigt, så väljer den automatiskt sen vilken som skall visas.

 

Det finns lite olika lösningar, men en rel enkel är en liten bit javascript och sen skriver du som vanligt. Du får göra 2 bilder. och den laddar den andra om det är retina, så oavsett kommer alltid den “normala” bilden att laddas.

 

CSS Techniques for Retina Displays

 

Javascript:

$(document).ready(function() {
	if (window.devicePixelRatio > 1) {
		var lowresImages = $('img');

		images.each(function(i) {
			var lowres = $(this).attr('src');
			var highres = lowres.replace(".", "@2x.");
			$(this).attr('src', highres);
		});
	}
});

# Minified
$(document).ready(function(){if(window.devicePixelRatio > 1){var a=$('img');images.each(function(i){var l=$(this).attr('src');var h=l.replace('.','@2x.');$(this).attr('src',h);});}});

 

Sen skriver du som vanligt:

<img src="images/bild.jpg" width="123" height="123" alt="" />

 

Bilderna till det är: bild.jpg och bild@2x.jpg. Känner scriptet av av det är högre pixelratio, byter den ut "." mot "@2x.", och på så sätt visas (istället) din andra bild, som är dubbel så stor.

 

Optimizing Graphics for Apple’s Retina Display Using the CSS Background Size

4 Ways to Convert Your Site to Retina

https://duckduckgo.com/?q=css+retina+solution

 

- - -

 

En annan lösning är ju såklart att man alltid gör bilden dubbelt så stor, säg 1000px men visar den som 500px

<img src="bild_1000px.jpg" width="500" height="500" alt="" />

 

Men det är inte schysst mot de (flesta) som inte har retina, och mot de med lite sämre uppkoppling. Blir både segare och även mer datatrafik går ju åt - vilket blir en xtra onödig kostnad för de med mobilsurf, och tar även på trafikmängen man har på sitt webhotell.

Link to comment
Share on other sites

 

 

Jag har en extern skärm som inte är retina men jag antar att det blir samma problem även på den eftersom det körs från en dator med retina eller?

Nej allt har med skärmen att göra. Visar du bilden på en vanlig/traditionell skärm så visar den förhållande 1:1 där en bild på 500pxl upplevs som 500pxl.

 

När du använder retinaskärmen ritas hela din skärm om för retina (dvs all grafik laddas in i dubbla upplösningen - finns det ingen resurs i dubbel upplösning laddas originalbilden in och skalas upp och blir isf inte särskilt snygg) där förhållandet är 2:1 och en bild på 1000pxl upplevs som 500pxl.

 

Det är därför det krävs att programmen du kör på din dator med retinaskärm har retinastöd för att gui ska bli skarpt.

Om du kör cs6 så har den retinastöd. Det spelar ingen roll vilken version av photoshop du kör för att GÖRA retinagrafik, det handlar bara om möjligheten att visa gui korrekt.

Link to comment
Share on other sites

Förlåt för sent svar till tråden men jag löste mitt problem genom att använda min skärm till min mac mini när jag kör Photoshop för då kan jag se hur resultatet blir på icke-retina och retina. Det var det som behövdes för att lösa problemet.

 

Väldigt dåligt av Photoshop att inte ha inbyggt stöd för det här än men det kommer väl. Efter lite googlande så ser jag att jag verkligen inte är ensam om det här problemet.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.



×
×
  • Create New...