Volete creare una pagina web, un sito o un layout digitale ma nn riuscite a trovare uno spunto per organizzare il vostro foglio di lavoro in Photoshop? Ecco qui alcuni veloci consigli che vi potrebbero aiutare a creare un layout pulito ed ordinato.
Leggi tuttoNello sviluppo di un sito a volte è necessario dover ridimensionare una serie di immagini da un formato all’altro: per una gallery, per una serie di banner, o anche solo per archivio. Automatizziamo la procedura con Photoshop.
Leggi tutto
Ritorniamo a parlare di conversione di una proposta grafica in una pagina HTML + CSS funzionale. Di tempo ne è passato, in questo anno tanti strumenti sono cambiati e sono emersi diversi modi di affrontare il flusso di lavoro per ottenere risultati differenti. Sono tuttavia convinto che il metodo di approccio che abbiamo visto nei post precedenti sia ancora un buon inizio per prendere confidenza con gli strumenti.
Oggi vorrei fare un po’ di pratica e qualche esperimento riguardante background-image e la sua applicazione con immagini multiple.
In particolare mi piacerebbe avere un elemento che possa essere allungato e allargato nel suo contenuto senza accrocchi particolari o limitazioni, senza scomodare Javascript.
Nello scorso articolo abbiamo parlato dei vantaggi e degli svantaggi di usare un approccio ai CSS3 rispetto ad un approccio classico ed abbiamo infine vestito l’header della nostra pagina di esempio. Oggi completiamo la parte mancante dell’header della nostra pagina utilizzando di nuovo alcune proprietà CSS3 senza ripeterci sui problemi di compatibilità ma confidando che questi nel lungo periodo diventino lo standard.
Ci siamo lasciati molto tempo fa con un articolo della serie riguardante la strada dalla proposta grafica alla pagina finita. Eravamo arrivati a strutturare la pagina web completa senza immagini di sfondo applicate.
Definiti gli elementi HTML, ora però dobbiamo vestirli: vediamo come.
Continuiamo nella strada che porta dalla proposta grafica alla pagina finita. Lo scorso articolo abbiamo visto le proprietà del testo di Photoshop e come convertirle in proprietà del nostro foglio di stile.
Padroni degli strumenti di Photoshop visti nel precedente post apriamo il nostro file e visualizziamo le guide e tutti gli elementi di aiuto o chiarimento che il designer ci ha lasciato. Se ci sono livelli nascosti vediamo cosa contengono e controlliamo che non ci siano stranezze o incomprensioni da chiarire. Fatto questo iniziamo.
Come abbiamo visto nel post precedente, una volta identificata la struttura HTML, possiamo cominciare a lavorare sul CSS. Per farlo cominciamo con aprire il file PSD in Photoshop e a raccapezzarci nel mondo del programma che ha rivoluzionato il mondo dell’immagine digitale.
Continua il percorso per arrivare dalla grafica statica alla pagina web. Oggi parliamo di come derivare la struttura HTML dall’immagine proposta dal grafico. Una volta ottenuto il file a livelli per prima cosa dobbiamo cercare di individuare dal mockup quali sono gli elementi strutturali della pagina per organizzare il codice.
CHF
EUR
