HTML Vom PS-Design zu Joomla!

[Mr.Large]

Hey zusammen,

ich arbeite mich seit geraumer Zeit in das Thema "Eigene Website" ein. Anfangs wollte ich alles mit Dreamweaver und Bootstrap realisieren, dann bin ich jedoch auf Joomla! aufmerksam geworden und möchte auch gerne dabei bleiben, da mir die Flexibilität gut gefällt! Außerdem bin ich jetzt auch soweit, dass ich kein vorgefertigtes Template benutzen möchte, sondern gerne selber etwas entwerfen will, um einfach zu 100% zufrieden zu sein. Nun habe ich das Gantry-Framework für mich entdeckt und habe ein paar Fragen dazu... Hoffentlich könnt Ihr mir helfen

Also, da im Gantry-Framework ja sehr viele Modulpositionen vorhanden sind, kann ich mein Design damit umsetzen, aber wie schaut es mit CSS aus?

Ein Beispiel: Ich baue mir die Hauptseite in PS, in Joomla! bringe ich die Module in die richtige Position, fülle sie mit Inhalten, aber wie schaffe ich es, dass die Seite dann auch so aussieht wie in PS? Klar, mit CSS jedoch habe ich keine Ahnung, wie ich diese "Designelemente" aus PS mit CSS umsetze! Kann mir da vielleicht jemand helfen oder eine gute Lektüre empfehlen?

Oder muss ich nun doch ein komplett neues Template aufsetzten, damit ich mein Layout realisieren kann? Dann wird es wirklich etwas schwierig und umfangreich

Vielleicht noch ein paar Worte zur Website bzw. Idee dahinter: Ich bin angehender Fotograf und möchte nun endlich weg von Facebook, Blogspot und Co. Deshalb soll demnächst ein richtiges Portfolio im Web her! Logisch, dass ich dann gerne damit Kunden gewinnen, Bilder verkaufen und mich selber präsentieren will... Weiterhin, soll sie auf dem "neusten" Stand der Technik sein, wo ich aber mit dem Gantry-Framework wohl auf der sicheren Seite bin - responsive Webdesign usw... Die Seite wird auch eher schlicht, modern, clean gehalten und nicht groß verschachtelt sein. Und eine schöne Gallerie soll auch noch mit rein - aber soweit bin ich noch nicht!

Wäre toll, wenn sich da jemand mit auskennt und mich etwas "an die Hand nehmen kann"

Danke

 

[masaeN]

http://www.lernvid.com/tutorials/joomla-tutorials/252-alles-ueber-modul-positionen-in-joomla.html

Kurz Googlen?

 

[sasdensas]

Hier meine eigene Erfahrung: Um ein PS-Seitendesign in das gewünschte CMS zu packen, muss man schon beim designen eine Vorstellung haben, wie man es in CSS und HTML umsetzen kann. D.h. ich arbeite erst zwischen PS Slices und CSS+HTML (händisch via Texteditor) und versch. Browsern. Nach und nach formt sich dann das gewünschte Ergebnis in HTML. Dabei mache ich mir auch Gedanken, wie man die Slices noch weiter optimieren kann, ohne das Design stark zu beschneiden, dafür aber eine geringere Dateigröße erreiche.
Wenn das HTML+CSS steht, kann man es wunderbar in das gewünschte CMS nach und nach einbinden. Also an den gewünschten Stellen kommen die CMS-spezifischen Tags (Titel, Content, Navigation, etc..) hinzu. Kann Dir da keine Literatur empfehlen. Hab mir das von versch. Tutorials, selfhtml, selfphp, etc. beigebracht.

 

[CroniC]

Also etwas Vorwissen wäre schon nicht schlecht. Also empfehle ich dir zum Beispiel bei Galileo oder v2b vor bei zuschauen. Vielleicht passt das hier ja oder vielleicht findest du auch selbst was besseres. http://www.galileodesign.de/katalog/buecher/titel/gp/titelID-2455?GalileoSession=53995589A6B-5l-048s

Ich persönlich habe gute Erfahrungen mit Büchern von Galileo press gemacht.

 

[Daaron]

Meine Erfahrung? Ohne fundierte Kenntnisse in HTML, CSS und dem gewünschten CMS wird es nichts mit einem ansprechenden Design. Ich halte es für einen grundsätzlichen Irrweg, überhaupt mit Photoshop (und Co) ernsthaft anzufangen. Warum? Ganz einfach: Bildbearbeitung ist statisch, das Web ist dynamisch. Wenn man nicht extrem viel Erfahrung im Webdesign hat wird man intuitiv in der Bildbearbeitung ein vollflächiges, buntes Layout machen und dann am Ende in einem extrem starren Rahmen festsitzen, der niemandem etwas nutzt. Das konnte man evtl. vor 15-20 Jahren, als Table-Layouts noch Mode waren, so machen. Heute ist das alles grundsätzlich falsch.

Denk mal über folgende Fragen nach:
- Wie modellierst du in einer statischen Bildbearbeitung ein Menü, bei dem du nicht weißt, wie breit die Inhalte der Navigationspunkte sind, vor allem im Hinblick auf unterschiedliche System-Schriftarten. sans-serif ist eben DOCH etwas anders als openSans oder Arial...
- Wie modellierst du eine Animation, z.B. das Popup für ein Untermenü oder einen langsamen Transparenz- und Farbwechsel beim Mouse-Hover?
- Wie modellierst du unterschiedliche Browser/Fenstergrößen? Dein Besucher hat nicht GENAU deinen Monitor. Im Zweifel hat er ein Smartphone oder Tablet... aber welches? Und hält er es hochkant oder quer? Ist es nur 320px breit oder 1024px? Oder hat dein Besucher einen 27"-Monitor, auf dem dein Inhalt dann irgendwie verloren wirkt? Guckt er sich deine Foto-Galerie auf seinem 43" LED-TV an?
- Im Textsatz, z.B. in InDesign, kannst du Text links und rechts um ein Bild herum fließen lassen. Du kannst Text mehrspaltig anordnen (wie in einer Zeitung). Kannst du das in CSS? Nein, nicht wirklich/zuverlässig.

Ein modernes Layout schüttelt man als Laie nicht aus der Hand. Da kannst du ein noch so begabter Künstler sein, wenn deine Design-Erfahrungen aus dem Print- oder Foto-Bereich kommen nutzen sie dir im Webdesign GAR NICHTS.
Das soll dich nicht daran hindern, etwas herumzuprobieren... aber tu dir selbst einen Gefallen: Mach deine Experimente nicht öffentlich. Für jemanden, der sein Fotos verkaufen will, ist nix geschäftsschädigender als eine schlechte Webseite.

Wenn du Geld verdienen willst, nimm Geld in die Hand. Wende dich an eine professionelle Webagentur, die einen professionellen Webdesigner auf das Problem ansetzt - jemanden, der weiß was im Internet geht und was nicht... und was in Photoshop nicht geht, in Natura hingegen schon.
Nimm ein paar große Scheine in die Hand und lass Profis ran. Billiger wirst du es selbst auch nicht machen können, denn bis du ansatzweise die nötigen Kenntnisse in HTML5, CSS3 und JavaScript hast, um ein halbwegs modernes Layout umzusetzen, werden ein paar Monate harter Übungsstunden vergehen.... die du statt dessen mit Fotografieren und Geld verdienen verbringen kannst.