Homepage per PS Cs4

shuGar · 08.09.2009

Hey liebe Psd Tutorial community,

ich habe ein problem mit dem umsetzten einer Homepage in PS...
bei mir scheitert es immer an der Umsetzung aber Kreativ genug bin ich...

Beispiel:

Ich erstelle einen Header / Navi / Content Frame und eventuell ein Hintergrundbild...

nun bin ich meistens schon demotiviert, da ich nicht weis wie ich weiter machen soll... dass ich iwann slicen muss ist mir klar nur iwie habe ich an dem Punkt immer das gefühl das was fehlt verliere die lust und höre auf mit Photoshoppen...

könntet ihr mir mal eine kleinen ablauf von euch posten wie ihr an die Sache rangeht ?

Mein Ablauf war halt bisher IMMER folgender:

- Frage stellen was ich für eine Page will
- in etwa die größen der einzelnen Frames vormarkieren durch unterschiedliche boxen und Benennen von den einzelnen Ebenen
- hier fing ich meistens an die vormarkierten Frames umzusetzten bzw grafisch zu gestalten
- -= ende da ich kein peil mehr hatte wie ich weiter machen sollte =-

mfg shuGar

PS: Diesen Thread meine ich ernst denn diese Planlosigkeit "Was mache ich nun?" nervt mich und blockiert meinen Kreativen fluss.

finnweis · 08.09.2009

AW: Homepage per PS Cs4

Da hilft meiner Meinung nach: Bleistift und Papier

Wenn Du genau weißt, was Du haben willst, dann bringt das Photoshoppen Spaß. Wenn Du auf einmal merkst, dass dieses oder jenes Fragment nicht zusammenpasst, das alleine ein tolles Feature wäre, dann fällt Dir das bereits auf dem Papier auf. Auch Usabilityfragen können schon gut am Papierentwurf überdacht werden.

shuGar · 08.09.2009

AW: Homepage per PS Cs4

okay Papier wäre ne nette idee aber da ich sehr faul bin werde ich dies wohl kaum ausprobieren ... aber mal schauen ob es mich doch nicht verführen wird

hast du denn so nen ungefähren ablauf wie du an deine werke gehst ?

Raytrax · 08.09.2009

AW: Homepage per PS Cs4

Heya,
finnweis hat schon recht. Stift und Papier kommt auch Deiner Faulheit entgegen, da Du direkt im PS umsetzen kannst, was Du Dir vorher skizziert hast und nicht hin und her probieren musst.
Wenn Du viele Unterseiten und interne Verlinkungen hast, empfielt sich ausserdem auch eine schematische Struktur vorher auf Papier zu bringen.

Gruss
Raytrax

shuGar · 08.09.2009

AW: Homepage per PS Cs4

okay dann werde ich es wohl doch mal ausprobieren, ... klingt immerhin sehr viel versprechend.

Nur mein Gegenargument ist halt das ich in Photoshop das Ergebnis innerhalb von paar Sekunden wieder so anpassen kann wie ich es gerne hätte.

Raytrax schrieb:
Heya,
finnweis hat schon recht. Stift und Papier kommt auch Deiner Faulheit entgegen, da Du direkt im PS umsetzen kannst, was Du Dir vorher skizziert hast und nicht hin und her probieren musst.

Genau das ist es was mich nicht stört da ich immer eine genaue Vorstellung habe wie es aussehen soll, da ich auch freizeitlich gerne Videos bearbeite kann ich mich gut in ein Projekt reindenken bzw. weis genau wie ich die Übergänge will, welche Effekte an der und der Stelle am besten wären.

Aber schonmal danke für eure tipps.

Herr_D · 08.09.2009

AW: Homepage per PS Cs4

Hol dir Hilfe von leuten, die sich mit html/ css auskennen... PS ist ein Grafikprogramm und im Webdesing nimmt man genau so viele Grafiken, wie man wirklich braucht alles andere ist html/ css dann noch php und eventuell javascript...

Deine Frage wurde hier schon so oft gestellt. Es gibt 2 Tuts zum Thema von eFox

Hier der neuste:

Vielleicht bemühst du mal die Forensuche, dann bist du schon 3 Schritte weiter...

shuGar · 08.09.2009

AW: Homepage per PS Cs4

Herr_D schrieb:
Hol dir Hilfe von leuten, die sich mit html/ css auskennen... PS ist ein Grafikprogramm und im Webdesing nimmt man genau so viele Grafiken, wie man wirklich braucht alles andere ist html/ css dann noch php und eventuell javascript...

Deine Frage wurde hier schon so oft gestellt. Es gibt 2 Tuts zum Thema von eFox

Hier der neuste:

Vielleicht bemühst du mal die Forensuche, dann bist du schon 3 Schritte weiter...

Okay erstens ich kann html / css / java coden... habe ich in der Schule gelernt und privat zusätzlich meine Kentnisse ausgebaut ... es ist mir durchaus klar das ich z.b. nur 7 Grafiken nehme wenn ich eine page mit BG-IMG / 4 Buttons / 1 Header / spacer baue.

Die Tutorials auf Psd sind mir durchaus bekannt bis auf das neueste.

Mit dem Thread habe ich auf Tipps gehofft wie z.b. der von finnweis und nicht so ne anmache "such erstma bevor du spamst", eindeutige Themaverfehlung sorry !

cebito · 08.09.2009

AW: Homepage per PS Cs4

shuGar schrieb:
Mit dem Thread habe ich auf Tipps gehofft wie z.b. der von finnweis und nicht so ne anmache "such erstma bevor du spamst", eindeutige Themaverfehlung sorry !

Komm mal wieder runter von deinem hohen Ross, halt den Ball schön flach und schau mal, das du demnächst nicht mehr den Ton verfehlst!
Könnt ja erwarten, das Leute die css beherrschen?! keine Platzhaltergrafiken mehr brauchen. Es sei denn, sie lassen sich ihren code von nem Grafikprogramm generieren :hmpf: So daneben sind die Links also gar nicht 8) Wenn du magst, schick ich dir noch ein paar...

finnweis · 08.09.2009

AW: Homepage per PS Cs4

Moin,

da Du nach meiner Vorgehensweise gefragt hast: eines möchte ich voranstellen: ich bin weder ein guter Coder noch - zugegebenerweise - ein guter Webdesigner! Da gibt es hier Leute die deutlich mehr auf dem Kasten haben.

Meine Vorgehensweise:
- Homepage für Videoschnitt
- Idee: Look wie ein Bildmischer oder ein Videoschnittprogramm selbst
- Problem: Usability für Nicht-Video-Bearbeiter trotzdem intuitiv gestalten
- scribbeln am Papier
- Entwurf 1: 19" Look, Bildmischerhebel fürs Menü
- Entwurf 2: links die Media Region als Menü, Timeline für inhalte, Vorschaumonitore für Multimediainhalte
- beim scribbeln merken, dass Look wie Videoschnittprogramm ne nette Idee ist, aber nur evtl. für "eingefleischte" als Menü erkennbar ist
- Nach mehreren Ideen darauf kommen, dass Links ins Rack eingeschraubter BiMi Hebel fürs Menü (mit illuminierter Schrift und im Hebel eingravierter Schrift "Navigator" oder "Pull me" o.ä.), oben eingeschraubes Vektorskop und Waveformonitor mit animiertem GIF oder z.B. Luminanzanzeige der aktuell dargestellten Seite nett aussehen könnte, bzw. in diesen Monitoren Multimediainhalte, falls welche ausgewählt werden. Used Look wie bei Fallout wäre ein Ziel.
Hauptfenster in den Ecken ebenfalls mit Schrauben im virtuellen Rack montieren.
- Menüstruktur (Seitenstruktur, Zustände der Menüs etc.) festlegen und wissen, womit man es umsetzt (z.B. GoLive, Flash,...).
- begeisterte Umsetzung in Photoshop
- sieht geil aus
- Freunde sagen mir: sieht nett aus, das Menü findet trotzdem noch keiner
- nachbessern oder neues grafisches Konzept überlegen.

So mal als spontane Idee. Ich bin da allerdings, wie bereits erwähnt, kein Maßstab!!!

Klar kannst und sollst Du in PS Ideen spontan und schnell umsetzen können. Wenn Du allerdings die Grundstruktur hast, dann ist es eben einfach, sich am Leitfaden längs zu hangeln. Da Du Video machst: wenn Du ein gutes Drehbuch und ein gutes Storyboard hast, dann ist der Dreh und der Schnitt nur noch eine Umsetzung - mit der wesentlich höheren Wahrscheinlichkeit auch stimmig zu werden als ohne. Und schneller geht es allemal. So finde ich, geht es auch mit dem Webdesign.

Herr_D · 09.09.2009

AW: Homepage per PS Cs4

shuGar schrieb:
Mit dem Thread habe ich auf Tipps gehofft wie z.b. der von finnweis und nicht so ne anmache "such erstma bevor du spamst", eindeutige Themaverfehlung sorry !

Bevor du die Klappe aufreißt,lies dir deinen Ausgangspost durch... da ist nach Photoshopgemansche Schluß... da steht weder was von html noch css... und Fragen "Wie erstelle ich mit Photoshop ne HP" gibt es hier täglich... spamen bringst du rein (als Begriff) und Tipps hast du bekommen... warum sollen wir tippen, was hier schon öfter getippt wurde?... also hat mal schön den Ball flach...

Wenn du sowohl toll in PS als auch html/css in der Schule gelernt hast (was noch lange nicht heißt, dass du es kannst) warum stellst du dann die Frage? Dann müßtest du doch der Webnerd vor dem Herrn sein und selber Tuts schreiben... den ersten Tipp "Papier & Bleistift" konterst du auch sofort wieder aus, von wegen "Ich brauch das nicht, ich mach Filme, da kann ich vorausschauend denken".... wenn ich mir deine Posts duchlese anscheinend ja doch nicht... alles beginnt mit Papier und Bleistift... ich gehe sogar noch einen Schritt davor und lege einen Ordner "Inhalte" an... wenn man nix hat, was ins Netz kann, braucht man auch nicht ins Netz...

Die Frage aller Fragen (nicht nur beim Webdesign)

Was soll warum wie mit welchen Hilfsmitteln erstellt werden und bin ich dazu in der Lage?

finweis hat dir 'nen prima Ablaufplan gegeben.... damit solltest sogar du so kreativer Mensch was anfangen können...

esupanetz · 09.09.2009

AW: Homepage per PS Cs4

Hi ShuGar,,

ich denke auch, du hast genug gute Tipps erhalten - jetzt solltest du nur noch lernen, sie anzunehmen.

Und (wie schon öfter nicht nur in diesem Thread erwähnt) - Photoshop ist KEIN Programm um Webseiten zu erstellen!!!!!!!!

Für mich ist die Abfolge die du beschrieben hast insofern unklar / unsinnig, da dein "Schritt 4: ende, da ich keinen peil mehr hatte" einer, der deinen Aussagen über deine HTML / CSS-Kenntnisse und deiner sehr oft von dir gerühmten Kreativität sehr diametral entgegengesetzt daherkommt.

Die Vorgangsweise von finnweis ist sicher gut - solltest du die HP für jemanden anderen machen wärs noch sehr sinnvoll, die Wünsche der Person herauszufinden (Farben, Bilder, Zielgruppe.....) bzw das Thema genauer zu kennen um das es bei der HP geht, sodass Vorschläge die du machst nicht total am Thema vorbeigehen.

Gruß

Eva

shuGar · 09.09.2009

AW: Homepage per PS Cs4

Okay ich hab mich ziemlich im ton vergriffen das gebe ich zu und entschuldige mich auch,
aber wie Herr_D meinte:

finweis hat dir 'nen prima Ablaufplan gegeben.... damit solltest sogar du so kreativer Mensch was anfangen können...

anfangen kann ich damit schon etwas. Bei mir ist halt das problem das ich halt vor lauter ideen quasi mein Ziel aus den Augen verliere... und der link ist echt klasse

Code:

Danke nochmal an alle Beteiligten

Herr_D · 09.09.2009

AW: Homepage per PS Cs4

Na dann ist die Welt ja wieder in Ordnung...

Bei zu vielen Ideen hilft eine (bzw. mehrere) +-Liste(n) und eine Deadline, sonst wird man nie fertig... dann mal eine Sache bis zum Ende durchziehen und sich danach ein paar Nus zurücklehnen und genießen, dass man was geschafft hat

shuGar · 10.09.2009

AW: Homepage per PS Cs4

Naja ich wende jetzt einfach mal alle eure Tipps an ma schaun was aus der HP wird

Kann se am ende ja auch mal hochladen bzw online stellen.

Hobbit007 · 15.09.2009

AW: Homepage per PS Cs4

Würd mich freuen zu sehen was aus deinem Projekt wird.

shuGar · 01.10.2009

AW: Homepage per PS Cs4

Okay ... dies habe ich gerade entworfen, meine Klassenkollegen haben ein eigenes Gewerbe gegründet und der erst Entwurf von ihnen sah total daneben aus. Naja da dachte ich, ich mache mal etwas und das kam dabei raus. ( Ich bin nicht im Team

)

http://www.bilder-hochladen.net/files/6k7g-1q-jpg.html

ist zwar nicht ein profi design aber es ist von mir selfmade

Raytrax · 01.10.2009

AW: Homepage per PS Cs4

Hmm...ok. Fangen wir mal mit dem ersten Eindruck an.
Wenn ich die Seite so anschaue, kann ich den Inhalt noch nicht einmal erahnen. Oben haben wir den Titel "Stone Eagles", welcher ein Wappen mit Adlerkopf umschliesst. Direkt darunter sieht man dann friedliche, grasende und an den Rändern weich gezeichnete Pferde. Schliesslich folgt ein hölzerner Stamm (das soll es ja wohl sein), der allerdings so gar nicht zu dem schwarzen Leinenstoff im oberen Teil passen will. Oder mit einem Satz ausgedrückt. Ich erkenne keinen Zusammanhang zwischen den Elementen der Website.
An Kleinigkeiten sei angemerkt, das der Rahmen um das Pferdebild stilistisch nicht zum Rest passt. Wenn er unbedingt sein soll, dann sollte das "g" nicht hineinragen.
Der helle und dunkle Rand im Pferdebild gefällt mir nicht. Links soll wahrscheinlich ein Menu angezeigt werden. Dort ist es aufgrund des Kontrasts vertretbar, wenn auch nicht die schönste Lösung. Der dunkle Randbereich der rechten Seite verschliesst sich mir allerdings völlig. Wenn Du unbedingt einen solchen Effekt haben willst, dann würde ich es lieber mit einem gleichmässigen Verlauf versuchen.
Ha, gerade sehe ich was: Soll das ganze vielleicht einen Filmstreifen darstellen, und ich habe die Führungslöcher aufgrund ihrer Farbe für unbeschriftete Buttons gehalten? Wenn ja, dann unten und oben und nicht grün füllen.
So, dann lass Dich bitte nicht davon runterziehen, sondern bleib am Ball.
Ehrliche Kritik soll niemanden beleidigen, sondern ist als Hilfestellung gedacht.

Gruss
Raytrax

shuGar · 02.10.2009

AW: Homepage per PS Cs4

Hey finde es nett das du mir so ehrlich geantwortet hast. Ich muss zu meinem ersten werk sagen, dass ich soziemlich ins kalte Wasser gesprungen bin. Ich wusste nicht für welche zwecke das Design ausgelegt werden soll, genauere farben die ich verwenden sollte ect. Es war einfach ein spontaner einfall und warscheinlich habe ich zuviele ideen auf einmal in diesen Versuch eine HP zu designen gesteckt.

Naja die tipps von dir sind gut, aber ich sehe gerade das der screenshot doch schon sehr verpixelt ist und im header die scanlines wie mosaike oder sonstige muster aussehen. Hier diesmal als Endbild und nicht als screenshot.

http://www.bilder-hochladen.net/files/6k7g-1r-jpg.html

und für die, die es interessiert nen Freund hatte folgendes entworfen.

http://www.bilder-hochladen.net/files/6k7g-1s-jpg.html

Würde mich über weitere tipps und kritik freuen <3

PS: Wenn ich breitere Scanlines machen will ... nehme ich für das muster dann 9x9 pixel und mache eine linie mittig 3 pixel dick ? Wäre ja eigendlich nur logisch oda schauts dann mies aus ?

ThomasM23 · 02.10.2009

AW: Homepage per PS Cs4

Hi shuGar

Warum ist überall der Adler zusehen auf den Pagedesigns?

Kleiner Tipp schau dir mal deine Buttonanordnung an sind alle unterschiedlich auseinander beim ersten Design und beim zweiten auch und dazu noch unterschiedlich hoch rechts und links.

Hat sich dein Problem den schon gelöst mit den Slicen und coden von den Design was du machen wolltest?

Raytrax · 02.10.2009

AW: Homepage per PS Cs4

Bevor ich mich jetzt zu dem anderen Design äussere, beantworte mir doch mal wer oder was sich hinter der Namen "Stone Eagle" verbirgt. Letztlich muss das Design ja auch etwas über den Inhalt der Seite aussagen, bzw. die gewünschte Zielgruppe ansprechen. Bis jetzt kann ich nur raten. Aufgrund des braunen Designs würde ich spontan auf eine Western-Reenactment-Gruppe schliessen ... oder einen Hobbyflieger-Verein.
Klär mich mal auf, dann kann ich eventuell ein paar bessere Tipps geben.

Gruss
Raytrax