Molte volte, per varie ragioni, siamo costretti ad inserire nel nostro sito web immagini di grosse dimensioni che di conseguenza rallentano notevolmente il download. Se non vogliamo che l'utente cambi sito perché stanco di aspettare lo scaricamento della grossa immagine, dobbiamo dividere l'immagine in tante immagini più piccole in modo di accelerare la sua visualizzazione.
Esistono svariati programmi di grafica che permettono la suddivisione delle immagini; CorelDraw ovviamente rientra tra questi.
I procedimenti da seguire sono i seguenti:
Supponiamo di dover inserire nella nostra pagina un immagine di 600 pixel rappresentante il logo di HTML.it (fai clic qui per visualizzare il logo). Se avete visto la pagina avrete notato che passano svariati secondi prima che l'immagine si scarichi definitivamente. Vediamo di dividere questa immagine.
Selezioniamo l'immagine con lo strumento puntatore e annotiamo su un foglietto di carta le dimensioni del logo; dimensione visibile sulla barra di proprietà nell'area "Dimensioni Oggetto" (nel nostro caso l'immagine dovrebbe essere grande ca. 600 x 135 pixel). Poiché a mio parere è sufficiente dividere l'immagine in tre porzioni più piccole, selezioniamo lo strumento rettangolo e trasciniamo con il mouse in modo da creare una forma; adesso nel menù a discesa Disponi selezioniamo trasforma in modo da aprire la finestra mobile "trasforma".

Nella sezione "dimensioni" digitiamo 200 nel campo orizzontale e 135 nel campo verticale e facciamo clic su Applica; ora, sempre nella finestra mobile trasforma, apriamo la sezione Posizione (il primo bottone a sinistra) e digitiamo 200 nel campo orizzontale e facciamo due volte clic su Applica al duplicato. In questo modo abbiamo creato tre rettangoli esattamente della stessa dimensione. Ora facciamo clic su "Unisci" (ctrl-L) dal menù a discesa Disponi per unire i tre rettangoli e creare un unico oggetto. Selezioniamo il logo di HTML.it e facciamo clic sul menù a discesa Effetti - PowerClip - Inserisci nel contenitore e con la freccia che ci viene messa a disposizione selezioniamo i tre rettangoli precedentemente creati. Abbiamo appena utilizzato uno dei più potenti strumenti di CorelDraw che ci ha permesso di inserire un oggetto dentro un altro oggetto facendo diventare l'immagine il contenuto e i rettangoli il contenitore. Selezioniamo l'oggetto PowerClip appena creato e clicchiamo "Dividi" dal menù a discesa "Disponi" e come per magia il logo HTML.it viene diviso in tre porzioni uguali.
Adesso non ci rimane che rendere invisibile il contorno dei tre rettangoli facendo clic di destro sulla prima casella in alto della tavolozza colore, ed esportare una per una le tre immagini. Fatto questo, rimettiamo insieme le tre immagini creando una tabella in un qualsiasi editor html impostando le proprietà "cellspacing" e "cellpadding" a 0.
Adesso apriamo la nostra pagina in un browser e vediamo le differenze.
Creare Testo 3D con Photoshop CS5Creare una scritta sfruttando gli effetti tridimensionali... |
Photoshop CS6: le novità più interessantiUn'interfaccia rinnovata, semplificazione di comandi ripetuti,... |
Digital painting con PhotoshopCreare illustrazioni digitali sfruttando la capacità del software di... |
Forme e texture con Photoshop, creare una carta da gioco infuocataSfruttare forme vettoriali e texturing per ottenere un'illustrazione... |
Attenuare rughe d'espressione e imperfezioni della pelle con PhotoshopLe tecniche per attenuare rughe d'espressione e imperfezioni della... |
3D Studio Max - Guida alla modellazioneDall'interfaccia alla creazione e modellazione di oggetti... |
Guida Photoshop CS5Modifica e ottimizzazione dell'immagine, strumenti di disegno e... |
Guida Paint Shop ProPaint Shop Pro è un celebre programma di fotoritocco,... |
Ogni settimana, direttamente nella tua e-mail: guide, articoli, tutorial e FAQ su Web Design e grafica per il Web.
Iscriviti alla newsletter
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |