[Erledigt] PSD Sidebar Contest

Erledigt - PSD Sidebar Contest | PSD-Tutorials.de

Erstellt von Icebeam, 09.06.2017.

  1. Icebeam

    Icebeam Planschzicke Teammitglied PSD Beta Team

    353217
    Dabei seit:
    11.07.2012
    Beiträge:
    3.627
    Geschlecht:
    weiblich
    Software:
    InDesign, Illustrator, Photoshop, Poser
    PSD Sidebar Contest
    Hallo Ihr Lieben,
    seit ein paar Tagen gibt es nun schon die neue Sidebar. Was sie alles kann, konntet Ihr bereits in den News lesen. Hier noch einmal der Link.
    Ein Pluspunkt der Sidebar ist unter anderem das Layout zur farblichen Anpassung. Für viele User ist bereits das Passenden dabei. Falls nicht, keine Panik. Wir starten einen Contests, bei dem Ihr gefragt seid. Wie könnte es aussehen das...

    Layout für die Sidebar

    Votingmodul

    Terminplan:

    Zeit: WIP bis 02.07.2017 - 20:00 Uhr
    Votingzeit: VOTING bis 09.07.2017 - 20:00 Uhr


    Ein paar Infos dazu:
    Jeder Style besteht aus einer bestimmten Datei, die größtenteils die Änderungen bzw. wenige andere grundsätzliche Layouteigenschaften (z.B. Schriften) enthält. Die vier aktuellen Styles bestehen aus folgenden Dateien, in der gleichen Reihenfolge wie in der Sidebar:
    https://www.psd-tutorials.de/psd-sidebar/css/psd-default-style.css
    https://www.psd-tutorials.de/psd-sidebar/css/psd-blue-style.css
    https://www.psd-tutorials.de/psd-sidebar/css/psd-blue-light-style.css
    https://www.psd-tutorials.de/psd-sidebar/css/windows10-style.css
    Der Aufbau ist sehr einfach, so das auch User mit wenig HTML/CSS-Kenntnissen einen neuer Stil zaubern können.
    Ihr könnt gerne einen dieser Styles als Vorlage benutzen, wenn Ihr eine fertige CSS mit Eurem Beitrag liefern wollt. Was eigentlich sehr hilfreich wäre und die Übernahme eines Stils, nicht nur für uns vereinfachen, sondern auch schneller möglich macht.

    Alle, die auf dem Gebiet HTML/CSS nicht so bewandert sind, können Ihren Beitrag auch in einem Grafikprogramm z.B. Photoshop umsetzen.

    Was ist zu beachten:
    * Der Header- und Anzeigen-Bereich sollte nicht verkleinert werden.
    * Die Positionen der Elemente sollte aus benutzerfreundlichen Gründen nicht verändert werden, deswegen sind diese auch nicht Bestandteil der CSS der Styledateien.
    * Schriftarten sollten möglichst beibehalten werden, ansonsten nur Standardschriften eingesetzt, die wir nicht extra in der Seite laden müssen.
    * Die Icons dürfen nicht geändert werden.
    * Größe, Farbe, Laufweite und anderes kann bei Schriftarten angepasst werden, solange alles lesbar bleibt.
    * Es gibt keine Einschränkungen was Farben angeht. Auch können andere Effekte (Rahmen, Schatten etc.) benutzt werden, solange es nicht mit Effekten überladen ist.
    * Die die CSS schreiben, mögen auch Animationen oder Transitions der Elemente einfügen wollen, das ist in Ordnung.

    Euer Beitrag sollten folgendes wiedergeben:
    * Eine Darstellung des vorgeschlagenen Layouts in der Tab-Ansicht, davon ein Tab selektiert und ein Tab wie es mit der Maus überfahren aussieht.
    * Eine Darstellung des vorgeschlagenen Layouts in der horizontalen Reiter-Ansicht, es soll sowohl geschlossene als auch die offene Darstellung zu erkennen sein.
    * Eine Darstellung mit der Settings-Seite und den Profil-Links offen.
    * Links sollen dargestellt werden wie sie aussehen sollen, wenn besucht und wenn nicht besucht.
    * Optional: Die Scrollbar soll zu erkennen sein, wie sie gestyled aussehen soll, wenn sie anders als aktuell für den Stil dargestellt werden soll.
    • Zusätzlich zum Bildtitel unbedingt mit angeben (ob als kleine Signatur, im Titel direkt oder unter "Verwendete Programme" ) wie euer Beitrag erstellt wurde CSS /PS u.s.w.
    • Bitte speichert eure Arbeit gut ab und hebt sie auf damit sie dem PSD Team, im Anschluss an das Voting, zur Verfügung gestellt werden kann.
    Mehrere Einreichungen pro Teilnehmer sind möglich.

    Das ist jetzt viel aber lest Euch bitte alles gut durch.​

    REGELN:
    • Die Aufgabe muss klar erkennbar umgesetzt werden.​
    • Alle verwendeten Quellen sind beim hochladen ins Contestmodul mit anzugeben.​
    • Bilder mit fehlenden Angaben werden leider vor dem Voting gelöscht.​

    WICHTIG:
    Ein Verstoß gegen Lizenzrechte führt zur 12-monatigen Contestsperre.
    Diese Sperre schließt alle Contests ein.


    Wie gebe ich meine Quellen an:
    [​IMG]
    Auf der linken Seite vergibst Du einen Namen und auf der rechten Seite kopierst Du den Direktlink von deinem verwendetem Stockbild an. Ein neues Bild kann jeweils durch klicken auf das "+" Symbol hinzugefügt werden.

    WIP Thread:
    WIP = Work in Progress (übersetzt = Laufende Arbeit / Bild in Entstehung).
    Das wippen ist kein muss, wird aber sehr gerne gesehen. Sachliche Kritik und Verbesserungsvorschläge zu den eingestellten WIP-Bildern sind jederzeit wünschenswert. Benutzt bitte für das Hochladen der Bilder einen Anbieter wie z. B. shotroom.com und dort den 1. Link von oben linke Seite (siehe Bild)
    [​IMG]

    Sonstiges:
    • Euer Beitrag muss für diesen Contest erstellt werden.
    • Signaturen im Bild sind zwar erlaubt, sollten aber weggelassen werden. (Grund: anonymes Voting)
    • Bei Kommentaren am eigenen Beitrag im Contestmodul, bitte erst NACH dem Voting antworten. (Grund: anonymes Voting)
    Wie üblich gilt auch hier:
    • Wir erwarten ein freundliches Miteinander!
      Ironie, Häme, Sarkasmus, Zynismus und was sonst noch abträglich für konstruktives Arbeiten ist, haben hier nichts zu suchen. Beiträge dieser Art werden von uns gelöscht.
    • Mit der Teilnahme an dem Contest erklärt sich jeder Contestteilnehmer einverstanden, dass sein Contestbeitrag in der Contestgalerie, im Profil des Erstellers und im Commag eingebunden und veröffentlicht wird.
    Und nun viel Spaß!
     
    Zuletzt bearbeitet: 19.06.2017
    #1      
    virra, Stille_Wasser und Lindhane gefällt das.
  2. TutKit

    TutKit Vollzugriff

    Vollzugriff auf sämtliche Inhalte für Photoshop, InDesign, Affinity, 3D, Video & Office

    Suchst du einen effektiven Weg, um deine Geschäftsideen aber auch persönlichen Kenntnisse zu fördern? Teste unsere Lösung mit Vollzugriff auf Tutorials und Vorlagen/Erweiterungen, die dich schneller zum Ziel bringen. Klicke jetzt hier und teste uns kostenlos!

  3. Icebeam

    Icebeam Planschzicke Teammitglied PSD Beta Team

    353217
    Dabei seit:
    11.07.2012
    Beiträge:
    3.627
    Geschlecht:
    weiblich
    Software:
    InDesign, Illustrator, Photoshop, Poser
    PSD Sidebar Contest
    Solltet Ihr technische Fragen haben, und ich weiß, er zieht mir gleich die Ohren dafür lang, tickert bitte @dkarvounaris an. Meine Kenntnisse zu dem Thema stecken noch in den Kinderschuhen :D
     
    #2      
  4. dkarvounaris

    dkarvounaris Lead Web Developer PSD Beta Team Kreativ-Flatrate-User

    Dabei seit:
    30.10.2016
    Beiträge:
    482
    Geschlecht:
    männlich
    PSD Sidebar Contest
    Zur Info: Ich bin noch nicht dazu gekommen, werde aber noch die Styles-Dateien die ihr als Vorlagen nutzen könnt, noch mit Kommentaren ausstatten, damit sehr einfach klar ist, welche Eigenschaften zu welchem Teil der Sidebar gehören. Wenn ihr noch ein paar Stunden warten möchtet :)

    Und einen riesenherzlichen Dank an Michaela aka @Icebeam für die super Unterstützung :)

    *edit* Alle Styles-Dateien enthalten nun Angaben welche Farbe bzw. Layout wozu gehört. Manch eine hat 1-2 Sachen extra, z.B. der Windows-Style, der die Tooltips auch verändert. Falls ein CSS-Designer die Tooltips ebenso individualisieren möchte, dort findet ihr es :)
     
    Zuletzt bearbeitet: 09.06.2017
    #3      
    Stille_Wasser gefällt das.
  5. Stille_Wasser

    Stille_Wasser ...

    534
    Dabei seit:
    26.07.2012
    Beiträge:
    4.737
    Geschlecht:
    weiblich
    Ort:
    Vogtland
    Software:
    AP + AD (Win), LR4, Artweaver Free 6, ...
    Kameratyp:
    Samsung NX 300 (Systemkamera)
    PSD Sidebar Contest
    :) Gefällt mir, das ihr so weit auf die User zugeht. :)
    Allerdings werde ich bestimmt nicht an diesem Contest teilnehmen. Zum einen sind meine Programmierkenntnisse auch mit viel gutem Willen nur rundmentär und zum anderen bin ich mit der Sidebar und ihren Einstellungsmöglichkeiten rundum zufrieden. (zumal ich nur mit dem PC im net bin.)
     
    #4      
  6. dkarvounaris

    dkarvounaris Lead Web Developer PSD Beta Team Kreativ-Flatrate-User

    Dabei seit:
    30.10.2016
    Beiträge:
    482
    Geschlecht:
    männlich
    PSD Sidebar Contest
    @Stille_Wasser Die ohne CSS Kenntnisse können gerne ein Design als reine Grafik beitragen. :)
     
    #5      
    Stille_Wasser gefällt das.
  7. tynick

    tynick nicht mehr oft zu sehen

    471
    Dabei seit:
    29.07.2013
    Beiträge:
    1.599
    Geschlecht:
    männlich
    Software:
    Affinity Photo, HitFilm Pro, Luminar, Aurora HDR, Win 10
    Kameratyp:
    Nikon D5500
    PSD Sidebar Contest
    Auch die mit CSS Kenntnissen???
    Ohne eine Fake-Sidebar als HTML-Dokument fehlt mir, so glaube ich, die Vorstellungskraft wie die Farbcodes am Ende zusammen spielen werden!
     
    #6      
  8. Icebeam

    Icebeam Planschzicke Teammitglied PSD Beta Team

    353217
    Dabei seit:
    11.07.2012
    Beiträge:
    3.627
    Geschlecht:
    weiblich
    Software:
    InDesign, Illustrator, Photoshop, Poser
    PSD Sidebar Contest
    Was sollte gegen "Mach Plan, mach Skizze" sprechen?!:)
     
    #7      
  9. dkarvounaris

    dkarvounaris Lead Web Developer PSD Beta Team Kreativ-Flatrate-User

    Dabei seit:
    30.10.2016
    Beiträge:
    482
    Geschlecht:
    männlich
    PSD Sidebar Contest
    Bin mir nicht sicher, ob ich dich ganz verstehe, aber du kannst ja die Seite abspeichern, und öffnen und editieren, wenn du das meinst?

    Es wäre schon hilfreich, wenn die die CSS können, dies auch zusätzlich so liefern würden. Außerdem, kann ein "CSS-Künstler" ja auch nette Sachen einbauen, die man als Grafik nicht kann (z.B. Transitions), was ich selbst besser finden würde für mich :)
     
    #8      
  10. tynick

    tynick nicht mehr oft zu sehen

    471
    Dabei seit:
    29.07.2013
    Beiträge:
    1.599
    Geschlecht:
    männlich
    Software:
    Affinity Photo, HitFilm Pro, Luminar, Aurora HDR, Win 10
    Kameratyp:
    Nikon D5500
    PSD Sidebar Contest
    Da hast Du völlig recht! Man verliert zwar einen Teil der Funktionalität, doch so wird es gehen!
    Schon merkwürdig wie man manchmal auf die einfachsten Lösungen nicht kommt! :confused:

    @Icebeam, wie soll denn am Ende die CSS ins Modul geladen werden? Ein Vorschaubild mit Link zu einem Zip in den Quellen?
    Transitions und andere Effekte können dann für die Voter ja nicht dargestellt werden!
    Oder stehe ich schon wieder auf dem Schlauch?
     
    Zuletzt bearbeitet: 09.06.2017
    #9      
  11. Icebeam

    Icebeam Planschzicke Teammitglied PSD Beta Team

    353217
    Dabei seit:
    11.07.2012
    Beiträge:
    3.627
    Geschlecht:
    weiblich
    Software:
    InDesign, Illustrator, Photoshop, Poser
    PSD Sidebar Contest
    Ist das der Übergang zwischen zwei "Zuständen" eines Elements? Also etwas das durch eine Benutzeraktion ausgelöst wird?
    Also ich habe keine Ahnung wie sich das @dkarvounaris gedacht hat. Mein Empfinden sagt mir, dass vielleicht ein Bild erstellt wird wo Sachen wie z.B Sidebar geschlossen, Sidebar offen, Mouse Rollover nebeneinander zu sehen sind? Das, was im Hintergrund läuft, also das eigentliche Programierdinges kann kann ja im nachhinein zur Verfügung gestellt werden. Du speicherst deine Arbeit ja. Und vielleicht in den Quellen einen Link zum Code. Ähnlich wie in der Contestbeschreibung.
     
    #10      
  12. tynick

    tynick nicht mehr oft zu sehen

    471
    Dabei seit:
    29.07.2013
    Beiträge:
    1.599
    Geschlecht:
    männlich
    Software:
    Affinity Photo, HitFilm Pro, Luminar, Aurora HDR, Win 10
    Kameratyp:
    Nikon D5500
    PSD Sidebar Contest
    Richtig, also das Ändern von CSS-Eigenschaftswerten über eine definierte Zeit. Z.B.: Bewegungen, Ein- oder Ausblenden und andere Übergänge
    Damit wird der Voter allerdings nichts anfangen können. Es sei denn es wird ein Link zu einer Live-Vorschau gepostet.
    Dazu müsse der Teilnehmer aber über einen Zugang zu Serverspeicherplatz verfügen und würde außerdem, nach meinem Verständnis, gegen geltendes Recht verstoßen, würde er eine Kopie von Teilen dieses Webangebots auf seinem eigenen Webspace veröffentlichen!

    Mal schauen was @dkarvounaris dazu sagt und vielleicht haben ja auch andere noch eine Idee!
    Wäre doch schade wenn sich jemand die Mühe macht Effekte einzubauen, die dann beim Voting nicht berücksichtigt werden können!
     
    Zuletzt bearbeitet: 09.06.2017
    #11      
  13. Icebeam

    Icebeam Planschzicke Teammitglied PSD Beta Team

    353217
    Dabei seit:
    11.07.2012
    Beiträge:
    3.627
    Geschlecht:
    weiblich
    Software:
    InDesign, Illustrator, Photoshop, Poser
    PSD Sidebar Contest
    Es sei denn, er kennt sich damit aus. :D Also ich würde sagen: Contestbild ähnlich wie ein Screenshot von den wichtigsten Styles die das neue Layout beinhaltet. Vielleicht sollte ich vorsorglich oben noch mit reinschreiben, das man seine Arbeitsdatei bitte abspeichert und zur Verfügung stellt, sollte sie in die engere Auswahl kommen. Man weiß ja nie :D
     
    #12      
    Stille_Wasser und tynick gefällt das.
  14. dkarvounaris

    dkarvounaris Lead Web Developer PSD Beta Team Kreativ-Flatrate-User

    Dabei seit:
    30.10.2016
    Beiträge:
    482
    Geschlecht:
    männlich
    PSD Sidebar Contest
    Also, die Voter sollen ruhig alle basierend auf dem Look&Feel voten. Irgendwelche Transitions oder anderes sind Boni, die die Erfahrung mit dem Layout "smoother" machen :) Aber entscheidend ist erst einmal doch das Look&Feel.
    Wer möchte, kann natürlich eventuell ein Video machen und darauf verweisen, wenn es denn wirklich etwas interessantes zu zeigen gibt bzw. sich jemand besondere Mühe gegeben hat. Ansonsten ist nichts weiter vorgesehen, irgendeine Live-Vorschau oder sowas. Ist auch garnicht notwendig, denke ich.

    Und die Arbeitsdatei sollte klar auch irgendwo zur Verfügung stehen, daß man sie später nutzen kann.
     
    #13      
    tynick gefällt das.
  15. tr4ze

    tr4ze Mod | Forum Teammitglied PSD Beta Team

    422
    Dabei seit:
    02.09.2006
    Beiträge:
    2.225
    Geschlecht:
    männlich
    Ort:
    Nordhorn
    Software:
    CS6, Intuos
    PSD Sidebar Contest
    @dkarvounaris und @Icebeam

    Bitte bitte, postet doch die CSS Dateien als UTF-8 und nicht windows-1252. Das könnte späteren Ärger ersparen.:D;)

    @dkarvounaris
    Gibt ne Möglichkeit aus der Sidebar ne bin zu machen (jsbin.com). Dann könnte jeder sein CSS quasi live testen.
     
    #14      
  16. Icebeam

    Icebeam Planschzicke Teammitglied PSD Beta Team

    353217
    Dabei seit:
    11.07.2012
    Beiträge:
    3.627
    Geschlecht:
    weiblich
    Software:
    InDesign, Illustrator, Photoshop, Poser
    PSD Sidebar Contest
    Ich musste erst mal Goggle fragen was das ist :D Von daher überlasse ich die Antwort dem Hacker Man.
     
    #15      
  17. Stille_Wasser

    Stille_Wasser ...

    534
    Dabei seit:
    26.07.2012
    Beiträge:
    4.737
    Geschlecht:
    weiblich
    Ort:
    Vogtland
    Software:
    AP + AD (Win), LR4, Artweaver Free 6, ...
    Kameratyp:
    Samsung NX 300 (Systemkamera)
    PSD Sidebar Contest
    Ich hätte noch eine Bitte: wenn ihr hier die Möglichkeiten und Modalitäten ausklamüsert habt, könnt ihr da eine große fette News schreiben, ev. gar für einige Zeit anpinnen? Es gab meines Wissens nach schon länger keinen Contest für Programmierung mehr und ich würde mich freuen, wenn so Viele wie möglich darauf aufmerksam werden. ;)
     
    #16      
  18. Icebeam

    Icebeam Planschzicke Teammitglied PSD Beta Team

    353217
    Dabei seit:
    11.07.2012
    Beiträge:
    3.627
    Geschlecht:
    weiblich
    Software:
    InDesign, Illustrator, Photoshop, Poser
    PSD Sidebar Contest
    Soll noch kommen :nick:
     
    #17      
    Stille_Wasser gefällt das.
  19. dkarvounaris

    dkarvounaris Lead Web Developer PSD Beta Team Kreativ-Flatrate-User

    Dabei seit:
    30.10.2016
    Beiträge:
    482
    Geschlecht:
    männlich
    PSD Sidebar Contest
    @tr4ze
    Die Dateien wurden für UTF-8 kürzlich geändert. Sie waren es eigentlich schon, lediglich hat der Browser, wenn dieser sie so geladen hat, eine Anweisung in der Datei selbst vermisst.

    Das mit jsbin habe ich mir kurz angeschaut, aber ich kenne es nicht wirklich und auf Anhieb sieht es aus als ob es nicht einfach mal so ginge. Wenn du da mehr Erfahrung mit hast und es vielleicht irgendwie doch vorbereiten kannst und du meine Unterstützung nur geringfügig bräuchtest dafür (Zeit ist aktuell sehr knapp hier), dann gerne.
     
    #18      
  20. Icebeam

    Icebeam Planschzicke Teammitglied PSD Beta Team

    353217
    Dabei seit:
    11.07.2012
    Beiträge:
    3.627
    Geschlecht:
    weiblich
    Software:
    InDesign, Illustrator, Photoshop, Poser
    PSD Sidebar Contest
    Moin Moin,
    hat zufällig jemand das Logout und Pinnadel Icon als Png oder Custom Shape für mich? Ach so: bitte :)
     
    #19      
  21. dkarvounaris

    dkarvounaris Lead Web Developer PSD Beta Team Kreativ-Flatrate-User

    Dabei seit:
    30.10.2016
    Beiträge:
    482
    Geschlecht:
    männlich
    PSD Sidebar Contest
    Ich schicke dir später die Icons als SVG's. Möchte sie noch jemand für den Contest?
     
    #20      
Seobility SEO Tool
x
×
×