[base] applicare un bordo all'immagine

Benvenuti, benvenuti °v°)/~
La semplice lezioni che vi andrò a proporre vi guiderà nell'inserimento di un bordo alle vostre immagini, con l'utilizzo di Adobe Photoshop CS4 oppure con l'ausilio di un semplice codice. Vi porrò anche delle immagini guida, qualora non trovaste i tasti o altro. Ma partiamo per gradi:

» utilizzo di photoshop.

♪ Per prima cosa, andremo ad aprire l'immagine a cui si vuole inserire la cornice. Per farlo, basta cliccare sulla barra in alto “Apri → cartella desiderata → doppio click sull'immagine scelta”. Una volta aperta, doppio click sul livello “sfondo” - come indicato nella figura – per sbloccarlo. // √ step 1(click)

♪ Nel secondo step, andremo di nuovo a osservare il meno in alto, cliccando su “Seleziona → tutto”. Vedrete che l'immagine verrà selezionata. Dopo questo, cliccate nuovamente su “Seleziona → modifica → bordo” e impostate la grandezza desiderata per il bordo. (io ho usato 10 px con l'immagine a dimensione reali) √ step 2(click)

♪ Nel terzo step andremo a selezionare ulteriormente i bordi, cliccando e trascinando (tenendo sempre premuto) sopra il righello, così da creare le seguenti righine azzurre. Queste andranno posizionate sopra la selezionatura già esistente. (» Perchè questo? Se andremo direttamente a fare su “Seleziona → Inversa” quando andremo a premere il tasto per cancellare – canc – il bordo verrà sfumato.) Una volta sistemate tutte e quattro le righe, che dovrebbero agganciarsi da sole, cliccate in qualsiasi punto dell'immagine (occhio, click e basta, senza trascinare) con lo stesso strumento selezione o sposta – per intenderci, i primi due strumenti del menù a sinistra -. Dopodiché, riselezionate sopra le famose righe, usando lo strumento seleziona – il secondo del menù a sinistra. - √ step 3(click)

♪ Step 4. Sì sì, ci siamo quasi ù_ù ora, per eliminare definitivamente la zona che andremo a coprire con il bordo cliccate su “Seleziona → inversa” e infine “canc” sulla tastiera. Per togliere quelle odiose righine azzurre, basta cliccarci sopra e trascinarle verso destra/alto con lo strumendo sposta. √ step 4~1(click) - √ step 4~2(click)

♪ Ora passiamo al quinto step, dovremo creare la cornice colorata. Dunque, click su “Livello → nuovo → livello...” e date l'ok (oppure, “livello-> nuovo livello di riempimento → tinta unita → ok → scelta di colore”). Se avrete usato la prima opzione, selezionate lo strumento secchiello – dodicesima icona nel menù laterale a sinistra -, scegliete il colore con la palette che trovate come ultima icona – i quadrati colorati, in questo caso io ho selezionato i colori nero e azzurro – e cliccate in un qualsiasi punto della vostra figura. In fine, trascinate il “livello 1” sotto il “livello 0” tenendo premuto il tasto sinistro del mouse sul livello 1, trascinandolo verso il basso. (o vice versa) √ step 5~1(click) √ step 5~2(click)

♪!! Ed voilà, la vostra cornice è creata! Certo, ovviamente si possono avere di ogni grandezza e misura, colore e altro~

» !Nota Bene: esiste anche un secondo metodo per creare questa cornice.

♬ Tornando allo step tre, quello in cui abbiamo tagliato il pezzetto di immagine necessaria, sì può anche cliccare su “fx”, che aggiunge uno “stile” al livello. Dunque, l'icona si trova in basso a destra, in quel mini menù nel pannello dei livelli. Premete “fx → traccia”, impostate la dimensione desiderata, il colore, l'opacità e date l'ok et..voilà! √ other step~1(click) √ other step~2(click)

Per ridimensionare l'immagine, qualora fosse troppo grande, seguite codesto tutorial ≈

» utilizzo del codice.

dunque, andremo a trattare un codice molto molto semplice.
Esaminiamo i campi che andremo a modificare per poter creare la nostra cornice.
◊ uno: " border:3px dashed #ffac28; ". Questo pezzo, indicherà la grandezza della cornice (border: 3px).
- Per ingrandire, rimpicciolire il bordo basta modificare il numero "3" aumentandolo o diminuendolo a vostro piacimento. Occhio a non cancellare la dicitura "px".
- Con "dashed" si intende il tipo di cornice che avremo. In questo caso, sarà tratteggiata. Con "Dotted" sarà puntinata e con "Solid" sarà continua.
- Con #ffac28 andremo ad indicare il colore dela cornice. Per prelevare un altro codice basterà utilizzare il "prendi colore" presente sia nella risposta rapida che non, oppure prelevandolo dalla tabella colori di photoshop.
◊ due: "background-color: none;"
- con questo, indichiamo il colore interno della cornice. Con "none" avremo il colore impostato dal forum, inserendo invece "#ffac28" si darà un tono, per prelevare il codice basta usare lo stesso metodo citato sopra.
◊ tre: "width:auto;"
- Per concludere, con questo codice, si inserirà la larghezza dell'immagine. Attenzione, inserendo, come è già presente, "auto" la larghezza si imposterà in modo automatico, occupando la larghezza del topic adattandosi da sola. Dunque, adremo a sostituire "auto" con la larghezza in pixel dell'immagine che verrà inserita al suo interno (nel mio caso 300px. per controllare la larghezza dell'immagine basta cliccare con il destro su essa->proprietà dell'immagine->risoluzione.)

L'immagine andra posizionata tra "[IMG]url img[/IMG]"

In the end, questo sarà il risultato finale:

In caso di dubbi e perplessità utilizzate questo topic (click!), servendovi di questo piccolo modulo per porre la domanda.

Tutorial di riferimento nome tutorial
Domanda