Share
Willkommen zur siebten Lektion unserer Serie "Web Design for Kids", alles über Bilder!
Wir haben auf unserer Tuts + Town-Website mehrere Bilder hinzugefügt, aber wir haben noch nicht im Detail über Bilder gesprochen. In dieser Lektion werden die am häufigsten verwendeten Bildtypen im Web und einige Bildbearbeitungstechniken behandelt.
Vergessen Sie nicht, Fragen in den Kommentaren am Ende dieser Seite zu stellen!
Wir sind nicht völlig fremd im Umgang mit Bildern im Web. Unsere Tuts + Town-Website verwendete vier Bilder. Wir konnten diese Bilder in unseren HTML-Code einfügen und dann mit CSS die Größe ändern und positionieren.
Bei der Verwendung von Bildern im Web gibt es viele Überlegungen, z. B. welches Format am besten ist, wo die richtigen Bilder zu finden sind und wie sie verwendet werden.
In dieser Lektion wenden wir Effekte auf das folgende Bild an, eine Karte von Tuts + Town:
Tuts + StadtplanDie am häufigsten verwendeten Bilder im Web sind JPEGs, PNGs und SVGs. Lass uns darüber reden, was sie genau sind.
Ein JPEG ist ein Bild mit einer der folgenden Dateierweiterungen: „.jpeg“ oder „.jpg“. Diese Bilder werden wahrscheinlich das meiste ausmachen, worauf Sie im Web stoßen werden.
Sie sind fantastisch, um eine kleinere zu schaffen Foto Bilddateigröße zur einfacheren Verwendung im Web oder zum Senden per E-Mail. Diese geringere Dateigröße bedeutet jedoch auch, dass Sie ein Bild mit geringerer Qualität erhalten.
Ein PNG ist ein Bild mit der Dateierweiterung „.png“. Während ein JPEG zu einem geringfügigen Qualitätsverlust führt, ist ein PNG-Bild nicht der Fall. Diese Dateien sehen genauso scharf und scharf aus wie das Original, aber bei dieser Qualität bleibt die Dateigröße erhalten können viel größer als ein .jpeg sein.
PNGs sind eine gute Wahl für Strichzeichnungen, Text und Symbolgrafiken, die bereits eine kleinere Dateigröße haben. Im Gegensatz zu einem JPEG ist es auch möglich, einen transparenten Hintergrund mit einer PNG-Datei zu haben.
Skalierbare Vektorgrafiken (SVG) sind Bilder, die sowohl in große als auch in kleine Größen umgewandelt werden können, ohne alle zu erhalten pixeliert und verschwommenes Aussehen, wie es ein herkömmlicheres JPEG oder PNG wäre. Diese Bilder werden mit der Dateierweiterung „.svg“ gespeichert und eignen sich ideal für Illustrationen und Firmenlogos.
Alle Bilder in Tuts + Town sind SVGs! Wenn wir für unsere Site zurück ins CSS gehen und das ändern würden Breite von jedem Bild zu 1000px es würde es riesig und kristallklar machen.
SVG ist auf der rechten Seite - viel klarer!Es gibt viele praktische Orte, an denen Sie kostenlos teilnehmen können kostenlos zu verwenden Fotos im Web.
Während einige Bilder möglicherweise nichts kosten, können sie bestimmte Regeln einhalten, z. B. den Namen des Fotografen, wo immer wir ihn verwenden. Andere Bilder dürfen nur für persönliche Projekte verwendet werden und dürfen nicht für ein Unternehmen verwendet werden.
Überprüfen Sie immer das Lizenzierung (oder Berechtigungen) wenn Sie nicht sicher sind, aber lassen Sie uns jetzt über ein paar Optionen sprechen beide kostenlos und frei zu verwenden.
Viele Webdesigner verwenden Bildbearbeitungstools wie Photoshop, um Änderungen an ihren Fotos vorzunehmen, bevor sie auf einer Website verwendet werden. Diese Änderungen können alles sein, vom Ändern der Farben über das Entfernen von Schatten bis hin zu Zuschneiden.
Die meisten Computer-Betriebssysteme verfügen über ein Programm, mit dem einige grundlegende Änderungen vorgenommen werden können. „Vorschau“ ist eine großartige Option, wenn Sie einen Mac-Computer haben, der es Ihnen ermöglicht, Bilder in anderen Formaten zu skalieren, zuzuschneiden und zu speichern. Um auf die Vorschau zuzugreifen, können Sie eine Suche auf unseren Computern ausführen (Lupe oben rechts auf Ihrem Bildschirm!) Oder ein Bild öffnen, indem Sie darauf doppelklicken, da es wahrscheinlich als unser Standardbildanzeigeprogramm festgelegt ist.
Auf einem Windows-Computer sind „Windows Photo Viewer“ oder „Paint“ wahrscheinlich die Standard-Bildprogramme, die wir verwenden können, was wiederum einige grundlegende Änderungen zulässt.
Wenn wir darüber reden Zuschneiden Wir meinen, die äußeren Teile eines Bildes zu entfernen.
Das Zuschneiden kann sehr praktisch sein, wenn es nur einen Ausschnitt eines großen Bildes gibt, das wir verwenden möchten. Es ist sogar möglich, dass das Zuschneiden andere Formen annimmt, beispielsweise Kreise!
Neben der Änderung der Größe eines Bildes mit CSS stehen eine Reihe von Filtereffekten zur Verfügung, z. B. das Schwarzweiß-Bild eines Bilds transparent oder das Anpassen der Helligkeit.
Wir können Bilder mit unserem CSS in CSS konvertieren Filter Eigentum.
In diese Eigenschaft schließen wir ein Graustufen und dann einen prozentualen Wert in Klammern (Klammern).
Hier ein kurzer Blick auf einige CSS, die ein vollständig schwarzweißes Bild erzeugen:
img filter: Graustufen (100%);
Opazität bezieht sich darauf, etwas transparent oder durchsichtig zu machen. Das Opazität Eigenschaft nimmt Werte von .0 zu 1, mit .0 völlig durchsichtig (unsichtbar) und 1 überhaupt nicht durchsichtig sein. Alle Werte dazwischen ergeben eine unterschiedliche Transparenz.
Zum Beispiel, wenn wir einstellen Deckkraft: .5; In einer Reihe von Kreisen in einem CSS-Dokument würde das Ergebnis ungefähr so aussehen:
Diese Art von Effekt auf ein Bild kann großartig sein, wenn ein Bild auf einer Seite etwas weniger sichtbar gemacht werden soll, sodass der darüberliegende Text mehr hervorgehoben wird.
Wir können ein Bild auch mit CSS-Filtern unscharf machen. Innerhalb der Filtereigenschaft müssen wir verwenden verwischen gefolgt von einem pixelbasierten Wert in Klammern.
img Filter: Unschärfe (5px);
Je höher der Pixelwert, desto unschärfer wird ein Bild.
Hinweis: Für eine vollständigere Liste von CSS-Filtern können Sie diese Ressource auschecken. Klicken Sie einfach auf die CSS-Registerkarte einer Demo, um zu sehen, wie es gemacht wird.
In diesem Kurs haben wir einige häufig verwendete Bildformate im Web sowie einige Effekte untersucht, die auf diese Bilder angewendet werden können. Die Bereitstellung unserer Bilder für eine Website kann eine Aufgabe sein, die von sehr unkompliziert mit minimalen Werkzeugen bis hin zu ziemlich komplexen Bearbeitungen reicht, die leistungsstarke Werkzeuge erfordern.
Als nächstes werden wir diskutieren Design-Grundlagen, wo wir darüber reden, wie wir das benutzen, was wir auf der Webseite arrangieren.
Wir sehen uns in der Stadt!
Accentsconagua