Laboratorio Web Design

CAT | grafica

27

nov/08

Immagini digitali

In Windows premi il tasto “Stamp” o “Print screen” o “prt scr” che è solitamente situato in alto a destra della tastiera. Apri  un qualsiasi programma di editing immagini (Paint va più che bene) clicca con il destro sull’area del disegno e seleziona incolla, infine salva il file in formato .gif o .png
Con il mac basta fare ctrl cmd+shift+3 e l’immagine si salva sul Desktop automaticamente in formato .png
Con Linux c’e’ l’applet “cattura desktop”.

Se siete dei perfezionisti potete  scaricarvi  Fireshot (estensione gratuita per Firefox e Explore) che vi permetterà di utilizzare una serie di strumenti di editing per modificare, inserire annotazioni, testo nell’immagine catturata.

, Nascondi

17

mag/07

Lo stile grafico 2.0

Lo sapevate che esiste anche un stile grafico per il web 2.0?
Quale è?
Quello caratterizzato da colori sgargianti, riflessi, ombre, gradienti, effetti specchio, pellicola…
Layer Styles

Se pensate di appartenere al mondo 2.0 allora andate su Dezinerfolio e scaricare gratuitamente una collezione di ben 131 Layer Styles per Photoshop per creare, in pochissimi passi, elementi come pulsanti, header e sfondi in perfetto stile web 2.0!
Ovviamente, lo stile grafico della nuova era del web è fatto anche di font, che giocano la loro parte soprattutto per la creazione dei loghi.
Su Fontshop c’è un articolo (in inglese) che vi svela quali sono i font usati delle principali aziende e community 2.0 (Skype, Last.fm, Technorati…).
Mentre su Flickr c’è chi ha messo insieme tutti i loghi2.0!

Nessun tag Nascondi

24

apr/07

Testo intorno all'immagine

matita…praticamente quello che succede in questo post!
Il primo passo è definire un selettore di tipo class a cui associamo un nome, ad esempio image_sx, ed attribuirgli un float a sinistra e un margine di 3 pixel (per distanziare l’immagine dal testo):
.image_sx {float: left; margin: 3px;}
Il secondo passo è associare all’immagine presente nel documento HTLM la classe creata:<img src="immagine.gif" alt="descrizione immagine" class="image_sx"/>
Ovviamente se desiderate posizionare l’immagine a destra basta cambiare il valore left con right
.image_dx {float: right; margin: 3px;}

Vi ricordo che la sintassi per definire un selettore CSS da usare come nome di una classe richiede l’uso di un “.” (punto) immediatamente prima di tale nome. Al contrario, la sintassi per la definizione di selettori di tipo id richiede l’uso di un “#” (cancelletto, sharp), al posto del “.” .

Per chi usa Dreamweaver
Inserite un’immagine all’interno del documento icona “inserisci immagine”(inserisci > immagine).
Create una nuova regola CSS icona “nuova regola”(testo>stili CSS> nuovo), controllate che il selettore CLASSE sia selezionato, attribuite il nome e fate click su ok.
Ora non vi resta che associare la classe all’immagine: selezionate l’immagine e dalla finestra CLASSE all’interno del box PROPRIETÀ scegliete la classe da associare.

Spero sia tutto chiaro…

Nessun tag Nascondi

9

mar/07

Photo tips

Un certo e.r. mi ha invito questa mail che vi giro:

Tutto gratis per i tuoi aglievi, che se ne avvaliscano!

Ecco l’articolo: Tips for Using Images in Blogs (questa volta direttamente dalla fonte!)

Nessun tag Nascondi

« Post precedenti

Pagina successiva »

Il template grafico è un adattamento di devolux.org