Share
Welkom bij de zevende les van onze serie Web Design for Kids, allemaal over afbeeldingen!
We hebben verschillende afbeeldingen toegevoegd aan onze Tuts + Town-website, maar we hebben nog niet uitgebreid over afbeeldingen gesproken. In deze les zullen we ingaan op de meer algemeen gebruikte soorten afbeeldingen op het web en enkele technieken voor het bewerken van afbeeldingen.
Vergeet niet om vragen te stellen in het opmerkingengedeelte onderaan deze pagina!
We zijn geen vreemden voor het gebruik van afbeeldingen op internet. Onze website Tuts + Town heeft vier afbeeldingen gebruikt. We konden die afbeeldingen toevoegen in onze HTML en vervolgens de grootte en positie ervan aanpassen met behulp van CSS.
Er zijn veel dingen om over na te denken bij het gebruik van afbeeldingen op het web, zoals welk formaat het beste is, waar u de juiste afbeeldingen kunt vinden en hoe u ze kunt gebruiken.
In deze les zullen we effecten toepassen op de volgende afbeelding, een kaart van Tuts + Town:
Tuts + stadsplattegrondDe meest gebruikte afbeeldingen op het web zijn JPEG's, PNG's en SVG's. Laten we praten over wat ze precies zijn.
Een JPEG is een afbeelding met een van de volgende bestandsextensies: ".jpeg" of ".jpg" Deze afbeeldingen vormen waarschijnlijk het grootste deel van wat u tegenkomt en op internet gebruikt.
Ze zijn fantastisch voor het maken van een kleinere foto beeldbestandsgrootte om gemakkelijker te gebruiken op het web of bijvoorbeeld via e-mail. Deze lagere bestandsgrootte betekent echter ook dat u een afbeelding van lagere kwaliteit krijgt.
Een PNG is een afbeelding met de extensie ".png". Hoewel een JPEG een klein verlies aan beeldkwaliteit oplevert, zal een PNG dat niet doen. Deze bestanden zien er net zo scherp en helder uit als het origineel, maar om deze kwaliteit de bestandsgrootte te behouden kan veel groter zijn dan een .jpeg.
PNG's zijn een goede keuze voor lijntekeningen, tekst en pictogramafbeeldingen die al een kleinere bestandsgrootte hebben. Het is ook mogelijk om een transparante achtergrond te hebben met een PNG, in tegenstelling tot een JPEG.
Schaalbare vectorafbeeldingen, SVG, zijn afbeeldingen die kunnen worden verkleind naar zowel grote als kleine formaten zonder alles te krijgen korrelig en wazig kijken, zoals een meer traditionele JPEG of PNG zou doen. Deze afbeeldingen worden opgeslagen met de extensie ".svg" en zijn perfect voor illustraties en bedrijfslogo's.
Alle afbeeldingen die in Tuts + Town worden gebruikt, zijn SVG's! Als we terug zouden gaan naar de CSS voor onze site en de breedte van elke afbeelding naar 1000px het zou het enorm en glashelder maken.
SVG is aan de rechterkant - veel duidelijker!Er zijn veel handige plekken om gratis te krijgen en gratis te gebruiken foto's op internet.
Hoewel sommige afbeeldingen niets kosten, kunnen ze ons verplichten om bepaalde regels te volgen, zoals het vermelden van de naam van de fotograaf overal waar we hem gebruiken. Andere afbeeldingen kunnen gratis zijn om alleen voor persoonlijke projecten te gebruiken en mogen niet voor een bedrijf worden gebruikt.
Controleer altijd de licentie (of toestemmingen) wanneer je niet zeker bent, maar laten we het nu hebben over een paar opties die dat wel zijn beide gratis en gratis te gebruiken.
Veel webontwerpers gebruiken gereedschappen voor het bewerken van afbeeldingen, zoals Photoshop, om wijzigingen in hun foto's aan te brengen voordat ze deze op een website gebruiken. Deze veranderingen kunnen van alles zijn, van het veranderen van de kleuren, het wegwerken van schaduwen, tot bijsnijden.
De meeste computerbesturingssystemen hebben een programma dat enkele zeer eenvoudige bewerkingen kan beheren. "Voorbeeld" is een geweldige optie als u een Mac-computer hebt waarmee u het formaat van afbeeldingen, bijsnijdingen en afbeeldingen in andere indelingen kunt aanpassen. Om toegang te krijgen tot Voorbeeld kunnen we een zoekopdracht uitvoeren op onze computers (vergrootglas rechtsboven op uw scherm!) Of een afbeelding openen door erop te dubbelklikken, omdat dit waarschijnlijk is ingesteld als ons standaard beeldweergaveprogramma.
Op een Windows-computer zullen "Windows Photo Viewer" of "Paint" waarschijnlijk de standaard image-programma's zijn die we kunnen gebruiken, opnieuw, wat enkele basisveranderingen mogelijk maakt.
Als we het over hebben bijsnijden we bedoelen het verwijderen van de buitenste delen van een afbeelding.
Bijsnijden kan erg handig zijn als er slechts een gedeelte van een grote afbeelding is dat we willen gebruiken; het is zelfs mogelijk om bij het bijsnijden andere vormen aan te nemen, zoals cirkels!
Naast het wijzigen van de grootte van een afbeelding met CSS, zijn er een aantal filtereffecten beschikbaar, zoals het zwart-wit maken van een afbeelding, transparant maken of het aanpassen van het helderheidsniveau.
We kunnen afbeeldingen converteren naar zwart en wit in onze CSS met behulp van de filter eigendom.
Binnen deze eigenschap omvatten we grijstinten en dan een percentage tussen haakjes (haakjes).
Hier volgt een korte blik op enkele CSS die een volledig zwart-wit beeld zal opleveren:
img filter: grijstinten (100%);
Dekking verwijst naar het maken van iets transparants of doorzichtig. De ondoorzichtigheid property haalt waarden uit .0 naar 1, met .0 volledig doorzichtig (onzichtbaar) en 1 helemaal geen doorzichtigheid. Alle waarden ertussen geven een andere sterkte van transparantie.
Bijvoorbeeld als we instellen dekking: .5; op een reeks cirkels in een CSS-document, zou het resultaat er ongeveer zo uitzien:
Dit type effect op een afbeelding kan geweldig zijn als we een afbeelding wat minder opvallend op een pagina willen maken, zodat de tekst erboven beter opvalt.
We kunnen een afbeelding ook wazig maken met behulp van CSS-filters. Binnen de filtereigenschap die we moeten gebruiken vervagen gevolgd door een op pixels gebaseerde waarde tussen haakjes.
img filter: vervagen (5px);
Hoe hoger de pixelwaarde, des te waziger een afbeelding zal zijn.
Notitie: Voor een completere lijst met CSS-filters kunt u deze bron bekijken. Klik gewoon op het tabblad CSS van een demo om te zien hoe het werkt.
In deze cursus hebben we een aantal veel gebruikte beeldformaten op het web onderzocht, evenals enkele effecten die op deze afbeeldingen kunnen worden toegepast. Onze afbeeldingen klaar maken voor een site kan een taak zijn die varieert van supereenvoudig met minimale benodigde gereedschappen tot behoorlijk complexe bewerkingen die krachtige tools vereisen.
Vervolgens zullen we bespreken ontwerp basics, waar we praten over het gebruik van wat we regelen op de webpagina.
Ik zie je in de stad!
Accentsconagua