Share
Välkommen till den sjunde lektionen i vår Web Design for Kids-serie, allt om bilder!
Vi har lagt till flera bilder på vår webbplats Tuts + Town, men vi har inte pratat om bilder i detalj än. I den här lektionen kommer vi att beröra de mer vanliga typerna av bilder på webben och vissa bildredigeringsmetoder.
Glöm inte att ställa några frågor i kommentarfältet längst ner på den här sidan!
Vi är inte fullständiga främlingar att använda bilder på webben. Vår webbplats Tuts + Town använde fyra bilder. Vi kunde lägga till dessa bilder i vår HTML och sedan ändra storlek och placera dem med CSS.
Det finns många saker att tänka på när du använder bilder på webben, till exempel vilket format som är bäst, var du ska få rätt bilder och hur du använder dem.
Under hela lektionen kommer vi att tillämpa effekter på följande bild, en karta över Tuts + Town:
Tuts + stadskartaDe vanligaste bilderna på webben är JPEG, PNG och SVG. Låt oss prata om vad de är exakt.
En JPEG är en bild med en av följande filtillägg: ".jpeg" eller ".jpg" Dessa bilder kommer sannolikt att utgöra det mesta av vad du kommer över och använda på webben.
De är fantastiska för att skapa en mindre Foto bildfilstorlek för att lättare kunna använda på webben eller skicka via e-post, till exempel. Den här lägre filstorleken betyder dock att du också får en lägre kvalitetsbild.
En PNG är en bild med filnamnstillägget ".png". Medan en JPEG kommer att ge dig en liten förlust av bildkvalitet, kommer en PNG inte. Dessa filer kommer att se så skarpa och skarpa ut som originalet, men med att hålla den här kvaliteten på filstorleken kan vara mycket större än en .jpeg.
PNG är ett bra val för linjeteckningar, text och ikongrafik som redan har en mindre filstorlek. Det är också möjligt att ha en transparent bakgrund med en PNG, till skillnad från en JPEG.
Skalbar vektorgrafik, SVG, är bilder som kan ändras till både stora och små storlekar utan att få allt pixelated och suddig utseende, som en mer traditionell JPEG eller PNG skulle. Dessa bilder sparas med en ".svg" filtillägg och är perfekt för illustrationer och företagslogotyper.
Alla bilder som används i Tuts + Town är SVGs! Om vi skulle gå tillbaka till CSS för vår webbplats och ändra bredd av vilken bild som helst till 1000px det skulle göra det enormt och kristallklart.
SVG är till höger - mycket tydligare!Det finns många praktiska ställen att få gratis och fri att använda foton på webben.
Medan vissa bilder kanske inte kostar något, kan de kräva att vi följer vissa regler, såsom att nämna fotografens namn vart vi använder det. Andra bilder kan vara fria att använda endast för personliga projekt och får inte användas för ett företag.
Var alltid säker på att kontrollera licensiering (eller behörigheter) när du inte är säker, men låt oss nu prata om ett par alternativ som är både gratis och fri att använda.
Många webbdesigners använder bildredigeringsverktyg, som Photoshop, för att göra ändringar i sina foton innan de används på en webbplats. Dessa förändringar kan vara allt från att ändra färgerna, bli av med skuggor, till beskärning.
De flesta datoroperativsystem kommer att ha ett program på dem som kan hantera några väldigt grundläggande redigeringar. "Förhandsgranskning" är ett bra alternativ om du har en Mac-dator, som gör att du kan ändra storlek, beskära och spara bilder i andra format. För att komma åt förhandsgranskning kan vi köra en sökning på våra datorer (förstoringsglas längst upp till höger på din skärm!) Eller öppna en bild genom att dubbelklicka på den, eftersom den troligen är inställd som vårt standardbildvisningsprogram.
På en Windows-dator "Windows Photo Viewer" eller "Paint" kommer det troligtvis att vara standardbildsprogrammen vi kan använda igen, vilket möjliggör några grundläggande förändringar.
När vi pratar om beskärning vi menar att ta bort de yttre delarna av en bild.
Beskärning kan vara väldigt praktisk när det bara finns en sektion av en stor bild som vi vill använda; Det är även möjligt att beskära att ta på andra former, som cirklar!
Förutom att ändra storleken på en bild med CSS finns ett antal filtereffekter tillgängliga, till exempel att göra en bild svartvitt, genomskinlig eller justera dess ljusstyrka.
Vi kan konvertera bilder till svartvitt i vår CSS med hjälp av filtrera fast egendom.
Inom denna fastighet ingår vi gråskale och sedan ett procentvärde inom parentes (parentes).
Här är en snabb titt på några CSS som ger en helt svartvitt bild:
img filter: gråskala (100%);
Opacitet avser att göra något genomskinligt, eller genomskinligt. De opacitet egendom tar värden från .0 till 1, med .0 vara helt genomsynlig (osynlig) och 1 inte alls genomgripande. Alla värden däremellan ger en annan styrka av öppenhet.
Till exempel, om vi ställer in opacitet: .5; på en serie av cirklar i ett CSS-dokument skulle resultatet se ut så här:
Denna typ av effekt på en bild kan vara bra om vi letar efter att göra en bild lite mindre märkbar på en sida så att texten ovanpå det sticker ut mer.
Vi kan också göra en bild oskärpa med hjälp av CSS-filter. Inom filteregenskapen måste vi använda fläck följt av ett pixelbaserat värde inom parentes.
img filter: oskärpa (5px);
Ju högre pixelvärdet desto mer suddigt blir en bild.
Notera: För en mer komplett lista med CSS-filter kan du kolla in denna resurs. Klicka bara på CSS-fliken i någon demo för att se hur det är gjort.
I den här kursen utforskade vi några vanliga bildformat på webben, liksom några effekter som kan tillämpas på dessa bilder. Att få våra bilder redo för en webbplats kan vara en uppgift som varierar från super enkelt med minimala verktyg som behövs, till ganska komplexa ändringar som kräver kraftfulla verktyg.
Nästa kommer vi att diskutera design grunderna, där vi pratar om hur man använder det vi ordnar på webbsidan.
Vi ses runt om i staden!
Accentsconagua