website design auf dem macbook pro retina – wie macht ihr das?

wakethedead

wakethedead

Aktives Mitglied
Thread Starter
Dabei seit
14.09.2010
Beiträge
508
Reaktionspunkte
41
er macht es wohl so (wenn ich das richtig verstanden habe) das er seine auflösung auf 1680 x 1050 hochknallt und dann in photoshop das dokument in 200% ansicht bearbeitet. so sehen die entwürfe aber pixelig aus. ich hab bis jetzt photoshop in der nidrigeren auflösung gestartet ("in niedriger auflösung öffnen), da sieht es genauso pixelig aus + ich habe bei einem 1200px breiten entwurf zu wenig platz auf dem monitor für die paletten was etwas nervt.

wie macht ihr das?
 
ich mache es jetzt einfach so das das dokument 144 DPI hat.
 
Veritas schrieb:
Was haben denn dpi mit Webdesign zu tun?
Zum Vergrößern anklicken....

ach so, ja gleichzeitig mache ich es doppelt so groß. durch die doppelte DPI anzahl sieht es dann crispier (retina) aus. schriften die im endeffekt 16px groß sein sollen lege ich dann in 32px an. also im prinzip alles verdoppeln, dann schaut es auf dem retina display aus wie beim user später auf dem normalen display (natürlich etwas besser), also die verhältnisse stimmen. bin mal gespannt wie das läuft.

zuätzlich werde ich mal testen JPGs mit 50% qualität zu exportieren (statt der üblichen 80%) und dann um 50% runter zu skalieren auf normalen displays. auf retina displays dann 100% anzeigen, die artefakte sollen auf dem retina display mehr oder weniger gut verschwinden. hat mit dieser technik jemand erfahrung?
 
cpx schrieb:
Was anderes als Photoshop verwenden. :)
Zum Vergrößern anklicken....

was denn? werde beim nächsten projekt mal edge reflow verwenden, sketch werde ich nicht nehmen weil es mac only ist und da bei mir nie sicher ist ob ich mac oder windows nutze fällt das für mich flach.
 
wakethedead schrieb:
was denn?
Zum Vergrößern anklicken....

Na ja, das ist Deine eigene Entscheidung, bzw. Deines Portemonnaies. ;)
Ich selbst benutze mehrere Programme, dafür sind "die einfachen Dinge" die ich mache, zu speziell um nur ein Programm zu verwenden.

wakethedead schrieb:
werde beim nächsten projekt mal edge reflow verwenden, sketch werde ich nicht nehmen weil es mac only ist und da bei mir nie sicher ist ob ich mac oder windows nutze fällt das für mich flach.
Zum Vergrößern anklicken....

Aha, vielleicht wäre es für Dich einfacher, beide Systeme zu nutzen, anstatt sich selbst da durch zu beschränken ?
 
cpx schrieb:
Aha, vielleicht wäre es für Dich einfacher, beide Systeme zu nutzen, anstatt sich selbst da durch zu beschränken ?
Zum Vergrößern anklicken....

es kostet aber mehr zeit sich in 2 programm reinzuarbeiten als in 1. layouten ist ja im prinzip immer derselbe prozess ... welche nutzt du denn? ich rede hier nur von layouten, nicht von programmieren. ich meine auch nicht WYSIWYG oder sowas.
 
wakethedead schrieb:
macht es wohl so (wenn ich das richtig verstanden habe) das er seine auflösung auf 1680 x 1050 hochknallt und dann in photoshop das dokument in 200% ansicht bearbeitet. so sehen die entwürfe aber pixelig aus. ich hab bis jetzt photoshop in der nidrigeren auflösung gestartet ("in niedriger auflösung öffnen), da sieht es genauso pixelig aus + ich habe bei einem 1200px breiten entwurf zu wenig platz auf dem monitor für die paletten was etwas nervt.

wie macht ihr das?
Zum Vergrößern anklicken....

Also ich mach das noch auf normaler 1920x1080-Auflösung und kannd as Problem nicht nachvollziehen!

In PS "Datei > Für Web speichern..." und dann GIF als Format auswählen und dann die Farbtiefe soweit reduzieren, wie das Ergebnis noch ansehenswert ist. Ggf. auch mal mit JPEG mit reduzierter Qualität versuchen. Auflösung des Bildes natürlich maximal so groß wählen, wie das Bild auf der Webseite angezeigt wird (i.d.R. nicht breiter als 1100 Pixel - bspw. Wordpress), denn niemand freut sich über endlose Ladezeiten, weil ein Bild statt 100kB 3,5MB groß ist!!!

Vor allem dann, wenn er Deine Seite mobil besucht ;)
 
1. Wenn Du zu wenig Platz für Deine Paletten hast, solltest Du Dir einen 2.Monitor für die Paletten zu legen.

wakethedead schrieb:
es kostet aber mehr zeit sich in 2 programm reinzuarbeiten als in 1.
Zum Vergrößern anklicken....

Na ja, wenn Du diese Zeit nicht hast, dann bleib bei Deinem Photoshop. :rolleyes:

Du kannst Dein fertiges Layout nicht als JPEG SnapShot sichern um das dann auf verschiedenen Monitoren mit unterschiedlichen Auflösungen zu betrachten, das wird schief laufen, so bald Jemand dieses JPEG mit einem Tablett/Monitor hochkant betrachtet. ;)

Tipps und Programme kann ich Dir nur nennen wenn Du Detailliert Beschreibst was Du eigentlich genau willst. Deine Antworten und Fragen sind nicht ausreichend und missverständlich um Dir wirklich gut zu Helfen, ist nicht böse gemeint.
 
cpx schrieb:
1. Wenn Du zu wenig Platz für Deine Paletten hast, solltest Du Dir einen 2.Monitor für die Paletten zu legen.



Na ja, wenn Du diese Zeit nicht hast, dann bleib bei Deinem Photoshop. :rolleyes:

Du kannst Dein fertiges Layout nicht als JPEG SnapShot sichern um das dann auf verschiedenen Monitoren mit unterschiedlichen Auflösungen zu betrachten, das wird schief laufen, so bald Jemand dieses JPEG mit einem Tablett/Monitor hochkant betrachtet. ;)

Tipps und Programme kann ich Dir nur nennen wenn Du Detailliert Beschreibst was Du eigentlich genau willst. Deine Antworten und Fragen sind nicht ausreichend und missverständlich um Dir wirklich gut zu Helfen, ist nicht böse gemeint.
Zum Vergrößern anklicken....

für einen externen monitor habe ich wie gesagt keinen platz. jo mir ist schon klar das ein JPG von meinem layout nicht responsive ist ;). es geht mir einfach darum das wenn ich in photoshop ein website layout anlege welches 1200px breit ist das das dann halb so schmal ist wie auf einem normalen monitor. daher denke ich ist die beste lösung das dokument in der größe einfach zu verdoppeln (in der breite versteht sich) damit ich meinen entwurf so sehe wie er fertig programmiert aussehen wird (wo ich die breiten etc. meist in % angebe).

nebenbei schaue ich mir adobe "edge reflow" an, aber die software ist noch nicht so ganz ausgereift finde ich, auch wenn es in die richtige richtung geht. ich finde es etwas schade das fireworks eingestampft wurde und es einfach keinen richtig guten ersatz gibt. okay mit photoshop layouten ist okay und die export tools in CC gefallen mir auch sehr gut, aber so ganz das gelbe vom ei ist es nicht ... . und vor allem: warum zum geier kann ich in photoshop kein SVG importieren??

btw. man kann ja die paletten verkleinern in photoshop und dann per click ausklappen – gibt es eine einstellung die das per mouseover macht statt per click? und ausblenden dann wenn man mit der maus die palette verlässt. wär cool.
 
okay ich versuche es nochmal zu erklären:

wenn ich auf www.zeit.de gehe und mit CMD + SHIFT + 4 einen rechteckigen ausschnitt des bildschirms fotografiere zeigt er mir ja die breite des bereiches an den ich ausgewählt habe. so kann man die breite der webseite abmessen, es sind ca. 1050 pixel (http://www.zeit.de/index). im quelltext ist die breite mit 940px angegeben, ich denke mal plus paddings ergibt das dann die 1050 pixel. okay so weit so gut.

mache ich davon jetzt einen screenshot habe ich folgendes bild:

Bildschirmfoto 2015-05-29 um 00.51.21.jpg

das screenshot tool von yosemite hat mir angezeigt das der screenshot ca. 1050 pixel breit ist. öffne ich diesen screenshot dann in photshop oder schaue mir die bildmaße im finder an (CMD + I) steht da aber die doppelte breite! das liegt wohl daran das das retina display die screenshots in der größe verdoppelt was die pixelanzahl angeht da ein retina display in der vertikalen und horizontalen ein pixel mehr hat (also 3 pixel mehr wenn ich mich nicht täusche).

daraus ergibt sich logischerweise das wenn ich in photshop (oder in pixelmator oder wo auch immer!) ein layout mit der breite 1050 pixel anlege es nur halb so breit ist wie der screenshot der zeit.de webseite:

Bildschirmfoto 2015-05-29 um 00.55.14.jpg

meine schlussfolgerung: das layout doppelt so breit anlegen. wenn ich jetzt aber das layout slice und die bilder exportiere sind diese natürlich auch doppelt so groß, also icons die ich dann mit css einbinde logischerweise auch.

does anyone understand?

@WirbelFCM: das weiß ich alles ich erstelle mit photoshop seit nunmehr 18 jahren mockups ;)
 
Das Layout in doppelter Auflösung anlegen hat den Vorteil, dass alle Pixelelemente die hohe Auflösung für Retinas haben, bei Bedarf kannst du ja auch in 50% exportieren. Der Entwickler kann dann über CSS steuern, welche Auflösung auf welchem Display angezeigt wird. Bei Schriften spielt es keine Rolle, sind Vektoren.
 
woluka schrieb:
Das Layout in doppelter Auflösung anlegen hat den Vorteil, dass alle Pixelelemente die hohe Auflösung für Retinas haben, bei Bedarf kannst du ja auch in 50% exportieren.
Zum Vergrößern anklicken....

für bilder ist das okay aber für grafiken nicht.

woluka schrieb:
Der Entwickler kann dann über CSS steuern, welche Auflösung auf welchem Display angezeigt wird. Bei Schriften spielt es keine Rolle, sind Vektoren.
Zum Vergrößern anklicken....

ja ich weiß ich bin selbst der entwickler (mache beides, design und programmierung). nur wie das mit dem retina läuft war mir nicht ganz klar.
 
wakethedead schrieb:
für einen externen monitor habe ich wie gesagt keinen platz.
Zum Vergrößern anklicken....

Na gut, wenn Du schon n'en 5K iMac hast und keinen Platz mehr für einen 2.Monitor... das klingt nach U-Boot für mich. :d

wakethedead schrieb:
es geht mir einfach darum das wenn ich in photoshop ein website layout anlege welches 1200px breit ist das das dann halb so schmal ist wie auf einem normalen monitor.
Zum Vergrößern anklicken....

Das klingt nach einem simplen Software-Fehler für mich. Da werden anscheinend 2 Pixel zu einem Pixel gemacht was nicht sollte.

wakethedead schrieb:
daher denke ich ist die beste lösung das dokument in der größe einfach zu verdoppeln (in der breite versteht sich) damit ich meinen entwurf so sehe wie er fertig programmiert aussehen wird (wo ich die breiten etc. meist in % angebe).
Zum Vergrößern anklicken....

Das mag als eine schlechte Notlösung gehen, diesen schwerwiegenden Fehler würde ich an Adobe + Apple melden !

wakethedead schrieb:
und vor allem: warum zum geier kann ich in photoshop kein SVG importieren??
Zum Vergrößern anklicken....

Da musst Du Adobe Fragen, kannst die SVG doch in Gimp öffnen. :p

wakethedead schrieb:
btw. man kann ja die paletten verkleinern in photoshop und dann per click ausklappen – gibt es eine einstellung die das per mouseover macht statt per click? und ausblenden dann wenn man mit der maus die palette verlässt. wär cool.
Zum Vergrößern anklicken....

An Deinem simplen Beispiel, sieht man sehr schön wie wenig Durchdacht Adobe's Software in der Realität ist. :d

wakethedead schrieb:
okay ich versuche es nochmal zu erklären:

das screenshot tool von yosemite hat mir angezeigt das der screenshot ca. 1050 pixel breit ist. öffne ich diesen screenshot dann in photshop oder schaue mir die bildmaße im finder an (CMD + I) steht da aber die doppelte breite!
Zum Vergrößern anklicken....

Bei mir nicht, mit CMD+I steht die normale Auflösung in Pixeln des SnapShots (800x408 Pixel) drinnen. Wie bereits gesagt, das sieht nach einem simplen Software-Fehler aus.

Die Pixel vom Retina sollten doch wohl 1:1 gross sein und nicht 2:1 oder ?

wakethedead schrieb:
das liegt wohl daran das das retina display die screenshots in der größe verdoppelt was die pixelanzahl angeht da ein retina display in der vertikalen und horizontalen ein pixel mehr hat (also 3 pixel mehr wenn ich mich nicht täusche).
Zum Vergrößern anklicken....

Und wieder ein Missverständnis: meinst Du jetzt doppelt in beiden Richtungen 2:2 oder nur in einer Richtung 2:1 "öffne ich diesen screenshot dann in photshop oder schaue mir die bildmaße im finder an (CMD + I) steht da aber die doppelte breite!" wie Du es vorher gesagt hast ?

Das ist ein Software-Fehler, wenn Du es richtig Formuliert hast...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten