Qualcuno sceglie di impostare semplicemente una propria fotografia mentre qualcun altro si avventura nella creazione di un’immagine ad hoc.

In questo tutorial vedremo come anche chi è poco esperto di design può realizzare facilmente la copertina personale per facebook Timeline utilizzando Mangatar, un servizio online che permette di creare avatar in stile manga.

Come prima cosa ci registriamo al servizio utilizzando il form in home page o il comodo pulsante “accedi con Facebook“.
Una volta completata la registrazione, sarà possibile creare quanti mangatar vogliamo, semplicemente cliccando sul pulsante “create mangatar” presente nel menu in alto.
Ci verrà mostrato il generatore di mangatar la cui prima schermata permette di scegliere il sesso del personaggio che andremo a creare.

Una volta effettuata questa scelta, avremo accesso ad una grossa quantità di elementi attraverso i quali personalizzare i nostri mangatar. Ricordiamoci di sfruttare bene tutto lo spazio messo a disposizione visto che sarà visibile nella cover di facebook.

Scegliamo quindi naso, bocca, capelli, corpo, ecc., per far assomigliare il mangatar il più possibile a noi e, infine, diamogli un tocco di classe con uno sfondo accattivante e una casella di testo dove scrivere un messaggio per chiunque visiti il nostro profilo facebook.

Salviamo il tutto cliccando sul pulsante “salva” in basso a sinistra, dopodichè verremo riportati nella nostra pagina profilo. Da qui clicchiamo sulla seconda scheda, denominata “mangatar“, per entrare nella nostra galleria e clicchiamo su quello che abbiamo appena creato.
Ci verrà mostrato un menu circolare dal quale dovremo scegliere la voce “Scarica“.

A questo punto ci troveremo nella pagina di download del mangatar nella quale sarà possibile scegliere tra diverse dimensioni. Selezioniamo il primo, “panorama“, e clicchiamo su scarica!

Abbiamo appena salvato il mangatar nel formato lungo, completo di sfondo. Non ci resta che spostarci nel nostro profilo facebook, cliccare su “cambia copertina” e caricare l’immagine appena scaricata!

Adesso abbiamo la nostra bella timeline con copertina personalizzata.

Concludendo, potete creare diversi mangatar per diverse occasioni (a tema estivo o invernale, casual o elegante, e cosi via) e tenere il vostro profilo sempre aggiornato e legato al vostro umore!

Autore: Raffaele Gaito, cofondatore di Mangatar, per yesWEBcan.

Le icone sono un elemento essenziale nel design di un sito web ed è fondamentale decidere come e quali usare fin dalle prime fasi del concept grafico. Le icone devono essere dei segnali visivi efficaci, riuscire a raffigurare graficamente con chiarezza l’elemento al quale vengono associate e saper attirare l’attenzione dell’utente.
Online si possono trovare molti set di icone, sia free che a pagamento, ma in alcuni casi è necessario (ma anche più gratificante) crearsi delle icone ad hoc per i proprio progetto.
In questo articolo, troverete una vasta gamma di tutorial e risorse che vi aiuteranno nella progettazione di icone sia usando Photoshop che Illustrator

Creare l’icona di una batteria

Come creare una deliziosa icona di cibo cinese

Come trasformare gli occhiali da geek in una bellissima icona

Come creare un icona vettoriale di un calendario

Come disegnare un set di Buddy icons

Disegnare un cappello da militare

Creare un icona feed a forma di arancia

Creare un icona Rss con illustrator

Icone trasparenti messenger

Come creare l’icona di Safari in illustrator

Icona Adobe Bridge

Come creare l’icona di una macchina fotografica

Tutorial per la creazione dell’icona di un computer

Creare l’icona di un orologio

Creare icona itune

Disegnare un icona di un compasso in photoshop

Crea un simpatico smiley

Creare icone skype buddy

Yahoo smiley

Icona Rss in vetro

Come creare icone di cartelle

Creare un emoticon arrabbiata

Icone stile CS3

Crea l’icona di un monitor Lcd

Icona Ipod

Creare un icona vettoriale raffigurante i soldi

Tutorial su come disegnare delle mini icone

10 trucchi per progettare icone in modo efficace

7 principi per la creazione di icone

Come creare icone

Il nuovo Twitter utilizza un layout fluido, questo significa che la finestra del browser o la risoluzione dello schermo possono influire sulla larghezza delle colonne, e di conseguenza sulla dimensione di spazio utilizzabile per lo sfondo.

Personalmente ho preso in considerazione una risoluzione di 1440 pixel di larghezza, perchè con misure inferiori è veramente difficile sfruttare il background come eravamo abituati a fare con il layout quasi in pensione.

Ci sono alcuni punti che bisogna tenere a mente quando si progetta il nuovo sfondo Twitter:

Misure nuovo layout

• Il nuovo design ha una barra sempre presente sull’header di altezza 40 pixel che occupa l’intera lunghezza della pagina web. Attenzione però, non tenetela in considerazione nel psd perchè il vostro sfondo partirà sotto di essa. Cosa invece che può interessare è che vi sono 20 pixel in altezza tra questa barra e l’inizio delle due colonne.
• La distanza a destra e a sinistra delle colonne visto che il layout è fluido può variare in base alla risoluzione e le dimensioni della finestra del browser. Comunque la spaziatura è significativamente ridotta rispetto al vecchio layout.
• La colonna a sinistra (quella principale) è sempre larga 540 pixel, infatti anche se la vediamo su uno schermo con risoluzione 640×480 rimane invariata, mentre la barra laterale può variare con una risoluzione di larghezza inferiore ai 1.130 pixel. Per risoluzioni superiori invece si fissa a 500 pixel.
• La barra sulla destra ha una trasparenza di circa il 75%, il che significa che quel che sceglieremo di utilizzare per lo sfondo si intravederà sotto questa barra e potrà influire sulla leggibilità.

Nella risoluzione 1440×900 ci sono circa 500 pixel liberi su ciascuno dei due lati, allora per sfruttarli entrambri ho creato il mio nuovo backgroud in questo modo:

Prima prova Background

Dopo vari test ho notato che le immagini usate sul lato destro davano problemi in particolare, con risoluzioni inferiori ai 1440 px dove la sidebar copriva le immagini che a causa della trasparenza si continuavano ad intravere e rendevano difficile la leggibilità.

Allora ho optato per questo nuovo background:

Seconda prova Background

Sembra che 1440 pixel sia la soluzione migliore se si vuole utilizzare del contenuto nel background e lasciare un messaggio come eravamo abituati a fare con la precedente versione.

Attualmente ho lasciato lo sfondo largo 1440 pixel ma ne ho già creato un altro nel caso preferirò mantenermi stretto e rendere compatibile il background anche per la risoluzione 1280 × 800. In questo modo su ciascun lato avremo liberi solo 112 e 113 pixel.

Background 1280px x 900 px

In rete esistono parecchi template PSD utili per creare uno sfondo per il vecchio layout Twitter, ma è difficile trovarne utili per il nuovo. Questa difficoltà l’ho riscontrata anche io ed è proprio per questo che ho deciso di scrivere questo articolo.
Infatti ho creato 2 Template PSD per le risoluzioni 1280×900 e 1440 x 900 con le varie sezioni già create, in questo modo sarà più facile creare il vostro sfondo e avrete a disposizione la base con le varie sezioni su cui lavorare già suddivise.

Se avete bisogno di una risoluzione diversa fatemelo sapere nei commenti e vedrò cosa posso fare.

Fonte 1: Mashable Fonte 2: NewTwitter

Avete gli strumenti ma non sapete come procedere? Ok a questo ci penso io, vi ho preparato una raccolta di tutorial, nella speranza di fornirvi dei buoni spunti per la creazione delle vostre illustrazioni digitali.

Dopo una lunga selezione sono giunto a una collezione di 25 tutorial che personalmente ritengo i più interessanti. Se ne conoscete altri, segnalatemelo senza problemi, sarò felice di allungare la lista.

Buon divertimento, ce n’è per tutti i gusti!

1. Modeling the Human Body in Adobe Illustrator



2. Dress Up Your Desktop with a Sharp Dual Screen Wallpaper



3. Create a litte baby in Illustrator



4. Sketchy Cartoon Tutorial



5. Create a Cool Vector Panda Character in Illustrator



6. How to create a curious owl in Illustrator Cs4



7. How to Illustrate a LeBron James Cartoon Character



8. Illustrate Image Into Vector



9. How to Create a Vector Illustration and Prepare it for Micro-Stock Sale



10. Create a Cute Furry Vector Monster in Illustrator



11. Adobe Illustrator Cartoon Bug Tutorial



12. Vector figure shading



13. Mascot Design In Real Time Order – the SOSFactory Way



14. How To Create Your Own Vector Cartoon Character



15. Create a Character Mascot with Adobe Illustrator CS4



16. Create a Super Happy Octopus Character



17. Adobe Illustrator Cartoon Snail Tutorial



18. Create Sketchy-Style Vectors



19. How to Create a Cute, 3D, Vector Robot



20. Creating Line Drawings in Adobe Illustrator



21. Create a Gang of Vector Ninjas



22. Drawing a character’s face in Illustrator



23. How to Turn a Sketch into a Fat Cat Vector Illustration



24. Create a Vector Pirate Cartoon Character from a Hand Drawn Sketch



25. Monster Character Series Part 4

Installazione Brushes:

• Copiate il file .abr che avete scaricato nella cartella brushes del Photoshop. Per trovare la cartella dovete procedere in questo modo: Risorse del computer->(c) Disco Locale-> Programmi-> Adobe-> Adobe Photoshop-> Presets (predefiniti)-> Brushes (pennelli).
• Una volta copiato il file possiamo aprire Adobe Photoshop e selezionare lo strumento pennello, poi andiamo nella tavolozza con le opzioni e premiamo per aprire il selettore di pennelli predefiniti






installazione-brushes




• Ora clicchiamo sul triangolino in alto a destra e selezioniamo load brushes (carica pennello)


installazione brushes



• A questo punto vi si aprirà la cartella contenente i brushes, selezionate quello che desiderate caricare ed il gioco è fatto.
  

  installazione-brushes

Installazione patterns
L’installazione dei patterns è molto simile a quella dei brushes, ma spiegheremo passo-passo anche questa.

• Copiate il file .pat che avete scaricato nella cartella brushes del Photoshop. Per trovare la cartella dovete procedere in questo modo: Risorse del computer->(c) Disco Locale-> Programmi-> Adobe-> Adobe Photoshop-> Presets (predefiniti)-> Pattern
• Una volta copiato il file apriamo Adobe Photoshop e prendiamo lo strumento secchiello, poi andiamo nella tavolozza con le opzioni, selezioniamo pattern e premiamo per aprire il selettore di pattern predefiniti


installazione-pattern




• Ora clicchiamo sul triangolino in alto a destra e selezioniamo load pattern (carica pattern)


installazione-pattern




• A questo punto, come per i brushes, vi si aprirà la cartella contenente i pattern, selezionate quello che desiderate caricare ed ecco i vostri pattern pronti all’uso.
  

  installazione-pattern

Il procedimento è lo stesso anche per sfumature, forme e per tutte le risorse disponibili per Photoshop. In realtà esiste un metodo ancora più veloce per installarli, basta semplicemente trascinare i file all’interno del Photoshop, ma vi consiglio per iniziare di usare i metodi tradizionali

Se anche voi avete la mia stessa passione, e quando vedete un disegno astratto esclamate “ma come diavolo ha fatto?” allora questo è il tutorial che fa per voi.

WebDesignerWall ha pubblicato questo tutorial “Illustrator: Abstract Vector Art“, dove mostra come creare con Illustrator CS o superiore, forme astratte per le vostre opere e i vostri lavori.
Il tutorial prima insegna come utilizzare strumenti tipo Warp (altera) e Twirl (vortice), poi in modo molto semplice e immediato, mostra le tecniche base per creare le forme astratte. Poi sta alla nostra creatività personalizzare questi metodi e creare illustrazioni sempre più complesse.

A proposito, non preoccupatevi se il risultato finale non è identico a quello del tutorial, molto dipende da come muovete il mouse e da come avete impostato gli strumenti di Illustrator. Difficilmente utilizzando queste tecniche si avranno due opere identiche… ed il bello è proprio questo!

Non conosco Mauro, ma ho letto diversi suoi articoli su ItalianWebDesign e devo dire che ha un’ottima preparazione e tratta argomenti interessanti.

Era un mese che non aggiornava il suo blog, speriamo lo cominci a fare più frequentemente… io intanto continuo a tenerlo nei miei preferiti

In particolare ha destato il mio interesse un tutorial semplice ma molto dettagliato, che spiega come creare un Layout in Photoshop per un sito vivace e pieno di colori.

Nel momento in cui scrivo hanno inserito un Tutorial molto simpatico dove mostrano la manipolazione di una foto per la creazione di un “Animal King”