Risorse grafiche (aka Swag)

Tutte le risorse grafiche “base” vanno qui. Un topic analogo è aperto su Talk, tuttavia molto materiale è ad uso interno ed anche questo è a suo modo un progetto. Dunque, una pagina Wiki.

  • Elementi grafici riutilizzabili
  • Loghi
  • Template, schemi di colore
  • Risorse pre-renderizzate

Nota: SVG è preferibile a PNG. PNG al doppio della risoluzione è preferibile alla risoluzione standard su schermi HiDPI. PNG a risoluzioni differenti sono preferibili dove sia possibile distinguere in base alla risoluzione dello schermo.

Principale#7fc0c2
Variante chiara#a0d7d8
Variante scura#72a4a6
main.css
body {
    background-color: #222222;
    color: #ffffff;
}
 
a {
    color: #0ce3ac;
}

logo_inkscape_margin.svg Il logo del Mittelab è realizzato con il font Ubuntu.

pin_inkscape_margin.svg Elemento distintivo del logo, utilizzato nella Wiki e in Discourse dove lo spazio è ridotto. Per altri scopi, e.g. icona standalone, o per rappresentare Mittelab rapidamente al di fuori di un contesto ovvio, è meglio usare lo shaded pin che è meno anonimo.

Esiste anche una versione in 3D NURBS e mesh:

Elemento distintivo del logo al di fuori di un contesto Mittelab, esempio: web app icon, chat icon. Questa icona svolge anche la funzione di apple-touch-icon (l'icona che viene applicata alla web app quando la pagina web viene aggiunta al main screen sui dispositivi iOS), e di logo nelle chat Telegram.

Nota: questo tipo di icona non è precomposed. Se in futuro vengono aggiunti effetti e vengono arrotondati gli angoli, bisogna specificare apple-touch-icon-precomposed; tuttavia così facendo si perde la diversificazione degli effetti delle icone sui vari dispositivi. 150×150 è la dimensione che permette di avere una risoluzione corretta fino ad iPad Pro.

Favicon

Estratta dal pin (no shade). Più efficace che inserire una PNG e sperare che il browser la ridimensioni usando il ricampionamento corretto. In generale, le icone così piccole andrebbero riviste a mano in maniera che siano efficaci a veicolare il messaggio (i dettagli dell'alta risoluzione si perdono).

Nota: i browser di solito usano 16×16, tranne sui display HiDPI in cui viene usata la 32×32.

Loghi con nome per Single Sign On


1)
purtroppo… ma dovrebbe essere fattibile rifarlo in Gimp
2)
via <link rel=“apple-touch-icon”>
  • progetti/swag.txt
  • Ultima modifica: 2018/07/08 11:38
  • da 5p4k