Hallo! In diesem Tutorial zeige ich euch, wie man einen Newsbeitrag für seinen Blog im "UI flat design" designen kann. Aussehen wird es am Ende ungefähr so:
Als erstes solltet ihr euch um die Schriftarten kümmern. Zwei ganz gute OpenType Schriftarten für diesen Style sind OpenSans und SourceSansPro die man mit Google Fonts auch als Webschrift auf seiner Seite einbinden kann. Ich habe hier in diesem Tutorial "OpenSans" verwendet, also auf und downloaden.
Zuerst stellt ihr die Hintergrundfarbe auf #f3f3f3;
Als zweites erstellt ihr ein 250px breites und 380px hohes Rechteck mit dem "Abgrundeten Rechteck Werkzeug". Dafür stellt ihr einen Radius von 4px ein, macht ein Rechtsklick und wählt "auswahl erstellen" aus.
Diese Auswahl füllt ihr mit einer weißen Farbe und gibt der Fläche eine Kontur und Schlagschatten. Die Kontur hat die Farbe: #dad9d9 und den Schlagschatten Einstellungen könnt ihr diesem Bild entnehmen:
Jetzt wollen wir das Teaserbild erstellen. Dafür macht ihr ein Rechtsklick auf das Objekt und wählt "Auswahl laden" aus. Wenn man "Alt" gedrückt hält kann man mit einer neuen Auswahl die man zieht (mit dem Rechteckswerkzeug) die Auswahl verkleinern. So sieht das dann aus:
Für das Bild erstellen wir einen neuen "Ordner" und geben diesem eine Ebenenmaske.
Dort fügst du nun ein beliebiges Titelbild ein und kannst dank der Ebenenmaske das Teaserbild noch anpassen.
Beim Text haben wir einmal die Überschrift in OpenSans, Regular, 24px, Farbe #1a1a1a und dem Subtext in 14px, Farbe#8c8c8c und einem Zeilenabstand von 20Pt. Das sieht dan ungefähr so aus:
Weiter geht es dann in Teil 2 (1-2Wochen)