Die abgerundeten Ecken auf dem Foto sehen recht interessant und attraktiv aus. Am häufigsten werden solche Bilder beim Erstellen von Collagen oder beim Erstellen von Präsentationen verwendet. Auch Bilder von abgerundete Ecken können als Miniaturansichten für Beiträge auf der Website verwendet werden. Es gibt viele Verwendungsmöglichkeiten, aber es gibt nur einen (richtigen) Weg, an ein solches Foto zu gelangen. In diesem Tutorial zeigen wir Ihnen, wie Sie Ecken in Photoshop abrunden.
Abrunden von Ecken in Photoshop
Um das Ergebnis zu erzielen, verwenden wir eines der Tools der Gruppe „Formen“, und entfernen Sie dann einfach alles Unnötige.
- Öffnen Sie das Foto in Photoshop, das Sie bearbeiten möchten.
- Erstellen Sie dann eine Kopie der Wasserfallebene namens "Hintergrund". Um Zeit zu sparen, verwenden Sie Hotkeys STRG+J. Die Kopie wird erstellt, um das Originalbild intakt zu lassen. Wenn (plötzlich) etwas schief geht, können Sie die fehlgeschlagenen Ebenen löschen und von vorne beginnen.
- Fortfahren. Und dann brauchen wir ein Werkzeug „Rechteck mit abgerundeten Ecken“.
In diesem Fall interessiert uns nur eine der Einstellungen – der Rundungsradius. Der Wert dieses Parameters hängt von der Bildgröße und den Anforderungen ab. Wir werden den Wert auf 30 Pixel setzen, damit das Ergebnis besser sichtbar ist.
- Zeichnen Sie als Nächstes ein Rechteck beliebiger Größe auf die Leinwand (wir werden es später skalieren).
- Jetzt müssen Sie die resultierende Figur über die gesamte Leinwand strecken. Aufruf der Funktion « Kostenlose Transformation»
Hotkeys STRG+T. Auf der Form wird ein Rahmen angezeigt, mit dem Sie das Objekt verschieben, drehen und in der Größe ändern können.
- Wir sind an einer Skalierung interessiert. Dehnen Sie die Figur mithilfe der im Screenshot angegebenen Markierungen. Klicken Sie nach Abschluss der Skalierung auf EINGEBEN.
Beratung: Um möglichst genau zu skalieren, also ohne über die Leinwand hinauszugehen, müssen Sie das sogenannte aktivieren "Bindung". Schauen Sie sich den Screenshot an, er zeigt, wo diese Funktion gelegen. Dadurch „kleben“ Objekte automatisch an unterstützenden Elementen und Leinwandrändern.
- Als nächstes müssen wir die resultierende Figur auswählen. Halten Sie dazu die Taste gedrückt STRG und klicken Sie auf die Miniaturansicht der Ebene mit dem Rechteck.
- Wie Sie sehen, hat sich um die Figur herum eine Auswahl gebildet. Gehen Sie nun zur Kopierebene und entfernen Sie die Sichtbarkeit der Ebene mit der Form (siehe Screenshot).
- Die Wasserfallebene ist jetzt aktiv und kann bearbeitet werden. Beim Bearbeiten geht es darum, unnötige Dinge aus den Ecken des Bildes zu entfernen. Auswahl mit Hotkeys umkehren STRG+UMSCHALT+I. Jetzt bleibt die Auswahl nur noch an den Ecken.
In diesem Abschnitt meiner Website habe ich beschlossen, Folgendes zu platzieren Photoshop-Unterricht, was Ihnen beim Erstellen eines Website-Designs nützlich sein kann. Ich denke, es wäre für mich nicht überflüssig, Sie vorzustellen, bevor ich mit dem Erlernen von Photoshop anfange Photoshop-Hotkeys. Benutzen Photoshop-Hotkeys, Sie erleichtern Ihre Arbeit und sparen Zeit. .
Mein erster Photoshop-Lektion Ich werde dir sagen, wie um die Ecken herum Foto.
Beim Erstellen von Websites steht man häufig vor dem Problem, die Ecken eines Bildes abzurunden bzw. abzurunden um die Ecken herum Foto. In dieser Lektion Photoshop Ich werde dir beibringen, wie um die Ecken herum einziehen Photoshop. Auch dieses hier Photoshop-Lektion wird es dir ermöglichen um die Ecken herum Fotos. Ich hoffe, das ist Ihnen klar. Immerhin für Photoshop Sowohl das Bild als auch das Foto sind alle gleich. Bei meiner Arbeit verwende ich Adobe Photoshop SC5, russische Version. Nun ja, ich bin nicht gut in Sprachen.
In der heutigen Lektion geht es um das Abrunden der Ecken eines Fotos in Photoshop. Machen wir ein gemeinsames Foto mit abgerundeten Ecken wie auf meinem Bild.
1. Umsetzen Abrunden von Ecken in Photoshop, öffnen mit Photoshop das Bild (Foto), das wir brauchen. Als Beispiel habe ich eines der Fotos aus meinem Fotoarchiv genommen.
2. Wir bringen die Abmessungen der Zeichnung auf die von uns benötigten Parameter. Drücken Sie dazu ALT+STRG+I. Das Fenster „Bildgröße“ wird geöffnet. Wir legen die Maße fest, die wir benötigen. Sie können das Bild einfach auf die gewünschte Größe zuschneiden.
3. Wählen Sie das Bild aus (STRG+A) (eine gepunktete Linie um den Umfang wird angezeigt) und kopieren Sie es (STRG+C); Wir kopieren das Foto, sodass das Originalbild nach Abschluss des Vorgangs unverändert bleibt Abrunden von Ecken in Photoshop. Obwohl wir am Original arbeiten können, speichern wir das Foto einfach als anderes Bild, wenn die abgerundeten Ecken fertig sind.
4. Öffnen Sie ein neues Fenster (STRG+N), stellen Sie die erforderlichen Bildabmessungen ein und klicken Sie auf „OK“. Bitte beachten Sie, dass ich den Hintergrund auf „transparent“ eingestellt habe. Sie können den Hintergrund sofort auf die gewünschte Farbe einstellen;
5. Fügen Sie das kopierte Bild in ein neues Fenster ein (STRG+V) und erstellen Sie eine neue Ebene (STRG+UMSCHALT+N). Verwenden Sie in dieser Ebene das Rechteck-Werkzeug abgerundete Ecken„Zeichnen Sie ein Rechteck in der gewünschten Größe. Die Farbe des Rechtecks spielt keine Rolle. Das Werkzeug wird durch Klicken mit der rechten Maustaste ausgewählt. Oder durch einfaches Drücken der Taste (U). Den Krümmungsradius legen wir nach unserem Ermessen fest ( siehe Abbildung unten);
Bei Bedarf können Sie die gezeichnete Form mit den Pfeiltasten auf der Tastatur oder mit der gedrückt gehaltenen Maus verschieben linke Taste. Vergessen Sie zunächst nicht, „Verschieben“ in der Symbolleiste (obere Schaltfläche) zu aktivieren. Du kannst auch Größe ändern Figuren. Drücken Sie dazu (STRG+T) und strecken Sie die Form mit der Maus bei gedrückter linker Taste auf die gewünschte Größe. Wenn Sie die Größe ändern und dabei die Proportionen beibehalten möchten, müssen Sie die UMSCHALTTASTE gedrückt halten und an der Ecke der Form ziehen.
6. Gehen Sie zum Ebenenbedienfeld. Halten Sie die STRG-Taste gedrückt und klicken Sie mit der linken Maustaste auf die Vorschau (Bild) der Rechteckebene. Es erscheint ein gepunkteter Umriss der Form.
7. Fahren Sie mit der untersten Ebene fort. Klicken Sie dazu im Ebenenbedienfeld auf die rechte Seite des Bildes. In unserem Fall Ebene 1. Die blaue Hervorhebung geht auf Ebene 1.
8. Drücken Sie STRG+UMSCHALT+I. Am Rand des Teils des Bildes, der sich außerhalb unseres Rechtecks befindet, wird eine gepunktete Auswahl angezeigt abgerundete Ecken.
9. Drücken Sie DEL auf der Tastatur. Der Teil des Bildes, der außerhalb des Rechtecks liegt, wird gelöscht.
10. Aktivieren Sie die Rechteckebene erneut. Löschen Sie es, indem Sie auf das Papierkorbsymbol klicken.
11. Drücken Sie die Taste „M“ und klicken Sie mit der linken Maustaste irgendwo im Bild. Die Auswahl wurde entfernt. bereit. Sie können das Bild, das wir erhalten haben, speichern Abrunden von Ecken in Photoshop, in dem Format, das wir brauchen.
Wenn ein solches Bild zum Erstellen eines Website-Designs verwendet wird, speichern Sie es für Web und Geräte (ALT+UMSCHALT+STRG+S).
12. Achtung! Wenn Sie Bilder an den Rändern mit haben abgerundete Ecken Es sind noch transparente Pixel vorhanden, Sie müssen einen Zuschnitt durchführen. Klicken Sie dazu auf „Bild“, wählen Sie „Zuschneiden“, nehmen Sie im erscheinenden Fenster die Einstellungen wie in meinem Bild vor und klicken Sie auf „Ok“. Die Größe der Leinwand wird an die Größe des Bildes angepasst und alle zusätzlichen transparenten Pixel werden entfernt.
Der Photoshop-Lektion Kann sowohl für ovale als auch für geformte Fotos verwendet werden. Gehen Sie dazu in Schritt 5 anstelle des „Rechtecks mit abgerundete Ecken" Wählen Sie das Werkzeug „Ellipse“, „Polygon“ oder „ jede Figur". Dann führen wir die gleichen Aktionen aus, die wir getan haben, um zu bekommen Ecken abrunden.
Jeder mag rechte Winkel in Bildern. Dennoch gibt es Zeiten, in denen dieselben Ecken abgerundet werden müssen. Dann helfe Dir nochmal weiter Das Programm wird kommen Photoshop In diesem Artikel werden wir uns eine der vielen Möglichkeiten ansehen, wie dies geschehen kann. Bedenken Sie, dass meine Methode auch darin besteht, das Bild an den Rändern ein wenig abzuschneiden. Dies ist eine Art Opfer zugunsten abgerundeter Ecken.
Für diejenigen, die mehr Klarheit wünschen, habe ich ein Video-Tutorial aufgezeichnet, das am Ende dieser Lektion angesehen werden kann. Beginnen wir also damit, die Ecken des Bildes abzurunden:
Schritt 1
Standardmäßig werden alle Bilder in Photoshop geöffnet Hintergrundbild. Photoshop benennt diese Ebene als „Hintergrund“ und verhindert außerdem unnötige Bearbeitung. Dies wird uns durch ein kleines Vorhängeschloss-Symbol angezeigt.
Um eine solche Ebene zu entsperren, müssen Sie darauf doppelklicken. Das Dialogfeld „Neue Ebene“ wird angezeigt. Ändern Sie nichts, klicken Sie einfach auf OK. Das Schloss sollte jetzt verschwinden.
Schritt 5
Klicken Sie im Ebenenbedienfeld auf die allererste Ebene mit unserem Originalbild und drücken Sie die Tastenkombination Strg+Umschalt+I. Daher sollten wir den gesamten Bereich außerhalb der Grenzen unseres Quadrats auswählen. Das heißt . Schauen Sie sich genauer an, was sich geändert hat:
Schritt 6
Drücken Sie nun die Tastenkombination Strg+X (Bearbeiten - Schneiden), um den ausgewählten Bereich zu löschen. Die Auswahl sollte verschwinden und an der Stelle, an der sich das Bild befand, ein schachbrettartiger Hintergrund (Transparenz) erscheinen.
Schritt 7
Jetzt machen wir unsere Formebene unsichtbar. Klicken Sie dazu im Ebenenbedienfeld auf das Augensymbol gegenüber der quadratischen Ebene. Hier ist das Originalbild mit abgerundeten Ecken.
Schritt 8
Führen Sie den Befehl aus Bild - Damit Photoshop den gesamten zusätzlichen Platz um das Bild herum entfernt. Daher sollte der Transparenzmodus nur in den Ecken sichtbar sein.
Um ein solches Bild in Zukunft verwenden zu können, muss es gespeichert werden PNG-Format! In diesem Fall bleiben die Ecken transparent. Andernfalls erhalten die Ecken beim Speichern beispielsweise im JPG-Format automatisch einen weißen Hintergrund.
Also, alles ist bereit. Das Bild mit abgerundeten Ecken sieht folgendermaßen aus:
Wie schafft man beispielsweise nur eine abgerundete Ecke?
Sehr einfach. Kehren wir zu der Bühne zurück, als wir die Figur gezeichnet haben. Dehnen Sie es so, dass nur eine abgerundete Ecke für Sie sichtbar ist und die anderen drei außerhalb der Leinwand verborgen sind. Hier folgen Sie dann den oben beschriebenen Anweisungen. Alles ist das selbe.
Ich hoffe, die Anleitung hat dir geholfen und du kannst etwas Cooles machen! Viel Glück.
Wenn Sie einen Fehler im Text bemerken, markieren Sie ihn und drücken Sie Strg + Eingabetaste. Danke!
beachten Sie, dass CSS-Stile für eine bestimmte Zahl werden einmal in die Datei eingegeben und der HTML-Tag kann unbegrenzt oft auf der Website platziert werden.
Als Ergebnis der Ausgabe erhalten wir Folgendes Rechteck mit Rahmen.
So erstellen Sie abgerundete Ecken in CSS
Das Attribut wird zum Abrunden von Ecken verwendet Grenzradius.
Wir könnten genau dieses Attribut hinzufügen. Normalerweise wird das Rundungsergebnis in neuen Browserversionen angezeigt, aber viele Benutzer haben immer noch ältere Versionen, bei denen dieses Attribut nicht richtig funktioniert. Aus Kompatibilitätsgründen werden wir daher unserem Block in der Datei Style.css einige weitere Beschreibungen dieses Attributs hinzufügen, das direkt an bestimmte Browser gebunden ist, was zu folgendem Code führt:
Das HTML-Div-Tag gibt uns Auskunft Rechteck in einem Rahmen mit abgerundeter Formund Ecken:
und das HTML-Tag zur Anzeige des Textes sieht so aus:
|
pib9.ru
|
Wir bekommen Rechteck mit abgerundeten Ecken und Text: 
Wenn Sie die Beschreibungsattribute für die Rechteckgröße aus dem Code entfernen Breite Und Höhe, dann können Sie folgende Formen mit abgerundeten Ecken erhalten:
1. Kein Text
In diesem Fall nehmen die Formulare die Dimensionen der Umgebung an: Die Länge entspricht der Breite des Feldes und die Höhe ändert sich, wenn das Formular mit Inhalt gefüllt wird.
Ausgewählte Ecken abrunden
In der Stilbeschreibung der 10px-Parameter im Attribut Grenzradius Zeigt den Krümmungsradius an, der durch Auswahl des gewünschten Radius geändert werden kann. Bei der Einstellung 0 findet keine Rundung statt. Diese Eigenschaft kann verwendet werden, wenn Sie ausgewählte Ecken abrunden müssen.
Schreiben wir die Werte des Rundungsradius für jede Ecke auf und geben dabei Nullen an, an denen wir die Rundung aufheben. Lassen Sie uns beispielsweise die Rundung in der dritten und vierten Ecke aufheben. Unser Code wird so aussehen:
1. Obere linke Ecke.
2. Obere rechte Ecke.
3. Untere rechte Ecke.
4. Untere linke Ecke.
Dadurch entsteht ein Rechteck mit ausgewählten Kurven nur in den oberen Ecken.
Winkel werden im Uhrzeigersinn gezählt, beginnend in der oberen linken Ecke: 
2. Ecken mit HTML-Code abrunden, ohne in eine Style-Datei zu schreiben
Betrachten Sie die zweite Methode, um ein Rechteck mit abgerundeten Ecken zu erhalten mit HTML Code, ohne in eine Style-Datei zu schreiben.
Abgerundete HTML-Ecken
Es gibt eine kleine Funktion, die den gesamten Prozess noch weiter vereinfacht – diese Abgerundete HTML-Ecken. Es besteht darin, HTML-Code zu generieren, der die gleichen Stile wie in den CSS-Codes enthält. Dadurch werden dieselben Attribute wie im CSS-Block verwendet und es entfällt die Notwendigkeit, den Block in die Datei Style.css zu schreiben. Kurz gesagt, wir ersetzen den CSS-Code vollständig durch HTML-Code.
Anstelle unseres CSS-Blocks erhalten wir ein HTML-Skript, das wir an der Stelle einfügen, an der das Rechteck mit abgerundeten Ecken erscheinen soll:
Die erste Methode zum Abrunden von Ecken kann verwendet werden, wenn dieselbe Form mehr als einmal verwendet wird, ohne den Stil zu ändern. Die zweite Methode wird für Formulare verwendet, deren Stile einmal verwendet werden.
3. Bilder mit abgerundeten Ecken. Rahmen um das HTML-Bild
Ich möchte dir auch geben nützliche Informationen. Oft verwendet Bilder für Website-Design Ich möchte sie wirklich noch schöner machen, indem ich ihre Form ändere und sie mit einem Rahmen in einer schönen Farbe und in verschiedenen Breiten einrahme. Dies wirft die Frage auf: „ So runden Sie die Ecken eines Bildes ab?”.
Das geht ganz einfach, und jetzt lernen wir, wie es geht.
Platzieren wir das Bild auf der Website und machen es zu einem eigenen Hintergrund als Hintergrund des div-Tags. Wir erhalten den folgenden Code und das folgende Bild:
Abrunden der Ecken des Bildes durch Hinzufügen eines Rahmens
Das Abrunden der Ecken von Bildern in CSS und HTML und das Hinzufügen eines Rahmens kann auf eine der beiden oben beschriebenen Arten erfolgen.
Mit der ersten Methode in diesem Artikel sehen die Bildcodes für die Style-Datei und den HTML-Code des div-Tags wie folgt aus:
Bitte beachten Sie, dass einige Attribute in die Style-Datei und andere in das div-Tag eingegeben werden können. In unserem Fall werden die Bildmaße Breite und Höhe in den HTML-Code eingefügt.
Der HTML-Code der zweiten Methode sieht ohne Verwendung der in diesem Artikel beschriebenen Stildatei so aus:
Als Ergebnis der Codes jeder der beiden Methoden erhalten wir das gleiche Ergebnis – ein Bild mit abgerundeten Ecken:
Guten Morgen, Nachmittag, Abend oder Nacht euch allen. Dmitry Kostin ist immer wieder bei Ihnen. Irgendwie habe ich durchgeschaut verschiedene Bilder und dann gefielen mir einige davon. Und sie mochten sie, weil sie abgerundete Kanten hatten. Es sieht sofort interessanter aus. Meinst du nicht auch? Und deshalb möchte ich Ihnen in der heutigen Lektion erklären, wie Sie in Photoshop Ecken abrunden, damit das Foto interessanter aussieht.
Was ich an Photoshop liebe, ist, dass in vielen Fällen dasselbe auf verschiedene Arten erreicht werden kann. So ist es hier. Beginnen wir mit unserem Photoshop.
Einfaches Glätten
Glätten mithilfe von Rändern
Diese Methode ähnelt der vorherigen, ist aber dennoch sehr unterschiedlich. Wir werden alles mit dem gleichen Bild machen.
Indem man eine Form schafft
Die dritte Methode unterscheidet sich bereits radikal von den beiden vorherigen. Machen Sie also ein paar Sekunden Pause und machen Sie weiter. Ich werde das Bild nicht ändern und dieses Auto erneut in Photoshop laden.
Sehen Sie, was dabei herausgekommen ist? Das Bild hat abgerundete Kanten, und das alles, weil es nur dort angezeigt wird, wo sich unser gezeichnetes abgerundetes Rechteck befindet. Jetzt können Sie das zusätzliche Foto jedoch mit dem Rahmenwerkzeug zuschneiden oder das Bild sofort speichern und erhalten dann bereits ein separates Bild mit abgerundeten Ecken.
Versuchen Sie, alles selbst zu machen, und sagen Sie mir gleichzeitig, welche der vorgestellten Methoden für Sie besser geeignet ist.
Und übrigens, wenn Sie Lücken in Photoshop haben oder es einfach in kürzester Zeit vollständig erlernen möchten, dann empfehle ich Ihnen dringend, sich eines anzuschauen Toller Photoshop-Kurs für Anfänger. Der Kurs ist gut gemacht, alles wird großartig erzählt und gezeigt und jedes Material wird ausführlich besprochen.
Nun, ich beende meine Lektion für heute. Vergessen Sie nicht, neue Artikel zu abonnieren und diese mit Ihren Freunden zu teilen. Ich habe mich gefreut, Sie auf meinem Blog zu sehen. Ich warte wieder auf dich. Tschüss.
Mit freundlichen Grüßen, Dmitry Kostin
