Convertire automaticamente un file Photoshop in un template WordPress

Molti di voi credo l’abbiamo già sognato, poter trasformare automaticamente un file photoshop in un template per wordpress. E’ in effetti il lavoro più tecnico e meno creativo durante il processo di creazione di un template grafico. Servono conoscenze di XHTML, Javascript e CSS che non tutti hanno. Ecco allora PSD2CSS Online, un’applicazione web che accetta il PSD ed elabora automaticamente il relativo template, già pronto per essere caricato nella cartella /themes di wordpress.

psd2css

Continua a leggere

Bottoni Web2.0 per Photoshop

Bottoni scaricare psd

Oggi vi segnalo Button-Download.com, una bella raccolta di bottoni da scaricare. Sono i classici bottoni che troviamo nelle pagine web per confermare (submit) i dati inseriti nei moduli (form). In totale sono una ventina, tutti in perfetto stile Web 2.0.

La risorsa è interessante soprattutto perchè, oltre al download dell’immagine in formato PNG, l’autore mette a disposizione anche il file sorgente PSD per Photoshop. In questo modo sarà possibile personalizzarlo in modo ottimale e soprattutto sarà possibile modificare l’etichetta con un più italico "Invia i Dati".

Creare un tema per WordPress partendo da zero

Vi segnalo un buon tutorial di ThemeTation che spiega passo a passo come creare un proprio tema per WordPress partendo da zero. L’autore dell’articolo, Kai Loon, tratta meticolosamente ogni argomento, dalla struttura di un blog, al design grafico con Photoshop, dalla costruzione dell’HTML con fogli di stile all’implementazione su WordPress.

Temi per WordPress

Le parti più interessanti sono sicuramente lo studio del design in cui mostra come disegnare con Photoshop un layout grafico e la trattazione di ogni singolo file necessario a WordPress (header.php, sidebar.php, about.php, footer.php, index.php, featured-post.php, page.php, single.php, comments.php, archives.php, links.php, search.php, searchform.php, function.php e image.php).

A corredo del tutorial, Kai Loon mette a disposizione due file da scaricare: il PSD per Photoshop con già le guide impostate per poter ritagliare le immagini e lo ZIP contenente i 2 file HTML dai cui ricavare tutti gli altri del template

JCrop, ritagliare le immagini con JQuery

Il Javascript domina il web, soprattutto dopo la nascita di framework quali JQuery. Le applicazioni che lo usano sono sempre più complesse. L’ultimo nato è Jcrop, un plugin per JQuery che permette agli sviluppatori di implementare agevolmente un sistema per ritagliare le immagini online, “crop” appunto. Il sistema è completamente visuale, interattivo e del tutto simile al cropping di Photoshop.

Per vederlo all’opera, sul sito troverete alcuni esempi di come funziona. E’ chiaro che se viene messo in coppia con la libreria GD di PHP, il gioco è fatto perchè sarà  possibile salvare lato server le immagini ritagliate.

Jcrop, ritagliare le immagini

Ecco alcune caratteristiche del plugin:

  • Jcrop è molto piccolo (circa 9KB compressi)
  • Look and feel del tutto simili alle applicazioni desktop (vd. Photoshop)
  • Compatibile con i principali browser, compreso IE6+
  • E’ possibile utilizzare i tasti veloci
  • Possibilità  di mantenere le proporzioni dell’immagine nell’area di taglio
  • Sono supportati i fogli di stile
  • Le API includono metodi per l’animazione

Jcrop è composto da 3 file, ma nello ZIP troverete anche i file di demo e il codice php.

Il Web 2.0 in tasca: 5 servizi da veri blogger!

In questo articolo, segnaleremo e recenzioneremo alcuni dei migliori servizi del Web 2.0. Alcuni probabilmente già li conoscerete, altri invece, no. Ciò che è certo, è che ogni blogger/web master che si rispetti, dovrebbe avere un account di ognuno di questi servizi.

Getclicky – Questo sito internet, offre un servizio di statistiche, in style web 2.0, nettamente migliore a Google Analytics. Premetto che non è completamente gratuito. Esistono più versioni. Quella base è gratuito e vi mette a disposizione di tutti gli strumenti per monitorare ottimamente il vostro sito internet, fornendovi inoltre la possibilità, di controllare le visite in real time, (a differenza di analytics). Poi ci sono altre tre versioni, Blogger, Professional e Professional Mega Edition, a pagamento. Con queste versioni, potrete sfruttare il servizio spy, grazie al quale potrete spiare il vostro sito internet e vedere che si sta connettendo. Inoltre, attravero l’IP, potrete assegnare un nome. Quindi, se sappiamo che l’indirizzo ip 111.111.1.111 corrisponde a pippo, grazie a getclicky, potremmo sapere quante volte ci visita pippo quotidianamente, quando ci visita, cosa visualizza ecc… E’ una delle funzionalità più allettanti di questo servizio. Inoltre, potrete esportare le vostre statistiche nei formati CSV, XML, e JSON. Ogni versione, ha un costo differente, si parte dai 3 dollari al mese, (meno di due euro), fino ad arrivare ai 16 dollari al mese. Qui sotto, i loghi di alcuni dei siti internet che utilizzano questo servizio, di statistiche:

web2.0

CrazyEgg – Altro servizio di monitoraggio, che vi permette però, di conoscere con estrena precisione, il numero di click, ricevuti da un dato link, in una data pagina. In questo modo, potremo individuare le zone calde del nostro sito internet e capire dove sarà meglio, posizionare i nostri box AdSense, servizio veramente impeccabile, che consiglio a tutti. Come nel precedente, anche in CrazyEgg, esistono anche versioni a pagamento.

 crazyeggs

Adobe Photoshop Express – Probabilmente conoscerete il famoso software di grafica digitale Photoshop. Bene, Adobe, ne ha rilasciata una versione online, in pieno stile web 2.0, grazie alla quale, potrete modificare, le vostre immagini direttamente online. Certo, non sono presenti TUTTE, le funzionalità di Photoshop, (ad esempio mancano i filtri), ma buona parte, ne sono state integrate e questo lo rende un ottimo servizio, (anche perchè è completamente gratuito).

adobe photoshop express

Blip.tv (beta) – E’ ancora in versione beta, ma ha tutte le carte in regola per essere uno dei migliori player online mai realizzati, (a mio parere il migliore). Una volta aperto il nostro account, potremo caricare tutti i video che vogliamo, del peso che vogliamo e della durata che vogliamo. Ciò inoltre che mi affascina è la grafica del player, semplice, ma allo stesso tempo accattivante. Se siete dei video publisher o se comunque il video è la vostra passione, provare Blip è varamente d’obbligo. Il servizio è ancora in fase beta, ma registrarsi non dovrebbe recarvi troppi problemi 🙂

blip

Gmail – Ok, qui ho esagerato con lo scontato, ma Gmail, è l’unico servizio di posta elettronica, style web 2.0, degno di questo nome. Per non cadere nel baratro del banale, vi segnalo Gmail Redesigned 2.0, grazie al quale potrete rinnovare la veste grafica del vostro Gmail, rendendola più fresca.

gmail

VideoTutorial Photoshop n°2: effetto matita (parziale)

Descrizione

Come promesso, ecco un nuovo video tutorial per Photoshop, in cui vedremo, adottando alcuni filtri del software, come realizzare un effetto matita. In fine, aggiungendo una maschera vettoriale, renderemo parziale questo effetto, realizzando quindi un immagine molto suggestiva. Per problemi o curiosità non esitate a lasciare un commento!

videotutorial021.jpg

Buona visione

Materiale Correlato

VideoTutorial Photoshop n°1: come creare un wallpaper

videotutorial1.jpg

Oggi, con questo articolo, inauguriamo una nuova rubrica di Dyamick, che metterà a disposizione di tutti alcuni video tutorial grazie ai quali potrete imparare ad utilizzare il famoso programma di grafica Photoshop.

Ad ogni video tutorial sarà correlato:

  • L’anteprima finale del lavoro, in formato .jpg
  • Possibili font o pennelli utilizzati (brush)
  • Il file .PSD, con i livelli separati

Primo videotutorial: realizzare un wallpaper

In questo primo video tutorial impareremo a realizzare un vero e proprio wallpaper, con Photoshop, partendo da zero. E’ il primo della serie e per questo utilizzeremo le funzionalità base per permettere ai meno esperti di poterci seguire. I video tutorial successivi presenteranno tecniche e conoscenze via via sempre più avanzate.

Materiale correlato

File .PSD del video tutorial n°001

Font “Steve Handwriting“, utilizzata, per realizzare la scritta “.it”