Brauch ein wenig Hilfe beim Homepage Header

Brauch ein wenig Hilfe beim Homepage Header | PSD-Tutorials.de

Erstellt von Sentinal, 25.07.2008.

  1. Sentinal

    Sentinal Certified Web Designer

    Dabei seit:
    10.01.2008
    Beiträge:
    185
    Geschlecht:
    männlich
    Ort:
    Aachen
    Software:
    Adobe PS CS5, Adobe DW CS5, Adobe FW CS5, Adobe Flash CS5, Adobe AI CS5, Adobe ID CS5
    Brauch ein wenig Hilfe beim Homepage Header
    Morgen zusammen,

    ich habe folgendes Problem und zwar handelt es sich um diesen Homepage Header creatic-gaming.de | online multigaming clan .... In diesem Header sieht man die Grafik Topmatch. Darin leigt folgendes Problem. WIe bekomme ich die Grafik vernüftig in den Header eingeabreitet. So das es besser als jetzt aussieht. Würde mich über ein wenig Hilfe oder ein paar Tipps freuen.

    MFG
    Sentinal
     
    #1      
  2. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Brauch ein wenig Hilfe beim Homepage Header
    AW: Brauch ein wenig Hilfe beim Homepage Header

    Ähm, erstmal gehört das hier dann nicht in den Webbereich?!

    Ich würde die Topmatch-Grafik gar nicht in den Header einbauen, sondern als eigene Background-Graifk für ein <div> Erstellen und diesen dann auf dem Header positionieren. Ich finde, damit bleibt man flexibler und hat auch mehr Gestaltungsmöglichkeiten.
     
    #2      
  3. Sentinal

    Sentinal Certified Web Designer

    Dabei seit:
    10.01.2008
    Beiträge:
    185
    Geschlecht:
    männlich
    Ort:
    Aachen
    Software:
    Adobe PS CS5, Adobe DW CS5, Adobe FW CS5, Adobe Flash CS5, Adobe AI CS5, Adobe ID CS5
    Brauch ein wenig Hilfe beim Homepage Header
    AW: Brauch ein wenig Hilfe beim Homepage Header

    Und wie genau meinst du das? Soweit bin ich in dieser hinsicht noch nicht.
     
    #3      
  4. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Brauch ein wenig Hilfe beim Homepage Header
    AW: Brauch ein wenig Hilfe beim Homepage Header

    Ich find jetzt leider kein Beispiel, also versuche ich es mal zu erklären, auch wenn das nur Nahe dran kommt...

    Also ein <div> ist ein Container in HTML, diesem kannst du ein Hintergrundbild zuweisen und an einer bliebigen Stelle auf deiner Seite positionieren (Bild und Position werden über CSS eingestellt).

    Du machst also ein Header (Bild bsp 900x300px), welches auf der Rechten Seite eine relativ freie Fläche hat (also keine Schrift, Logos etc). Die Topmatch Grafik gestaltest du wie du möchtest auf 300x150px, weißt sie einem <div> zu und positionierst es an der freien Stelle des Headers so wie du willst. In dem <div> kann zusätzlich noch Text stehen, wenn du das ganze in PHP machst kannst du da sogar mit Variablen arbeiten.

    Die Seite bzw der Header sieht trotzdem so aus, als wäre Header und Topmatch ein und das selbe Bild. Der Vorteil, du kannst das Topmatch-Bild rausnehmen, ändern oder austauschen, ohne den Header zu verändern...

    Hoffe ich konnte das verständlich machen... wenns dich interessiert, kann ich ja mal nen Bsp (oder wenn wer anders schneller ist) machen...
     
    #4      
  5. voluman

    voluman Nicht mehr ganz neu hier

    Dabei seit:
    08.11.2007
    Beiträge:
    187
    Geschlecht:
    männlich
    Ort:
    Hessen
    Software:
    PS
    Kameratyp:
    Canon T70
    Brauch ein wenig Hilfe beim Homepage Header
    AW: Brauch ein wenig Hilfe beim Homepage Header

    naja, so "ähnlich" hat es doch Sentinal auch gemacht. ok, er hat ein table layout verwendet;)

    abgesehen davon, dass ich nicht genau weiß was mir diese topmatch box mitteilen soll, würde ich das so machen:
    [​IMG]
    wie man in der grafik sieht, würde ich diese box aus dem header entfernen und unter die anderen boxen in der linken leitste platzieren. oder ist das in der gamer-szene verboten? :D

    wenn du hilfe brauchst, wie genau man das programmiert, lass den thread erstmal verschieben;)

    grüße!
     
    #5      
  6. Sentinal

    Sentinal Certified Web Designer

    Dabei seit:
    10.01.2008
    Beiträge:
    185
    Geschlecht:
    männlich
    Ort:
    Aachen
    Software:
    Adobe PS CS5, Adobe DW CS5, Adobe FW CS5, Adobe Flash CS5, Adobe AI CS5, Adobe ID CS5
    Brauch ein wenig Hilfe beim Homepage Header
    Ja das war schon sehr verständlich erklärt, ich danke dir. Aber worauf ich hinaus bin ist, dass man das alles so gestalten kann wie z.b bei dieser seite Dynamix eSports Screendesign by =jN89 on deviantART so im Header würde ich gerne das TopMatch gestalten weiss aber nicht wie. Darauf bin ich hinaus.

    @voluman: Ne ne erlaubt ist es schon. Nur ich habe es noch bei keinem gesehen, dass das TopMatch im Header ist sondern immer nur der Teamroster.
     
    Zuletzt von einem Moderator bearbeitet: 25.07.2008
    #6      
  7. voluman

    voluman Nicht mehr ganz neu hier

    Dabei seit:
    08.11.2007
    Beiträge:
    187
    Geschlecht:
    männlich
    Ort:
    Hessen
    Software:
    PS
    Kameratyp:
    Canon T70
    Brauch ein wenig Hilfe beim Homepage Header
    AW: Brauch ein wenig Hilfe beim Homepage Header

    okay, warte mal: was genau ist denn jetzt ein topmatch? wie ich das sehe, ist das der nächste "war"? also eine anzeige, die sich zb alle 5 tage ändert? hast du die den dynamisch (mit php zb) programmiert?

    wenn die anzeige unbedingt im header sein soll, würde ich keine box verwenden. oder die box ein wenig transparent machen, sodass der hintergrund durchscheint. oder sogar mit flash arbeiten, um es ein wenig dynamischer wirken zu lassen.

    so?
    [​IMG]

    grüße!
     
    #7      
  8. Sentinal

    Sentinal Certified Web Designer

    Dabei seit:
    10.01.2008
    Beiträge:
    185
    Geschlecht:
    männlich
    Ort:
    Aachen
    Software:
    Adobe PS CS5, Adobe DW CS5, Adobe FW CS5, Adobe Flash CS5, Adobe AI CS5, Adobe ID CS5
    Brauch ein wenig Hilfe beim Homepage Header
    AW: Brauch ein wenig Hilfe beim Homepage Header

    Ne so nicht, soweit bin ich auch schon. TopMatch ist halt der nächste WAR der ansteht. Und der TeamRoster ist halt das Tool für Memeberpics. Bei mir ist es jetzt ein Addon für Webspell. Also kann ich dir nicht viel zu dem gecode sagen.
     
    #8      
  9. voluman

    voluman Nicht mehr ganz neu hier

    Dabei seit:
    08.11.2007
    Beiträge:
    187
    Geschlecht:
    männlich
    Ort:
    Hessen
    Software:
    PS
    Kameratyp:
    Canon T70
    Brauch ein wenig Hilfe beim Homepage Header
    AW: Brauch ein wenig Hilfe beim Homepage Header

    naja, dann kann ich dir auch nicht helfen
     
    #9      
  10. Sentinal

    Sentinal Certified Web Designer

    Dabei seit:
    10.01.2008
    Beiträge:
    185
    Geschlecht:
    männlich
    Ort:
    Aachen
    Software:
    Adobe PS CS5, Adobe DW CS5, Adobe FW CS5, Adobe Flash CS5, Adobe AI CS5, Adobe ID CS5
    Brauch ein wenig Hilfe beim Homepage Header
    AW: Brauch ein wenig Hilfe beim Homepage Header

    Dennoch danke dir für deine Mühe.
     
    #10      
  11. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Brauch ein wenig Hilfe beim Homepage Header
    AW: Brauch ein wenig Hilfe beim Homepage Header

    Hmm du sagst, das ist ein Addon, dann müsstest du mir mal sagen, wie du das momentan grafisch darstellst.

    Gibt es da Einstellungsmöglichkeiten für die Farben und den Hintergrund?
    Hast du den Header so designt, dass die Grafik dann an der richtigen Stelle zum Addon ist?
    Wie sieht es ohne Header aus?
     
    #11      
  12. Sentinal

    Sentinal Certified Web Designer

    Dabei seit:
    10.01.2008
    Beiträge:
    185
    Geschlecht:
    männlich
    Ort:
    Aachen
    Software:
    Adobe PS CS5, Adobe DW CS5, Adobe FW CS5, Adobe Flash CS5, Adobe AI CS5, Adobe ID CS5
    Brauch ein wenig Hilfe beim Homepage Header
    AW: Brauch ein wenig Hilfe beim Homepage Header

    Ja die kleine Grafik die du ja jetzt da siehst. Ist das was seperat erstellt wurde. Sprich es wurde in CS3 erstellt und gesliced. Dann hat der Coder es einfach mit dem Addon vom Webspell an den Header angepasst. Mit den einstellungen ist es eigentlich egal. Da ich die Grafik nach belieben erstelle (Farbe usw.). Und der Coder passt es so an wie ich es haben will. Aber nachdem es so war gefällt es mir nicht weil es einfach wie ein Klotz darin aussieht. Und daher brauche ich hilfe wie man die Grafik (es muss kein Kasten sein so wie jetzt) erstellt. So das es zum Header passt.

    Ja ohne Grafik sieht der Header halt so aus das Links das Logo mit Creatic Gaming steht und rechts unten der Slogan. Die Grafik TopMatch kam nur dazu.

    Durch den Coder kommt die Grafik dann an die richtige Stelle.
     
    Zuletzt bearbeitet: 25.07.2008
    #12      
  13. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Brauch ein wenig Hilfe beim Homepage Header
    AW: Brauch ein wenig Hilfe beim Homepage Header

    Ah, gut, dann sind wir im richtigen Forum und du vergisst am besten alles was zwischen deinem ersten und meinem letzten Post steht, das wäre nur wichtig für den Coder und dein Problem ist ja doch was anderes...

    Ich würde es so machen, dass ich oben und unten (hier auf die Perspektive achten) eine Art Rand habe die aus dem Header Bild herauskomt, als wäre das Topmatch ein wenig vorgestellt (Da ich weiß, dass ich schlecht beschreiben kann: Nimm dir einen Kronkorken, einen Nagel und einen Hammer. Hau mit dem Nagel eine Delle [nicht durch] den Kronkorken, drehe diesen um und schau dir die Delle an, sie ist jetzt vorgestellt wie ich es dir gerade vorgeschlagen habe. :) ). Die seiten nach links und rechts würde ich vielleicht ohne Rand machen und einfach farblich ineinander überlaufen lassen. Der Innenteil sollte nicht so hell/grell (da der Kontrast momentan sehr hoch ist sieht es wie ein Klotz aus) sein und vielleicht ein wenig mehr grau/silber bekommen.
    Wenn du die Aufteilung der Schrift und Logos ändern kannst würde ich das auch anders anordnen, oben die Logos (links vs rechts) da drunter Location und Termin. Momentan sieht das ganze etwas überfüllt aus, wenns geht versuch das aufzulockern entweder weniger oder kleinere Schrift oder einen größeren Kasten.

    Den Slogan würde ich auch wo anders hinsetzen bzw nicht so nah an die Box ran, wirkt sehr gequetscht...

    Hoffe du kannst damit was anfangen...
     
    Zuletzt bearbeitet: 25.07.2008
    #13      
  14. Sentinal

    Sentinal Certified Web Designer

    Dabei seit:
    10.01.2008
    Beiträge:
    185
    Geschlecht:
    männlich
    Ort:
    Aachen
    Software:
    Adobe PS CS5, Adobe DW CS5, Adobe FW CS5, Adobe Flash CS5, Adobe AI CS5, Adobe ID CS5
    Brauch ein wenig Hilfe beim Homepage Header
    AW: Brauch ein wenig Hilfe beim Homepage Header

    Also ungefähr wie bei dem beispiel was ich eben geposted habe, oder? Verstanden habe ich schon was du meinst. Woran ich so denke ist, dass sich an dieser stelle der Header so aufreisst, als ob das TopMatch aus dem Header hervorgeholt werden soll. Also einfaches Prinzip ist ne aufgeschlagene Wand in der Mitte ein loch. So in der Art stell ich mir das mit dem TopMatch vor. Halt nur Grafik mässig komm ich da nicht weit. Aber dein Vorschlag gefällt mir auch.
     
    #14      
  15. Top_Gun

    Top_Gun Aktives Mitglied

    Dabei seit:
    24.07.2008
    Beiträge:
    965
    Geschlecht:
    männlich
    Brauch ein wenig Hilfe beim Homepage Header
    AW: Brauch ein wenig Hilfe beim Homepage Header

    Äh Beispiel? Wo?

    Joar, dass es aufreist wäre auch ne Idee, aber ich glaube da gehört viel Arbeit zu ^^

    Ansonsten kannst du es auch als eine Art Plakat, wie die Werbeplakate draußen, machen, mit ner Umgeknickten Ecke vielleicht oder so... Als wenn es gerade dran geklebt wurde...

    Oder halt ne Art Schild, das da aufgehängt wurde, da würde ich dann nen Nagel mit bei machen den man in den Header geschlagen hat...
     
    #15      
  16. Sentinal

    Sentinal Certified Web Designer

    Dabei seit:
    10.01.2008
    Beiträge:
    185
    Geschlecht:
    männlich
    Ort:
    Aachen
    Software:
    Adobe PS CS5, Adobe DW CS5, Adobe FW CS5, Adobe Flash CS5, Adobe AI CS5, Adobe ID CS5
    Brauch ein wenig Hilfe beim Homepage Header
    AW: Brauch ein wenig Hilfe beim Homepage Header

    Das ist auch ne gute Idee. Ich bin ja jetzt zuhause. Aber was mich am meisten Interessiert ist halt wie bekommt man das hin das es aufgerissen wirkt. Weil darüber habe ich noch kein Tut gefunden. Aber ich danke dir wirklich für deine Hilfe.

    Ein Beispiel kann ich dir leider nicht geben. Habe es noch nirgends in der Art gefunden wie ich es meine.
     
    #16      
x
×
×