WALLPAPERS ANIMATI 240X320 DAL WEB

TUTORIAL: Creazione e aggiunta di una maschera su immagine di sfondo. x Nokia

Creazione e aggiunta di una maschera su immagine di sfondo.

---

A volte capitano delle bellissime immagini che però non vanno d'accordo con la visibilità di scritte e simboli vari.

usando le immagini guida del post precedente e con l'aiuto di Adobe imageready, creiamo una maschera da sovrapporre all'imagine.

Esempio di maschera in formato .png:


Guida alla creazione di una maschera 240x320:





Fatto Questo, la applichiamo sulla nostra immagine animata.

Immagine di partenza:



Immagine finale:



Guida all'applicazione di una maschera su immagine gif:

TUTORIAL: modifica immagine gif x Nokia

Modifica immagine gif da usare su tema animato

---

Vi sarete accorti che i cellulari Nokia non visualizzano l'animazione su tutto lo schermo, ma solo su una porzione di esso.
Di seguito eccovi rappresentate in giallo le aree in cui l'animazione e' funzionante:

Schermo 240x320:



Schermo 176x208:



Molte immagini trovate nel web hanno l'animazione a tutta immagine, quindi succede che, facendoci un tema, si vedra' un'animazione "spezzata".

Esempio:



Di seguito un piccolo videotutorial per imparare a modificare l'immagine per evitare questo tipo di problema.

Immagine iniziale:



Risultato finale:



Guida per modificare una gif usando Imageready:

TUTORIAL: Icon pack, multiple resize

Ridimensionamento multiplo di icone

---

Molti icon pack in formato .png che si trovano sul web hanno dimensioni esagerate
che appesantiscono oltremodo i file .sis

Per questa ragione aggiungo un simpatico tool Freeware che permette di ridimensionare in un colpo solo una intera cartella di immagini, dando anche la possibilità di cambiare estensione file e piccole correzioni sulla qualità.

il programma in questione si chiama eVJO Photo-Image Resizer (FREEWARE) e lo trovate allegato QUI.


Icone di partenza (256x256 png):




Risultato(128x128 png):



GUIDA AL RIDIMENSIONAMENTO MULTIPLO CON eVJO
Photo-Image Resizer

TUTORIAL: cambiare colore alle icone rapidamente

Cambiare velocemente colore alle icone

---

Mettiamo il caso di aver creato un gruppo di icone tutte più o meno della stessa tonalità (nell'esempio rosse), ma che male si abbinano al tema che avevamo in mente.

Ecco come modificarle con Adobe Imageready usando lo strumento tonalità e saturazione.
Basta poi annotarsi le variazioni fatte e replicarle per le altre immagini.




Icona di partenza:



Risultato Finale:



Come cambiare il colore delle icone:

TUTORIAL: Creare signal & battery indicator

Creazione indicatori batteria e segnale a tema in formato .png

---

Usando sempre Adobe Imageready e con la tecnica del copia/incolla, realizziamo indicatori segnale e batteria in tema con il resto delle icone o con l'immagine di sfondo.

la risoluzione consigliata è: 24x58 e mai sotto 16x38

Nota:Visto le dimensioni minuscole dell'oggetto, è preferibile lavorare con dimensioni multiple di quella finale(nell'esempio 240x580) e ridimensionare a lavoro finito.




Questa è l'immagine di partenza:
( immagine .png 454x443)



Questo è il risultato:
( immagine .png 24x58)




Guida alla creazione di indicatori segnale e batteria:

TUTORIAL: Estrarre icone .png da gif animate

Estrazione icona .png da gif animata

---

Si possono estrarre immagini in formato .png anche da gif animate, ritagliando e aggiungendo la trasparenza a un singolo fotogramma.

Usiamo come al solito Adobe Imageready



Piccola nota:
Nella guida sottostante è stato usato il primo fotogramma della gif, ma se se ne volessero usare altri basta cancellare quelli che non servono e i rispettivi layer e il gioco è fatto.

Questa è la gif animata di partenza:


E questo è il risultato finale:
(immagine .png 88x88 con fondo trasparente)


Guida all'estrazione di icone da gif animate:

TUTORIAL: Creare list highlights, callerbar, navi pane etc 3D effect

Variante 3D effect di Creazione di list highlights, callerbar, navi pane etc

---

Una volta fatta pratica con la creazione di semplici popups, proviamo a dargli un tocco in più, aggiungendo un effetto 3D.

Il programma usato è sempre Adobe Imageready



Risultato finale:



Qui sotto la guida multimediale:

Guida alla creazione di caller bar 3D effect:

TUTORIAL: Creare list highlights, callerbar, navi pane etc

Creazione di list highlights, callerbar, navi pane etc

---

Per lo stesso principio delle icone (ovvero la personalizzazione con immagini ritagliate) vi illustriamo una semplice guida su come creare, ad esempio, un caller bar(ovvero quel riquadro che appare quando digitate il numero da chiamare), con l'aggiunta di un'immagine precedentemente preparata in formato .png.

Ma la procedura vale anche per list highlights, navi pane, finestre popup, status background, etc.

per lo stesso principio per cui il formato .png non e' scalabile, aggiungiamo di seguito le dimensioni consigliate per ogni tipologia e tra parentesi la dimensione minima per ottenere il miglior risultato.

NAVI PANE 360X30 (240X20)

CALLER BAR 352X126 (240X83)

POPUP 360X113 (240X75)

STATUS BACKGROUND 234X24 (157X16)

LIST HIGHLIGHTS 344X66 (229X44)

AGGIUNGIAMO DI SEGUITO IL VIDEOTUTORIAL DELLA CREAZIONE USANDO ADOBE IMAGEREADY.




Questo è il risultato finale:
(caller bar 352x126 ritagliato con trasparenza e con trasparenza totale al 70%)




GUIDA ALLA CREAZIONE DI UNA BARRA DI CHIAMATA:



Come sempre........buon lavoro!!

TUTORIAL: JPEG TO PNG

Premessa:

Se si usa Carbide.ui per la creazione di temi Nokia, il miglior risultato si ottiene adoperando materiale grafico in formato.svg (Scalable Vector Graphics), in quanto questo tipo di materiale è "scalabile" ovvero non perde di definizione se ridimensionato.
Ci vogliono dei software adeguati e una discreta conoscenza della grafica vettoriale.
uno dei più conosciuti programmi è Adobe Illustrator (molto costoso).
In rete comunque se ne trovano alcuni Opensource.
Qui di seguito mettiamo il link per il download di uno dei piu' funzionali(suggerito da MOWMO).

Scarica Inkscape

Questo tipo di immagine, però, non si presta alla creazione di icone ritagliate da altri tipi di immagini(per esempio gif o jpeg), quindi se si vogliono ottenere icone "personalizzate" a "soggetto", tipo personaggi dei fumetti, loghi, fiori, etc.., il miglior tipo di file è il .PNG(Portable Network Graphics), in quanto già dotato della sua maschera di trasparenza.
Essendo pero' un formato non scalabile, si consiglia, per quanto riguarda le icone, di non scendere al di sotto di 128x128 pixel (e comunque mai sotto 88x88), quindi è preferibile scegliere delle immagini da editare che siano uguali o superiori a queste dimensioni.
Con questo tipo di accortezze il risultato sarà comunque ottimo.

Creazione di icone(ritaglio, trasparenza e ridimensionamento)

Di seguito aggiungiamo il videotutorial per creare icone usandoAdobe imageready ma la procedura e' molto simile anche con Paint.net e con gli altri programmi che trattano il formato .png.

Questo è un'esempio dell'immagine di partenza:

(immagine jpeg 206x218 fondo bianco)

E questo è il risultato:

(immagine png 128x128 fondo trasparente)

Guida alla creazione di icone personalizzate in formato .png

Buon divertimento!!!