Share
Velkommen til den syvende leksjonen i vår Web Design for Kids-serie, alt om bilder!
Vi har lagt til flere bilder på nettstedet vårt Tuts + Town, men vi har ikke snakket om bilder i detalj ennå. I denne leksjonen vil vi berøre de mer brukte bildene på nettet og noen bilderedigeringsteknikker.
Ikke glem å stille spørsmål i kommentarfeltet nederst på denne siden!
Vi er ikke komplette fremmede for å bruke bilder på nettet. Vår hjemmeside Tuts + Town brukte fire bilder. Vi var i stand til å legge til disse bildene i vår HTML og deretter endre størrelse og plassere dem med CSS.
Det er mange ting å tenke på når du bruker bilder på nettet, for eksempel hvilket format som er best, hvor du skal få de riktige bildene, og hvordan du bruker dem.
Gjennom denne leksjonen vil vi bruke effekter på følgende bilde, et kart over Tuts + Town:
Tuts + bykartDe mest brukte bildene på nettet er JPEG, PNG og SVG. La oss snakke om hva de egentlig er.
En JPEG er et bilde med en av følgende filutvidelser: ".jpeg" eller ".jpg" Disse bildene vil sannsynligvis utgjøre det meste av hva du vil komme over og bruke på nettet.
De er fantastiske for å skape en mindre bilde bildefilstørrelse for å enklere bruke på nettet eller sende via e-post, for eksempel. Denne lavere filstørrelsen betyr imidlertid at du også får et lavere kvalitetsbilde.
En PNG er et bilde med filtypen ".png". Mens en JPEG vil gi deg et lite tap av bildekvalitet, vil en PNG ikke. Disse filene vil se så skarpe og skarpe ut som originalen, men i samsvar med denne kvaliteten er filstørrelsen kan være mye større enn en .jpeg.
PNG er et godt valg for linjetegninger, tekst og ikongrafik som allerede har en mindre filstørrelse. Det er også mulig å ha en gjennomsiktig bakgrunn med en PNG, i motsetning til en JPEG.
Skalerbar vektorgrafik, SVG, er bilder som kan tilpasses til både store og små størrelser uten å få alt pixelated og uklart utseende, som en mer tradisjonell JPEG eller PNG ville. Disse bildene lagres med en filtype ".svg" og er perfekt for illustrasjoner og firmalogoer.
Alle bildene som brukes i Tuts + Town er SVGs! Hvis vi skulle gå tilbake til CSS for vårt nettsted og endre bredde av hvilket som helst bilde til 1000px det ville gjøre det stort og krystallklart.
SVG er til høyre - mye klarere!Det er mange praktiske steder å få gratis og gratis å bruke bilder på nettet.
Selv om enkelte bilder ikke koster noe, kan de kreve at vi følger visse regler, for eksempel å nevne fotografens navn hvor vi bruker det. Andre bilder kan bare brukes til personlige prosjekter og kan ikke brukes til en bedrift.
Pass alltid på å sjekke lisensiering (eller tillatelser) når du ikke er sikker, men for nå snakker vi om et par alternativer som er både gratis og gratis å bruke.
Mange webdesignere bruker bilderedigeringsverktøy, som for eksempel Photoshop, for å gjøre endringer i bildene sine før de brukes på et nettsted. Disse endringene kan være alt fra å endre fargene, bli kvitt skygger, til beskjæring.
De fleste datamaskiner operativsystemer vil ha et program på dem som kan håndtere noen svært grunnleggende redigeringer. "Forhåndsvisning" er et godt alternativ hvis du har en Mac-datamaskin, som lar deg endre størrelse, beskjære og lagre bilder i andre formater. For å få tilgang til Forhåndsvisning kan vi kjøre et søk på våre datamaskiner (forstørrelsesglass øverst til høyre på skjermen!) Eller åpne et bilde ved å dobbeltklikke på det, som det sannsynligvis er satt som vårt standardbildedisplayprogram.
På en Windows-datamaskin "Windows Photo Viewer" eller "Paint" vil det trolig være standardbildeprogrammer vi kan bruke igjen, noe som tillater noen grunnleggende endringer.
Når vi snakker om beskjæring vi mener å fjerne de ytre delene av et bilde.
Beskjæring kan være veldig nyttig når det bare er en del av et stort bilde som vi ønsker å bruke; Det er også mulig for beskjæring å ta på andre former, som sirkler!
I tillegg til å endre størrelsen på et bilde med CSS, finnes det en rekke filtereffekter, for eksempel å lage et bilde svart og hvitt, transparent eller justere lysstyrkenivået.
Vi kan konvertere bilder til svart og hvitt i vårt CSS ved hjelp av filter eiendom.
Innenfor denne eiendommen inkluderer vi gråtoner og deretter en prosentverdi innenfor parentes (parentes).
Her er en rask titt på noen CSS som vil produsere et helt svart og hvitt bilde:
img filter: gråtoner (100%);
Opacity refererer til å gjøre noe gjennomsiktig, eller se gjennom. De opasitet Egenskapen tar verdier fra .0 til 1, med .0 å være helt gjennomsiktig (usynlig) og 1 ikke være gjennomsiktig i det hele tatt. Alle verdier i mellom gir en annen styrke av gjennomsiktighet.
For eksempel, hvis vi setter inn opacity: .5; på en serie sirkler i et CSS-dokument, vil resultatet se slik ut:
Denne typen effekt på et bilde kan være flott hvis vi ønsker å gjøre et bilde litt mindre merkbart på en side, slik at teksten på toppen av det skiller seg ut mer.
Vi kan også gjøre et bilde uskarpt ved hjelp av CSS-filtre. Innenfor filteregenskapen må vi bruke uklarhet etterfulgt av en pikselbasert verdi innenfor parentes.
img filter: uskarphet (5px);
Jo høyere pikselverdien, jo mer sløret et bilde blir.
Merk: For en mer komplett liste over CSS-filtre kan du sjekke ut denne ressursen. Bare klikk på CSS-fanen i hvilken som helst demo for å se hvordan det er gjort.
I dette kurset har vi utforsket noen vanlige bildeformater på nettet, samt noen få effekter som kan brukes på disse bildene. Å få bildene våre klare til et nettsted kan være en oppgave som varierer fra super grei med minimal verktøy som kreves, til ganske komplekse redigeringer som krever kraftige verktøy.
Neste skal vi diskutere design grunnleggende, hvor vi snakker om hvordan du bruker det vi arrangerer på nettsiden.
Se deg rundt i byen!
Accentsconagua