Share
Bine ați venit la cea de-a șaptea lecție a seriei Web Design pentru copii, totul despre imagini!
Am adăugat mai multe imagini pe site-ul nostru Tuts + Town, dar nu am vorbit încă despre detalii în detaliu. În această lecție vom viziona tipurile de imagini cele mai frecvent utilizate pe web și câteva tehnici de editare a imaginilor.
Nu uitați să puneți întrebări în secțiunea de comentarii din partea de jos a acestei pagini!
Nu suntem străini complet pentru a folosi imagini pe web. Site-ul nostru Tuts + Town a folosit patru imagini. Am reușit să adăugăm acele imagini în HTML și apoi să le redimensionăm și să le poziționăm cu CSS.
Există multe lucruri de gândit atunci când se utilizează imagini pe web, cum ar fi cel mai bun format, unde să obțineți imaginile corecte și cum să le utilizați.
De-a lungul acestei lecții vom aplica efecte la următoarea imagine, o hartă a orașului Tuts +:
Tuts + harta orașuluiCele mai frecvent utilizate imagini de pe web sunt JPEG-urile, PNG-urile și SVG-urile. Să vorbim despre exact ce sunt.
Un JPEG este o imagine cu una dintre următoarele extensii de fișiere: ".jpeg" sau ".jpg" Aceste imagini vor compune probabil cele mai multe din ceea ce veți întâlni și veți folosi pe web.
Ele sunt fantastice pentru a crea un mic fotografie dimensiunea fișierului imagine pentru o utilizare mai ușoară pe web sau trimitere prin e-mail, de exemplu. Această dimensiune mai mică a fișierului înseamnă însă că veți obține și o imagine de calitate inferioară.
Un PNG este o imagine cu extensia de fișier ".png". În timp ce un JPEG vă va da o mică pierdere a calității imaginii, un PNG nu va. Aceste fișiere vor arăta la fel de clare și clare ca și originalul, dar păstrând această calitate dimensiunea fișierului poate sa fi mult mai mare decât un .jpeg.
PNG-urile reprezintă o alegere bună pentru desenele, textele și grafica cu pictograme care au deja o dimensiune mai mică a fișierului. De asemenea, este posibil să aveți un fundal transparent cu un PNG, spre deosebire de un JPEG.
Scalable Vector Graphics, SVG, sunt imagini care pot fi redimensionate atât la dimensiuni mari, cât și la cele mici, fără a obține totul pixelat și aspect neclare, ca un JPEG sau PNG mai tradițional. Aceste imagini sunt salvate cu extensia ".svg" și sunt perfecte pentru ilustrații și logo-uri ale companiei.
Toate imaginile folosite în Tuts + Town sunt SVG-uri! Dacă trebuia să ne întoarcem în CSS pentru site-ul nostru și să schimbăm lăţime de orice imagine la 1000px ar fi uriaș și limpede.
SVG este pe dreapta - mult mai clară!Există o mulțime de locuri la îndemână pentru a obține gratuit și liber de utilizat fotografii de pe web.
În timp ce unele imagini nu costă nimic, ele pot cere să respectăm anumite reguli, cum ar fi menționarea numelui fotografului oriunde îl folosim. Alte imagini pot fi gratuite numai pentru proiecte personale și nu pot fi utilizate pentru o afacere.
Verificați întotdeauna verificarea licențiere (sau permisiuni) când nu sunteți sigur, dar acum să vorbim despre câteva opțiuni care sunt ambii gratuit și liber de utilizat.
Mulți designeri web folosesc instrumente de editare a imaginilor, cum ar fi Photoshop, pentru a le modifica fotografiile înainte de a le folosi pe un site web. Aceste schimbări pot fi orice, de la schimbarea culorilor, a scăpa de umbre, la trunchiere.
Cele mai multe sisteme de operare pe calculator vor avea un program pe care le pot gestiona unele editare de bază. "Previzualizarea" este o opțiune excelentă dacă aveți un computer Mac, care vă va permite să redimensionați, să decupați și să salvați imagini în alte formate. Pentru a accesa Previzualizarea, putem rula o căutare pe computerele noastre (lupa din partea dreaptă sus a ecranului!) Sau deschide o imagine făcând dublu clic pe ea, deoarece probabil este setată ca programul nostru implicit de afișare a imaginilor.
Pe un computer Windows, "Windows Photo Viewer" sau "Paint" vor fi probabil programele de imagini implicite pe care le putem folosi, din nou, permițând unele modificări de bază.
Când vorbim trunchiere înțelegem eliminarea părților exterioare ale unei imagini.
Decuparea poate fi foarte utilă atunci când există doar o secțiune dintr-o imagine mare pe care dorim să o folosim; este chiar posibil ca cultura să ia alte forme, cum ar fi cercurile!
Pe lângă modificarea dimensiunii unei imagini cu CSS, există un număr de efecte de filtrare disponibile, cum ar fi realizarea unei imagini alb-negru, transparente sau ajustarea nivelului luminozității.
Putem converti imaginile în alb și negru în CSS folosind filtru proprietate.
În această proprietate vom include alb-negru și apoi o valoare procentuală în paranteze (paranteze).
Iată o privire rapidă la unele CSS care vor produce o imagine complet alb-negru:
img filtru: tonuri de gri (100%);
Opacitatea se referă la a face ceva transparent, sau a vedea-prin. opacitate proprietatea ia valori de la .0 la 1, cu .0 fiind complet vizibil (invizibil) și 1 a nu fi deloc vizibili. Toate valorile între ele dau o putere diferită de transparență.
De exemplu, dacă am setat opacitate: .5; pe o serie de cercuri într-un document CSS, rezultatul ar arăta astfel:
Acest tip de efect asupra unei imagini poate fi grozav dacă căutăm să facem o imagine mai puțin vizibilă pe o pagină, astfel încât textul deasupra acesteia să se evidențieze mai mult.
De asemenea, putem face o imagine neclară utilizând filtrele CSS. În proprietatea filtrului trebuie să folosim estompa urmată de o valoare bazată pe pixeli în paranteză.
img filtru: estompare (5px);
Cu cât este mai mare valoarea pixelului, cu atât va fi o imagine mai neclară.
Notă: Pentru o listă mai completă a filtrelor CSS, puteți verifica această resursă. Doar faceți clic pe fila CSS a oricărei demonstrații pentru a vedea cum se face.
În acest curs am explorat câteva formate de imagine utilizate pe web, precum și câteva efecte care pot fi aplicate acestor imagini. Obținerea imaginilor noastre gata pentru un site poate fi o sarcină care variază de la super-simplu cu instrumentele minime necesare, până la editări destul de complexe care necesită instrumente puternice.
În continuare vom discuta design de bază, unde vorbim despre cum să folosim ceea ce aranjăm pe pagina web.
Ne vedem în jurul orașului!
Accentsconagua