HTML Layout für Website erstellen

[novle]

Hi, von einem freund weiß ich, dass in seiner firma das layout der newsletter zuerst in Photoshop gestaltet wird, bevor sie in HTML händisch geschrieben werden.


nun wollte ich auch so mit dem layout meiner eigene webseite vorgehen, weil ich mir als stundent für 250€ CS6 gekauft habe. Habt ihr da zufällig die passende tutorials zur hand oder gleich ganz andere software als empfehlung?

 

[DasBoeseLebt]

Man brauch kein Photoshop oder so dazu, Freeware wie Gimp hätte es auch getan.

Was du meinst, ist das zuschneiden ('sclicen'), gute Tools basteln dir daraus auch gleich HTML und CSS Code. Wie weit das dann optimal ist, musst du selbst wissen. Aufjedenfall noch drüber schauen

http://help.adobe.com/de_DE/photoshop/cs/using/WSfd1234e1c4b69f30ea53e41001031ab64-7570a.html

Oder selbst nach dem Begriff in Verbindung mit CS oder Webpage suchen.


Oder was meinst du genau?

 

[Fritz]

nun wollte ich auch so mit dem layout meiner eigene webseite vorgehen, weil ich mir als stundent für 250€ CS6 gekauft habe. Habt ihr da zufällig die passende tutorials zur hand oder gleich ganz andere software als empfehlung?

CS6 ist schon ok, sozusagen Standart. Die meisten machen es mit Photoshop, aber auch schon gesehen, dass gewisse Leute Designs mit Illustrator machen. Tutorials findest du zu 1000end im Web, meist halt für spezifische Sachen, wie Buttons usw.. musst nur suchen. Wenn du noch nie was mit den Programmen gemacht hast, musst du dich eh ein wenig mal einarbeiten und ausprobieren wie es geht. Da wirst du nur schon genug Zeit damit verbringen mal simple Sachen zu machen.

 

[novle]

ich kann kein photoshop oder gimp, das ist mein problem

HTML wollte ich selbst schreiben, deswegen ist slices eher suboptimal

 

[mvBarracuda]

Ich würde empfehlen einfach HTML nach aktuellen Standards zu lernen. Da ist dir langfristig mehr geholfen als mit Lösungen zum Zusammenklicken von Websites. Gute Anlaufstelle:
http://de.selfhtml.org/

 

[BlubbsDE]

Wofür PS CS6?

In einem Unternehmen wird vielleicht per Grafik / Brainstorming / Skizzen ein Desgin einer Webseite entworfen. Das kann man mit CS6 machen, muss man aber nicht.

Dein Anliegen ist sehr schlecht zu erkennen. Wenn Du selbst eine Seite bauen willst, dann verzichte halt einfach auf diesen Skizzenschritt.

Benutzen kannst Du das, was Du in CS6 erstellst, für die Webseite nachher überhaupt nicht.

 

[FuXxMiTdOpPeLX]

Naja, teilweise werden ja in Webseiten immer noch viele Bilder im Layout verwendet, die mit PS erstellt worden sind.
Aber eigentlich ist das mittlerweile überflüssig, da man nun auch Rundungen, Schatten und Verläufe über CSS abbilden kann.

Aber um ein Design zu entwerfen als Skizze verwende ich eigentlich auch immer noch PS.

 

[Daaron]

Es ist sogar verdammt dämlich, hier mit Slices anzufangen. Aus Slices werden nur starre Layouts ohne anständige Skalierbarkeit. Sowas ist total nutzlos. Ein gutes Layout fließt in Abhängigkeit vom Content und dem Darstellungsmedium.
Also: Du hast erfolgreich 250€ total verschwendet. Adobe CS ist nur im professionellen Rahmen überhaupt ansatzweise nötig. Alles, was Photoshop kann, kann GIMP auch erledigen. Für Web-Layouts braucht man weder noch. Das beste Werkzeug für den Layout-Entwurf sind Papier und Bleistift.

 

[novle]

adobe CS6 habe ich viel für meine abschlussarbeit verwendet, colormanagement und so und im endeffekt kostet es ohne studentenrabatt eine menge geld.

indesign kann ich, aber das ist ja eher was zum inhalte einfügen und drucken.

puh, dann werde ich wohl in richtung button tutorials suchen.

 

[Daaron]

Wozu? Nimm dir einen Bleistift und Papier. Zeichne dir ein Screen-Raster für verschiedene Auflösungen. Mach dir Notizen, wo welches Element hin kommt und wie sich welches Element verhält. Danach schreibst du deinen blanken HTML-Code und "zeichnest" dein Layout über CSS-Deklarationen. Wo kommt eine Rundung hin, wo ein Schatten? Wo ist ein Verlauf nett?

Wie willst du z.B. in Photoshop oder InDesign jemals eine Dropdown-Navigation "zeichnen"? Sowas entwirft der fähige Entwickler dynamisch.

 

[novle]

menüs gibts sicherlich gratis im netz, javascript o.ä. kann ich nicht.

 

[Daaron]

Nein, Menüs gibts nicht einfach so gratis im Netz... Du musst dir schon selbst ein Skin basteln. Das wiederum heißt: Überlegen, was wie aussieht, Notizen machen, CSS-Code entsprechend schreiben.
Außerdem braucht man für ein Dropdown-Menü kein JavaScript. Geht wunderbar ohne.

 

[novle]

es gibt doch mehr als genug
http://www.google.de/#hl=de&tbo=d&s...3908a783e9fb0&bpcl=40096503&biw=1550&bih=1041
http://www.antsmagazine.com/web-development/40-free-dropdown-menus-in-html5-and-css3/

 

[Kausalat]

Kann es sein, dass du aus deiner 250-Euro-Investition auf Krampf noch mehr herausholen möchtest?

Photoshop et cetera sind für die reine Erstellung einer Website überflüssig. Wenn du doch deinen HTML-Code selbst schreiben willst, liegt nichts näher, als alles fein säuberlich und semantisch selbst du coden und mit CSS zu formatieren.

 

[novle]

Kann es sein, dass du aus deiner 250-Euro-Investition auf Krampf noch mehr herausholen möchtest

gegenfrage, warum soll ich das nicht benutzen können, wenn es der weltgrößte newsletterversender auch so macht? also bitte ich mal darum PS nicht als schlechte investition darzustellen, da es firmen gibt die daraus eine menge geld machen.

hilfe wäre mir in diesem forum lieber als trolle.

 

[Kausalat]

Ach ja, da sind sie wieder: Kritikunfähige Leute, die andere als Trolle bezeichnen, nur weil sie nicht gleicher Meinung sind. Du warst nicht rein zufällig ehemals unter dem Nicknamen "ausfahrt" hier angemeldet?

Für einen rein grafischen Projektentwurf einer starren, nicht mehr den heutigen Anforderungen entsprechenden Website sind Grafikprogramme ja in Ordnung. Mehr nicht. Die eigentlich komplexe Arbeit, die mehr als nur rudimentäre grafische Fähigkeiten abverlangt, kommt erst danach.

Dass es "weltgrößte Newsletterversender" (oder eher Spam?) mit Photoshop machen, muss nicht zwingend wegweisend sein.

 

[novle]

deine posts bringen mich einfach nicht weiter. der thread hat super angefangen mit usern wie Fritz oder FuXxMiTdOpPeLX, aber nun geht hier nicht um deine oder Daarons meinung oder algemeines blabla, sondern um problemlösung.

edit: der thread kann wohl zu, außer hier gibts noch ein paar user die helfen wollen

 

[T0a5tbr0t]

War hat hier wieder mal den Glaubenskrieg erklärt? *duck und weg*

Beim Entwickeln einer Webseite geht es darum sich ein Konzept auszudenken und es letztendlich mit HTML und Co. umzusetzen.
Einige Firmen holen sich Profi-Designer, welche mit PS genaue Vorlagen entwerfen. Die werden dann vom Webentwickler mit Webtechniken umgesetzt und vielleicht ein paar Grafiken vom Designer eingebaut.
Das ist ein häufig genutzter Weg, aber nicht der einzige und sicher auch nicht der ideale.

Man entwirft sich (womit auch immer) eine Vorlage. Dabei sollte man sich auch schon Gedanken um logischen Aufbau und die technische Umsetzung machen. Durch CSS3 muss man Grafiken praktisch nur noch für Bilder selber verwenden, kaum mehr für das Layout. Da macht es nicht viel Sinn, haufenweise Arbeit in pixelgenaue Entwürfe in PS zu stecken.
Und wenn man sich Bild-Vorlagen machen will, würde ich vor allem auf die Auswahl von Schrift, Farben und anderen allgemeinen Elementen achten. Dann das kann direkt in CSS etwas frickelig sein.

 

[Speedy.]

Entgegen der Meinung so mancher Leute finde ich es keine Verschwendung, sich Photoshop zu kaufen. Neben dem Designen von Webseiten kann man damit noch ganz andere Dinge machen. Um beim Thema zu bleiben: es gibt viele Internetseiten, welche Tutorials zum Slicen von PSD-Dateien anbieten. ich persönlich habe webdesign.tutsplus.com sehr ins Herz geschlossen. Wenn du dich dort ein wenig umsiehst, wirst du viele gute Tutorials zum Thema finden, alles kostenlos. Nur dein Englisch sollte einigermaßen sein. Wenn es auch etwas kosten darf, dann gehst du auf tutsplus.com und holst dir eine Mitgliedschaft (ist gar nicht teuer). Dort ist die Auswahl an Tutorials sehr viel größer, du bekommst auch Videokurse zu Download angeboten, wo Photoshop von Beginn gezeigt und erklärt wird. Dieses Tutsplus ist ein Netzwerk von vielen Seiten und bietet neben webdesign.tutsplus auch viele weitere kostenlose Seiten für Photoshop, WordPress oder Mac.

Die Tutoren dort machen einen sehr kompetenten Eindruck und vermitteln stets die "Best Practices" in Kombination mit neuesten Techniken wie HTML5 oder CSS3. Dort ist es stets der gleiche Weg - zunächst wird die Website in Photoshop designed, anschließend wird sie in statischen Code umgewandelt und mit PHP und JavaScript dynamisiert. Von dem her denke ich, ist dieser Weg nicht der schlechteste und viele mir bekannte Webdesignstudios tun es ebenso.

 

[novle]

danke euch beiden, HTML5 hatte ich auch vor, CSS(3) kannte ich noch gar nicht.
ich mache das layout nun mit indesign, weil ich das programm kann und ich muss mal bei den wordpress themes sehen, ob man die mit den lizenzen auch für die eigene seite teilweise nutzen darf.