Guide

• Guida alla modifica degli stili


• Guida CSS by Risorse Net


• Guida Base ai fogli di stile


• Elenco Guide Css

Editor grafici

• The GIMP: Ottimo programma di fotoritocco che ha il vantaggio di essere open source e quindi gratuito


• Photoshop: Il miglior editor grafico esistente, in costante aggiornamento e con molti tutorials sul web


• Corel Paint Shop Pro: Avanzato editor di foto ed editor grafico, molto intuitivo e accessibile


• Simple CSS: Applicazione WYSIWYG che vi permette di elaborare il CSS

Accostamento dei colori

• Color Scheme Designer: In questa utility è possibile, selezionando un colore, avere diversi accostamenti equilibrati ed armonici; infine è possibile scegliere tra 5 tipi di accostamenti
  SPOILER (clicca per visualizzare)

  
  Guida Color Scheme Designer 3

  
  

  Opzioni di base

  
  Come normalmente molti utenti alle prime armi hanno difficoltà nella Scelta dei colori. Ci sono molti tools per Palettes che aiutano e sono molto utili, ma personalmente ne consiglio solo uno, www.colorschemedesigner.com, Color Scheme Designer 3. Questo sito vi fonrirà i colori migliori da abbinare. Color Scheme Designer 3 vi fornirà una scelta principale tra:
  • Mono - CSD3 vi fornirà un solo colore, con diverse tonalità.
  • Complement - CDS3 vi fornirà due colori accesibili e complementari.
  • Triad - In questo modo potrete abbinare tre diversi colori perfettamente accessibili.
  • Tetrad - CSD3 vi consentirà di abbinare quattro colori, tra cui due sono totalmente opposti.
  • Analogic - CSD3 vi consentirà di abbinare tre colori derivati dal primo.
  • Accented Analogic - Potete abbinare quattro colori; due di questi accentueranno il primo.
  
  Se volete un esempio di come verrà un vostro Layout o magari una vostra skin, potete clickare in basso a destra su Light Example oppure su Dark Example.
  
  Come possibile notare, Color Scheme Designer 3 vi fornirà anche altre tonalità dei colori che avete selezionato. Se volete ricavarne il colore esadecimale vi basterà clickare su Export e successivamente in HTML+CSS.
  
  Ovviamente se volete scegliere voi il colore di base, basterà clickare dove è scritto RGB: [...], in basso a destra dal "cerchio dei colori".
  
  

  ---

  
  

  Elaborazione manuale o automatica

  
  Questa è la parte più semplice, e se non siete molto esperti riguardo esadecimali, vi consiglio di fermarvi qui.
  
  Bene, continuiamo. Se volete elaborare da voi i colori, in basso a sinistra potete trovare, oltre a Hues (che sarebbe la pagina principale) anche:
  
  • Adjust Scheme - In pratica potete, tramite questi due schemi, selezionare tonalità/saturazione e luminosità/contrasto della vostra palette. Ci sono a loro volta opzioni prestabilite che potete selezionare dal menù a tendina (non ve le sto ad elencare, esplorate un po' voi! )
  • Adjusts Variants - Sempre da Adjust Scheme potrete selezionare quest'opzione che vi permetterà di vedere un esempio del testo per la vostra palette.
  • Colori List - In questo modo più semplice invece potrete avere la lista dei vostri colori esadecimali in HTML.
  
  

  ---

  
  

  Opzioni avanzate

  
  Color Scheme Designer 3 vi fornisce inoltre alcune opzioni che potrete vedere nel Menù Dropdown in alto a destra.
  
  Se non avete idee per palettes potete selezionare Random e poi Random Palettes. Inoltre da Colorblind CSD3 vi fonrirà alcune varianti della vostra personale palette.
  
  
  
  Si ringrazia Alessandro` per la guida.


• ColourLovers: Il più famoso e funzionale sito che fornisce palette di colori pronte... potrete o scegliere tra centinaia di palette o generare le palette dalle vostre immagini


• Paletteman: Il sito offre poche palette ma è possibile inserire i colori esadecimali nell'apposito strumento e valutare se i colori scelti sono in sintonia


• ImagePalette e Degrave: Questi siti invece vi permettono di generare delle palette dalle immagini


• Slayer Office: Vi permette di generare a random delle palette

Estensioni di Firefox

• Firebug: Firebug è un'estensione di Mozilla Firefox che permette il debug, la modifica e il monitoraggio di tutti gli aspetti di una pagina web, come i fogli di stile, il codice HTML, la struttura DOM e il codice JavaScript. Firebug fornisce anche altri strumenti per lo sviluppo web come una console JavaScript e una funzione chiamata "Net" che permette di monitorare il tempo di caricamento in millisecondi di immagini e script. Oltre che per il debug, Firebug è uno strumento indispensabile per testare la sicurezza e la performance dei siti web (qui trovate le versioni per gli altri browsers)


• Web Developer: Utilissima estensione che ci permette di disattivare plugin del browser, gestire i cookie, gestire il css, cambiare risoluzione del browser per testare le nostre skin con risoluzioni diverse e molo altro (qui trovate le versioni per gli altri browser)


• ColorZilla: Utilissima utility per Firefox che permette di prende gli esadecimali dei colori in una qualsiasi pagina web direttamente dal vostro browser (qui trovate le versioni per gli altri browser)

Estensioni di Opera

• Opera Web Developer: Consente di visualizzare le classi direttamente a video, molto utile per identificare le parti che costituiscono una skin


• Web Developer Toolbar: Contiene una varietà di strumenti e molti link per la validazione


• W3-Dev Menù: Prima dell'installazione, permette la scelta di determinate opzioni da visualizzare nel menù. Le voci che comprende permettono di esaminare il codice HTML e CSS tramite il validatore del W3C, di effettuare test per l'accessibilità e per i links, informazioni e specifiche per HTML, XHTML, CSS, XML e affini, compreso un menù con varie risorse utili

Stili di Livello

• Per Photoshop: 1, 2, 3, 4, 5, 6, 7, 8 e molti altri


• Per GIMP: 1, 2 e 3

Icone

• IconArchive: Il più grande archivio di icone


• IconFinder: Utile motore di ricerca per le icone


• IconFarm: Vasto archivio di icone


• IconFamFamFam: Piccolo archivio di icone da usare per nei bottoni dei post

Sfondi

• The inspiration Gallery: Offre più di 2000 pattern originali ma difficili da adattare alle colorazioni delle skin (consigliata una lavorazione/recolor)


• 77words: Collezione di originali pattern adattabili a molte colorazioni


• Stripe Generator e StripeMania: Generatori di pattern a righe


• Backgrounds: Sito che offre ottimi sfondi per forum/blog