CTRL+N, oppure selezionare la funzione "Crea" nell'elenco a discesa dal menu "File". Successivamente, dalla stessa lista, seleziona l'operazione "Importa" o chiamala con la combinazione di tasti CTRL + I. Quindi, specifica il percorso del file immagine nella finestra di dialogo e fai clic sul pulsante "Importa". Il tuo verrà visualizzato su questo.
Sulla barra degli strumenti, trova il rollout Editor di nodi e seleziona lo strumento Forma. Puoi anche chiamare questo strumento premendo il tasto F10.
A destra dell'angolo che vuoi arrotondare, fai clic con il pulsante sinistro del mouse sul bordo dell'immagine. Un nuovo nodo apparirà sull'immagine, oltre ai quattro angoli. Quindi, seleziona l'opzione Converti linea in curva nel pannello Editor dei nodi. I segni rotondi appaiono a sinistra del nodo appena creato.
Alla stessa distanza dall'angolo, aggiungi un nuovo nodo sul lato perpendicolare dell'immagine. Senza modificare lo strumento Forma, fai doppio clic sul nodo d'angolo principale, verrà eliminato. L'angolo arrotondato dell'immagine diventerà immediatamente evidente. I segni delle linee guida possono essere utilizzati per modificare il raggio dell'angolo.
In un modo molto semplice (usando un oggetto vettoriale), puoi fare tutto angoli per un'immagine rettangolare. Senza ricorrere al metodo di modifica dei nodi sopra, disegna un rettangolo della stessa dimensione accanto all'immagine importata con lo Strumento Rettangolo (Strumento Rettangolo) o chiama lo strumento con il tasto F6.
Con lo strumento Forma già familiare, fai clic sul rettangolo e trascina uno qualsiasi dei suoi nodi sul rettangolo con il mouse. Gli angoli saranno arrotondati. Il raggio dell'arrotondamento può essere corretto con lo stesso utensile.
Segna la tua immagine con lo strumento freccia "Puntatore" (Strumento di selezione).
Quindi, nell'elenco del menu principale, trova il rollout "Effetti" (Effetti) e seleziona l'opzione "PowerClip" e dall'elenco a discesa l'opzione "Posiziona all'interno del contenitore". Usa la freccia larga per indicare il rettangolo arrotondato che hai disegnato. Diventerà una cornice in cui verrà posizionata la tua immagine.
Nota
Tieni presente che l'importazione di un'immagine in un documento Corel Draw non modifica il file di immagine originale, quindi puoi utilizzarlo nella sua forma originale se non ti piace il risultato con gli angoli arrotondati.
Consigli utili
Usando la funzione "PowerClip", puoi inserire immagini in una varietà di fotogrammi dalle forme più bizzarre.
Fonti:
- Guida ufficiale per lavorare con Corel Draw, M. Matthews, K. Matthews, 1997
- Come smussare gli angoli acuti?
Avrai bisogno
- - un computer
- - Software Adobe Photoshop
- - la foto
Istruzione
Fare clic con il pulsante destro del mouse sul livello Sfondo, selezionare Duplica livello e fare clic su OK (o Ctrl+J). Quindi crea un nuovo livello (Ctrl + Maiusc + N), posizionalo tra lo sfondo e la sua copia come mostrato nello screenshot (puoi riempirlo con un po' di colore, ad esempio il bianco). Disattiva il livello bloccato (fai clic sull'"occhio" a sinistra) o eliminalo.
Nella tavolozza degli strumenti, trova il pulsante con un rettangolo (Strumento Rettangolo) e tienilo premuto con il pulsante sinistro del mouse. Un menu aggiuntivo apparirà dove necessario (Strumento Rettangolo arrotondato). Imposta le impostazioni in alto in modo che siano le stesse dello screenshot e modifica il campo Raggio a piacere (più, più gli angoli saranno arrotondati e più l'immagine verrà ritagliata.
Quindi seleziona il frammento nella foto che desideri utilizzare (ad esempio, come avatar). In caso di errore, premere il tasto Esc e ripetere la selezione. Dopo aver selezionato il frammento desiderato, fare clic con il pulsante destro del mouse su di esso e selezionare Crea selezione... e fare clic su OK.
Fatto, hai un livello fotografico con angoli arrotondati. Ora il livello 2 (quello che funge da sfondo) può essere riempito con qualsiasi colore o lasciato trasparente.
Video collegati
Nota
I file png trasparenti sono un ottimo formato, ma non tutti i servizi online (social network, blog, ecc.) supportano i file png trasparenti. Se l'effetto degli angoli arrotondati non funziona, c'è un'altra via d'uscita.
Scegli per lo sfondo (Livello 2) il colore più vicino a quanto impostato nella pagina in cui pubblichi la foto. Quindi salva il file come jpg.
Buongiorno, pomeriggio, sera o notte a tutti. Con te ancora e ancora Dmitry Kostin. Una volta ho guardato diverse immagini e poi mi sono piaciute alcune di esse. E gli piaceva il fatto che avessero i bordi arrotondati. Sembra subito più interessante. Non trovi? E quindi nella lezione di oggi vorrei dirti come arrotondare gli angoli in Photoshop in modo che la foto appaia più interessante.
Quello che mi piace di Photoshop è che in molti casi la stessa cosa può essere fatta in diversi modi. Ecco. Iniziamo con il nostro Photoshop.
Anti-aliasing usando i bordi
Questo metodo è simile al precedente, ma comunque molto diverso. Faremo tutto con la stessa immagine.
Creando una forma
Qui il terzo metodo è già radicalmente diverso dai due precedenti. Quindi prenditi una pausa per un paio di secondi e vai avanti. Non cambierò l'immagine e caricherò di nuovo questa macchina in Photoshop.
Vedi con cosa sei finito? L'immagine è diventata con bordi arrotondati, e tutto a causa del fatto che viene visualizzata solo dove si trova il nostro rettangolo arrotondato disegnato. Ma ora puoi ritagliare il pho extra con l'aiuto dello strumento "Cornice", o salvare subito l'immagine e avrai già un'immagine separata con angoli arrotondati.
Prova a fare tutto da solo e allo stesso tempo dimmi quale dei metodi presentati è più preferibile per te.
E a proposito, se hai delle lacune in Photoshop o vuoi semplicemente esplorarlo completamente nel più breve tempo possibile, ti consiglio vivamente di guardarne uno ottimo tutorial di Photoshop per principianti. Il corso è ben fatto, tutto viene raccontato e mostrato alla grande e ogni materiale viene analizzato nei minimi dettagli.
Bene, per oggi ho finito la mia lezione. Non dimenticare di iscriverti per nuovi articoli e condividerli con i tuoi amici. È stato un piacere averti nel mio blog. Ti sto aspettando di nuovo. Ciao ciao.
Cordiali saluti, Dmitry Kostin
Saluti amici. Questo articolo è dedicato a un argomento abbastanza popolare tra i webmaster principianti: css angoli arrotondati. Le domande a cui cercherò di rispondere saranno come arrotondare gli angoli degli elementi del sito Web utilizzando solo CSS senza ricorrere a immagini.
Questo metodo ha sia pro che contro. I vantaggi, ovviamente, sono che non è necessario creare immagini utilizzando alcun editor grafico, caricarle sul server e poi disporle con CSS nei punti giusti per creare l'effetto desiderato. In questo caso, è necessario creare elementi aggiuntivi nel codice HTML e prescrivere proprietà separate per ciascuno di essi.
Per quanto riguarda i contro, qui si può notare un problema: questa proprietà non è supportata da tutti i browser Web, in particolare per le versioni obsolete di vari browser.
Tuttavia, gli angoli arrotondati con i CSS stanno diventando sempre più popolari. Come puoi già capire, in questo articolo utilizzeremo la proprietà disponibile nei CSS 3.
Angoli arrotondati con CSS.
Quindi, ad esempio, prenderemo un elemento DIV a livello di blocco e arrotondarne gli angoli. Ad esempio, creiamo un blocco e direttamente nel codice HTML gli assegneremo delle proprietà usando l'attributo style. Per prima cosa abbiamo un elemento block riempito con uno sfondo di qualsiasi colore:
A proposito, se hai bisogno di scoprire che codice colore hai sul tuo sito o su qualsiasi altro, ti tornerà utile.
Ed ecco come lo vedremo in un browser web:
Ora, per arrotondare gli angoli, utilizziamo la proprietà "border-radius", che può essere tradotta come raggio del bordo. Sì, esatto, e non così tanti potrebbero pensare che questo sia il raggio della cornice o come si chiama (bordo). Questa proprietà è responsabile del raggio dei bordi dell'elemento e non dei suoi riquadri o bordi, che potrebbero non essere presenti. Tuttavia, la proprietà continuerà a funzionare senza utilizzare il bordo sull'elemento. Spero che tu capisca cosa volevo dire. Il valore di questa proprietà è qualsiasi valore numerico applicabile in CSS, come percentuali, pixel (px), punti (pt) e così via. Sì, e tieni presente che questa proprietà funziona su tutti e quattro gli angoli dell'elemento contemporaneamente, inoltre puoi specificare un raggio diverso per ogni angolo, ma ne parleremo più avanti. Per prima cosa, impostiamo il raggio degli angoli del nostro rettangolo. Sia uguale a 5 pixel:
L'elemento sarà quindi simile a questo:
Ora, propongo di capire come aggiungere il tuo raggio per ogni angolo separatamente. Per fare ciò, possiamo utilizzare una proprietà che può essere applicata a ciascun angolo separatamente. Se parliamo dell'esempio precedente, per intero, le proprietà dell'elemento sarebbero simili a questa:
Raggio bordo in alto a sinistra: 5px; /* angolo in alto a sinistra */ border-top-right-radius:5px; /* angolo in alto a destra */ border-bottom-right-radius:5px; /* angolo in basso a destra */ border-bottom-left-radius:5px; /* angolo in basso a sinistra */
Cioè, se vogliamo dare a ogni angolo il suo valore, abbiamo una tale opportunità e, per assicurarci di ciò, prendiamo il seguente codice:
E poi otteniamo questo risultato:
Come possiamo vedere, il bordo di ogni angolo ha il proprio valore di raggio.
Inoltre, CSS ci consente di impostare il valore per il bordo di ogni angolo sotto forma di una breve notazione simile a questa:
Dove i valori seguiranno in questo ordine:
Raggio bordo: 5px /* angolo in alto a sinistra */ 10px /* angolo in alto a destra */ 15px /* angolo in basso a destra */ 20px /* angolo in basso a sinistra */;
Di conseguenza, in base a quanto sopra, diventa chiaro che allo stesso modo possiamo impostare il limite del raggio solo per tre (uno o due) angoli:
Ecco come appare in un browser web:
Se non sei completamente confuso, continueremo. Il fatto è che il raggio per ogni confine d'angolo può essere specificato non in un valore, come abbiamo considerato sopra, ma in due. Cioè, due valori per ogni angolo. In questo caso, il primo valore imposterà il raggio dell'angolo in orizzontale e il secondo valore in verticale. Partiamo prima da un angolo:
In questo esempio, abbiamo interessato solo l'angolo in alto a sinistra dell'elemento:
Se disponi i valori al contrario, l'elemento apparirà così:
Su questo sembrerebbe possibile finire, ma no. C'è un altro trucco. In un valore di proprietà, possiamo utilizzare una barra (/) tra i valori. La barra può aiutarci a far corrispondere i valori con altri valori. In generale, è più facile mostrare che raccontare. Iniziamo in modo semplice. Supponiamo di volere che il raggio orizzontale sia di 35 pixel e il raggio verticale di 5. Allo stesso tempo, questi valori si applicano a tutti gli angoli. Allora possiamo scrivere così:
E ottieni questo risultato:
Ora diamo un'occhiata a un esempio più complicato:
In questo caso, il valore prima della barra (/) sarà correlato al raggio orizzontale dell'angolo e dopo il segno alla verticale. In questo caso, i valori saranno correlati tra loro nel modo seguente:
Raggio bordo in alto a sinistra: 20px 15px; bordo-alto-destra-raggio: 10px 25px; bordo-basso-destra-raggio: 40px 15px; bordo-basso-raggio-sinistra: 10px 25px;
E il risultato sarà questo:
E alla fine dell'articolo, parliamo del supporto di questa proprietà da parte di vari browser.
Angoli arrotondati in vari browser web.
Vale la pena notare qui che questa proprietà non è supportata da tutte le versioni dei browser. La proprietà è supportata in IE9+, Firefox 4+, Chrome, Safari 5+ e Opera.
Ma per alcune versioni di browser che non supportano questa proprietà, esistono proprietà non standard che aggiungono un cosiddetto prefisso o prefisso alla proprietà.
Chrome precedenti alla 4.0, Safari precedenti alla 5.0, iOS utilizzano la proprietà non standard -webkit-border-bottom-left-radius.
Firefox precedente alla versione 4.0 utilizza la proprietà non standard -moz-border-radius-bottomleft.
In questo caso, dovremo duplicare la proprietà utilizzando questi prefissi. Ad esempio, se abbiamo una proprietà per il bordo dell'angolo superiore sinistro impostata su un valore di cinque pixel:
raggio di confine in alto a sinistra: 5px;
Quindi la proprietà con la sua duplicazione utilizzando i prefissi sarà simile a questa:
webkit-border-bottom-left-radius:5px; -moz-border-radius-bottomleft:5px; raggio di confine in alto a sinistra: 5px;
Spero davvero di essere stato in grado di spiegare tutto in modo chiaro e ora capisci come creare angoli arrotondati usando solo CSS.
Buona fortuna a te!
Cornice CSS3 estende le capacità di formattazione dei bordi degli elementi con proprietà che lo consentono angoli arrotondati elemento, e anche utilizzare immagini per modellare i bordi di un elemento.
Angoli arrotondati e cornici
1. Angoli arrotondati con raggio di confine
Supporto del browser
CIOÈ: 9.0
Firefox: 4.0
Cromo: 4.0
safari: 5.0, 3.1 -webkit-
musica lirica: 10.5
iOS Safari: 7.1
Opera Mini: —
Browser Android: 4.1
Chrome per Android: 44
Questa proprietà consente di arrotondare gli angoli degli elementi in linea e del blocco. La curva per ogni angolo è definita con uno o due raggi che ne definiscono la forma − cerchio o ellisse. Il raggio si estende all'intero sfondo, anche se l'elemento non ha bordo, la posizione esatta della secante viene determinata utilizzando la proprietà background-clip.
La proprietà border-radius consente di arrotondare tutti gli angoli contemporaneamente e utilizzando le proprietà border-top-left-radius , border-top-right-radius , border-bottom-right-radius , border-bottom-left- raggio puoi arrotondare ogni angolo separatamente.
Se imposti due valori per la proprietà border-radius, il primo valore verrà arrotondato in alto a sinistra e angolo in basso a destra, e il secondo lo è in alto a destra e in basso a sinistra.
Valori dati tramite / definire orizzontale e raggi verticali. La proprietà non è ereditata.
Opzioni
Div (larghezza: 100px; altezza: 100px; bordo: 5px solido;) .r1 (raggio-bordo: 0 0 20px 20px;) .r2 (raggio-bordo: 0 10px 20px;) .r3 (raggio-bordo: 10px 20px; ;) .r4 (raggio bordo: 10px/20px;) .r5 (raggio bordo: 5px 10px 15px 30px/30px 15px 10px 5px;) .r6 (raggio bordo: 10px 20px 30px 40px/30px;) .r7 ( raggio-bordo: 50%;) .r8 (raggio-bordo-basso: nessuno; raggio-bordo: 30px/90px;) .r9 (raggio-bordo-basso-sinistra: 100px;) .r10 (bordo -raggio: 0 100%;) .r11 (raggio-bordo: 0 50% 50% 50%;) .r12 (raggio-bordo-in alto-sinistra: 100% 20px; raggio-bordo-basso-destra: 100% 20px ;) 
Riso. 1. Esempi di diverse opzioni per arrotondare gli angoli del blocco
2. immagine di confine
Supporto del browser
CIOÈ: 11.0
Firefox: 15.0, 3.5 -moz-
Cromo: 16.0, 7.0 -webkit-
safari: 6.0, 3.0 -webkit-
musica lirica: 15.0, 11.0 -o-
iOS Safari: 7.1
Opera Mini: 8-o-
Browser Android: 4.4, 4.1 -webkit-
Chrome per Android: 42
La proprietà consente di impostare un'immagine come bordo di un elemento. Il requisito principale per l'immagine è che deve essere simmetrica. La proprietà include i seguenti valori: (border-image: larghezza fetta sorgente ripetizione inizio;) .
Usando un'immagine così semplice, puoi ottenere questi bordi per un elemento.
/* Esempio 1 */ div ( larghezza: 260px; altezza: 100px; stile bordo: solido; larghezza-immagine-bordo: 15px; origine-immagine-bordo: url(border_round.png); sezione-immagine-bordo: 30 ; border-image-repeat: stretch; ) /* Esempio 2 */ div ( larghezza: 260px; altezza: 100px; stile bordo: solido; larghezza-immagine-bordo: 15px; sorgente-immagine-bordo: url(border_round. png); sezione-immagine-bordo: 30; ripetizione-immagine-bordo: rotonda; ) 
Riso. 2. Un esempio di progettazione di bordi di blocchi utilizzando un'immagine
Le fette A - B - C - D formano gli angoli del fotogramma e la parte dell'immagine tra di loro riempie lo spazio rimanente del fotogramma in base al valore della proprietà border-image-repeat. La dimensione del pezzo d'angolo (in questo esempio, il numero 30) viene impostata utilizzando il valore della proprietà border-image-slice.
2.1. bordo-larghezza-immagine
La proprietà imposta la larghezza dell'immagine per il bordo dell'elemento. Se non viene specificata alcuna larghezza, il valore predefinito è 1 .
| bordo-larghezza-immagine | |
|---|---|
| I valori: | |
| lunghezza | Imposta la larghezza della cornice in unità di lunghezza -px/em. È possibile impostare da uno a quattro valori contemporaneamente. Se viene fornito un valore, la larghezza di tutti i lati della cornice è la stessa, due valori specificano la larghezza della parte superiore-inferiore e destra-sinistra e così via. |
| numero | Il valore numerico per il quale viene moltiplicato il valore della larghezza del bordo. |
| % | La larghezza della cornice dell'elemento viene calcolata in relazione alla dimensione dell'immagine. Orizzontale rispetto alla larghezza, verticale rispetto all'altezza. |
| auto | Corrisponde al valore della sezione dell'immagine del bordo. |
| iniziale | |
| ereditare | |
Sintassi
Div (larghezza-immagine-bordo: 30px;) 3. Un esempio di impostazione della larghezza di una cornice immagine utilizzando diversi tipi di valori
2.2. bordo-origine-immagine
La proprietà specifica il percorso dell'immagine che verrà utilizzata per decorare i bordi del blocco.
Sintassi
Div (sorgente immagine bordo: url(border.png);)
2.3. elementi border-image-slice
La proprietà determina la dimensione delle parti dell'immagine utilizzate per decorare i bordi dell'elemento e divide l'immagine in nove parti: quattro angoli, quattro bordi tra gli angoli e una parte centrale.
| I valori: | |
| numero | Le parti del telaio possono essere dimensionate utilizzando uno, due, tre o quattro valori. Un valore imposta i bordi della stessa dimensione per ciascun lato dell'elemento. Due valori: il primo determina la dimensione dei bordi superiore e inferiore, il secondo - destro e sinistro. Tre valori: il primo determina la dimensione del bordo superiore, il secondo - il bordo destro e sinistro e il terzo - il bordo inferiore. Quattro valori: specifica la dimensione dei bordi superiore, destro, inferiore e sinistro. Il valore numerico rappresenta il numero di px. |
| % | Le dimensioni dei bordi sono calcolate in base alle dimensioni dell'immagine. Orizzontale rispetto alla larghezza, verticale rispetto all'altezza. |
| riempire | Il valore viene specificato insieme a un valore numerico o percentuale. Se impostata, l'immagine non viene ritagliata dal bordo interno della cornice, ma riempie anche l'area all'interno della cornice. |
| iniziale | Imposta questa proprietà sul valore predefinito. |
| ereditare | Eredita il valore di questa proprietà dall'elemento padre. |
Sintassi
Div (sezione immagine bordo: 50 20;) 
Riso. 4. Un esempio di impostazione delle sezioni della cornice dell'immagine
2.4. bordo-immagine-ripeti
La proprietà controlla il modo in cui l'immagine di sfondo riempie lo spazio tra gli angoli della cornice. Può essere impostato sia con un singolo valore che con una coppia di valori.
Sintassi
Div (border-image-repeat: repeat;) 5. Un esempio di ripetizione della parte centrale di una cornice immagine utilizzando diversi tipi di valori
2.5. bordo-immagine-inizio
La proprietà consente di spostare la cornice dell'immagine al di fuori dei bordi dell'elemento della lunghezza specificata. Può essere impostato utilizzando uno o quattro valori.
Sintassi
Div (bordo-immagine-inizio: 10px;) 
Riso. 6. Un esempio di spostamento dell'immagine del fotogramma utilizzando diversi tipi di valori
3. Offset del contorno dell'offset del telaio esterno
La proprietà specifica la distanza tra il bordo dell'elemento e il bordo esterno creato con la proprietà outline.
/*Figura 1:*/ img ( bordo: 1px rosa fisso; contorno: 1px grigio tratteggiato; offset contorno: 3px; ) /*Figura 2:*/ img ( larghezza bordo: 1px 10px; stile bordo: solido; colore bordo: rosa; contorno: 1px grigio tratteggiato; offset contorno: 3px; ) /*Figura 3:*/ img ( bordo: 3px riquadro rosa; contorno: 1px grigio tratteggiato; offset contorno: 1px; )
Riso. 7. Un esempio di decorazione di un'immagine con una cornice esterna 4. Cornice sfumata
Il valore di border-image può essere non solo un'immagine, ma anche un riempimento sfumato.
Cornice traslucida
Uno dei colori è trasparente. In questo modo, puoi impostare i bordi per tutti i lati di un elemento contemporaneamente o separatamente per ciascun lato. La larghezza del bordo è controllata dalla proprietà border-width.
Busta postale
Gli angoli arrotondati nella foto sembrano piuttosto interessanti e attraenti. Molto spesso, tali immagini vengono utilizzate durante la compilazione di collage o la creazione di presentazioni. Inoltre, le immagini con angoli arrotondati possono essere utilizzate come miniature per i post sul sito.
Esistono molti casi d'uso e c'è solo un modo (corretto) per ottenere una foto del genere. In questo tutorial, ti mostrerò come arrotondare gli angoli in Photoshop.
Apri la foto che desideri modificare in Photoshop.
Quindi crea una copia del livello a cascata chiamato "Sfondo". Usa i tasti di scelta rapida per risparmiare tempo CTRL+J.
Viene creata una copia per lasciare intatta l'immagine originale. Se (improvvisamente) qualcosa va storto, puoi eliminare i livelli non riusciti e ricominciare da capo.
In questo caso, siamo interessati solo a una delle impostazioni: il raggio di arrotondamento. Il valore di questo parametro dipende dalle dimensioni e dalle esigenze dell'immagine.
Imposterò il valore su 30px in modo da poter vedere meglio il risultato.
Ora devi allungare la forma risultante sull'intera tela. Chiamare una funzione "Trasformazione libera" tasti di scelta rapida CTRL+T. Sulla forma apparirà una cornice, con la quale puoi spostare, ruotare e ridimensionare l'oggetto.
Siamo interessati al ridimensionamento. Allunga la forma usando i marcatori mostrati nello screenshot. Al termine del ridimensionamento, premere ACCEDERE.
Suggerimento: per ridimensionare il più accuratamente possibile, cioè senza andare oltre la tela, è necessario abilitare il cosiddetto "Affrettato" Guarda lo screenshot, mostra dove si trova questa funzione.
La funzione fa sì che gli oggetti "si attacchino" automaticamente agli elementi ausiliari e ai bordi della tela.
Come puoi vedere, si è formata una selezione attorno alla forma. Ora vai al livello di copia e rimuovi la visibilità dal livello con la figura (vedi screenshot).
Il livello a cascata è ora attivo e pronto per essere modificato. La modifica consiste nel rimuovere l'eccesso dagli angoli dell'immagine.
Inverti la selezione con i tasti di scelta rapida CTRL+MAIUSC+I. Ora la selezione rimane solo sugli angoli.
