Cos'è un mock-up e come si fa?

Giorni fa è successo che un cliente mi facesse la richiesta:
"Avrei bisogno di un mock-up per questo progetto"
.. e io "uh?"

Cosi mi sono informata e condivido con voi queste informazioni, cosi non sarete impreparati se vi viene richiesto di farne uno! :)

Il mock-up è l'attività di riprodurre un oggetto (o modello) in scala. Chi esegue un mock-up è chiamato "mock-up artist".

Come si fa un mock-up?
A seconda del progetto si sceglie la tecnica per produrre questo modello, in modo da dare l'idea al cliente di quello che verrà realizzato. Per farlo occorre ricordare queste semplici regole

1. attirare l'attenzione usando forme e colori
2. con dimensioni diverse dall'originale
3. costruito materiale diverso dall'originale (sbizzarritevi)
   
4. che non debba rispettare le funzioni o l'uso dell'oggetto originale, è solo un oggetto che assomiglia all'originale o che deve dare un'idea visiva.
   

In questo modo il mock-up si differenzia nettamente dal modello o dal prototipo fisico.

Oggi l'attività del mock-up artist si rivolge anche al web design e per la prototipizzazione in 3d, utilizzata dagli ingegneri per disegnare e configurare prodotti complessi. Che ve ne pare? Mock-uppiamoci!

Come salvare un file in gif con the Gimp?

Nei precedenti tutorial abbiamo parlato di jpg e ong, e ora passiamo a parlare di gif, (vedi qui su wikipedia)

Quando e perche salvare un immagine in gif?
A) se stiamo facendo un animazione (ne tratteremo più avanti)
B) se vogliamo mantenere la trasparenza dell'immagine
C) se vogliamo un immagine molto compressa e leggera
D) se non abbiamo un immagine prevalentemente sfumata

Formati in pillole
* gif = si trasparenza, no sfumature, media qualità = leggera
* png = si trasparenza, si sfumature, si qualità = pesante
* jpg = no trasparenza, si sfumature, si qualità = medio peso

procedimento
1. File --> Salva con nome
2. Finestra di dialogo per salvare l'immagine nel proprio pc a questo punto scriviamo: immagine.gif, si aprirà questa finestra di dialogo:


3. Esportiamo l'immagine cliccando su "Esporta" e vedremo:


Se stiamo salvando un immagine semplice (non un'animazione) tutta una serie di parameti sotto li vedremo in grigetto, appunto perchè sono i parametri dell'animazione (temporizzazione, ritardo in millesecondi, ecc)

Possiamo scrivere dei commenti, che rimarranno nell'immagine, oppure cancellare il tutto e poi..

4. Clicchiamo "salva" alla fine della finestra e la nostra gif è salva(ta)

Come salvare un file in png con the Gimp?

Nel precedente tutorial abbiamo parlato del formato di salvataggio Jpg, ora passiamo a voler salvare la nostra immagine nel formato "png" cosa significa?

Andiamo a vederlo insieme

1. File --> Salva con nome

2. Cliccando "Salva con nome" si aprirà la finestra di dialogo per salvare l'immagine nel proprio pc a questo punto scriviamo immagine.png
(vedi qui su wikipedia)

Il png è un formato simile al gif (altro formato utilizzato principalmente per immagini senza sfumature e animazioni) mantiene la trasparenza dell'immagine (quello che non succede con il jpg) ha una buona compressione dei dati, ma conserva tutte le caratteristiche dell'immagine

Formati in pillole
* gif = si trasparenza, no sfumature, media qualità = leggera (tutorial futuro)
* png = si trasparenza, si sfumature, si qualità = pesante
* jpg = no trasparenza, si sfumature, si qualità = medio peso

La finestra di dialogo per le png è la seguente:


L'immagine possiamo alleggerirla leggermente se decidiamo di NON salvare i commenti e la data di creazione, criptati all'interno dell'immagine stessa.
Toccando il livello di compressione anche li, più alto è il valore (ad es. 9) e più alta è la compressione = minor peso.


3. E ora clicchiamo su "salva" alla fine della finestra e il gioco è fatto!


Nel prossimo tutorial come salvare in gif, perchè, e quando serve!

Come salvare un file in jpg con the Gimp?

Un tutorial su come salvare un immagine, direte che è una cosa semplice, basta cliccare, ma state davvero salvando al meglio la vostra immagine?

Salvare un immagine significa anche deciderne il formato, il livello di compressione e la qualità.

Formati in pillole
* gif = si trasparenza, no sfumature, media qualità = leggera (tutorial futuro)
* png = si trasparenza, si sfumature, si qualità = pesante
* jpg = no trasparenza, si sfumature, si qualità = medio peso

Andiamo a vedere insieme i parametri per un salvataggio di un jpg.

1. File --> Salva con nome


2. Cliccando "Salva con nome" si aprirà la finestra di dialogo per salvare l'immagine nel proprio pc a questo punto scriviamo: immagine.jpg
(vuoi informazioni su questo formato di salvataggio per le immagini? vedi qui su wikipedia)
Il programma ci chiederà di "esportare" l'immagine cliccando di "si", si apre la seguente finestra di dialogo

Questa finestra di dialogo che appare ci da la possibilità di scegliere la qualità (e dunque il livello di compressine) se puntiamo la casella "Mostra l'anteprima nella finestra immagine" possiamo vedere in tempo reale come risulterà essere la nostra immagini e ci da simultaneamente la dimensione (cioè il peso in kb) dell'immagine.

E le opzioni avanzate?
se clicchiamo sulla freccetta nera si apre un ulteriore parte della finestra di dialogo con la possibilità di scegliere:

* Ottimizzazione (cliccate sul quadrattino, sempre congliata)

* Progressiva (dite di si, funziona che l'immagine se caricata viene visualizzata prograssivamente, dunque copressa meglio)

* Sottocampionatura: scegliere il metodo (da quello più compresso a quello meno compresso, tutto questo va a incidere sul peso finale dell'immagine)

3. Clicchiamo su "salva" alla fine della finestra e il gioco è fatto!


Nel prossimo tutorial come salvare in png e cosa significa farlo...

Come ritagliare un immagine con the Gimp?

Eccoci tornati con un "tutorial per negati" per chi appunto è alle prime arme con i programmi di grafica (titolo preso dalla famosa collana di libri)

Scalare un immagine con the Gimp.. è facilissimo!
Grazie allo strumento "taglierina", [è lo strumento che vi ho evidenziato con il cerchietto rosso qui a fianco.]

1. Aprire il programma di manipolazione immagini The Gimp

2. Aprire l'immagine da ritagliare File --> Apri

3. Cliccare sull'icona "strumento taglierina"

Con questo strumento attivato andiamo a selezionare la parte della nostra immagine che vogliamo ritagliare.
Lo strumento crea una visualizzazione in modo da evidenziare quello che vogliamo ritagliare, mentre ciò che è fuori dalla selezione diventa scuro, in modo da far evidenziare la zona interessata

4. Cliccare due volte, velocemente, in uno dei 4 angoli della selezione creata, in questo modo la parte non selezionata viene tagliata fuori dall'immagine.

Ecco che la nostra immagine è ritagliata per bene!

nel prossimo tutorial per negati vi racconterò anche come salvare un immagine per comprimerla al meglio.. immagini troppo pesanti sono un problema per il mondo web e per le presentazioni a presto!

Come scalare un immagine con the Gimp?

Questo tutorial è molto facile, mi sono accorta che chi è completamente digiuno di programmi i grafica anche il semplice "scalare" un immagine e salvarla in modo compresso, non è un operazione cosi semplice, allora ho pensato di scrivere ogni tanto dei "Tutorial per negati."

Come scalare un immagine
1. Aprire il programma di manipolazioni di immagini The Gimp.
2. Aprire l'immagine da File --> Apri --> [scegli immagine]
3. Dal menu orizzontale Immagine --> Scala immagine


4. Impostare la scalatura:


Come si possono vedere possiamo dare diversi "parametri" per scalare l'immagine:

* larghezza e altezza (che rimarrà proporzionata se lasciamo che l'icona del lucchetto è chiusa) questa possiamo definirla in pixel (di base) ma anche in altre unità di misura come i mm

* risoluzione che si esprime in pixel/in, cioè i DPI, cioè i punti per pollice, maggiore è il loro numero, migliore è la resa dell'immagine, ma badiamo bene a "cosa" ci serve l'immagine, se questa deve essere stampata allora penseremo a 300 dpi, mentre se va letta solo a monitor possiamo viaggiare sui 72-100 dpi.

* qualità, mentre il programma scala la nostra immagine originaria possiamo decidere se il procedimento di riduzione sia più o meno di qualità, solitamente l'interpolazione cubica (che è quella consigliata) è di buona qualità.

5. Cliccare su "scala" e il gioco è fatto..!


nel prossimo tutorial per negati vi racconterò di come ritagliare un immagine!

Come cambiare il colore degli occhi con Gimp

Ho trovato su Youtube questo video, lo posto perchè seppure fatto da un tedesco, il titolo del video è "Augen farbe" (colore occhi) si capisce ugualmente bene! :)



Magari non vi capiterà mai nella vita di dover fare una cosa del genere... ma è sempre utile sapere qualche.. trucco in più! :)

In pochi passaggi:
- selezionare gli occhi della ragazza alla perfezione con lo strumento "selezione a mano libera"
- creare un nuovo livello e riempire la selezione con il colore che si desidera
- mettere il nuovo livello, nella finestra livelli,in modalità "Colore"
- correggere un pò per far vedere il nero della pupilla e il gioco è fatto!

Ho sempre sognato di avere gli occhi verdi.. grazie a Gimp ora posso! :P

Perchè cambiare stile

Non so se è mai capitato anche a voi di girare per la rete e vedere siti anche con dei buoni contenuti, ma con una grafica demodè.. ecco in quei momenti ci vorrebbe una mano al mouse e una sistematina anche alla grafica del sito, perchè come spesso ho detto, è il nostro biglietto da visita nel web.

Se abbiamo un sito non aggiornato (l'ultimo aggiornamento risale al 2003) con una grafica pesante, effetti e bordini che andavano di moda nell'era primordiale del web.. ecco che abbiamo bisogno di un lifting!

Non abbiate paura a cambiare, tutti erano abituati alla vostra grafica e ora chissà come rimangono? beh se il sito migliorerà rimarranno soddisfatti nel vedere un azienda che sa cambiare e afferemerete la vostra immagine! :)

Punti per pollice: DPI

Cosa sono i DPI?

I punti per pollice, noti anche con il termine inglese dots per inch o con l'acronimo DPI, sono la quantità di informazioni grafiche che possono essere rese da un dispositivo di output quale una stampante grafica, un plotter, un RIP o uno schermo.

Con il DPI si esprime la quantità di punti stampati o visualizzati su una linea lunga un pollice, circa 2,54 cm. (Fonte Wikipedia)

Picture element: il Pixel

Cos'è il pixel?


In computer grafica, con il termine pixel (contrazione della locuzione inglese picture element) si indica ciascuno degli elementi puntiformi che compongono la rappresentazione di una immagine raster nella memoria di un computer. Solitamente i punti sono così piccoli e numerosi da non essere distinguibili ad occhio nudo, apparendo fusi in un'unica immagine quando vengono stampati su carta o visualizzati su un monitor.

Ciascun pixel, che rappresenta il più piccolo elemento autonomo dell'immagine, è caratterizzato dalla propria posizione e da valori quali colore e intensità, variabili in funzione del sistema di rappresentazione adottato. (Fonte Wikipedia)

Un sito interessante

2009 / ONDA 8 1000 euro o meno: quando è difficile arrivare a fine mese

Volevo segnalarvi questo sito: www.mediasurf.it oltre ad essere strutturato in maniera giovane e accantivante, pubblica sempre dei temi molto attuali che chiama "onde". Ogni onda ha il suo argomento e su quello vengono consigliati la lettura di libri, l'ascolto di cd e la visione di film che trattino quell'argomento, il tutto condito da delle frizzanti recensioni che rendono piacevole la navigazione del sito.

Questo tema che ho trovato io oggi è sulla crisi economica in italia, molto attuale, Mediasurf lo affronta in modo molto delicato, andando a toccare nel vivo tutti noi. Complimenti davvero, meritava una segnalazione.

Cos'è un rendering?

imagine tratta da http://archema.org/

Il Rendering (chiamato anche semplicemente render) è un termine dell'ambito della computer grafica; identifica il processo di "resa" ovvero di generazione di un'immagine a partire da una descrizione matematica di una scena tridimensionale interpretata da algoritmi che definiscono il colore di ogni punto dell'immagine. La descrizione è data in un linguaggio o in una struttura dati e deve contenere la geometria, il punto di vista, le informazioni sulle caratteristiche ottiche delle superfici visibili e sull'illuminazione.

Ecco che l'immagine sopra, paradossale può sembrare vera.. Il rendering è importantissimo prima di fare un arrendamento o nell'edilizia per darci già un idea reale di come forme e spazi possono integrarsi.

Come si realizza un rendering?
Servono programmi di grafica 3D per il modello (come ad esempio Autocad) e poi serve il programma di modellazione (uno tra i famosi Sketchup).

Come fare un template per Joomla!

Esistono diversi modi per creare un template per Joomla! Possiamo usare dei software come NVU (vedi http://www.sanavia.it/nvuitalia/) e scaricarsi l'estensione per creare siti Joomla! che potete trovare qui oppure.. convertire un vecchio html...!

Come convertire un template statico
Creiamo una cartella, e la nominiamo con il nome che vogliamo dare al template.
All'interno di questa mettiamo:
1 cartella "css" dove metteremo il nostro style.css
1 cartella "html" dove metteremo il nostro file index.html
1 cartella "images" per tutte le immagini del template
1 file chiamato "index.php" che sarà il nostro html convertito con codice php
1 file "favicon.ico" che sarà l'icona del sito, in alto nella barra dei contatti.
1 file chiamato "templateDetails.xml" dove metteremo i seguenti parametri: (ps: metto più spazi tra < e > perchè altrimenti blogger non me li pubblica, state dunque attenti se copiate e incollate)

< ?xml version="1.0" encoding="utf-8"? >
< !DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://dev.joomla.org/xml/1.5/template-install.dtd" >
< install version="1.5" type="template" >
< name>Nome del template< /name >
< creationDate>data di creazione< /creationDate >
< author >Nome autore< /author >
< authorEmail>email@autore< /authorEmail >
< authorUrl >sito autore< /authorUrl >
< copyright >< /copyright >
< license >GNU/GPL< /license >
< version >1.0.0< /version >
< description >template for Joomla 1.5< /description>

< files >
< filename>index.html< /filename >
< filename>index.php< /filename >
< filename>templateDetails.xml< /filename >
< filename>favicon.ico< /filename >
< filename>component.php< /filename >
< filename>images/tutta la lista delle immagini< /filename >
< filename>images/tutta la lista dei file< /filename >
< /files >

< positions >
< position >left< /position >
< position >right< /position >
< position >top< /position >
< position >breadcrumb < /position>
< position >user1< /position >
< position >user2< /position >
< position >user3< /position >
< position >user4< /position >
< position >debug< /position >
< position >syndicate< /position >
< /positions >

< params >
< /params >
< /install >

Come rendere i tag html dinamici?
Includendo i moduli joomla!

Prendiamo il nostro file html e convertiamolo in index.php, sia salvandolo con questo nome, sia inserendo l'indestazione come segue:

< ?php echo '< ?xml version="1.0" encoding="utf-8"?'.'>'; ?>
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns="http://www.w3.org/1999/xhtml" xml:lang="< ?php echo $this- >language; ?>" lang="< ?php echo $this- >language; ? >" dir="< ?php echo $this->direction; ? > " >



< head >
< jdoc:include type="head" / >
< link rel="stylesheet" href="baseurl ?>/templates/cartella con il nome del template/css/style.css" type="text/css" />
< /head >
< body >
< /body >
< /html >

Negli spazi che ci servono, rispetto al nostro template in codice html, inseriamo poi i richiami dei diversi moduli Joomla! Ad esempio, se vogliamo mettere in un td di una nostra tabella il riferimeno alla colonna sinistra metteremo dentro il < TD >:

< div id="left" >
< jdoc:include type="modules" name="left" >
< /div >

Questo div includerà i moduli ai quali assegneremo la posizione a sinistra.

Cosi via inseriamo poi i collegamenti tutti i moduli nei posti dove vogliamo:


name="top"
name="breadcrumb"
name="user1"
name="user2"
name="user3"
name="user4"
name="right"
name="left"
name="syndicate"
name="debug"

Fatto questo non ci resta che uplodare la nostra cartella sotto la cartella "joomla" --> "template" e provare l'effetto che fa. Per vedere se abbiamo fatto tutto nel modo corretto, prima inseriamo dei contenuti, il modulo menu, cerca ecc. e poi cambiamo l'aspetto sostituendo il nostro template. Una volta agganciato poi si può perfezionare andando ad agire su html e css.
Sembra facile? beh non esattamente, Joomla! è una piattaforma opensource molto potente, ma sicuramente non facilissima a primo sguardo, occorre mettersi d'impegno e dedicarci un bel pò di tempo per creare template e siti belli e funzionali.

Per altre informazioni: http://www.joomla.it/

Come creare un effetto glossy

Forse vi sarà capitato di voler fare un banner per piacere o dovere e non sapere esattamente da dove iniziare, ecco che questo breve tutorial su cos'è un banner e come si può realizzare potrebbe tornarvi utile :)

Ma cos'è? Il banner web o banner è una delle forme pubblicitarie più diffuse su internet e rientra nella tipologia di marketing definita promotion marketing online, per documentarsi meglio ecco la pagina su wikipedia

Come si realizza?
A seconda del risultato che vogliamo ottenere abbiamo diverse tecniche per realizzarlo, in questo breve tutorial volevo parlarvi di come fare un effetto glossy che tanto va di moda in questo momento ed è tanto gradito all'occhio dell'osservatore!


Effetto glossy

- Aprite The Gimp versione 2.4.6, create un documento con sfondo bianco.
Consiglio: se vogliamo fare qualsiasi lavoro grafico è sempre meglio lavorare al doppio della grandezza che ci serve per avere un risultato migliore nel risultato finale.

- La base. Con lo strumento selezione (dalla paletta degli strumenti) prendiamo lo strumento selezioni circolari e creiamo una selezione circolare in un livello trasparente, scegliamo due colori di nostro gradimento e riempiamolo di colore:



- creiamo un ombra, per dare un effetto di tridimensionalità, conla stessa selezione circolare che abbiamo usato prima, in un altro livello trasparente riempiamola di un colore che servirà da ombra (nel mio caso ho usato un rosso scuro) poi con il livello attivo, andate su: Filtri - Sfocature - Gaussiana e date una sfocatura verticale e orizzontale di 5.
Fatto questo spostate il livello verso destra e verso il basso affinchè ne risulti un ombra delicata e spostata.




- riflessi. iniziamo a pensare ai riflessi, in un altro livello trasparente, creiamo una selezione circolare più piccola del nostro cerchio colorato, poi andiamo sul menu: Seleziona - Inverti, in modo da avere la parte esterna al cerchio selezionata e riempiamola di bianco. Possiamo poi di decidere di diminuire l'opacità del livello per avere un primo effetto di riflesso, oppure, cosa che consiglio, creiamo su questo livello un "livello maschera" andando sul menu: Livello - Maschera - Aggiungi maschera di livello bianca, con la maschera selezionata date una sfumatura dal bianco al nero in modo da tenere il risultato desiderato.




Dopo aver fatto la prima maschera, vi accorderete che è davvero un attimo crearne delle altre per dare altri effetti di traslucenza e riflessi come meglio vi piace! :)




-Aggiungiamo un testo. Con lo strumento testo dalla paletta principale aggiungiamo un testo bianco:



poi duplicate il livello del testo (Livello - duplica livello) cambiategli colore, in tinta con quello che avete scelto come ombra del cerchio inizialmente, poi andate su: Livello - A dimensione immagine, poi su Filtri - Sfocatura gaussiana e date un gauss di 5, spostatelo, ed ecco il risultato:



Questa è una tecnica base, poi da qui si possono fare sempre più perfezionamenti ed effetti, man mano che si prende confidenza con il programma! :)

The Gimp

Se si parla di grafica, la prima parola che mi viene in mente è... The Gimp!GIMP è l’acronimo di GNU Image Manipulation Program.
E’ una software liberamente distribuibile ideale per il foto ritocco, composizioni e la creazione di immagini, è un programma di grafica bitmap, cioè "ragiona per pixel", quei piccoli quadrattini colorati che compongono una foto. The Gimp lo si può avere tramite un gratuito download, nel sito ufficiale www.gimp.org

The Gimp, programma estramamente espandibile ed estensibile, è stato sviluppato e scritto su piattaforme UNIX da Peter Mattis e Spencer Kimball. Molti altri sviluppatori hanno contribuito con plugin e migliaia hanno offerto supporto e testato il software. Il programma con una breve istallazione può essere usato sia su Linux che su Windows, disponibile anche nelle versioni più aggiornate, in italiano.

Personalmente lo uso per lavoro e svago, cosi ho deciso che nei ritagli di tempo, mi metterò a scrivere qualche breve tutorial, per realizzare in poco tempo, effetti grafici utili e d'effetto!
Alla prossima puntata!