Vor 4 Wochen habe ich den ersten Teil von "Tutorial: UI Flat Design – Newsbeitrag für Blog – Teil 1" geschrieben und heute geht es endlich weiter.
Wer den ersten Teil noch nicht gelesen hat findet ihn hier:
Tutorial: UI Flat Design – Newsbeitrag für Blog – Teil 1
Weiter geht es mit der "call-to-action" Anweisung "Artikel weiterlesen". Um Sie noch stärker sichtbar zu machen bekommt Sie die Farbe: #14b9d6. Nehmt hier OpenSans, 14Pt in der semibold Variante und haltet ein bisschen mehr Abstand nach oben.
Für die Facebook, Twitter & Kommentar Boxen messen wir als Nächstes die Breite aus und teilen sie durch 3, damit wir die Größe jeder einzelnen Box finden.
-> 249px/3=83px
Für die Boxen wählt ihr nun das abgerundete Rechteck Werkzeug aus und klickt auf das Pulldownfeld oben. 
Dort tragt ihr bei "fester Größe" die 83 Pixel ein und eine Höhe von 72px. Wenn ihr nun auf der äußersten Linie einmal klickt wird die Form erstellt.
Jetzt fehlt noch "rechtsklick + auswahl erstellen + Fläche füllen mit Weiß". Dieser Fläche gibt ihr anschließend den Ebenenstil von der großen weißen Hintergrundfläche von der ganzen News.
Diese Box dupliziert ihr nun dreimal und ordnet Sie so wie auf dem Bild zu sehen nebeneinander an. 
Da die Kanten in der Mitte noch rund sind müsst ihr sie noch abschneiden.
Den inaktiven Boxen gebt ihr eine Hintergrundfarbe von #f9f9f9.
Damit wir den oberen grauen Border wegbekommen legt ihr einfach eine weiße Ebene drüber.
Weiter geht es mit den noch fehlenden Icons für Facebook, Twitter und Kommentare. Diese habe ich natürlich nicht selber erstellt. Wer darin gut ist kann das natürlich auch selber erstellen, ansonsten kauft euch einfach gute Icon Sets wie von tabsicons.com oder verwendet die Icon Suchmaschine "Iconfinder.com"
Sucht also eine "thumbs up" Hand und baut sie in das Design ein. Die Schrift "136 Likes" ist in 10Px und semibold. Die Farbe ist wieder #14b9d6.
Fehlt noch die Twitter & Kommentar Box. Hier geht ihr gleich vor und gibt der Schrift sowie den Icons den Grauwert von #e2e2e2.
Jetzt noch das Kommentar Icon, den Text und Fertig ist der Blognews.
