Hallo zusammen,
früher habe ich meine Websites mit Adobe Fireworks entworfen. Da das Programm nicht mehr weiterentwickelt wird, habe ich meinen ersten Entwurf in Photoshop CC 2014 gemacht. Da ich auf einem MacBook Pro Retina arbeite, habe ich nun das Problem, dass ich die Website mit 960 x 800 Pixel mit 200% am Bildschirm darstellen muss um zusehen, was ich da so tue. Im Gegenzug stimmen dann aber die Font-Grössen nicht. Eine 9-Punktt-Schrift ist in Wahrheit eine 18-Punkt-Schrift. Einiges funktioniert in Photoshop doch arg anders als in Fireworks.

Womit macht Ihr Eure grafischen Entwürfe?
Gibt es ein besseres Programm als Photoshop auf MacBook Retina?

Guck Dir mal Sketch an.
bohemiancoding.com/sketch/
Ähnlich intuitiv wie Keynote, vektorbasiert und geile Exportmöglichkeiten, für Weblayouts ganz gut.

Ich mach meine Webseiten-Entwürfe immer in Photoshop und der Programmier bekommt dann von mir die PSD-Dateien, das klappt in der Regel immer gut. Arbeite selbst auf einem Retina Display, ist zwar etwas doof mit der Vergrößerung, aber gut.

Kannst natürlich auch mit "exotischen" Programmen arbeiten, aber wenn du mit Programmieren zusammenarbeitest, würd ich mich vorher absprechen.

Oder alternativ eben Illustrator, da kannst du ja auch Pixel als Einheit angeben, kannst dann aber eben auch stufenlos zoomen ohne dass es Pixelmatsch gibt – Illu ist ja ähnlich verbreitet wie PS, nur vllt nicht ganz so komfortabel für den Programmierer.

Danke für die schnellen Antworten. Ich werde heute Abend beides mal testen.
Photoshop kann in meinen Fall Fireworks nicht ersetzen

Schau dir die neueste Version 2014.2 an. Hier gibt es ein neues Werkzeug ("Extrahieren"), welches diesen Job sehr gut erledigt.

Was vermisst du denn in Photoshop, was dir Fireworks bietet?

Klar, es ist quasi die Schnittstelle von Pixel- und Vektorbearbeitung, aber gibt's da noch mehr für dich?

Früher habe ich das auch mit Photoshop gemacht - aber heute ist das so 2010.

Dauert alles viel zu lange...

Warum?
4 Layouts bauen: Phone, iPad Hoch, iPad Quer, Desktop...
Programmierung... inkl. Bild2x bzw. bald Bild3x Unterstützung...

Aber wie dann?
CMS nehmen...
Retina Responsive HTML5 & CSS3 Bootstrap Theme suchen, das der eigenen Vorstellung so nahe wie möglich kommt.
Ca. 60.-$ bezahlen...
Und sofort am lebenden Objekt mit den eigenen Vorstellungen loslegen...

Gegen 60.-$ kann man nicht mehr gegenanarbeiten...

Beispiel

Das kannst du so vielleicht für eigene Webseiten machen, aber nicht für Kunden.

Ein anderer Ansatz — aber vielleicht eine Alternative für Dich:

- Webflow →
- Macaw →

Ich selbst entwerfe mit Illustrator/InDesign weil ich damit (noch) schneller zum Ziel komme. Die Assets werden aber auch noch in der Kombination Photoshop + Slicy dann an den/die Entwickler übergeben — zumindest wenn’s pixelbasiert ist. Ansonsten Icon-Webfonts oder SVGs.

Geplant ist aber (langfristig) ein Umstieg auf Sketch für die Entwurfsphase.

Und warum bitte nicht, wenn man das offensiv vertritt und den Kostenvorteil weitergibt?
Im Sinne von: 60.-$ und Sie sparen mindestens 50% der Entwicklungskosten...

Wir machen das so. Weil: Der Kunde bekommt ja trotzdem ein "einmaliges" Layout - was wir mit den 60.-$ einkaufen, sind ja nur die technischen Templates, die wir dann komplett so verändern, wie wir sie brauchen...

Schau dir mal AFFINITY PHOTO bzw. DESIGNER an.

Ich mache meine Weblayouts mit Indesign, da ich da schnell bin und Layout-Änderungen sehr schnell umzusetzen sind (Positionen von Flächen z.B. Kann ich doch 10mal schneller und genauer in ID machen). Ich weiß nicht warum alle das in PS machen. Indesign kommt doch CSS viel näher. 😕

Indesign. Ganz klar.

Danke für Eure Rückmeldungen. Ich habe gestern Abend noch einiges ausprobiert und die wichtigste Erkenntnis für mich ist: Alte Wege funktionieren nicht mehr. Neue Software und neue Anforderungen bedeuten neue Wege. Das wird ein spannendes Wochenende.

Bei Adobe CC finde ich es sehr verwirrend, dass es neben Dreamweaver auch noch Edge Hast-Du-Nicht-Gekannt Programme gibt. Beim ersten InDesign 1.0 gab es noch die Möglichkeit das Layout als HTML mit CSS herauszuschreiben. Im Laufe der Zeit wurde diese Funktion wieder ausgebaut. Dabei war doch immer davon die Rede, dass Print und Web näher zusammen kommen sollte. Durch die eBooks kommt es auf anderen Wege wieder.

Für ein richtiges Prototyping sollte die Software auch HTML+CSS erzeugen können und damit sind wir dann bei "Macaw" oder "Responsive Layout Maker Pro" oder "Adobe Edge Reflow".

Interessante Tipps hier, Macaw kannte ich auch noch nicht.

Also ich finde Photoshop mittlerweile zu umständlich. Vor allem die Gruppierungs-, Auswahl- und Ebenenfunktionen finde ich in Illustrator deutlich angenehmer. Zudem ist alles vektorbasiert, falls man also den Screenshot mal für einen Print benötigt, kannst du ihn dir mit der entsprechenden DPI-Zahl exportieren. Illustrator kann zudem mittlerweile auch mit Zeichenformaten arbeiten und diese direkt als CSS exportieren. Wobei ich diese Funktion noch etwas umständlich finde, was die Verknüpfung Objekt-Zeichenformat-HTMLTag angeht.

Sketch hatte ich mir auch schon mal angeschaut vor einiger Zeit. Ich denke, es ist wesentlich einfacher zu handhaben als Illustrator. Gerade auch, was den Umgang mit Symbolen (wiederkehrende Elemente) angeht. Auch kam mir das Pixelraster deutlich zuverlässiger vor, was wichtig ist, wenn man Wert auf Pixel-perfect Design legt. Bei Illustrator muss man hingegen immer etwas Acht geben, dass nichts auf 0,463 px liegt.

Der Vorteil von Illustrator gegenüber Indesign ist aus meiner Sicht die Möglichkeit, Slices zu erstellen (wenn auch diese Funktion seit 17.1 einen Bug in Verbindung mit Retina-Macbooks hat, den Adobe immer noch nicht gefixed hat ) und man hat natürlich deutlich mehr Werkzeuge zur Veränderung von Formen.

Dann schau dir mal Adobe Muse an! Lässt sich ähnlich wie InDesign bedienen und produziert direkt brauchbare Websites.

Muse kann ich auch empfehlen.

Wenn man InDesign beherrscht, ist es spielend leicht, dort reinzukommen.
Und es wächst allmählich wirklich zu einem brauchbaren Tool heran.

Mit welchem Programm man entwirft ist meiner Meinung nach fast egal:
Das meiste mache ich dann eh über CSS und die paar Grafiken die ich dann noch brauche erstelle ich immer direkt in PS in Webauflösung weil die Qualität dann einfach besser ist. Die Kunden sehen es normalerweise nicht - aber ich - und darauf habe ich keine Lust.
Allen automatisierten "Codern" traue ich nicht über den Weg. Meistens ist der Code dann total überfrachtet, was die Seite mitunter erheblich verlangsamt. Ich bin da eher von der alten Schule und schreibe mir eigentlich alles selber (abgesehen von einigen JavaScript Libs).
Meiner Meinung nach lohnt sich das.

Normalerweise präsentiert man dem Kunden ja durchaus auch mal 2 oder auch 3 Ansätze für eine Webseite, da würd ich nie auf die Idee kommen, das vorher (im Ansatz) programmieren zu lassen, sondern das zunächst in einem Layout-Programm zu visualisieren.

Hinzu kommt ja, dass der Art Director/Grafiker (whatever ) in der Regel kein Programmierer ist. Beispiel: Ich kann zwar auch HTML, aber will es beruflich nicht machen (ist mir einfach zu stressig), daher mach ich meine Layouts, stimme sie soweit mit dem Kunden ab und dann geht das ganze an einen externen Programmierer. Kommt am Ende auch nicht teurer, weil er so zunächst erstmal nur meinen Stundensatz zahlen muss, als zwei Sätze (Art + Programmierer) – ob der Programmierer da letztlich auf irgendwelche Templates zurückgreift ist mir wurscht, solang er meine Entwürfe korrekt umsetzt.

evtl.: „Hype“ von Tumult Software


http://tumult.com/hype