Magazine Architettura e Design

Mappare una immagine con Photoshop

Da Iwebdesigner @Iwebdesigner_it

La mappatura delle immagini per un web designer e’ un’azione quotidiana.

Quindi iniziamo subito a rinfrescare la nostra memoria per gli strumenti da usare in Photoshop per la mattura delle immagini.

Apriamo la nostra foto su PS.

mappare-immagine-con-photoshop

Adesso selezioniamo sulla barre degli strumenti di Photoshop lo strumento sezione

mappatura-immagini-photoshop-strumento-sezione

Una volta selezionato lo strumeto sezione, selezioniamo l’area della foto che dobbiamo mappare.

mappatura-immagine-photoshop-particolare

Andiamo dentro l’area  bordata e clicchiamo il tasto destro del mouse, si apre un menu’ e selezioniamo modifica opzioni sezioni… e compiliamo il form che ci si presenta.

mappare-una-immagine-con-photoshop-particolare1
Una volta completato il form, dobbiamo salvare il documento. Ricordiamoci di salvare per dispositivi web, in formato PNG-24 e nelle opzioni di salvataggio scegliere Html e immagini

mappare-immagine-photoshop-opzioni-salvataggio
Una volta effettuato il salvataggio, andiamo nella nostra directory e vedremo che sara’ presente un file .html e una cartella immagini (images), contenente tutte le parti dell’ immagine che abbiamo mappato.

Concentriamoci, solo per adesso, sul file .html. Apriamolo con un editor di testo qualsiasi o con Dreamweaver. Saremo di fronte a un codice di questo genere:

Senza titolo-1




//questo e' la sezione mappata da noi, chiamata per comodita' prova_mappatura










A questo punto abbiamo la nostra immagine mappata in codice Html, bisogna inserire un header e un footer e con un file css avremo una propria pagina web. L’unica cosa che manca e’ il link di arrivo quando si clicca sulla porzione di immagine mappata. Ecco il codice:

Prima

r.it/photoshop/mappare-una-immagine-con-photoshop/immagini/prova_mappatura.jpg" alt="" width="261" height="108" />

Fatto questo, se lanciamo il nostro file, vedremo che nella parte mappata il cursore del mouse cambia forma e cliccandoci sopra ci inrong>.

Hai provato il nostro sistema? Ne conosci altri per mappare un’immagine? Segnalaceli!


Potrebbero interessarti anche :

Ritornare alla prima pagina di Logo Paperblog

Possono interessarti anche questi articoli :

  • Penneli Photoshop in stile retro’

    Penneli Photoshop stile retro’

    Photoshop e’ il miglior amico di un web designer come tutta la console Adobe. In rete si trovano una miriade di pennelli per Photoshop e noi di Iwebdesigner. Leggere il seguito

    Da  Iwebdesigner
    ARCHITETTURA E DESIGN, CONSIGLI UTILI, EBUSINESS, LIFESTYLE, TECNOLOGIA
  • Photoshop e surrealismo

    Photoshop surrealismo

    Il surrealismo e’ un automatismo psichico che ci permette di associare serie di parole, immagini e pensieri senza freni inibitori, scopi preordinati e logica. Leggere il seguito

    Da  Iwebdesigner
    ARCHITETTURA E DESIGN, CONSIGLI UTILI, EBUSINESS, LIFESTYLE, TECNOLOGIA
  • Come sbiancare gli occhi con Photoshop

    Come sbiancare occhi Photoshop

    In questo breve tutorial vediamo come migliorare una foto sbiancando gli occhi.Senza perdere tempo, apriamo Photoshop.Apri l’immagine che devi modificare. Leggere il seguito

    Da  Iwebdesigner
    ARCHITETTURA E DESIGN, CONSIGLI UTILI, EBUSINESS, LIFESTYLE, TECNOLOGIA
  • Raccolta di texture Photoshop

    Raccolta texture Photoshop

    Ogni grafico vuole utilizzare le risorse migliori per il proprio lavoro. La ricerca e la raccolta degli strumenti piu’ professionali non e’ un compito per nient... Leggere il seguito

    Da  Iwebdesigner
    ARCHITETTURA E DESIGN, CONSIGLI UTILI, EBUSINESS, LIFESTYLE, TECNOLOGIA
  • Raccolta di acquarelli per Photoshop

    Raccolta acquarelli Photoshop

    Avete mai usato gli acquarelli in Photoshop? Se ancora non l’avete fatto con questi pennelli inizierete subito ad usarli sulle vostre tele digitali. Leggere il seguito

    Da  Iwebdesigner
    ARCHITETTURA E DESIGN, CONSIGLI UTILI, EBUSINESS, LIFESTYLE, TECNOLOGIA
  • Divertenti illustrazioni con Photoshop

    Divertenti illustrazioni Photoshop

    Essere un Web Designer impone saper usare ad arte Photoshop. Io adoro questo programma e quello che permette di fare. Naturalmente non puo’ essere l’unico... Leggere il seguito

    Da  Iwebdesigner
    ARCHITETTURA E DESIGN, CONSIGLI UTILI, EBUSINESS, LIFESTYLE, TECNOLOGIA
  • Illustrazioni in Photoshop come ispirazione

    Illustrazioni Photoshop come ispirazione

    Le illustrazioni create in Photoshop possono servirci per trovare la giusta creativita’. Per fare questi lavori bisogna avere delle buone capacita’ e tanta... Leggere il seguito

    Da  Iwebdesigner
    ARCHITETTURA E DESIGN, CONSIGLI UTILI, EBUSINESS, LIFESTYLE, TECNOLOGIA