Creare il proprio Font – mini Tutorial
Posted by graficaegrafica | Filed under font, grafica, imparare, recensioni siti, template
Durante la creazione di un template è indicato utilizzare dei font che sono visibili sulla maggior parte dei PC.
I font infatti sono caricati su ogni macchina, non sono una cosa da dare per scontata.
Su windows per esempio si trovano nella cartella C:/Windows/fonts. I più diffusi e conosciuti sono Arial, Times New Roman ma anche Verdana ed altri ancora. Per essere visualizzati devono essere presenti nella cartella apposita.
Solitamente si indica una famiglia di font simili tra di loro, non uno singolo, nel CSS in questo modo:
body{
font-family:Arial, Helvetica, sans-serif;
}
Questo scritto sopra significa che il body avrà come font Arial. Se Arial non è presente sul PC che visualizza il sito verrà visualizzato Helvetica, se anche questo non è presente sans-serif. L'elenco si può modificare allungandolo o cambiando gli stili a piacimento ma solitamente si utilizzano queste "famiglie" di font:
font-family:Arial, Helvetica, sans-serif;
font-family:"Times New Roman", Times, serif;
font-family:"Courier New", Courier, monospace;
font-family:Georgia, "Times New Roman", Times, serif;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-family:Geneva, Arial, Helvetica, sans-serif;
Tutte le parti del sito che possono subire variazioni di qualunque tipo dovrebbero avere dei font comuni in modo che la maggior parte di utenza li possa visualizzare correttamente.
Per alcuni titoli o per l'header che solitamente rimangono sempre gli stessi si può pensare tuttavia di utilizzare delle immagini invece che del testo (Questo comporta dei problemi di indicizzazione ma questo è un altro problema). Utilizzando un'immagine al suo interno si possono inserire scritte con qualsiasi font si desideri perché l'utente finale non deve averlo anche lui sul suo PC.
Se i font preimpostati sul vostro sistema operativo non vi soddisfano fatevi un giro per la rete e potrete trovare innumerevoli siti che offrono font gratuiti.
Eccone alcuni: dafont.com boorp.com 1001freefonts.com fontstruct.fontshop.com webpagepublicity.com. Ovviamente inserendo su google free font ne potrete trovare moltissimi altri.
Se anche qui non riuscite a trovare ciò che cercate (anche se è difficile vista l'enorme gamma di font disponibili) vi potrebbe saltare in mente di crearvene uno.
Ed è possibile.
Vi sono dei siti on-line che permettono questo semplicemente facendo la "solita" registrazione gratuita on line.
Uno di questi è Fontstruct. Loggandosi e seguendo i vari semplici passaggi potrete creare lettera per lettera il vostro alfabeto personalizzato. E' molto semplice ed intuitivo. Fateci un giro anche solo per sperimentarlo. Non occorre alcun programma particolare.
Altro sito che offre un servizio differente è Fontcapture. Bisogna scaricare il file apposito e compilarlo (a mano e poi scannerizzando il foglio oppure direttamente con un programma di grafica come Photoshop o Gimp). Una volta che si ha l'immagine di tutte le lettere si carica il file e dopo un po' di pazienza il sito ci restituisce il file del font.
Per chi vuole creare il font in modo professionale invece esistono programmi appositi come per esempio FontCreator della High Logic (disponibile un trial di 30 giorni sul sito ufficiale).
E' meno complesso di quello che sembra il suo utilizzo. Appena installato il programma e aperto un nuovo file ci troviamo di fronte a una schermata che contiene una specie di griglia in cui vi sono le varie lettere. (vedi immagine).
Ora basta fare doppio click su una che si vuole modificare/realizzare e si apre una finestra nella quale bisogna realizzare il font selezionato. (vedi immagine). Per creare e modificare il font si deve utilizzare l' apposita barra di disegno. (vedi immagine).
Bisogna fare questi passaggi più volte fino ad aver creato/modificato tutti i caratteri. Salvando il nostro lavoro viene creato un file ttf che aperto con il blocco note appare come un elenco di scritte di varie dimensioni (vedi immagine del file .ttf creato da me).
Questo file ora va spostato nella cartella fonts apposita (in Windows è in C:/Windows/fonts)
Utilizzando un qualsiasi elaboratore testi che consente il cambio di font (quindi non blocco note) potremo ora utilizzare la nostra creazione selezionando il suo nome.
Ecco qui sotto il risultato del mio font scritto utilizzando photoshop:
Tags: calligrafia, creare font, font, fonts, grafica, guida, segnalazione, tutorial, web
ABC Web e Grafica
Posted by graficaegrafica | Filed under grafica, template
Questo blog è nato per uno scopo puramente didattico. La mia intenzione comunque è sempre stata quella di aprire un sito dove parlare di questi argomenti e sinceramente un blog mi sta abbastanza stretto.
Per ora lo mantengo e lo aggiorno ogni volta che mi viene in mente un qualche cosa da inserire ma nel frattempo sto "sperimentando" cose nuove di grafica e di un pizzico di programmazione. Probabilmente (non so quando) prima o poi ingloberò questo blog in un sito vero e proprio.
Per ora ecco una prova di grafica web (ancora in evoluzione) realizzata da me nella quale ho già trovato un sacco di errori e problemi e che quindi di sicuro non sarà quella definitiva.
Ovviamente sono ben accetti consigli e critiche.
Tags: abcwebegrafica, grafica, novità, template, web
Web Usability 2.0 – parte 2 – colori web safe
Posted by graficaegrafica | Filed under colore, grafica, tutorial, web usability
Non tutti hanno la fortuna di avere schermi di grandi dimensioni e con una gran varietà cromatica. Esistono infatti ancora degli utenti che utilizzano schermi a 256 colori, stanno diminuendo ma bisogna ancora tenerne conto.
Quando si realizza una pagina web quando si scelgono i colori sarebbe meglio sceglierli fra quelli "web safe".
Cosa significa?
I colori websafe sono i 216 colori che possono essere visti anche a chi utilizza schermi a 256 (schermi a 8 bit, 40 colori sono utilizzati dal sistema e quindi esclusi). Se si utilizzano questi chiunque li potrà visualizzare come li abbiamo progettati.
Se utilizziamo un colore al di fuori di questo range di 216 colori lo schermo che non riesce a vederli si "inventerà" un colore che gli sembra abbastanza vicino, creando un effetto retinatura molto fastidioso. Senza contare che anche la grafica generale ne può essere danneggiata.
L'usabilità tratta anche questo argomento perché utilizzando solo i 216 colori web safe chiunque li può visualizzare, se utilizzo quelli che non sono websafe avrò un tot di utenti che non vedranno esattamente ciò che io ho progettato.
Alcuni di questi colori oltre ad essere descritti con RGB o in esadecimale hanno anche dei nomi che vengono capiti da tutti i browser. A questo link li potete trovare ed in questo cliccando sul nome potete vedere direttamente come stanno di sfondo.
Ecco alcuni link per visualizzare i colori web safe con relativi codici RGB e esadecimali ed alcune guide per approfondimenti:
- www.manisi.com/http/websafe.html
- piccola spiegazione e tabella colori web safe
- guida in pdf
- guida al colore su dreamweaver dal sito adobe
Tags: browser, colore, colori, dreamweaver, grafica, html, immagini, template, usabilità, usability, web, web safe, web usability
Web Usability 2.0 – parte 1 – intro e dimensioni caratteri
Posted by graficaegrafica | Filed under colore, font, grafica, pattern, sfondi, tutorial, web usability
INTRO
Perché è importante parlare di web usability in un blog di grafica e di che cosa si tratta?
E' difficile spiegarlo in poche righe ma in pratica questa "disciplina" (se così si può chiamare) tratta di come rendere il web a portata di utente. Visto che il WWW è formato in larga parte da siti internet quindi si parla di renderli il più possibile intuitivi e utilizzabili da chiunque.
E' una "scienza" che comprende tantissime cose e deve tener conto di moltissimi fattori.
Un utente anziano ha delle esigenze molto differenti da un utente giovane, un ipovedente e un normovedente pure e così via.
Un altra precisazione che va fatta è riguardo al 2.0. Questo indica sostanzialmente che non siamo più nell'era dove l'utente guarda e basta (Web 1.0), ora siamo nel periodo dove l'utente interagisce in svariati modi e spessp crea esso stesso contenuti web (Web 2.0).
Ma cosa centra con la grafica?
Beh, diciamo che la grafica di un sito si occupa dell'aspetto dell'interfaccia e per tanto si occupa proprio di quella parte che vede l'utente e quindi deve essere alla sua "portata". Le scelte dei colori, delle dimensioni e delle posizioni degli oggetti all'interno di una pagina sono essenziali sia per la grafica che per l'usabilità pertanto è un argomento fra i più importanti da trattare in questo blog.
In questi piccoli articoletti cercherà di trattare poco alla volta argomenti molto utili per comprendere di che cosa si parla quando si nomina "Web Usability" e di come affrontare delle scelte grafiche che seguano il più possibile il criterio dell'usabilità.
DIMENSIONI CARATTERI e SCELTA SFONDO
Partiamo con il parlare della dimensione dei caratteri e la scelta dei colori di sfondo e del testo.
Affinchè un sito sia leggibile in modo semplice occorre che i testi abbiano una dimensione adeguata e che gli sfondi li facciano risaltare. La tabella qui sotto mostra come i testi compresi fra i 14 pixel e i 16 pixel risultano abbastanza leggibili pur non essendo di dimensioni troppo grandi. Queste dimensioni sono quindi adatte per i paragrafi, i testi discorsivi.
I caratteri di maggiori dimensioni possono andare bene per titoli e sottotitoli.
Per quanto riguarda gli sfondi si nota molto bene come un contrasto fra nero e bianco sia molto meglio di quello fra blu e nero. Ovviamente esistono infiniti altri tipi di combinazioni, sta voi fare altre prove e trovarne altri leggibili.
| pixel | nero su bianco | bianco su nero | blu su nero |
|---|---|---|---|
| 10px |
testo prova |
testo prova |
testo prova |
| 12px |
testo prova |
testo prova |
testo prova |
| 14px |
testo prova |
testo prova |
testo prova |
| 16px |
testo prova |
testo prova |
testo prova |
| 18px |
testo prova |
testo prova |
testo prova |
| 20px |
testo prova |
testo prova |
testo prova |
| 22px |
testo prova |
testo prova |
testo prova |
E' importante non solo scegliere colori che contrastano fra di loro, ma bisogna anche verificare che se si usa un immagine di sfondo questa non disturbi la lettura.
Come potete vedere dagli esempi qui sotto, più uno sfondo è omogeneo, senza forti contrasti e meno è fastidioso.
| sfondo | carattere | combinazione |
|---|---|---|
|
Colore testo nero |
Colore testo nero |
|
|
Colore testo bianco |
Colore testo bianco |
|
|
Colore testo rosso |
Colore testo rosso |
|
|
Colore testo verde |
Colore testo verde |
|
|
Colore testo blu |
Colore testo blu |
|
|
Colore testo giallo |
Colore testo giallo |
|
|
Colore testo grigio |
Colore testo grigio |
|
|
Colore testo nero |
Colore testo nero |
|
|
Colore testo bianco |
Colore testo bianco |
|
|
Colore testo rosso |
Colore testo rosso |
|
|
Colore testo verde |
Colore testo verde |
|
|
Colore testo blu |
Colore testo blu |
|
|
Colore testo giallo |
Colore testo giallo |
|
|
Colore testo grigio |
Colore testo grigio |
|
|
Colore testo nero |
Colore testo nero |
|
|
Colore testo bianco |
Colore testo bianco |
|
|
Colore testo rosso |
Colore testo rosso |
|
|
Colore testo verde |
Colore testo verde |
|
|
Colore testo blu |
Colore testo blu |
|
|
Colore testo giallo |
Colore testo giallo |
|
|
Colore testo grigio |
Colore testo grigio |
|
|
Colore testo nero |
Colore testo nero |
|
|
Colore testo bianco |
Colore testo bianco |
|
|
Colore testo rosso |
Colore testo rosso |
|
|
Colore testo verde |
Colore testo verde |
|
|
Colore testo blu |
Colore testo blu |
|
|
Colore testo giallo |
Colore testo giallo |
|
|
Colore testo grigio |
Colore testo grigio |
|
|
Colore testo nero |
Colore testo nero |
|
|
Colore testo bianco |
Colore testo bianco |
|
|
Colore testo rosso |
Colore testo rosso |
|
|
Colore testo verde |
Colore testo verde |
|
|
Colore testo blu |
Colore testo blu |
|
|
Colore testo giallo |
Colore testo giallo |
|
|
Colore testo grigio |
Colore testo grigio |
Queste sono le basi riguardo a sfondo e testo per rendere un sito leggibile ad un utente normovedente, tratterò in un altro momento la parte riguardante gli ipovedenti.
Vi lascio con alcuni link utili:
COLORI WEB e USABILITA':
- colori per sfondi Danny Design: cliccando sul codice del colore cambia in automatico lo sfondo del sito. Utile per farsi un idea del colore su superfici estese.
- elenco colori Web Safe: colori visibili da qualunque schermo (256 colori) tratterò l'argomento più diffusamente in altro post.
- differenza colori Mac – Microsoft : piccola spiegazione sulle differenze fra i due e utile tavolozza a fine pagina che restituisce il colore scelto in esadecimale.
- piccola guida su usabilità e colori di HTML.it: un po' di teoria e psicologia del colore e studi di leggibilità sul web.
- colori in HTML e cubo dei colori: spiegazione sulle varie tipologie di indicazione del colore in HTML e teoria del cubo dei colori.
- Scelta dei colori nel web: slide molto schematiche con un pizzico di teoria del colore, spiegazione delle scelte di accostamenti e combinazioni, significato dei vari colori e sensazioni che danno.
- usabilità su sito-perfetto: sito che tratta praticamente solo di usabilità e di come realizzare un sito migliore e con il minor numero di problemi possibili.
Tags: browser, carattere, caratteri, colore, colori, colori web, cominciare, contrasto, css, foglio di stile, font, fonts, grafica, html, pattern, patterns, sfondi, sfondo, template, usabilità, usability, web, web 2.0, web safe, web usability
Pattern – sito Patterncooler
Posted by graficaegrafica | Filed under grafica, pattern, recensioni siti, sfondi
In campo della grafica quando si parla di PATTERN ci si riferisce ad un'immagine (solitamente di dimensioni modeste) che si moltiplica per ricoprire una superficie (per esempio uno sfondo).
Per parlare in parole più capibili si utilizza una piccola immagine come se fosse una piastrellina e si ricopre la superficie ripetendola più e più volte.
Spesso esistono dei pattern realizzati in malomodo e si riesce a distinguere una "piastrella" dall'altra ma quelli migliori riescono a non creare anestetiche griglie e sono impercettibili all'occhio.
Una delle cose più fastidiose per l'occhio umano infatti è una costante ripetizione dello stesso "oggetto" molteplici volte e (purtroppo per chi deve realizzare queste cose) è anche una delle cose più difficili da nascondere.
I pattern si possono creare da soli, trovare già realizzati (esempi: Pattern8 VintageWallpaper The inspiration Gallery Pattern4u) o avere a che fare con dei siti che ti mettono a disposizione pattern preimpostati ma modificabili.
Di quest'ultima categoria fa parte Patterncooler che è un sito che ha un'ampia galleria di pattern tutti modificabili in modo facile e veloce. Dopo aver trovato il modello che si desidera si possono variare le varie tonalità, le dimensioni e l'orientamento.
Si possono usare le risorse di questo sito in modo gratuito anche per scopi commerciali (in home suggeriscono una donazione in questo secondo caso).
Tags: grafica, html, immagini, pattern, patterns, segnalazione, sfondi, sfondo, sito, spunto, web
