VISUELLER CONTENT FÜR IHRE WEB- PROJEKTE: FINDEN, OPTIMIEREN, SPEICHERN W O R K S H O P,

Transkript

1 VISUELLER CONTENT FÜR IHRE WEB- PROJEKTE: FINDEN, OPTIMIEREN, SPEICHERN W O R K S H O P,

2 66 % ALLER SOCIAL MEDIA POSTS SIND, ODER ENTHALTEN, BILDER. FACEBOOK NUTZER LADEN TÄGLICH 350 MILLIONEN BILDER INS INTERNET.

3 WIR LEBEN IN DER ÄRA DES DIGITALEN EXZESSES UND DES ÜBERFLUSSES AN BILDERN.

4 RICHTIGE BILDERWAHL Die richtige Bilderwahl kann Ihre Webseite gleich viel professioneller aussehen lassen und zu einem Anstieg des aktiven Verkaufs führen, und das trotz geringer Investitionskosten. Bilder, die sich positiv auf die emotionale Lages des Besuchers auswirken oder Ihn in seinem Vorhaben bestätigen, führen dazu, dass er Ihre Homepage als informativ und attraktiv wahrnimmt.

5 STORYTELLING Bilder sie wecken Emotionen, berühren, erklären, überraschen, provozieren, alles innerhalb eines winzigen Augenblicks. Bilder von Henri Cartier Bresson

6 Ein sympathisches älteres Pärchen, beide lächeln zufrieden. Sie sehen entspannt und sorglos aus. Das Bild ist gestellt, und wurde auf online Fotobörsen erworben. Unterbewusst verknüpft man aber diese Eigenschaften auch mit der Firma, auf deren Homepage das Bild zu finden ist. Natürlich muss das Bild zum Rest der Seite passen, eine veraltete Homepage vermag auch das professionellste Bild kaum zu verschönern.

7 Ein Bild sagt mehr als tausend Worte

8 PASSENDE BILDER FINDEN

9 KOSTENLOSE FOTOS

10 KOSTENLOSE ILLUSTRATIONEN UND PIKTOGRAMME

11 ONLINE FOTOBÖRSEN 1 Shutterstock.com 2 Istockphoto.com 3 Fotolia.com

12 VEKTOR - UND RASTERGRAFIKEN IM VERGLEICH Vektorgrafiken nutzen Linien, Punkte und Vielecke zur Darstellung eines Bildes. Rastergrafiken codieren die einzelnen Werte eines jeden Pixels innerhalb eines rechteckigen Rasters zur Darstellung eines Bildes. x2,5 x2,0

13 VEKTOR- UND RASTER GRAFIKEN VEKTOR Vektorgrafiken eignen sich ideal für Bilder, die aus geometrischen Formen bestehen (z. B. Logos, Text, Symbole usw.). Sie sind unabhängig von Zoomfaktor und Auflösung. RASTER Für komplexe Darstellungen mit vielen unregelmässigen Formen und Details sollten Rastergrafiken verwendet werden.

14 BILDER BEARBEITEN

15 Bilder in Photoshop richtig speichern Format in Pixeln hinterlegen und als Auflösung 72 Pixel/Zoll einstellen.

16 Bilder in Photoshop richtig speichern Der Befehl befindet sich unter dem Menüpunkt Datei, man muss Für Web speichern auswählen.

17 Bilder in Photoshop richtig speichern Oder beim Speichern einer Datei, Qualität auf 65% einstellen, JPEG als optimized speichern. Nicht vergessen, dass man die Dateien webkonform benennen muss: keine Umlaute wie ä,ö,ü keine Sonderzeichen wie ',? keine Leerzeichen

18 Bilder in Photoshop richtig speichern JPEG (Joint Photographic Experts Group) überzeugt durch eine sehr gute Komprimierung, Ladezeit und Bildqualität im Verhältnis zur Dateigrösse PNG (Portable Network Graphics). Dieses Format wählt man ausschliesslich, wenn man transparente Bereiche in einem Bild erhalten will. Es erzeugt die hochwertigsten Bilder, allerdings auf Kosten erheblich grösserer Dateien als andere Formate. GIF (Graphics Interchange Format). Dieses Dateiformat unterstützt Transparenzen auch, liegt in der Darstellung, was Schärfe und Farbechtheit angeht, aber deutlich hinter dem PNG. GIFs sind besonders für Animationen und kleine Grafiken in Newslettern geeignet. SVG (Scalable Vector Graphics). Ein XML-basiertes Bildformat für zweidimensionale Grafiken. Das SVG-Markup wird direkt auf der Seite oder als externe Ressource eingebettet.

19 Gif Dateien kostenlos erstellen h t t p : / / m a k e a g i f. c o m h t t p : / / g i f m a k e r. m e h t t p s : / / i m g f l i p. c o m / i m a g e s - t o - g i f h t t p s : / / g i p h y. c o m h t t p : / / g i f c r e a t o r. m e

20 WP Plugins h t t p s : / / o p t i m u s. i o h t t p s : / / w o r d p r e s s. o r g / p l u g i n s / w p - s m u s h i t h t t p s : / / w o r d p r e s s. o r g / p l u g i n s / i m a g i f y h t t p s : / / d e. w o r d p r e s s. o r g / p l u g i n s / t i n y - c o m p r e s s - i m a g e s h t t p s : / / d e. w o r d p r e s s. o r g / p l u g i n s / e w w w - i m a g e - o p t i m i z e r h t t p s : / / w o r d p r e s s. o r g / p l u g i n s / k r a k e n - i m a g e - o p t i m i z e r

21 Wann welches Format auswählen Bildquelle:

22 TRENDS

23 GRID DESIGN Bildquelle: Pinterest Bildquelle:

24 COLOR BLOCKING

25 FLAT DESIGN - WENIGER IST MEHR

26 Ausserdem: V i d e o s i n E n d l o s s c h l e i f e S c h a r f e B i l d a u s s c h n i t t e m i t m e i n f a r b i g e hellem Hintergrund F u l l s c r e e n Background Fotos und V i d e o s

27 Vielen Dank!