Home Page

24 Ottobre 2007

Layer comps. in Photoshop: un must per i web designer

I Layer Comps non sono una vera e propria novità in Photoshop: sono stati introdotti a partire dalla versione CS ma personalmente inizio a utilizzarli seriamente solo dalla versione CS3. Secondo me sono utilissimi e permettono un risparmio notevole di tempo nella fase di creazione di layout web complessi in cui è necessario progettare stati/configurazioni diverse dello stesso layout (ad esempio uno per la homepage e uno per ogni altra pagina del sito). Rappresentano un diverso modo di gestire i layer (livelli): il “vecchio metodo” costringeva il designer a utilizzare tantissimi layer o a raggrupparli all’interno di cartelle una per ogni configurazione ed eventualmente a marcare con dei colori i livelli corrispondenti a uno stesso stato… un lavoraccio. Ma ora i layer comps. ci vengono in aiuto e ci fanno risparmiare tantissimo tempo.
Per farvi capire concretamente il loro funzionamento prendo come esempio uno degli ultimi progetti che abbiamo realizzato in Webgriffe: il sito web di JDentalCare Srl.

Fig.1Abbiamo iniziato (vedi fig.1) progettando la home page e raggruppando i vari livelli in cartelle per una maggiore pulizia del file di progetto. Il cliente voleva avere una idea di come poter in futuro implementare la visualizzazione di prodotti da mettere in evidenza in home page, così la prima cosa che si sarebbe fatta nel vecchio metodo sarebbe stata quella di creare una nuova cartella di livelli duplicando quella della Home e modificarla di conseguenza… ora non più. Basta accedere al tab Layer Comps. (Window > Layer Comps) e con il pulsante in basso “Create New Layer Comp”.

Fig.2

A questo punto una finestra vi pone alcune scelte (vedi fig.2):

  • Name: il nome che volete dare a questa configurazione (HOME)
  • Visibility: memorizzare lo stato visibile o nascosto dei livelli
  • Position: memorizzare la posizione dei livelli
  • Appearance: memorizzare gli stili applicati ai singoli livelli
  • Comment: una descrizione libera

Dopo aver cliccato su OK ci viene creato il Layer Comp. HOME che ha “fotografato” lo stato attuale del nostro pannello Layer e di tutti i livelli in esso contenuti, comprese le loro posizioni, visibilità ed eventualmente gli stili associati. A questo punto per fare la nuova versione della home page non dobbiamo far altro che tornare nel pannello livelli e spostare o creare nuovi livelli. Alla fine della modifica torniamo nella finestra Layer Comp. e creiamo la nuova configurazione HOME PRODUCTS. Ora possiamo attivare l’una o l’altra configurazione e di conseguenza vedremo sullo stage i due diversi layout creati. La bellezza di questo metodo sta nel fatto che potete spostare a piacere i livelli e salvarne le posizioni: questo vale anche per gli smart objects ovviamente e non c’è più bisogno di duplicare livelli ma si usano sempre gli stessi spostati e nascosti all’occorrenza.
nel nostro progetto abbiamo poi realizzatola sezione PRODUCTS, PRODUCTS DETAILS e COMPANY (vedi fig.3).

Fig.3

Pensate ad esempio alla comodità di spostare a piacere il footer di una pagina quando il layout è di tipo verticale e si adatta al contenuto: un unico layer in cui è definito il footer potrà essere spostato a piacere e “registrato” nei diversi Layer Comps.

Ma la bellezza dei Layer Comps. non finisce qui.
Pensate a quando, giunti al termine della fase di progettazione, si devono esportare i singoli screenshot per realizzare una presentazione (PDF, HTML ecc.) da mostrare al cliente. Anche in questo caso Photoshop ci viene in aiuto: apriamo il menu File > Scripts e troviamo una serie di automatismi (vedi fig.4).

Fig.4

Le opzioni a disposizione sono le seguenti:

  • Layer Comps to Files… : esporta i singoli Layer Comps. in differenti formati immagine (JPG, PNG, BMP, TIFF ecc.)
  • Layer Comps to PDF… : crea una presentazione PDF con i Layer Comps. selezionati
  • Layer Comps to WPG… : crea una Web Photo Gallery con i Layer Comps. selezionati

A voi ora provarli e a scrivere cosa ne pensate.

Pubblicato in Portfolio, Creatività, Grafica, Training/Workshop, Design, Photoshop | 1 Commento »

17 Gennaio 2007

Case history: Brand Solution

Apriamo la categoria “Case Histories” con un progetto che ci ha dato molte soddisfazioni nella sua semplicità: www.brandsolution.it
Il progetto prevedeva lo studio della nuova brand identity di Brand Solution (leader nella distribuzione di prodotti di alta qualità per l’infanzia) e in particolare la realizzazione di un minisito B2B e B2C in grado di comunicare in modo semplice e immediato le informazioni riguardanti l’attività Aziendale e i marchi distribuiti.

Per lo sviluppo dell’area pubblica del sito si è scelta una soluzione interamente realizzata in Flash Professional 8 con un layout liquido in grado di adattare i contenuti grafici e testuali per risoluzioni a monitor superiori a 800×600. Sono stati scelti caratteri molto grandi per i testi e ottimizzata la leggibiltà di questi ultimi grazie alle avanzate opzioni antialias del Flash Player 8.

Prendiamo come pretesto il progetto Brand Solution per analizzare dal punto di vista tecnico alcune soluzioni Actionscript adottate per il front-end. Vediamo ad esempio come è stato gestito il layout liquido in Flash e il riposizionamento tramite Actionscript dei singoli elementi grafici e testuali che si rende necessario quando l’utente modifica le dimensioni della finestra del browser.

stageListener = new Object();
stageListener.onResize = function() {
	adaptStage();
};
Stage.addListener(stageListener);
function adaptStage() {
	bgMenu._x = 0;
	bgMenu._width = Stage.width;
	txtCompany.autoSize = "left";
	txtCompany._x = 200;
	txtCompany._width = Stage.width-txtCompany._x-30;
	txtCompany._y = (Stage.height-230)/2;
}

Si nota che viene istanziato un Listener in grado di rilevare l’evento onResize dello Stage per poi chiamare la funzione adaptStage() che non fa altro che contenere al suo interno tutte le istruzioni che andranno a modificare le varie proprietà dei movieClip interessati dal resize. Nell’esempio è mostrato come viene adattata la banda orizzontale in testa alla pagina (bgMenu) e come viene ridimensionato il campo di testo txtCompany presente nella sezione “Company Profile”.

L’effetto elastico che si ottiene al rollOver sui singoli loghi in home page è invece stato realizzato utilizzando le classi mx.transitions in dotazione con il software inserite all’interno di un prototype che estenderà la classe movieClip. Vediamo come:

MovieClip.prototype.ZoomBrand = function(starting, ending) {
	myTween1 = new Tween(this, "_xscale", mx.transitions.easing.Elastic.easeOut, starting, ending, 1, true);
	myTween2 = new Tween(this, "_yscale", mx.transitions.easing.Elastic.easeOut, starting, ending, 1, true);
}

Come si nota sono stati parametrizzati i valori iniziale e finale della transizione (starting, ending) in modo da adattare al singolo caso e al singolo uso l’effetto desiderato. Abbiamo utilizzato in questo esempio le classi mx.transitions preventivamente importate nel nostro movie nel modo seguente:

import mx.transitions.*;
import mx.transitions.easing.*;

Per quanto utili e ottimizzate queste classi ci sentiamo di consigliare un altra interessante e potente libreria di Tween che mette a disposizione una vasta gamma di classi molto più estesa del pacchetto nativo in Flash perché integra gli effetti di Flash8 e le equazioni di Robert Penner: stiamo parlando del kit Fuse. A voi provarlo e scoprirne le potenzialità.
Per concludere chiudiamo con le parole di Edoardo Tessari (sales manager di Brand Solution) che riassume il lavoro svolto dal team *webgriffe ed è motivo per noi di soddisfazione e stimolo per una continua ricerca di nuove soluzioni in grado di rivelarsi valore aggiunto per i nostri clienti:
“Nell’ambito della promozione della nostra attività e del nostro brand un plauso particolare lo dedichiamo al nostro business partner *webgriffe, una società costituita da figure giovani, dinamiche, reattive e motivate. Si sono interfacciati con la nostra struttura con un linguaggio facile ed efficacie che ci ha permesso di trasferire velocemente le linee guida nello sviluppo del nostro website. Elementi che hanno permesso di realizzare un prodotto di livello in grado di offrire un servizio bivalente; un website B2B e B2C che è stato apprezzato dalle società che rappresentiamo, nostri clienti e dal consumatore per la realizzazione e i per i suoi contenuti.“.

Pubblicato in Flash, Portfolio, Actionscript | Nessun Commento »

TROVA:

Abbonati ai Feed RSS di questo Blog Abbonati ai Feed RSS di questo Blog Informazioni su questo blog Informazioni su questo blog Scarica lo screen saver di shines Scarica lo screen saver di shines