home » Craft, design, graphics, photoshop, tutorial

Tutorial: come creare un meraviglioso sfondo per Twitter (e qualche risorsa in piu')

8 December 2009 872 views Comments
» download my vCard | lsd@twitter | the Japan serie

Tra le piattaforme di microblogging e’ sicuramente quella piu’ in voga e da quando gli utenti hanno scoperto la loro vena creativa nei backgrounds Twitter e’ ancora piu’ gradevole.
Ce ne sono di belli, di bellissimi, di meravigliosi e di stra-splendidissimi!
Ognuno vuole esprimere se stesso in un modo diverso, vuole esprimere la sua arte e la sua personalita’, nondimeno si tende a sponsorizzare il proprio lavoro.

@arinee

@chrisspooner

@KV0

@mikebithell

@nickla

Rispetto ai classici custom backgrounds forniti da Twitter stesso direi che questi sono ben lungi dall’essere ignorabili.
Ma come si costruisce un perfetto template?

Lavorero’ su di un template creato da Chris Spooner che propone quattro possibili variabili risoluzioni: 1024×768, 1280×1024, 1680×1050 e 2000×1920; per comodita’ e per maggiore compatibilita’ utilizzero’ la dimensione “standard” 1280×1024 che e’ quella piu’ diffusa.

Nel template di Chris e’ quella gia’ evidenziata:

Layer 0

Questo file e’ molto comodo, come si vede ci sono gia’ le linee guida per comporre il layout; possiamo scegliere di rimanere all’interno delle aree bluette oppure sconfinare, a destra, con il proseguo del nostro disegno.
Per poter proseguire con il disegno, sconfinando quindi, io suggerirei di utilizzare un gradiente in modo da evitare stacchi troppo bruschi per coloro che visualizzano la pagina a risoluzione piu’ alta.

Adesso creero’ un nuovo layout per l’account salingoceanis, che si rifa’ al sito >secondo il vento, la vela, a tema completamente nautico. Voglio utilizzare qualcosa di molto simile al layout che appare adesso sul sito, quindi mi serviro’ di varie immagini; cominciamo con lo sfondo innanzitutto: riduco l’opacita’ del layer di lavoro (quello con le aree azzurre) fino al 9% in modo da avere sempre sotto controllo i margini di lavoro. Preferisco fare cosi’ invece di sistemare le Guide sull’area di lavoro, a volte ho l’impressione che la visuale mi si attorcigli intorno al naso =)
Per il colore di sfondo utilizzo un colore neutro (#d0cccc) e applico un pattern di quelli gia’ presenti nei presets di Photoshop, cambiando il Blend Mode su Overlay.

Layer 1

Ho applicato questo stile ad un duplicato del layer Background (che ho chiamato Working), ricordandomi di cancellare l’area bianca compresa tra le zone bluette del layer fornito con il pack di Chris.
Adesso voglio inserire questa bellissima mappa anticata (The World is Yours) nel mio layout, l’ho scaricata gratuitamente da stock.xchng – un servizio che trovo estremamente interessante.

L’ho inserita nella sua dimensione naturale e con il comando Transform (ctrl+T) l’ho semplicemente allargata; non mi interessano molto le proporzioni della mappa, voglio solo che copra l’intera area di lavoro.
Per dare maggiore enfasi all’immagine ho manipolato il valore del Gradient Overlay e, ancora, ho cambiato il Blend Mode su Overlay.

Layer2

Il piu’ e’ quasi fatto.
Voglio pero’ abbellire con qualcosa che riguardi un po’ piu’ da vicino il mare, la vela e tutto quello che la riguarda. E voglio riutilizzare quella bussola meravigliosa che avevo gia’ messo nell’header.
Una volta ritagliata la sagoma della bussola la incollo sul lato sinistro del mio composite, facendo attenzione a non lasciare spazietti vuoti; applico un’ombreggiatura normale (Drop Shadow) e, per dare un pelo di profondita’ in piu’, tramite il comando Stroke faccio comparire un contorno interno (Inside).

Layer 3

Utilizzando la stessa ombreggiatura ho deciso di inserire altri elementi, come questo cassettino porta documenti, questo compasso (al quale ho cambiato qualche settaggio) e delle foto stile Polaroid che ho creato.

Layer 4

Ci sono in giro circa un centinaio di tutorial su come creare delle perfette Polaroid in Photoshop o Illustrator, ma mi sono invaghita di questo strumento: Poladroid!
Scaricatelo, usatelo e riusatelo! E’ come avere una vera, vecchia Polaroid sul computer, favoloso!

Layer 5

Quindi.. ho scelto le mie immagini e le ho “trattate”, aggiunto del testo, poi le ho inserite nel composite.
Il risultato mi piace parecchio.

Layer 6

Ultimi passi da completare: prima di caricare la mia immagine devo assicurarmi che sia in formato .jpg e che la sua dimensione sia inferiore a 800kb.
Fatte le dovute modifiche all’immagine, sono pronta.
Ed ecco il risultato finale!

@salingoceanis

Cosa manca adesso?
Manca un avatar.. e deve essere in stile =)
Quindi riprendo la foto dello squaletto gonfiabile.. et voila’ =)

avatar

Adesso, come promesso nel titolo, qualche risorsa in piu’:

  • TweetMeme,  un compendio dei tweet piu’ caldi del momento; offre un plugin per WordPress che permette di inserire un bottone per i ReTweets
  • Twittearth, twitting grafico
  • Does Follow, vi permette di vedere se un certo utente segue un altro utente, chiaro no?
  • Twitter Grader, vi servira’ se volete sapere in che posizione siete rispetto alla Twittosfera, che tipo di target vi segue e, soprattutto, quante persone vi seguono
  • Twittangle, comodissimo per chi ha un sacco di followers: permette di creare una lista di followers che ritenete piu’ importanti, assegnando una tag e un rate, in modo da filtrare a seconda delle vostre preferenze
  • Your Twitter Karma, inserite username e password e verra’ generata una schermata in cui sono visibili i rapporti di followship tra voi e i vostri followers
  • IsTwitterDown?, y/n
  • TwiterTag, scoprite nuovi amici a seconda delle tag di interesse
  • Friend or Follow, fa la stessa cosa, in modo piu’ compatto, di Twitter Karma: chi sono i vostri followers? Ma soprattutto, vi stanno seguendo?
  • Twitnest, molto visuale e carino, inserendo il vostro username avrete una mappa dei vostri followers
  • Twitterless, indovina indovinello.. previo followship, vi mostrera’ chi non vi vuole piu’ seguire
  • Foller Me, prima di aggiungere un nuovo follower alla vostra lista, controllate di chi si tratta
  • Twitoria, fa qualcosa di diverso, ovvero vi segnala l’inattivita’ dei vostri followers
  • Quitter, vi avvisa quanti followers vi mollano dopo un determinato post
  • Twit Pay, pagamenti via Twitter? Ora si!
  • TwitterCalc, aggiunge al vostro account le funzionalita’ di Calendar
  • GroupTweet, per scambiare messaggi privati tra gruppi di utenti

You also may find interesting

E ancora:

  1. Twitter settimanali – 2009-12-27
  2. Twitter settimanali – 2010-01-03
  3. Doll vs Human
  4. 10Q: Poni la tua domanda, Vincenzo “Jackal” Leone ROARRR risponde (certo, forse, non so.. boh!)
  5. 10Q: Giuliano Lilliput di Julius Design che saluta la sua ex ragazza =)
      
                              
  • grazie grazie grazie ^_^
    me si genuflette in grata adorazione!
  • Se bastasse cosi' poco alla gente per essere sempre felici =)
    Prego, mi fa piacere che il tutorial sia stato utile =)
blog comments powered by Disqus