[Recensione a pagamento] Il 14 Gennaio 2011 per il rinnovo del suo logo, il sito web SuperRaga.IT ha indetto un Concorso Grafico gratuito dedicato a tutti gli utenti, dove in palio come primo premio ci sarà Netbook Asus.

Leggi di seguito tutti i dettagli dell’iniziativa.

Partecipa a questo contest grafico, puoi vincere un premio prestigioso

Il sito SuperRaga.IT è un portale dedicato al divertimento quindi le grafiche dovranno seguire questo determinato “tema”.

Le iscrizioni sono aperte a tutti previa registrazione gratuita sul sito e saranno aperte fino a domenica 13 Marzo 2011.

Le date di inizio e scadenza del contest:
Domenica 20 Marzo 2011 inizierà il contest e finirà Domenica 22 Maggio 2011 alle 00:01.

Come ottenere il premio:
Il vincitore del CONTEST sarà la grafica che riceverà più votazioni dagli utenti del sito.

Dove iscriversi e come funziona:
Informazioni e iscrizioni al contest grafico.

Vuoi addentrarti nel mondo della grafica ma non sai da dove iniziare?

Stai cercando una lista di risorse per Photoshop?

Puoi utilizzare questo articolo come guida di base.

Sono segnalati 9 articoli, dove sono presenti sia video che post tutorial.

Se hai già esperienze con questo programma, e vuoi condividere con i lettori di blographik i migliori articoli che hai scovato in rete,
sei invitato ad aggiungere le tue chicche nei commenti qui sotto.

Ecco di seguito tutti i dettagli di questa lista.

Tutorial Photoshop:

• MrWebmaster: 61 Articoli Photoshop – Qui troverai alcune guide in italiano dove potrai cominciare a dilettarti con Photoshop.
• PayTuts: Video Tutorial in Italiano – PlayTuts raccoglie video tutorial in italiano realizzati da professionisti e da appassionati di grafica.
• JuliusDesign: BecomeDesigner – Alcuni Tutorial realizzati da Julius, WebDesigner Freelance & Blogger.
• TuttoRials: Raccolta dei migliori Tutorials per il Web disponibili per la Rete.
• Grafica: Guida Photoshop – Imparare da Principio lo potenzialità di Photoshop.
• Blographik: 40 Tutorial per Photoshop – Vuoi migliorarti con Photoshop? Ecco 40 fantastici tutorial selezionati per te.
• JuliusDesign: 41 spettacolari effetti su foto – Julius ci offre questi spettacolari effetti su foto con la rispettiva guida per crearli.
• TotalPhotoshop:  Video Tutorial Gratuiti per Photoshop, DreamWeaver, Illustrator, after effects, Premiere, Flash etc.
• Photoshoppista: Canale Youtube – Ecco i video tutorial da Photoshoppista!

Hai altri tutorial per photoshop da segnalare?

Aggiungi pure la selezione dei tuoi post preferiti qui nei commenti.
Preferirei non segnalassi risorse autoreferenziali , i lettori del blog lo capirebbero subito.

Autore: Sebastiano Raffa, blogger e Amministratore di Informania.it

Molto spesso mi è capitato, alla fine della realizzazione di un mio progetto , di domandarmi come il mio lavoro sarebbe stato valutato da un altro grafico. Un biglietto da visita, un’immagine coordinata, un template, un logo, qualunque progetto portassi a termine, ero sempre  curioso di sentire il parere di un altro professionista su di esso.

Tempo fa ho scoperto un sito che mi permette di realizzare proprio il desiderio di confrontarmi con altri grafici. Si chiama CONCEPT FEEDBACK.COM e ti permette di caricare i tuoi progetti, dopo un adeguato log in e di ricevere consigli e pareri da altri grafici iscritti a questa organizzazione on line.

Il sito è in inglese ma facile da utilizzare, è divertente ed è un nuovo modo per confrontarsi con altri appassionati e professionisti di grafica.

Mi è servito molto per alcuni dei miei lavori, e spesso mi ha permesso di schiarire dei dubbi su progetti che a seguito di consigli e pareri si sono rivelati dei veri e propri successi per i miei clienti. Lo consiglio a tutti! Buon lavoro!

Autore: Maxselmi Diaz di creativebubbles.net

Questa è una raccolta di 20 tutorials, che comprende parecchie delle spiegazioni importanti per un lavoro grafico professionale in Adobe Photoshop.

Ho raccolto quelli che spiegano alcune tra le funzioni per TEXT EFFECT (Effetti Per Il Testo),  più utilizzate di questo programma.

Nonostante siano scritti in Inglese sono facilmente intuibili anche grazie alle immagini; da questi  potrai imparare molte cose necessarie per facilitare l’utilizzo di Photoshop e velocizzarne i tempi.

Sicuramente esistono dei percorsi alternativi per ognuna di queste funzionalità, ma quelli descritti in questi tutorials sono a mio parere semplici e veloci a tal punto da non indurre l’utente a cercane di alternativi.

Ti consiglio di seguirli con attenzione e provare ad applicarli. Se pensi che qualcosa di questi tutorial possa essere ulteriormente semplificato o se non ti è chiaro qualche passaggio segnalalo tramite i commenti! Buon Lavoro!

1 Grass Text Effect

2 Hell of Tutorial

3 Old School Type

4 Super Cool Frilly Bits Typography

5 Design a Rocket-Powered Retrofuturistic Digital Illustration

6 How to Quickly Create a Stylish Retro Text Effect

7 Recessed Watercolor Typography

8 Wooden Text

9 How to Design a Stunning, 3D, Sunset Type Illustration

10 How to Create a Richly Ornate Typographic Illustration

11 Smokin’ Bullet Holes and a Wanted Sign

12 Candy Coated Photoshop Tutorial

13 3D Flowery Text

14 Create Smokey Typography in 12 Steps

15 Vanity License Plate

16 Design Soft Stylized 3D Type

17 Patch on Clothes

18 Dramatic Text on Fire Effect in Photoshop

19 How to make a Typographic, Retro, Space Face

20 Neon Glow Text

Autore: Maxselmi Diaz di creativebubbles.net

Un Logo schematizza  nella sua istantaneità  ciò che costituisce  l’attività del cliente.  I Loghi devono essere adatti alla stampa e alla rappresentazione su più basi di dimensioni diverse.

L’importanza del Logo è essenziale  essendo il “marchio” di riconoscimento che il cliente sceglie per differenziare  il suo esercizio professionale.

Ho raccolto per te 30 loghi creativi per la tua ispirazione per aiutarti a comprendere appieno ciò di cui ti ho parlato.

Penso che osservare  i lavori di altri sia molto utile per la propria ispirazione. Dimmi che ne pensi tramite i commenti!

Autore: Maxselmi Diaz di creativebubbles.net

E’ molto semplice creare lo stile fumetto su un immagine, bisogna solamente inserire un pattern di mezzitoni. Spesso per questo tipo di effetto è necessario utilizzare Adobe Illustrator, ma per chi non ce l’ha e per  chi non lo sa usare riporterò qui sotto il metodo più semplice da adottare utilizzando Adobe Photoshop.

E’ necessario impiegare dei filtri e qualche metodo di fusione dei livelli.

Apri l’immagine desiderata.

Nel pannello “Livelli” fai clic con il tasto destro del mouse sul livello “Sfondo” e seleziona “Duplica livello” rinomina il livello duplicato e premi OK. Ora apri il menu immagine e seleziona  Regolazioni>Soglia.

Vedrai che l’impostazione predefinita sarà su 128, regola il valore su 50 in modo da creare linee ben definite.

Segui le varie prove  per assicurarti di ottenere il risultato desiderato. Premi OK.

Seleziona il livello a cui hai applicato le impostazioni appena descritte e apri “Filtro>Schizzo>Pattern Mezzetinte”.

Controlla che il pattern sia impostato su “Punto” e regola “Dimensione” e “Contrasto”  per arrivare all’effetto che desideri. Premi OK.

Nel mio esempio ho impostato “Dimensione” su 3 e “Contrasto” su 8.

Ora fai clic con il tasto destro del mouse sul livello duplicato, seleziona “Opzioni Di Fusione”  e imposta il metodo di fusione su “Sovrapponi”.

Per finire duplica il livello di sfondo originale, fai clic con il tasto destro, seleziona “Duplica Livello” e apri “Filtro>Sfocatura>Controllo Sfocatura.

Modifica le impostazioni come preferisci per ottenere il risultato che desideri.

Con questo metodo potrai sbizzarrirti con l’effetto Fumetto. Spero che questo tutorial possa esserti di aiuto. Se conosci un metodo per migliorare lo stile Fumetto o vuoi aggiungere degli accorgimenti, non esitare a riportarlo tramite i commenti. Sarei contento di imparare altri metodi o di migliorare il mio!

Autore: Maxselmi Diaz di creativebubbles.net

Il prossimo novembre tutti i professionisti ed amanti di Photoshop avranno la possibilità di seguire dal vivo uno dei massimi esponenti mondiali del digital imaging in anteprima assoluta in Italia: Katrin Eismann, Photoshop Hall of Fame 2005.

Katrin Eismann è autrice di numerosi libri di successo nel settore ha di recente pubblicato per la Apogeo Fotoelaborazione:

Creatività e tecnica con Duggan Seàn.

Katrin Sarà presente alla tappa conclusiva di “Arrivano i Guru”, insieme ad altri esperti di eccezione come:

Marianna Santoni, Tiziano Fruet, e Giuseppe Andretta.

Un’occasione unica nel suo genere, dato che Katrin viene in Italia per la prima volta in assoluto, confermando l’alto profilo della manifestazione, che l’anno scorso ha portato in Italia un altro indiscusso esperto di Photoshop: Martin Evening.

L’evento si terrà a Roma nei giorni 21 e 22 Novembre… per informazioni ed iscrizioni: Arrivanoiguru.com

Se andrai a questo evento, tienici informati, magari collaborando con me e facendo un live blogging da qui .

Come creare un pianeta con Photoshop in poche mosse con un risultato di sicuro effetto.

Vediamo il video:

Approfondimento del video tutorial su Photoshop

La prima cosa che devi fare è quella di procurarti una texture di base per la superficie del pianeta.
Quella che ho usato io nell’ esempio la trovi qui.

Una volta salvata e aperta, seleziona la texture e definisci un pattern (nell’ esempio io l’ho chiamato “texture pianeta”).

A questo punto sei in grado di cominciare il vero e proprio tutorial.

1. Visto che si tratta di un pianeta io ho scelto un background nero; al limite puoi anche provare con un gradiente nero à blu scuro.
2. Scegli il colore del tuo pianeta; nel nostro caso, è un pianeta roccioso, e quindi io ho preso un marrone; comincia con il tracciare il cerchio e riempilo con un gradiente che sfumi nel nero.
3. Applica al cerchio il pattern che hai creato all’ inizio; mi raccomando, metodo di fusione Multiply, in modo da mantenere visibili i colori di base del cerchio.
4. A questo punto entra in gioco il filtro Spherize; prima di poterlo applicare, devi però duplicare e raggruppare il livello del cerchio (questa operazione è necessaria perché il filtro Spherize non applicherebbe la distorsione al pattern, e quindo con questa operazione si crea un layer “normale” senza effetti speciali). Io ho applicato DUE volte lo Spherize (al 100%).
5. Ora devi dare le ombre e i rilievi al pianeta; per le ombre, basta il gradient overlay in bianco e nero; di nuovo, scegli Multiply come metodo di fusione.
6. Ora è il turno dei rilievi: duplica il livello e sul livello copia applica il filtro Emboss (io ho lasciato i paramerti a 135 gradi, 3px di altezza, e 500%); imposta il metodo di fusione del nuovo livello con i rilievi ad Overlay, e abbassa un poco l’opacità (io l’ho impostata al 70%).
7. Ora unisci il livello con i rilievi con quello sottostante ed applica l’effetto Inner Glow; io ho preso un azzurrino come colore (tu sperimenta pure altri colori se vuoi).
8. Per rifinire la zona d’ombra, di nuovo, duplica il livello e raggruppa; prendi un pennello sfumato e molto grande e e dai l’ombra (ovviamente nera) al pianeta.
9. Per finire, io mi sono divertito ad usare un lens flare al background per ottenere un “effetto sole”, che coi pianeti ci sta sempre bene J

Ovviamente, se vuoi ottenere pianeti diversi, basta scaricare le texture appropriate per la superficie che hai in mente (magari potresti provare a realizzare un pianeta d’acqua) ed applicare lo stesso metodo.

Spero che tu abbia gradito e alla prossima!

Autore: Mauro Cassani di easy-grafica.com, non è un architetto o un informatico, ma un chimico! Realizza siti internet, loghi, illustrazioni e tutto quello che può essere definito “grafica”.

Abbiamo condiviso insieme la creazione grafica del logo di Cinemio.
Grazie a questa interessante condivisione e ai suggerimenti di molti lettori di blographik, abbiamo raggiunto una buona qualità del logo di questo blog sul cinema.

Il passaggio successivo è stata la creazione grafica del blog, dalla scelta dei colori, alla creazione dell’header e alla scelta delle icone.

Di seguito tutti i dettagli del risultato ottenuto.

Qui tutti i passaggi che hanno portato alla realizzazione di Cinemio.it

E terminata “l’ultima fatica” del quarto blog (incluso blographik ) del mio piccolo mini-network .

Dopo aver condiviso con te tutti gli step successivi che hanno portato al termine della creazione del logo di cinemio.it, la fase successiva mi ha portato alla realizzazione del template grafico, che sarebbe poi diventato quello che vedi ora on line (o quasi).

Dopo la realizzazione del template grafico, sono passato all’implementazione della pagina xhtml su wordpress, ed il risultato puoi vederlo tu stesso.

Di seguito, tutti i post pubblicati fin’ora dedicati ai vari passaggi (dal logo a wordpress), che hanno portato a terminare questo blog per cinefili .

Step 1: Realizzazione del logo

In tutti i miei progetti, che siano i classici siti web o i più dinamici blog ,  inizio il lavoro grafico sempre dal logo.

Infatti dal logo prendo spunto per i colori, oltre che per la linea grafica totale del blog.

Visto che la community di blographik inizia a condividere le proprie idee e consigli, per creare il logo di questo blog, ho deciso di partire da alcune bozze, che ho poi migliorato graficamente grazie alle discussioni create via via che il lavoro stava per terminare.

Nel primo post dedicato, ho voluto rendere partecipi i lettori di blographik, chiedendo quali colori potevo utilizzare per un blog dedicato al cinema.

All’interno dell’articolo sono presenti anche link correlati alla scelta dei colori per il web, oltre che gli strumenti web 2.0 utilizzati per ottenere un risultato graficamente gradevole.

Nel secondo secondo post della serie, ho esposto in dettaglio un’introduzione al mio mini blog-network, e le prime 3 bozze del logo di cinemio.it.

Ecco il sondaggio iniziale, in cui i lettori hanno offerto la loro preferenza, e da cui ho tratto le mie conclusioni per creare il risultato finale di questo lavoro grafico condiviso, in pure stile web 2.0 .

Step 2: Creazione del tema grafico del blog

La fase successiva è stata la realizzazione grafica del template del blog.

Dalla scelta dell’header, all’utilizzo delle icone passando per la realizzazione del menu.

Step 3: Ritaglio del template in una pagina xhtml, ed implementazione di quest’ultima su wordpress

L’ultimo step della realizzazione del blog è stato come sempre il più delicato, ma il risultato finale puoi vederlo finalmente on line.

Come vedi, il blog è leggermente diverso dalla bozza inziale.
Per aggiungere un tocco personale e renderlo più attraente non solo dal punto di vista grafico, ho inserito alcune applicazioni e servizi che cercano di rendere questo progetto più interessante, per coloro che vogliono vedere gli ultimi trailer in rete, oppure i migliori film in dvd.

E’ nato il mio nuovo figlio

(Non dirlo a nessuno, ma il mio figlio preferito rimane ancora blographik )

Ora passiamo al successivo blog del network (un lavoraccio fare tutto da solo ),  scoprirai tutto nelle prossime settimane.
In questo caso partiremo da un logo già realizzato, quindi il lavoro sarà un pò meno lungo e faticoso, ma altrettanto interessante.

In questop video tutorial dedicato questa volta a Photoshop, scoprirai come creare in pochi steps un bell’effetto legno con la versione CS2.

Di seguito il filmato con alcuni approfondimenti:

Come creare un effetto legno con Photoshop CS2

Approfondimento

1. Per l’effetto “nuvola”, mi raccomando di scegliere due colori molto diversi tra loro, uno molto scuro e uno molto chiaro. Al limite, puoi prendere il bianco e il nero e poi aggiustare il colore alla fine (passaggio 5) per rendere il marrone del legno.
2. Non esagerare con il livello del noise, e assicurati che sia monocromatico; nel video io ho usato un 15%.
3. Il motion blur è molto importante, perché hai la possiblità di deciderne quella che sarà l’inclinazione delle venature e dei nodi del legno: io ho usato una angolazione leggermente obliqua. Mi raccomando, come prima non esagerare con la sfocatura, altrimenti perdi l’effetto (usa sempre la funziona “preview” quando usi questi tools così ti regoli meglio).
4. Arriviamo al cuore di questo tutorial: il tool Liquify. Ricordati di selezionare la funzione Twirl, che serve per creare l’effetto dei nodi del legno. Comincia da sinistra o da destra, non ha importanza: quello che importa è che passi progressivamente  il pennello da un lato all’altro, senza esagerare (altrimenti otterrai una cosa senza forma!).
5. Ora che hai ottenuto l’effetto legno, gioca coi contrasti e le regolazioni dei colori: puoi ottenere un legno dai colori caldi, oppure un legno chiaro, oppure molto scuro. Ovviamente tutto dipende dal tuo gusto!
6. A questo punto quello che hai ottenuto puoi essere applicato come “clipping mask” a tutto quello che vuoi: nel mio caso, ho creato una semplice scritta (tu potresti disegnare tanti rettangoli e creare l’effetto parquet, per esempio) .

Reputi utile questo video tutorial di Photoshop?

A te la parola, e segui blographik tramite newsletter o feed rss per non perderti il prossimo “video appuntamento” .

Le favicon sono quelle iconcine che compaiono nella barra degli indirizzi del broswer. Sebbene non abbiano un’ effettiva utilità, è bene che un buon sito o blog ne abbia una.

Ecco i dettagli di seguito

Come creare una Favicon in photoshop

di Mauro Cassani

Il primo passo è quello di scaricare l’estensione .ICO per Photoshop.

Una volta scaricato, apri il file .zip e copia il file ICOFormat.8bi nella cartella Adobe\Adobe Photoshop CS2\Plug-Ins\File Formats.
Se avevi già aperto Photoshop, chiudilo e riavvialo.

Ora sei pronto per seguire i restanti step al seguente filmato:

Davvero importante, da ripetere di nuovo:
realizzate un disegno o una scritta molto semplice!

Qualsiasi logo troppo complicato ridotto alle dimensioni  16 x 16 pixel diventa una cosa indecifrabile.

Un giro sul Web per prendere ispirazione ti farà capire meglio di cosa sto parlando .
Il più delle volte noterai che le favicon sono fatte dalle iniziali del nome del sito.

Prova a guardare due siti a caso: Google e Yahoo!

Al prossimo video tutorial!

Autore: Mauro Cassani di easy-grafica.com, non è un architetto o un informatico, ma un chimico!

Realizza siti internet, loghi, illustrazioni e tutto quello che può essere definito “grafica”.

[Recensione] Hai una visione che vuoi portare al mondo in forma di pixel? Unimall, il primo online store in Italia per il settore education, ti offre la possibilità di realizzare il tuo sogno creativo.

Basta mandare un disegno fatto a mano, anche uno schizzo, a tema libero a social@unimall.com fino al 15 luglio.

Qui tutti i dettagli del contest.

Unimall pubblicherà tutte le opere pervenute sulla pagina di Unimall Facebook dove i fan di Unimall e i tuoi amici potranno votare e commentare i disegni preferiti.

Il 20 luglio saranno comunicati i nomi dei primi tre classificati a cui vanno nell’ordine:

• una Wacom Intuos4 L,
• una Intuos4 M,
• una Intuos4 S.

Ai tre vincitori, che invieranno i loro disegni elaborati attraverso le tavolette grafiche Wacom Intuos4 ricevute in regalo, Unimall darà visibilità sul sito oltre a un ulteriore regalo finale.

Per tutti i partecipanti c’è comunque la chance di ricevere una sorpresa che Unimall svelerà su Facebook solo il 20 luglio.

Per conoscere tutti i dettagli visita la pagina dedicata al concorso Wacom Intuos4: Visions to reality .

Siamo alla fase finale della realizzazione grafica di cinemio.it.
Scopri il nuovo tema personalizzato di questo blog che farà parte di un piccolo network di progetti tematici.
Abbiamo scelto insieme il logo del blog, dopo vari step successivi, ho chiesto aiuto per la scelta dei colori del tema grafico, ed ora ecco il lavoro ultimato.

il nuovo tema di Cinemio.it

Avrai ormai capito che voglio condividere con te tutti i passaggi che mi hanno portato alla realizzazione grafica del blog, per offrirti la possibilità di conoscere e capire quanto lavoro c’è dietro la creazione grafica di un blog, senza parlare poi della gestione, della frequenza di pubblicazione, dei metodi di monetizzazione, dell’ottimizzazione del blog nei motori di ricerca etc.

Facendo parte di un network di blog, cinemio.it è solo uno dei progetti a cui sto lavorando, in cantiere e già on line in versione beta , ce ne sono altri 2.
Seguendo blographik, avrai la possibilità di seguire lo sviluppo di questo progetto per ogni singolo blog, dall’inizio alla fine.
Potrai inoltre partecipare attivamente alla realizzazione tramite i tuoi consigli, che fin’ora sono stati davvero utili  .

La creazione dell’header

Iniziamo con qualche informazione più tecnica, come la creazione dell’header.
Ho voluto offrire a colpo d’occhio un’immagine immediata, fornendo graficamente dei simboli che permettessero di intuire ciò di cui tratta il blog senza leggerne neanche una riga.

In pratica, ho cercato di rendere immediata la percezione dei contenuti.

Il primo impatto ha un ruolo fondamentale per coloro che accedono su un nuovo blog o sito web. Il contenuto è sempre il principale traino di un blog, ma la grafica di qualità segue di pari passo.

Ecco perchè ho scelto di inserire uno sfondo ripetuto di una tenda, che potrebbe ricordare proprio l’entrata della sala di un cinema.
Inoltre, dal punto di vista del caricamento del blog, utilizzare uno sfondo ripetuto tramite css, mi permette di inserire una piccola immagine che duplicandosi, forma la tenda che vedi.
In questo modo, non vado a sovraccaricare il tema con immagini molto pensanti, facilitando il caricamento della pagina o dell’articolo.

Inoltre, ho modificato e aggiunto al logo uno sfondo, per rappresentare un pò il luccichio delle luci di una proiezione cinematografica, come se fosse la locandina di un vero cinema .

Per il menu ho scelto di utilizzare qualcosa che ricordasse il nastro della pellicola cinematografica, anche se rosso, potrebbe dare un tocco di originalità rispetto agli altri progetti presenti in rete, e differenziarsi dalla grafica che accomuna tutti i blog del mio network.

La scelta dei colori

Seguendo anche i consigli nei commenti dei post precedenti, ho scelto dei colori che portano alla memoria proprio un cinema, con il “rosso velluto” della tenda (come il palco di un teatro), l’arancio delle stelle delle icone o il giallo delle stelle dello stesso logo.
Il grigio scuro del testo, per offrire un maggiore contrasto tra sfondo e testo, per rendere più fruibile e meno difficoltosa la lettura.
L’obiettivo del blog è anche quello di essere letto il più a lungo possibile per il maggior numero di articoli.

il rosso dei titoli degli articoli, utilizzato per legare lo stile grafico dell’heander e per creare una maggiore distinzione con il resto del contenuto testuale.

L’utilizzo delle icone

Le icone fanno al differenza tra un progetto curato e professionale da un blog amatoriale.
Un fattore quindi da non sottovalutare nella realizzazione di un blog di qualità.

Spesso si tralascia la potenzialità di utilizzare delle icone correlate, che ben rappresentino una determinata funzione.
Un esempio concreto, l’icona del feed rss.

Altri esempi, le stelle della lista nella sidebar a destra, che potrebbero rappresentare le star del cinema.

Il megafono che affianca il link per continuare la lettura del blog. Uno strumento utilizzato dai registi per far partire una scena, e quindi correlato all’azione da intraprendere al click sul link, per leggere l’intero contenuto dell’articolo.

Nel prossimo step, ti segnalerò il lavoro ultimato direttamente on line (ad ora è tutto su carta, o meglio su schermo ), e le scelte editoriali e di monetizzazione del progetto.

Visto che anche i lettori di blographik mi hanno aiutato, cosa ne pensi di questo lavoro?

Siamo al secondo step in merito alla creazione di un layout professionale per cinemio.it, un progetto legato al cinema ed alle recensioni di film in anteprima o appena usciti, che farà parte del mio micro – network di blog.

Come promesso, con blographik avrai la possibilità di partecipare attivamente e seguire tutti i passaggi che porteranno alla realizzazione grafica di tutti i progetti in cantiere, iniziando da questo blog sul cinema.

Vediamo in dettaglio a che punto siamo con questo lavoro.

Se hai seguito blographik nelle scorse settimane, avrai notato che ho intrapreso l’iniziativa di mostrarti come lavoro nei miei progetti, soprattutto in merito a questo piccolo network di blog.

Il primo step è stata la realizzazione del logo di cinemio che ha riscosso molta partecipazione da parte dei lettori di blographik.

ora passiamo al secondo step…

La scelta dei colori del blog

Essendo un blog network, ho deciso di mantenere una linea grafica omogenea e cambiare esclusivamente il logo, i colori tramite css e le icone correlate.

Ho terminato da tempo 2 blog di questo progetto, che come noterai hanno la stessa architettura dell’informazione.

Eccoli in dettaglio:

• ilManicaretto.it (blog sulla cucina);
• Matrimonio-Sposa.it (blog sul matrimonio e la sposa).

Il successivo lavoro sarà proprio su cinemio.it, ora non resta che scegliere i colori per questo progetto sul cinema.

La base di partenza per le modifiche sarà ilmanicaretto.it, da cui partirò.

Creerò un layout di cinemio con Photoshop, avendo appunto come base ilmanicaretto.it.

Quali tools utilizzare per la scelta dei colori?

Su blographik ho parlato più volte di risorse sui colori e tools on line per una scelta oculata e corretta.

Seguirò gli stessi consigli che ho pubblicato tempo fa.

Questi alcuni articoli in merito:

Se non vuoi impazzire alla ricerca di risorse sui colori, ecco una lista di qualità;

Suggerimenti e risorse per la scelta dei colori per una corretta accessibilità;

Utility sui colori: schemi, software gratuiti e letture correlate;

Per Cinemio sceglierò di utilizzare Kuler della Adobe, un servizio on line che mi permetterà di guadagnare tempo prezioso.

Vogliamo scegliere insieme i colori di Cinemio?

Vista la larga partecipazione alla creazione del logo, continuiamo su questa linea per partecipare attivamente alla scelta dei colori del blog.

Se vuoi partecipare ecco cosa puoi fare:

• Vai su adobe.kuler.com;
• crea la tua palette di colori;
• inviami il link della palette di colori che hai creato, nei commenti di questo articolo.

A me piacerebbero colori caldi, esclusi i rossi scuri che sono già utilizzato per ilmanicaretto.it.

Vorrei che il blog emanasse una sensazione di pausa caffè, quindi i colori correlati al caffè come il marrone scuro o simili, non sarebbero male.

Comunque sono aperto a tutti i consigli e le soluzioni possibili.

Ora tocca a te!

Partecipa a questa nuova sfida, sceglieremo poi insieme il colore più adatto tramite un sondaggio o in base ai commenti che riceverò.

Grazie anche all’aiuto dei lettori di blographik, abbiamo deciso e raggiunto la versione definitiva del logo di Cinemio.it.
Di seguito i motivi che ci hanno portato a scegliere questa grafica, a cui sono state apportate altre piccole modifiche.

Se hai seguito gli step per la realizzazione del logo di questo blog sul cinema, saprai anche che ho apprezzato molto l’aiuto dei lettori di blographik, che hanno suggerito molti consigli che sono stati in parte ascoltati .

Ecco i vari passaggi dalle versione 3 e 4 delle precedenti bozze, che hanno portato a questo risultato.

I motivi per cui è stato scelto questo logo:

• abbiamo deciso di optare per il logo simbolo + testo, in modo tale da seguire la stessa linea grafica degli altri 2 progetti terminati del mio network di blog.
• la scelta della tag line potrebbe essere uno svantaggio in quanto già da ora, su cinemio.it sono presenti dei collaboratori, e quindi la frase “il cinema secondo me“, potrebbe non essere corretta.Riteniamo  comunque che questa tag line identifica un blog, in cui ognuno può esprimere il proprio parere personale (e quindi il cinema secondo me, che leggo o che partecipo al progetto), sia come collaboratori che lettori.Ad ora non conosciamo lo sviluppo di questo blog di appassionati di cinema, ma ad ora riteniamo che sia la scelta migliore.
  Poi è un’attimo a modificarlo .
• la cinepresa è rivolta verso l’esterno, poichè pensiamo che questa debba rappresentare il cinema nel senso più ampio del termine, e quindi rivolgerla verso il testo avrebbe dato maggiore peso e risalto allo stesso blog, che è solo una parte del mondo cinematografico. In questo caso sarebbe da disquisirne per ore, ma prima o poi dovevamo decidere .

Visto che molti lettori hanno partecipato a suggerire i propri punti di vista in merito, aspetto un tuo parere finale: critico va bene, offensivo ovviamente verrà subito cassato.

Come già segnalato in precedenza, questo è solo il primo passaggio per la creazione del layout definitivo, ora bisogna decidere insieme i colori da scegliere per questo blog cinematografico, successivamente ci saranno altri loghi da decidere insieme .

Al prossimo appuntamento, rimani sintonizzato/a, anche tramite la newsletter di blographik.

Partecipa a questo sondaggio per votare e scegliere quale logo preferisci tra le seguenti 4 bozze, il logo che riceverà più punti verrà utilizzato per la grafica di cinemio.it, blog sul cinema del mio futuro network di blog.

Come partecipare a questo sondaggio

Se non hai letto la discussione di ieri, ti consiglio di consultarla prima di andare avanti, soprattutto leggi i numerosi commenti dei lettori di blographik che hanno partecipato al mio invito a dire la loro opinione in merito alla creazione di alcune bozze di loghi per la grafica di un blog sulle recensioni cinematografiche, che farà parte del mio futuro piccolo network.

Ecco le aggiunte o le modifiche che ho apportato in base ai commenti del post di ieri.

Nella prima bozza (quella più gettonata fin’ora ) che osserverai di seguito, ho ingrandito le stelle all’interno della cinepresa per renderle più evidenti e fumettose, in fondo si parla anche delle stelle del cinema straniero ed italiano.

Ho preferito non inserire una tag line nella prima bozza, volevo renderla il più semplice possibile visto che ha già un simbolo molto ricco a livello grafico.

Ecco il risultato.

Nella seconda bozza, come suggerito da Mario nei commenti della discussione del post di ieri, ho riflesso la cinepresa, ora si rivolge verso l’interno del blog.
Mi sembra un’idea interessante che ho voluto testare e questo è il risultato.
L’idea potrebbe essere interessante anche per mettere in risalto un’eventuale pubblicità alla destra del blog, un metodo diverso di attirare l’attenzione su banner che ormai sono poco cliccati , la cinepresa si rivolgerebbe al banner come per suggerire contenuti interessanti da visitare.

Nella terza bozza ho inserito la tag line, come suggerito nei commenti anche da EmaWebDesign per rendere più univoco e personalizzato il messaggio di un blog creato da appassionati del settore.

La tag line, “il cinema secondo me“, rafforza anche l’idea di un blog gestito da persone il cui scopo non è vendere un film ma offrirne un giudizio del tutto personale, aperto a tutti con lo scopo di discuterne nei commenti.

Nasce come blog gestito da una sola autrice cinefila, che recensisce i film visti da lei durante la settimana.
Si svilupperà poi con altri collaboratori, ma la gestione del blog, la responsabilità e la linea editoriale è sempre di una sola persona.

Questa terza bozza, pone maggiore risalto al testo che è anche il nome del blog e la sua relativa url.

Potrebbe essere interessante quest’opzione in quanto permette di rendere più ricordabile il nome del blog, per un effetto più virale che permetta un suo utilizzo anche off line.
Sono stati utilizzati 3 colori, 2 per il testo, per rendere separata l’idea/linea editoriale del cinema (Cine) e del giudizio personale (Mio).

Come suggerito anche da Roberta Fabbri, nei commenti di ieri, ho scelto diversi colori per il testo, poi vedremo nel sondaggio, il logo preferito. In questa opzione, ho scelto di inserire un doppio colore nero-rosso.

Questà è  le terza bozza.

In questa quarta ed ultima prova, ho creato una fusione delle bozze precedenti.
Ho modificato il colore del testo, non più nero-rosso ma nero-arancio, ho invertito l’orientamento delle cinepresa che ora è rivolta verso il testo e non più verso l’esterno, anche per dare maggiore risalto al titolo ed ho scelto di provare a non inserire la tag line, per verificare se una grafica più pulita renda meglio l’idea.

Ecco l’ultima prova.

Ora tocca a te, partecipa nei commenti e scegli il tuo logo preferito

E’ il momento della verità , rispondendo nei commenti potremo scoprire quale sia il logo preferito dai lettori di blographik.

Di la tua e se vuoi, potremo parlare dei risultati qui sotto.

Volevo conoscere il tuo parere su queste bozze di loghi che sto realizzando in merito a cinemio.it, uno dei blog del mio futuro network.

Le immagini che vedrai di seguito sono delle bozze, ed è solo la prima parte di una serie di articoli dedicati alla realizzazione passo passo del mio blog network, partendo appunto dalla grafica del vari progetti in corso.

Puoi suggerire il tuo punto di vista nei commenti dell’articolo per approfondire i vari aspetti del logo, ti chiedo inoltre di potere rispondere a questo breve sondaggio per capire quali delle seguenti 3 bozze preferisci (credo di sapere già la risposta ).

Una piccola introduzione su questo futuro network di blog

Da molto tempo ormai, avevo intenzione di creare un mio personale network di blog, in cui mi affido a collaboratori seri e preparati che conosco bene, per creare una serie di progetti a tema su uno specifico argomento.

Lo scopo inziale è di associare ad ogni blog un collaboratore principale, che si occuperà della pubblicazione degli articoli e di rispondere ai commenti.
Io mi occuperò della parte tecnica, della formazione dei collaboratori a bloggare in modo corretto (secondo la mia esperienza ed il mio punto di vista), della stesura di una linea editoriale ben precisa e ovviamente anche della creazione grafica di ogni singolo blog.

Gli elementi grafici che uniscono questo progetto

Essendo un blog designer, mi sono imposto di realizzare una grafica comune per tutto il network che differisca nei colori nelle icone e nel logo.
Ogni blog quindi avrà una struttura in xhtml simile, per rendere riconoscibile questo network, ma con colori e loghi diversi.

I primi due blog terminati

Per farti capire meglio di cosa sto parlando, ho terminato la realizzazione grafica di 2 blog che sono on line da anni, ma che solo negli ultimi mesi hanno ora una grafica terminata, che sarà la stessa proprio di questo network.

Volevo condividere con te, tutti i passaggi che mi porteranno alla creazione di questa serie di blog tematici, dalla creazione del logo di ognuno di loro, allo sviluppo della grafica personalizzata.

Quindi questo è solo il primo di una serie di articoli dedicata a questo progetto, per me importante a cui tengo molto.

Ad esempio ad ora, cinemio.it, utilizza ancora un layout gratuito, ma occorreva che fosse subito on line, per inziare a posizionarlo nei motori di ricerca, anche se nel frattempo  non sono riuscito a lavorarci su.

Matrimonio-sposa.it (blog aziendale sugli abiti da sposa e sul matrimonio), è il primo blog che abbia mai realizzato su piattaforma blogger passata poi a wordpress (per ovvi motivi ); è stato messo on line circa 4 o 5 anni fa, se non ricordo male.

Ecco com’è ora, anche se mancano ancora alcuni dettagli importanti come la pagina “chi siamo”, “contatti” e via dicendo , il grosso del lavoro è finito.

Ilmanicaretto.it, (blog enogastronomico) è stato realizzato successivamente e come puoi notare, ha un layout simile, contraddistinto solo dal logo, dai diversi colori utilizzati, e dalle icone che ovviamente non potevano essere simili .

Questo è il risultato finale.

Fammi sapere il tuo parere su queste 3 bozze di loghi

Ora veniamo alla domanda che ti ponevo nel titolo di questo articolo in merito alla realizzazione grafica del logo di questo blog cinefilo.

Le seguenti 3 bozze sono state realizzate in vettoriale da me ieri sera.

Avevo un buco libero ed era da molto tempo che dovevo inziare a creare il logo del progetto in corso.

Parlando anche con l’autrice del blog, a lei sarebbe piacerebbe un logo che rappresenti la classica telecamera cinematografica, oppure un bel bicchierone di carta con cannuccia e coperchio delle classiche bevande che si trovano al cinema oppure, una mega porzione di pop corn.

Per questa prima bozza, ho deciso di scegliere una telecamera stilizzata ed inserire all’interno, come fosse un’adesivo, il nome cinemio.
Per le altre 2 prove, ho scelto di porre maggiore risalto al testo rispetto al simbolo della telecamera.

Le stelle inserite all’interno della telecamera o al posto del punto sulla “i” di cinemio, dovrebbero rappresentare le star del cinema di cui si parlerà ovviamente nel blog.

Ecco le 3 bozze

Anche in base ai tuoi consigli e suggerimenti, apporterò le modifiche necessarie o realizzarò un logo completamente diverso.

Se vuoi seguire tutti gli step nel corso dei prossimi mesi sulla creazione di questo blog netowrk, dalla creazione grafica dei loghi al layout, abbonati alla newsletter o iscriviti al feed rss di blographik.

Aspetto un tuo commento, le critiche sono ben accette se costruttive altrimenti verranno eliminate.

Nel caso fossi interessanto a consultare degli ebook sulla grafica vettoriale e non solo, Davide Vasta ha pubblicato altri 2 ebook interessanti riguardo a come progettare un marchio e come creare oggetti 3d con Illustrator, cun un gradito premio ad estrazione.

Fino al 28 Febbraio 2009, chiunque acquisti uno di questi due ebook:

Progettare un Marchio

Creare oggetti 3D con Illustrator

Potrà partecipare all’estrazione di un iPod Shuffle, che si terrà il giorno 3 Marzo 2009.
Davide, renderà pubblico il fortunato vincitore sul suo sito, che riceverà a casa il sui premio!

Chi fosse interessato, può andare sulla pagina del concorso un Ebook per un iPod, dove è spiegata la procedura che bisogna seguire per iscriversi.

Buona lettura… e buona fortuna!

In questo articolo un nuovo video tutorial di Salvatore Mancini, che mostra come utilizzare le maschere di livello con Photoshop CS4.

Di seguito, oltre al video potrai leggere anche una versione riassuntiva testale del tutorial.

Come Utilizzare le maschere di livello in Photoshop CS4

di Salvatore Mancini

Le maschere di livello ci consentono di eliminare gli elementi di un livello senza cancellarne effettivamente i pixel dell’immagine.

Il vantaggio è che sono modificabili in qualsiasi momento.

In Photoshop è possibile aggiungere maschere di livello in qualsiasi livello, ad eccezione dello sfondo.
Possiamo ovviare facilmente a questa restrizione cliccando 2 volte sul livello e scegliendo ok, oppure ci basta duplicarlo.

Dopo aver creato una maschera di livello è possibile modificarla con gli strumenti di disegno e pittura che conosciamo (filtri, pennelli, etc…).

Dobbiamo sempre ricordare una cosa:
con il nero andiamo a nascondere i pixel, con il bianco li riveliamo, con il grigio si creano livelli di trasparenza a seconda della percentuale di grigio utilizzata (un grigio 50% corrisponde ad un’ opacità del 50%, possiamo vedere un esempio nel video)

Con il tasto “Maiusc” possiamo disattivare la maschera in qualsiasi momento, con il tasto “Alt” si entra nella maschera, il che ci permette di effettuare modifiche agendo direttamente sulla stessa.

Possiamo agire sulla maschera selezionandone una parte o tutta, sfumando la selezione, cambiarne i bordi, le modifiche si ripercuoteranno sull’immagine in cui la maschera è applicata.

Si possono creare effetti speciali con lo strumento maschera testo orizzontale o verticale, basterà scrivere qualcosa all’interno per esempio di un’immagine e applicare la maschera, la parte selezionata avrà come riempimento l’immagine stessa.

Alcuni di questi esempi possiamo vederli nel video.

Uno dei miei layout preferiti in merito al blog design è sicuramente lo stile magazine.

Creare un blog/sito ben disegnato, che permetta una buona usabilità che offfre contenuti di qualità è un compito molto difficile.

I temi per blog creati da designer esperti possono spesso essere fonte di ispirazione.

Infatti anche i blog si trovano spesso ad affrontare la sfida di visualizzare molti contenuti, cercando però di mantenere un gradevole layaut.

Ecco 25 esempi che potrebbero esserti utili per i tuoi lavori o per il tuo blog.

25 esempi eccellenti di design in stile Web Magazine

01.  Clutch Magazine

02. Loop

03. Good

04. BlackBook

05. Boxwish

06. Macalicious

07. Giant Magazine

08. Vanity Fair

09. Frieze Magazine

10. Conde Nast Portfolio

11. New Yorker

12. The Morning News

13. Rua de Baixo

14. New York Magazine

15. WWD

16. Dazed Digital

17. UX Magazine

18. Ad Age

19. Space Collective

20. San Francisco

21. TheHotMag

22. Creative and Live

23. Wired

24. People

25. Inc. Magazine

• Quale di questi web magazine preferisci e perchè?

A te la parola nei commenti .

fonte: Vandelaydesign.com