Share
Benvenuti alla settima lezione della serie Web Design for Kids, interamente dedicata alle immagini!
Abbiamo aggiunto diverse immagini al nostro sito web Tuts + Town, ma non abbiamo ancora parlato delle immagini in dettaglio. In questa lezione toccheremo i tipi di immagini più comunemente utilizzati sul web e alcune tecniche di modifica delle immagini.
Non dimenticare di porre domande nella sezione commenti in fondo a questa pagina!
Non siamo completamente estranei all'uso delle immagini sul web. Il nostro sito web Tuts + Town utilizzava quattro immagini. Siamo stati in grado di aggiungere quelle immagini nel nostro HTML e quindi ridimensionarle e posizionarle con i CSS.
Ci sono molte cose a cui pensare quando si usano le immagini sul web, quale il formato migliore, dove trovare le immagini giuste e come usarle.
Durante questa lezione applicheremo effetti alla seguente immagine, una mappa di Tuts + Town:
Tuts + mappa della cittàLe immagini più comunemente utilizzate sul Web sono JPEG, PNG e SVG. Parliamo di cosa sono esattamente.
Un JPEG è un'immagine con una delle seguenti estensioni di file: ".jpeg" o ".jpg" Queste immagini probabilmente costituiranno la maggior parte di ciò che vedrai e utilizzeranno sul Web.
Sono fantastici per creare un più piccolo foto Ad esempio, le dimensioni del file immagine possono essere utilizzate più facilmente sul Web o inviate tramite e-mail. Questa dimensione di file inferiore, tuttavia, significa che otterrai anche un'immagine di qualità inferiore.
Un PNG è un'immagine con estensione ".png". Mentre un JPEG ti darà una piccola perdita di qualità dell'immagine, un PNG non lo farà. Questi file appariranno nitidi e nitidi come l'originale, ma nel mantenere questa qualità la dimensione del file può essere molto più grande di un .jpeg.
I PNG sono una buona scelta per disegni a linee, testo e grafica di icone che hanno già una dimensione di file più piccola. È anche possibile avere uno sfondo trasparente con un PNG, diversamente da un JPEG.
Scalable Vector Graphics, SVG, sono immagini che possono essere ridimensionate in dimensioni grandi e piccole senza ottenere tutto pixelated e sfocato, come farebbe un JPEG o PNG più tradizionale. Queste immagini vengono salvate con estensione ".svg" e sono perfette per illustrazioni e loghi aziendali.
Tutte le immagini utilizzate in Tuts + Town sono SVG! Se dovessimo tornare nel CSS per il nostro sito e cambiare il larghezza di qualsiasi immagine a 1000px lo renderebbe enorme e cristallino.
SVG è sulla destra - molto più chiaro!Ci sono un sacco di posti a portata di mano per ottenere gratuitamente e libero da usare foto sul web.
Mentre alcune immagini potrebbero non costare nulla, possono richiederci di seguire alcune regole, come menzionare il nome del fotografo ovunque lo utilizziamo. Altre immagini possono essere liberamente utilizzate solo per progetti personali e non possono essere utilizzate per un'azienda.
Assicurati sempre di controllare il licenza (o permessi) quando non ne sei sicuro, ma per ora parliamo di un paio di opzioni che sono tutti e due libero e gratuito da usare.
Molti web designer utilizzano strumenti di modifica delle immagini, come Photoshop, per apportare modifiche alle loro foto prima di utilizzarli su un sito web. Questi cambiamenti possono essere qualsiasi cosa, dal cambiare i colori, eliminare le ombre, a ritaglio.
La maggior parte dei sistemi operativi per computer dispongono di un programma che può gestire alcune modifiche di base. "Anteprima" è un'ottima opzione se si dispone di un computer Mac, che consente di ridimensionare, ritagliare e salvare le immagini in altri formati. Per accedere ad Anteprima possiamo eseguire una ricerca sui nostri computer (lente d'ingrandimento in alto a destra dello schermo!) O aprire un'immagine facendo doppio clic su di essa, poiché è probabile che sia impostata come il nostro programma di visualizzazione di immagini predefinito.
Su un computer Windows "Windows Photo Viewer" o "Paint" saranno probabilmente i programmi di immagine predefiniti che possiamo usare, ancora una volta, consentendo alcune modifiche di base.
Quando stiamo parlando ritaglio intendiamo rimuovere le parti esterne di un'immagine.
Ritagliare può essere davvero utile quando c'è solo una sezione di una grande immagine che vogliamo usare; è anche possibile che il ritaglio assuma altre forme, come cerchi!
Oltre a modificare le dimensioni di un'immagine con i CSS, sono disponibili numerosi effetti di filtro, come la realizzazione di un'immagine in bianco e nero, la trasparenza o la regolazione del suo livello di luminosità.
Possiamo convertire le immagini in bianco e nero nel nostro CSS usando il filtro proprietà.
All'interno di questa proprietà includiamo in scala di grigi e poi un valore percentuale tra parentesi (parentesi).
Ecco una rapida occhiata ad alcuni CSS che produrranno un'immagine completamente in bianco e nero:
img filter: grayscale (100%);
Opacità si riferisce alla realizzazione di qualcosa di trasparente o trasparente. Il opacità proprietà prende valori da .0 a 1, con .0 essere completamente trasparente (invisibile) e 1 non essere affatto trasparente Tutti i valori nel mezzo danno una diversa forza di trasparenza.
Ad esempio, se impostiamo opacità: 0,5; su una serie di cerchi in un documento CSS, il risultato sarebbe simile a questo:
Questo tipo di effetto su un'immagine può essere ottimo se stiamo cercando di rendere un'immagine meno visibile su una pagina, in modo che il testo sopra di esso risulti più.
Possiamo anche rendere un'immagine sfocata usando i filtri CSS. All'interno della proprietà del filtro che dobbiamo usare sfocatura seguito da un valore basato su pixel tra parentesi.
img filter: blur (5px);
Più alto è il valore del pixel, più sfocata sarà un'immagine.
Nota: Per un elenco più completo di filtri CSS è possibile controllare questa risorsa. Basta fare clic sulla scheda CSS di qualsiasi demo per vedere come è fatto.
In questo corso abbiamo esplorato alcuni formati di immagini comunemente usati sul web, oltre ad alcuni effetti che possono essere applicati a queste immagini. Avere le nostre immagini pronte per un sito può essere un compito che varia da estremamente semplice con gli strumenti minimi richiesti, a modifiche piuttosto complesse che richiedono strumenti potenti.
Ora discuteremo nozioni di base sul design, dove parliamo di come usare ciò che organizziamo sulla pagina web.
Ci vediamo in giro per la città!
Accentsconagua