Το Paint.net^(Paint.net) είναι ένα πολύ ισχυρό εργαλείο για την επεξεργασία και τη δημιουργία εικόνων. Έρχεται με μια δεξαμενή χαρακτηριστικών. Μπορείτε να κάνετε πολλά πράγματα με αυτό το δωρεάν λογισμικό, όπως να κάνετε τις εικόνες διαφανείς, να δημιουργήσετε υδατογραφήματα κ.λπ. Σε αυτό το άρθρο, θα δούμε τα βήματα δημιουργίας ενός κουμπιού web στο paint.net.

Δημιουργήστε ένα κουμπί Web χρησιμοποιώντας το Paint.net

Μπορεί να υπάρχουν πολλές περιπτώσεις όπου ο χρήστης χρειάζεται ένα προσαρμοσμένο κουμπί web για να το εφαρμόσει στον ιστότοπό του. Για παράδειγμα, εάν δημιουργείτε ένα κατάστημα ηλεκτρονικού εμπορίου, μπορείτε να κάνετε τα ιστολόγιά σας ελκυστικά εισάγοντας κουμπιά ιστού σε διαφορετικά ελκυστικά σχέδια που αναγκάζουν τους χρήστες να κάνουν κλικ.

Ας ξεκινήσουμε το σεμινάριο.

1] Εκκινήστε το Paint.net^{(Launch Paint.net)} στον υπολογιστή σας και μεταβείτε στο « File > New » για να δημιουργήσετε μια νέα σελίδα (αν το λογισμικό δεν ανοίγει μια νέα σελίδα από προεπιλογή).

Διαβάστε^(Read) : Πώς να περικόψετε και να περιστρέψετε μια εικόνα στο Paint.NET^{(How to Crop and Rotate a Picture in Paint.NET)} .

2] Θα πρέπει να έχετε τα ακόλουθα εργαλεία διαθέσιμα στην οθόνη:

1. Κουτί εργαλείων
2. Ιστορικό κουτί
3. Κουτί στρώσεων
4. Κουτί χρωμάτων

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

3] Τώρα, πρέπει να προσθέσουμε διαφορετικά επίπεδα για να δημιουργήσουμε ένα κουμπί. Προσθέστε ένα επίπεδο κάνοντας κλικ στο « Προσθήκη νέου επιπέδου^{(Add New Layer)} » στο πλαίσιο « Επίπεδα^(Layers) ».

Διαβάστε^(Read) : Πώς να δημιουργήσετε μια μικρογραφία YouTube στο Paint.net^{(How to Make a YouTube Thumbnail in Paint.net)} .

4] Επειδή θα δημιουργήσουμε πολλά επίπεδα, είναι καλύτερο να μετονομάσουμε κάθε επίπεδο για να αποφύγουμε τη σύγχυση. Κάντε διπλό^(Double) κλικ στο επίπεδο που προστέθηκε πρόσφατα και αλλάξτε το όνομά του σε " Βάση^(Base) ". Μπορείτε να δώσετε οποιοδήποτε όνομα σύμφωνα με την επιλογή σας.

5] Δημιουργούμε ένα στρογγυλεμένο ορθογώνιο κουμπί. Για αυτό, επιλέξτε την επιλογή « Σχήματα^(Shapes) » από το πλαίσιο « Εργαλεία^(Tools) » και επιλέξτε το αγαπημένο σας χρώμα από το πλαίσιο « Χρώμα^(Color) ». Περισσότερα χρώματα είναι διαθέσιμα στην επιλογή « Περισσότερα^(More) » του πλαισίου χρώματος.

6] Πρέπει να επιλέξουμε « Στρογγυλεμένο Ορθογώνιο^{(Rounded Rectangle)} » με « Λειτουργία Συμπλήρωσης^{(Filled Mode)} ».

Διαβάστε^(Read) : Πώς να δημιουργήσετε και να προσθέσετε εφέ Drop Shadow σε μια εικόνα στο Paint.NET^{(How to create and add Drop Shadow effect to an image in Paint.NET)} .

7] Πατήστε^(Press) και κρατήστε πατημένο το αριστερό κουμπί του ποντικιού σας και σύρετε για να δημιουργήσετε το στρογγυλεμένο ορθογώνιο σχήμα. Αφού το σχεδιάσετε, μπορείτε επίσης να αλλάξετε τις διαστάσεις του.

8] Τώρα, θα προσθέσουμε το εφέ διαβάθμισης στο κουμπί. Για αυτό, προσθέστε ένα νέο επίπεδο και αλλάξτε το όνομά του σε " Gradient ."

9] Κάντε κλικ στο επίπεδο « Βάση^(Base) » και επιλέξτε « Μαγικό Ραβδί^{(Magic Wand)} » από το πλαίσιο εργαλείων. Κάντε κλικ^(Click) στο στρογγυλεμένο ορθογώνιο σχήμα αφού επιλέξετε το Μαγικό Ραβδί^{(Magic Wand)} .

10] Επιλέξτε^(Choose) ένα πιο ανοιχτό χρώμα και επιλέξτε " Gradient " από το πλαίσιο εργαλείων.

11] Όταν επιλέγετε το Gradient , θα δείτε διαφορετικούς τύπους υφών που είναι διαθέσιμοι στη γραμμή εργαλείων. Πρέπει να επιλέξετε την υφή " Γραμμική ". ^(Linear)Τοποθετήστε το ποντίκι σας όπως υποδεικνύεται στο παρακάτω στιγμιότυπο οθόνης. Τώρα, πατήστε και κρατήστε πατημένο το αριστερό κλικ στο ποντίκι και σύρετέ το στην κάτω άκρη του στρογγυλεμένου ορθογώνιου σχήματος ενώ πατάτε το πλήκτρο Shift^(Shift) .

12] Τώρα, πρέπει να γράψουμε ένα προσαρμοσμένο κείμενο στο κουμπί. Για αυτό, προσθέστε ένα ακόμη επίπεδο και αλλάξτε το όνομά του σε " Κείμενο^(Text) ". Τώρα, επιλέξτε « Κείμενο^(Text) » από το πλαίσιο εργαλείων και επιλέξτε το χρώμα της επιλογής σας. Κάντε κλικ^(Click) μέσα στο στρογγυλεμένο ορθογώνιο σχήμα και γράψτε το κείμενό σας εκεί. Μπορείτε επίσης να αλλάξετε το στυλ γραμματοσειράς και το μέγεθος του κειμένου.

13] Τώρα, πρέπει να δώσουμε μια γυαλιστερή πινελιά στο σχήμα. Για αυτό, προσθέστε ένα ακόμη στρώμα και αλλάξτε το όνομά του σε " Glossy ". Αυτό το στρώμα πρέπει να βρίσκεται στην κορυφή όλων των στρώσεων. Αν όχι, σύρετέ το για να το φέρετε στην κορυφή.

14] Τώρα, επιλέξτε το βασικό στρώμα. Στη συνέχεια, επιλέξτε το Μαγικό Ραβδί^{(Magic Wand)} και κάντε κλικ στο στρογγυλεμένο ορθογώνιο σχήμα. Μετά από αυτό, επιστρέψτε στο στρώμα Glossy και επιλέξτε το λευκό χρώμα από το πλαίσιο χρωμάτων.

Τώρα, επιλέξτε το εργαλείο « Σχήματα^(Shapes) » από το πλαίσιο εργαλείων και κάντε κλικ στο « Τύπος σχήματος^{(Shape type)} » στη γραμμή εργαλείων για να επιλέξετε « Έλλειψη^(Ellipse) ». Πρέπει να επιλέξετε το Ellipse στη λειτουργία πλήρωσης (ανατρέξτε στο βήμα 6 αυτού του άρθρου).

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

15] Κάντε διπλό^(Double) κλικ στο Glossy layer για να ανοίξετε τις ιδιότητές του και να μειώσετε την αδιαφάνειά του.

16] Τώρα, πρέπει να προσθέσουμε ένα περίγραμμα στο σχήμα. Για αυτό, επιλέξτε το βασικό στρώμα και μεταβείτε στο « Effects > Stylize > Outline ».

17] Αλλάξτε^(Vary) το πάχος και την ένταση του περιγράμματος για να δώσετε στο σχήμα την εμφάνιση ενός κουμπιού.

18] Στο τελευταίο βήμα, πρέπει να αποθηκεύσουμε το κουμπί. Για αυτό, πατήστε Ctrl + S και επιλέξτε τη μορφή εικόνας από το αναπτυσσόμενο μενού. Μπορείτε να αποθηκεύσετε την εικόνα σε JPG , PNG , BMP και πολλές άλλες μορφές. Θα σας ζητήσει να ισοπεδώσετε την εικόνα ή όχι. Επιλέξτε^(Select) « Ισιώστε^(Flatten) ».

Διαβάστε^(Read) : Δωρεάν λογισμικό αφαίρεσης υδατογραφημάτων και διαδικτυακό εργαλείο^{(Free Watermark Remover software & Online tool)} .

Το κουμπί web είναι έτοιμο. Ακολουθώντας τα παραπάνω βήματα, μπορείτε να δημιουργήσετε κουμπιά web σε διαφορετικά χρώματα. Μπορείτε επίσης να επιλέξετε διαφορετική υφή ντεγκραντέ για να δώσετε στα κουμπιά σας διαφορετική εμφάνιση.

Αυτό είναι. Ελπίζω^(Hope) να σας άρεσε το άρθρο. Μην^(Don) ξεχάσετε να μοιραστείτε τις απόψεις σας στην ενότητα σχολίων.

Διαβάστε^(Read) : Πώς να προσθέσετε μια διαφανή εικόνα σε ένα στιγμιότυπο οθόνης με το Paint^{(How to add a Transparent Image over a Screenshot with Paint)} .

How to create a Web Button using Paint.net

Paint.net is a very powerful tool for editing and creating images. It comes with a pool of features. You can do a lot of things with this free software like making the images transparent, creating watermarks, etc. In this article, we will see the steps of creating a web button in paint.net.

Create a Web Button using Paint.net

There can be multiple situations where the user needs a custom web button to implement in his website. For example, if you are creating an eCommerce store, you can make your blogs attractive by introducing web buttons in different attractive designs that force users to click.

Let’s start the tutorial.

1] Launch Paint.net on your PC and go to “File > New” to create a new page (if the software does not open a fresh page by default).

Read: How to Crop and Rotate a Picture in Paint.NET.

2] You should have the following tools available on the screen:

1. Tools box
2. History box
3. Layers box
4. Colors box

If not, enable them by clicking on the respective icons available in the top right corner. See the below screenshot.

3] Now, we have to add different layers to create a button. Add a layer by clicking the “Add New Layer” in the “Layers” box.

Read: How to Make a YouTube Thumbnail in Paint.net.

4] Because we will create many layers, it is better to rename each layer to avoid confusion. Double click on the newly added layer and change its name to “Base.” You can give any name as per your choice.

5] We are creating a rounded rectangular button. For this, select the “Shapes” option from the “Tools” box and choose your favorite color from the “Color” box. More colors are available in the “More” option of the color box.

6] We have to select “Rounded Rectangle” with “Filled Mode.”

Read: How to create and add Drop Shadow effect to an image in Paint.NET.

7] Press and hold the left button of your mouse and drag to create the rounded rectangular shape. After drawing it, you can also change its dimensions.

8] Now, we will add the gradient effect to the button. For this, add a new layer and change its name to “Gradient.”

9] Click on the “Base” layer and select “Magic Wand” from the tools box. Click on the rounded rectangle shape after selecting the Magic Wand.

10] Choose a lighter color and select “Gradient” from the tools box.

11] When you select the Gradient, you will see different types of textures available on the toolbar. You have to select the “Linear” texture. Place your mouse as directed in the below screenshot. Now, press and hold the left click on the mouse and drag it to the lower edge of the rounded rectangular shape while pressing the “Shift” key.

12] Now, we have to write a custom text on the button. For this, add one more layer and change its name to “Text.” Now, select “Text” from the tools box and choose the color of your choice. Click inside the rounded rectangular shape and write your text there. You can also change the font style and size of the text.

13] Now, we have to give a glossy touch to the shape. For this, add one more layer and change its name to “Glossy.” This layer should be at the top of all the layers. If not, drag it to bring at the top.

14] Now, select the base layer. Then select the Magic Wand and click on the rounded rectangular shape. After that, come back to the Glossy layer and select the white color from the colors box.

Now, select the “Shapes” tool from the tools box and click on the “Shape type” on the toolbar to select “Ellipse.” You have to select the Ellipse in the filled mode (refer to step 6 of this article).

Next, you have to draw the ellipse in such a way that some of its parts lies on the topmost part of the rounded rectangle. When you are done, press “Enter.”

15] Double click on the Glossy layer to open its properties and reduce its opacity.

16] Now, we have to add a border to the shape. For this, select the base layer and go to “Effects > Stylize > Outline.”

17] Vary the thickness and intensity of the outline to give the shape the look of a button.

18] In the last step, we have to save the button. For this, press “Ctrl + S” and select the image format from the drop-down menu. You can save the image in JPG, PNG, BMP, and many other formats. It will ask you to flatten the image or not. Select “Flatten.”

Read: Free Watermark Remover software & Online tool.

The web button is ready. By following the above steps, you can create web buttons in different colors. You can also select a different gradient texture to give your buttons a different look.

That’s it. Hope you liked the article. Don’t forget to share your views in the comments section.

Read: How to add a Transparent Image over a Screenshot with Paint.

Related posts

• Πώς να δημιουργήσετε Διαφανή εικόνα στο Paint.NET στα Windows 11/10

• Πώς να δημιουργήσετε και να προσθέσετε εφέ Drop Shadow σε μια εικόνα στο Paint.NET

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

• Paint.NET για Windows 10 - Δωρεάν λήψη

• Πώς να περικόψετε και να περιστρέψετε μια εικόνα στο Paint.NET

• Πώς να μετατρέψετε εικόνες WebP σε PNG και JPG με το WebP Converter

• Καταγραφή οθόνης DuckLink: Λήψη παραθύρων, περιοχών, σελίδων κύλισης

• Το Nomacs είναι ένα πρόγραμμα προβολής εικόνων για υπολογιστή με Windows με εκπληκτικές δυνατότητες

• Δείτε εικόνες και έγγραφα PDF γρήγορα μέσω του PRIMA Rapid Image Viewer

• LICEcap: Εγγράψτε την επιφάνεια εργασίας ή την οθόνη των Windows ως κινούμενο GIF

• Το InfinityConverter είναι μια γρήγορη εφαρμογή μετατροπέα εικόνας και βίντεο

• Τα καλύτερα εργαλεία για να προσθέσετε το υδατογράφημα στην εικόνα online δωρεάν

• Πώς να περιγράψετε το κείμενο ή να προσθέσετε ένα περίγραμμα στο κείμενο στο GIMP

• Αλλαγή μεγέθους, διακόσμηση, προσθήκη περιγραμμάτων, πλαισίων και υδατογραφημάτων σε εικόνες

• Το AwesomeWallpaper σάς επιτρέπει να προβάλλετε Εικόνες και βίντεο ως ταπετσαρία επιφάνειας εργασίας

• Πώς να αφαιρέσετε την εικόνα φόντου με το Paint 3D στα Windows 10

• Δωρεάν διαδικτυακά εργαλεία και λογισμικό δημιουργίας κολάζ φωτογραφιών

• Πώς να δημιουργήσετε ένα βίντεο από την ακολουθία εικόνας στα Windows 11/10

• Πρόγραμμα προβολής εικόνων WildBit, προβολή διαφανειών, λογισμικό επεξεργασίας για τους λάτρεις της φωτογραφίας

• Το Hornil StylePix είναι ένα δωρεάν φορητό λογισμικό επεξεργασίας εικόνας για Windows 10