Πώς να στρογγυλοποιήσετε τις άκρες ενός σχεδίου στο Photoshop. Δημιουργία στρογγυλεμένων γωνιών εικόνων στο Photoshop

Πάλι εκτός προγράμματος! Ε... Λοιπόν, κυκλοφορώ τα μαθήματα με μερικές ώρες καθυστέρηση, ελπίζω να μην είναι τόσο κρίσιμο. Σήμερα στο μάθημά μας θα μιλήσουμε για Πώς να στρογγυλοποιήσετε τις άκρες στο photoshop. Όλα θα ήταν καλά και το μάθημα δεν θα διέφερε από αυτά που είδατε σε άλλους ιστότοπους, αλλά εγώ ο ίδιος είχα ψάξει πριν και ξέρω τι μεθόδους προσφέρουν. Μην τους ακούτε! Πολύ βαρετό, πολύ μεγάλο. Σας προσφέρω έναν τρόπο πώς στρογγυλές γωνίες στο photoshopκυριολεκτικά με μερικά κλικ!

Ας το πάρουμε φωτογραφικό αρχείοΠαρεμπιπτόντως, το κάνω αυτό σε ένα καλό τηλέφωνο. Δεν είναι διαφήμιση:D
Ας χρησιμοποιήσουμε την επιλογή όπως στο στιγμιότυπο οθόνης μου:

Μεταβείτε στην καρτέλα ( Επιλέξτε > Τροποποίηση > Ομαλή). Προσοχή! Αυτό μπορεί να είναι δύσκολο για κάποιους. Σε ορισμένες εκδόσεις του Photoshop δεν υπάρχει "Smooth", δηλαδή "Optimize". Επομένως, μην ανησυχείτε αν δεν βρείτε Smooth. Είναι το ίδιο.

Εδώ έχουμε επιλέξει την ακτίνα καμπυλότητας.

Τώρα, όπως μπορείτε να δείτε, η περιοχή επιλογής σας έχει ήδη στρογγυλεμένες γωνίες.

Το μόνο που μένει είναι να κόψουμε την εικόνα.

Και τώρα . Το μέγεθος ρυθμίζεται εκεί αυτόματα. Και τώρα απλώς επικολλάμε την εικόνα σε ένα νέο αρχείο.

Σε αυτό το σύντομο άρθρο θα δούμε Ένα παράδειγμα δημιουργίας ενός "λεπτού" πλαισίου πάχους 1 - 2 pixel με στρογγυλεμένες άκρες στο Photoshop. Αυτά τα πλαίσια (και τα θραύσματά τους) χρησιμοποιούνται ευρέως από σχεδιαστές και webmasters κατά τη δημιουργία διατάξεων και τη δημιουργία προτύπων για ιστότοπους. Χρησιμοποιείται για το πλαίσιο άρθρων, μενού, κουμπιών κ.λπ.

Ας ξεκινήσουμε λοιπόν:

1. Ας δημιουργήσουμε νέο έγγραφο(Πάνω μενού "Αρχείο" - "Νέο") με διαστάσεις, για παράδειγμα, 500 επί 500 pixel. Περιεχόμενο φόντου: διαφανές.

2. Πηγαίνετε στη γραμμή εργαλείων (βρίσκεται στα αριστερά), επιλέξτε το εργαλείο "Ορθογώνια στεφάνη" (M). Στο έγγραφό μας σχεδιάζουμε μια ορθογώνια περιοχή. Επιλογές για το εργαλείο "Rectangular Area": ​​"New Selection", "Feather: 0 px.", "Style: Normal" (Εικ. 1).

3. Β επάνω μενούεπιλέξτε την καρτέλα "Επιλογή" - "Τροποποίηση" - "Βελτιστοποίηση" (Εικ. 2). Ας πάρουμε την τιμή της ακτίνας, για παράδειγμα, ίση με 20 pixel. Κάντε κλικ στο "Ναι". Βλέπουμε ότι οι γωνίες του επιλεγμένου παραλληλογράμμου μας έχουν στρογγυλοποιηθεί από την επιλεγμένη τιμή (20 pixel) (Εικ. 3).

4. Στο επάνω μενού, επιλέξτε "Επεξεργασία" - "Περιβολή". Ρυθμίστε τις παραμέτρους διαδρομής. Πλάτος: 2 px. (για λογους σαφηνειας). Ας πάρουμε λίγο κόκκινο χρώμα. Στην ίδια καρτέλα, ορίστε: "Θέση σε σχέση με το περίγραμμα: κέντρο (μπορείτε να επιλέξετε τις τιμές "inside" και "outside")", "Overlay: Normal mode", "Opacity: 100%", "Save transparency" : άδειο”. πάτα το κουμπί«Ναι» (Εικ. 4) . Αφαιρούμε την επιλογή χρησιμοποιώντας τη συντόμευση πληκτρολογίου "Ctrl + D" και παίρνουμε το πλαίσιο που χρειαζόμαστε, πάχους 2 pixel σε κόκκινο χρώμα με στρογγυλεμένες άκρες (Εικ. 5). Τώρα τα θραύσματά του ή ολόκληρο το πλαίσιο μπορούν να χρησιμοποιηθούν για τη σχεδίαση οποιουδήποτε προτύπου, banner κ.λπ.

Ρύζι. 1	Ρύζι. 2
Ρύζι. 3	Ρύζι. 4
Ρύζι. 5	Ρύζι. 6

Για παράδειγμα, και για καλύτερη οπτικοποίηση, δημιούργησα ένα νέο στρώμα γεμάτο με λευκό, το μετακίνησα κάτω από το στρώμα με το πλαίσιο μας και δημιούργησα πολλά άλλα παρόμοια πλαίσια με θολό πάχος, χρώματα και στρογγυλεμένες γωνίες (Εικ. 6).

25.07.2016 27.01.2018

Σε αυτό το σεμινάριο θα μάθετε πώς να κάνετε εξομάλυνση στο Photoshop αιχμηρές γωνίεςστις φιγούρες.

Αρχικά, ας δημιουργήσουμε ένα σχήμα. Μπορείτε να το κάνετε επιλέγοντας το εργαλείο στη γραμμή εργαλείων Ελεύθερη φιγούρα(Εργαλείο προσαρμοσμένου σχήματος). Πλήκτρο συντόμευσηςκαλώντας το υπομενού εργαλείων για δημιουργία διανυσματικά σχήματα- U.

Υπάρχουν δύο τρόποι για να ενεργοποιήσετε αυτό το εργαλείο:

1. Με συσφιγμένο Πλήκτρο ShiftΚάντε κλικ σε μια ομάδα εργαλείων και θα ανοίξει ένα υπομενού για να επιλέξετε το εργαλείο που θέλετε.

2. Κάνοντας παρατεταμένο κλικ στο αριστερό κουμπί του ποντικιού σε μια ομάδα εργαλείων θα ανοίξει επίσης ένα υπομενού.

Φορτώστε όλα τα διαθέσιμα σχήματα στο Photoshop (κάντε κλικ στη μικρογραφία του σχήματος μέσα πάνω πάνελκαι κάντε κλικ στο "γρανάζι" στα δεξιά για να ανοίξετε πρόσθετες ρυθμίσεις):

Από την αναπτυσσόμενη λίστα, επιλέξτε ένα σχήμα με αιχμηρές γωνίες, για παράδειγμα, αυτό το αστέρι με 10 γωνίες:

Όταν δημιουργείτε μια φιγούρα, μην ξεχάσετε να κρατάτε κλειδίΒάρδια- αυτό θα βοηθήσει στη διατήρηση των αναλογιών.

Τώρα πρέπει να ραστεροποιήσετε το σχήμα - Κάντε δεξί κλικ στο στρώμα με το σχήμα - Rasterize Layer.

Επιλέγουμε την ακτίνα ανάλογα με το μέγεθος του καμβά και το επιθυμητό αποτέλεσμα, επέλεξα 6 pixel.

Τώρα πρέπει να φορτώσουμε την επιλογή του στρώματος με το σχήμα, για να το κάνετε αυτό, κρατήστε πατημένο κλειδίCtrlκάντε κλικ στη μικρογραφία του επιπέδουμε μια φιγούρα επάνω Πίνακας στρωμάτων.

Όταν η επιλογή είναι ενεργή, πατήστε το κουμπί "Βελτιώστε την άκρη" (Βελτιώστε την άκρη):

Θα ανοίξει ένα μενού ρυθμίσεων στο οποίο χρειαζόμαστε την παράμετρο Φτερόάσε το 0 και την παράμετρο Αντίθεσηαυξηθεί στο μέγιστο 100%. Παράμετρος Λείοςπροσαρμόστε το στο γούστο σας, θα σας βοηθήσει να στρογγυλέψετε τις γωνίες της φιγούρας. Στην περίπτωση του αστεριού 10 όψεων, το έβαλα στο μέγιστο, αλλά μπορεί να έχετε τελείως διαφορετικές ρυθμίσεις.

Στην παράμετρο Έξοδος σε...αφήστε την προεπιλεγμένη ρύθμιση - κατανομή.

Κάντε κλικ Εισάγετε κλειδίγια να εφαρμόσετε τις ρυθμίσεις. Δημιουργήστε ένα νέο επίπεδο και χρησιμοποιήστε το Εργαλείο κάδου βαφήςή πηγαίνοντας στο μενού Επεξεργασία-Συμπλήρωσησυμπληρώστε την επιλογή στο σωστό χρώμα, Για παράδειγμα, μαύρος, όπως στο αρχικό σχήμα. Απενεργοποιήστε την ορατότητα του αρχικού στρώματος με το σχήμα και αποκτήστε αυτό το σχήμα με στρογγυλεμένες γωνίες:

Αυτό είναι όλο. Σε αυτό το σεμινάριο μάθαμε πώς να στρογγυλεύουμε γωνίες σχημάτων στο Photoshop. Ελπίζω το μάθημα να σας ήταν χρήσιμο.

Όλοι έχουν βαρεθεί εδώ και καιρό τις παραδοσιακές ορθογώνιες γωνίες στο σχεδιασμό ιστοσελίδων. Στη μόδα είναι οι στρογγυλεμένες γωνίες, οι οποίες δεν γίνονται χρησιμοποιώντας εικόνες, αλλά μέσα από στυλ, για τα οποία χρησιμοποιείται η ιδιότητα ακτίνας περιγράμματος. Αυτή η ιδιότητα μπορεί να έχει μία, δύο, τρεις ή τέσσερις τιμές που χωρίζονται από ένα διάστημα, οι οποίες καθορίζουν την ακτίνα όλων των γωνιών ή κάθε μία ξεχωριστά.

Στον πίνακα Το 1 δείχνει διαφορετικό αριθμό τιμών και τον τύπο του μπλοκ που λαμβάνεται σε αυτήν την περίπτωση.

Κώδικας	Περιγραφή	Θέα
div (ακτίνα περιγράμματος: 10 εικονοστοιχεία; )	Ακτίνα στρογγυλοποίησης για όλες τις γωνίες ταυτόχρονα.
div (ακτίνα περιγράμματος: 0 10 εικονοστοιχεία; )	Η πρώτη τιμή ορίζει την ακτίνα της επάνω αριστερής και της κάτω δεξιάς γωνίας, η δεύτερη τιμή ορίζει την ακτίνα για την επάνω δεξιά και την κάτω αριστερή γωνία.
div (ακτίνα περιγράμματος: 20 px 10 px 0; )	Η πρώτη τιμή ορίζει την ακτίνα της επάνω αριστερής γωνίας, η δεύτερη - τόσο η πάνω δεξιά όσο και η κάτω αριστερή, και η τρίτη τιμή - η κάτω δεξιά.
div (ακτίνα περιγράμματος: 20 px 10 px 5 px 0; )	Ρυθμίζει διαδοχικά την ακτίνα της επάνω αριστερής, πάνω δεξιάς, κάτω δεξιάς και κάτω αριστερής γωνίας.

Το Παράδειγμα 1 δείχνει πώς να δημιουργήσετε ένα μπλοκ με στρογγυλεμένες γωνίες.

Παράδειγμα 1. Γωνίες μπλοκ

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Αποτέλεσμα αυτό το παράδειγμαφαίνεται στο Σχ. 1.

Ρύζι. 1. Μπλοκ με στρογγυλεμένες γωνίες

Ένα ενδιαφέρον αποτέλεσμα μπορεί να επιτευχθεί εάν ρυθμίσετε την ακτίνα στρογγυλοποίησης να είναι μεγαλύτερη από το μισό του ύψους και του πλάτους του στοιχείου. Σε αυτή την περίπτωση, θα λάβετε έναν κύκλο. Το Παράδειγμα 2 δείχνει πώς να δημιουργήσετε ένα στρογγυλό κουμπί με μια εικόνα.

Παράδειγμα 2: Στρογγυλό κουμπί

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. 2.

Ρύζι. 2. Στρογγυλό κουμπί

ΣΕ Πρόγραμμα περιήγησης Operaστρογγυλοποίηση σε εφαρμόζεται λανθασμένα εάν ένα περίγραμμα δεν έχει καθοριστεί μέσω της ιδιότητας περιγράμματος.

Η ιδιότητα border-radius μπορεί να συνδυαστεί με άλλες ιδιότητες, για παράδειγμα, προσθέτοντας μια σκιά σε ένα στοιχείο. Στο παράδειγμα 3, δημιουργείται ένα σύνολο κύκλων, ένας από τους οποίους επισημαίνεται χρησιμοποιώντας πλαίσιο-σκιά . Αυτό το σετ μπορεί να χρησιμοποιηθεί για πλοήγηση σε σελίδες ή φωτογραφίες.

Παράδειγμα 3. Λάμψη

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. 3.

Ρύζι. 3. Λάμψη γύρω από τον κύκλο

Χρησιμοποιώντας την ακτίνα περιγράμματος, μπορείτε να δημιουργήσετε όχι μόνο έναν κύκλο, αλλά και μια έλλειψη, καθώς και μια ελλειπτική στρογγυλοποίηση για ένα μπλοκ. Για να γίνει αυτό, πρέπει να γράψετε όχι μία τιμή, αλλά δύο, διαχωρισμένες με κάθετο. Η εγγραφή 20 εικονοστοιχείων/10 εικονοστοιχείων σημαίνει ότι η οριζόντια ακτίνα του φιλέτου θα είναι 20 εικονοστοιχεία και η κατακόρυφη ακτίνα θα είναι 10 εικονοστοιχεία. Το Παράδειγμα 4 δείχνει πώς να δημιουργήσετε ελλειπτικές γωνίες για να προσθέσετε μια λεζάντα σε στυλ κόμικ σε μια φωτογραφία.

Παράδειγμα 4: Ελλείψεις

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Είσαι δάσκαλος του εαυτού σου

Το αποτέλεσμα αυτού του παραδείγματος φαίνεται στο Σχ. 4.

Ρύζι. 4. Χρησιμοποιώντας ελλειπτικές γωνίες

Μπορείτε επίσης να αλλάξετε την εμφάνιση των γωνιών στις εικόνες προσθέτοντας την ιδιότητα border-radius στον επιλογέα img, όπως φαίνεται στο Παράδειγμα 5.

Παράδειγμα 5: Εικόνες

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Αυτό το μάθημα είναι αρκετά απλό, αλλά το αποτέλεσμα θα ευχαριστήσει το μάτι - τακτοποιημένο στρογγυλεμένες γωνίεςοι εικόνες σου. Και αυτό είναι πολύ εύκολο να το πετύχεις αν το έχεις στο οπλοστάσιό σου Adobe Photoshopοποιαδήποτε έκδοση και την εικόνα που χρειάζεται επεξεργασία.

Η στρογγυλοποίηση των γωνιών μιας εικόνας πραγματοποιείται σε διάφορα στάδια:

1. Ανοίξτε την εικόνα στο Photoshop. Για να το κάνετε αυτό, κάντε κλικ στο "Αρχείο" και "Άνοιγμα" ή στη συντόμευση πληκτρολογίου πληκτρολόγιο Ctrl+Ο.


2. Δημιουργήστε ένα νέο επίπεδο κάνοντας κλικ στο "Layers" και στη συνέχεια στο " Νέο στρώμα».


3. Στην αριστερή πλευρά του προγράμματος υπάρχει μια κάθετη γραμμή εργαλείων. Σε αυτό θα βρείτε το εργαλείο Ορθογώνιο. ΣΕ αυτή τη στιγμήΔεν το χρειαζόμαστε, οπότε κάνουμε κλικ σε αυτό κάντε δεξί κλικποντίκι και επιλέξτε το εργαλείο Rounded Rectangle.


4. Ένας πίνακας ρυθμίσεων θα εμφανιστεί στην κορυφή του προγράμματος αυτού του οργάνου. Εδώ μπορείτε να ορίσετε την επιθυμητή γωνιακή ακτίνα, π.χ. μπορείτε να αυξήσετε ή να μειώσετε τη στρογγυλοποίηση. Η προεπιλεγμένη τιμή είναι 10 pixel. Λάβετε υπόψη ότι για να χρησιμοποιήσετε το εργαλείο, πρέπει να έχετε ενεργοποιημένη την επιλογή "Περιγράμματα", η οποία βρίσκεται επίσης στον πίνακα ρυθμίσεων.


5. Επιλέξτε ολόκληρη την εικόνα, ξεκινώντας από την επάνω αριστερή γωνία και τελειώνοντας στην κάτω δεξιά γωνία.


6. Κάντε δεξί κλικ στην εικόνα και επιλέξτε «Δημιουργία επιλογής». Θα εμφανιστεί μια διακεκομμένη γραμμή επιλογής.


7. Τώρα μεταβείτε στο οριζόντιο πάνελεργαλεία και ανοίξτε την καρτέλα Επιλογή και, στη συνέχεια, επιλέξτε Αντιστροφή.




8. Τώρα όλα είναι αντίστροφα - δεν είναι η ίδια η εικόνα που επιλέγεται, αλλά οι περιττές γωνίες. Για να τα αφαιρέσετε, απλώς πατήστε το συνδυασμό πλήκτρων Ctrl+Delete στο πληκτρολόγιό σας.


9. Τώρα αποεπιλέξτε το πατώντας Ctrl+D στο πληκτρολόγιό σας. Απολαύστε το αποτέλεσμα!


Μην ξεχάσετε να αποθηκεύσετε την τελική φωτογραφία στον υπολογιστή σας.